/* ===== Overlay ===== */
.popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(10, 18, 50, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    overflow-y: auto;
    padding: 40px 16px;
    align-items: center;
    justify-content: center;
    animation: overlayFadeIn 0.25s ease;
}

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ===== Popup card =====
   Kept on .popup-content itself (not just the Bitrix wrapper) so the card
   looks right even before the form loads, while the Turnstile gate shows.
   overflow stays visible (not hidden) so field dropdowns inside the loaded
   form aren't clipped — border-radius doesn't need overflow:hidden to render. */
.popup-content {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    overflow: visible;
    background: #fff;
    border-radius: 16px;
    border-top: 4px solid #243674;
    box-shadow: 0 24px 64px rgba(10, 18, 50, 0.35);
    animation: popupSlideIn 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* The Bitrix widget renders its own opaque white card (.b24-form-wrapper)
   once loaded — round it to match so no square corners peek out. */
.popup-content .b24-form-wrapper {
    border-radius: 16px;
}

@keyframes popupSlideIn {
    from { opacity: 0; transform: translateY(32px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ===== Close button ===== */
.popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    color: #666;
    background: #f0f2f8;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1010;
    transition: background 0.2s, color 0.2s;
}
.popup-close:hover {
    background: #243674;
    color: #fff;
}

/* ===== Turnstile captcha gate (shown before the Bitrix form loads) ===== */
.ts-gate-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    width: 100%;
}
.ts-gate-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a2a5e, #2e4a8a);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.ts-gate-icon svg {
    width: 26px;
    height: 26px;
}
.ts-gate-title {
    color: #243674;
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 8px;
}
.ts-gate-text {
    color: #888;
    font-size: 0.93rem;
    margin-bottom: 22px;
    max-width: 280px;
    line-height: 1.5;
}
.ts-gate-widget {
    display: flex;
    justify-content: center;
    min-height: 65px;
}