.app-confirmation-backdrop {
    position: fixed;
    inset: 0;
    z-index: 5100;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(6, 22, 41, 0.64);
    backdrop-filter: blur(5px);
    overscroll-behavior: contain;
}

.app-confirmation {
    position: relative;
    overflow: hidden;
    width: min(560px, 100%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(5, 27, 54, 0.34);
    color: #12395f;
}

.app-confirmation__accent {
    height: 0.35rem;
    background: #d49620;
}

.app-confirmation--danger .app-confirmation__accent {
    background: #c93f4f;
}

.app-confirmation--information .app-confirmation__accent {
    background: #2a5caa;
}

.app-confirmation__content {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.5rem 1.5rem 1.1rem;
}

.app-confirmation__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border: 1px solid #efd8a8;
    border-radius: 50%;
    background: #fff6df;
    color: #8d5e08;
    font-size: 1.45rem;
    font-weight: 800;
}

.app-confirmation__icon--danger {
    border-color: #efc2c8;
    background: #fff0f2;
    color: #a82d3b;
}

.app-confirmation__icon--information {
    border-color: #c4d6ef;
    background: #eef5ff;
    color: #214f91;
}

.app-confirmation__copy {
    min-width: 0;
}

.app-confirmation__eyebrow {
    margin-bottom: 0.3rem;
    color: #6a7786;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.app-confirmation__title {
    margin: 0;
    color: #0a315c;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
}

.app-confirmation__message {
    margin: 0.65rem 0 0;
    color: #405f7d;
    line-height: 1.55;
    white-space: pre-line;
}

.app-confirmation__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    padding: 1rem 1.5rem 1.35rem;
    border-top: 1px solid #e4ebf2;
    background: #f8fafc;
}

.app-confirmation__button {
    min-width: 8.5rem;
    min-height: 2.7rem;
    border-radius: 6px;
}

.app-confirmation__button--primary {
    border-color: #24539a;
    background: #24539a;
    color: #fff;
}

.app-confirmation__button--primary:hover,
.app-confirmation__button--primary:focus-visible {
    border-color: #193f79;
    background: #193f79;
    color: #fff;
}

.app-confirmation__button--danger {
    border-color: #b93343;
    background: #b93343;
    color: #fff;
}

.app-confirmation__button--danger:hover,
.app-confirmation__button--danger:focus-visible {
    border-color: #922936;
    background: #922936;
    color: #fff;
}

@media (max-width: 575.98px) {
    .app-confirmation-backdrop {
        align-items: end;
        padding: 0.75rem;
    }

    .app-confirmation__content {
        grid-template-columns: 2.75rem minmax(0, 1fr);
        gap: 0.8rem;
        padding: 1.2rem 1rem 1rem;
    }

    .app-confirmation__icon {
        width: 2.75rem;
        height: 2.75rem;
    }

    .app-confirmation__actions {
        flex-direction: column-reverse;
        padding: 0.9rem 1rem 1rem;
    }

    .app-confirmation__button {
        width: 100%;
    }
}
