/* ─── Layout Primitives ─────────────────────────── */

.blur {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

    width: 100vw;
    height: 100vh;

    background-color: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.3s ease;
}

/* ─── State & Modifier Classes ──────────────────── */

.blur.visible {
    opacity: 1;
    pointer-events: auto;
}

.blur.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ─── Component Styles ──────────────────────────── */

.confirmation {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1000;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--medium);

    width: 30vw;
    height: fit-content;
    padding: var(--normal);
    border: 1.5px var(--white-d) solid;
    border-radius: var(--border-radius);

    background-color: var(--white-container);

    text-align: center;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
    transform: translate(-50%, -50%);
    animation: slideInAbsolute 0.3s ease-out;
}

.confirmation i.warning-big {
    color: var(--orange);
    font-size: 5rem;
}

.confirmation .options {
    display: flex;
    gap: var(--small);

    width: 100%;
}

.confirmation .options button {
    flex-grow: 1;

    width: 100%;
}

.confirmation .cancel {
    position: absolute;
    top: 0;
    right: 0;

    font-size: 1.5rem;

    cursor: pointer;
    transform: translate(-100%, 10%);
}

/* ─── Keyframes ─────────────────────────────────── */

@keyframes slideInAbsolute {
    from {
        opacity: 0;
        /* Start at center, but slightly lower for smoothness */
        transform: translate(-50%, calc(-50% + 20px));
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}