/* Pop-up cards (dialogs.js). While open the page is still (has-popup), padded by --scrollbar. */
html.has-popup {
    overflow: hidden;
    padding-right: var(--scrollbar, 0px);
}

.popup {
    width: min(560px, calc(100% - 32px));
    max-width: none;
    max-height: calc(100% - 32px);
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
    animation: popup-in 0.32s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.popup::backdrop {
    background: rgba(4, 14, 28, 0.6);
    backdrop-filter: blur(3px);
    animation: popup-backdrop-in 0.22s ease;
}

.popup.is-closing {
    animation: popup-out 0.16s ease-in forwards;
}

.popup.is-closing::backdrop {
    animation: popup-backdrop-in 0.16s ease reverse forwards;
}

.popup-card {
    position: relative;
    box-sizing: border-box;
    padding: 28px 32px 32px;
    border: 3px solid #16263d;
    border-radius: 22px;
    background: #f0f8ff;
    color: #16263d;
    font: 18px/1.5 sans-serif;
    box-shadow: 0 16px 50px rgba(2, 8, 18, 0.55);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.popup-card h2 {
    margin: 0 0 12px;
    padding-right: 36px;
    font: 34px/1.1 "Titan One", sans-serif;
}

.popup-card p {
    margin: 0 0 16px;
}

.popup-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 3px solid #16263d;
    border-radius: 50%;
    background: #ffd54a;
    color: #16263d;
    font: 28px/1 "Titan One", sans-serif;
    cursor: pointer;
    transition: scale 0.3s cubic-bezier(0.3, 1.8, 0.5, 1), rotate 0.3s cubic-bezier(0.3, 1.8, 0.5, 1);
}

.popup-close:hover,
.popup-close:focus-visible {
    scale: 1.12;
    rotate: 90deg;
}

.popup-card > .popup-close {
    top: 12px;
    right: 12px;
}

.popup-close:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.popup-button {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: none;
    font-size: 20px;
}

.popup-button:disabled {
    opacity: 0.6;
    cursor: default;
}

@media (max-width: 480px) {
    .popup-card {
        padding: 24px 20px;
    }

    .popup-button {
        font-size: 17px;
        white-space: normal;
        text-align: left;
    }
}

@keyframes popup-in {
    from {
        opacity: 0;
        transform: scale(0.7) translateY(40px);
    }
}

@keyframes popup-out {
    to {
        opacity: 0;
        transform: scale(0.85) translateY(20px);
    }
}

@keyframes popup-backdrop-in {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .popup,
    .popup::backdrop,
    .popup.is-closing {
        animation: none;
    }
}