/* ═══════════════════════════════════════════════════════════════════════════
   BOOKING POPUP MODAL — v5 Design System (exact mockup styles)
   mamedia-theme 1.4.7 — loaded when behavior=popup
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Animation ────────────────────────────────────────────────────────────── */
@keyframes mm-popup-in {
    from { opacity: 0; transform: translateY(20px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* ── Overlay ─────────────────────────────────────────────────────────────── */
.booking-popup[hidden] { display: none !important; }

.booking-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.booking-popup.mode-light {
    background: rgba(245, 244, 240, .75);
}
.booking-popup::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .03;
    background-image: radial-gradient(circle at 1px 1px, var(--text-3, #606058) 1px, transparent 0);
    background-size: 32px 32px;
    z-index: 0;
}
.booking-popup.mode-light::before {
    opacity: .04;
    background-image: radial-gradient(circle at 1px 1px, var(--text-4, #a0a0a0) 1px, transparent 0);
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.booking-popup__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    border-radius: 24px;
    overflow: hidden;
    animation: mm-popup-in .4s cubic-bezier(.16, 1, .3, 1) both;
    background: var(--surface-1, #0f0f0d);
    border: 1px solid var(--border, #242422);
}
.booking-popup.mode-light .booking-popup__inner {
    background: var(--surface-1, #ffffff);
    border-color: var(--border-2, #d0cec6);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .10);
}
/* Gold accent line */
.booking-popup__inner::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 80px; height: 2px;
    background: var(--mm-gold, #b8a07a);
    border-radius: 0 0 2px 2px;
    z-index: 2;
}

/* ── Close ───────────────────────────────────────────────────────────────── */
.booking-popup__close {
    position: absolute;
    top: 14px; right: 16px;
    z-index: 3;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    color: var(--text-3, #606058);
    transition: color .15s, background .15s;
}
.booking-popup__close:hover {
    color: var(--text, #f0efe8);
    background: rgba(255,255,255,.06);
}
.booking-popup.mode-light .booking-popup__close:hover {
    color: var(--text, #0d0d0d);
    background: rgba(0,0,0,.05);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.booking-popup__header {
    padding: 40px 40px 24px;
    text-align: center;
}
.booking-popup__eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mm-gold, #b8a07a);
    margin-bottom: 12px;
}
.booking-popup__title {
    font-family: var(--font-heading, 'Horizon', sans-serif);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text, #f0efe8);
    margin: 0 0 10px;
    line-height: 1.2;
}
.booking-popup.mode-light .booking-popup__title {
    color: var(--text, #0d0d0d);
}
.booking-popup__desc {
    font-size: 13px;
    color: var(--text-3, #606058);
    line-height: 1.6;
    max-width: 380px;
    margin: 0 auto;
}
.booking-popup.mode-light .booking-popup__desc {
    color: var(--text-3, #6a6a6a);
}

/* ── Content ─────────────────────────────────────────────────────────────── */
.booking-popup__content {
    padding: 0 40px;
}
.booking-popup__iframe {
    width: 100%;
    min-height: 480px;
    border: none;
    display: block;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.booking-popup__footer {
    padding: 16px 40px 28px;
    text-align: center;
}
.booking-popup__footer p {
    font-size: 11px;
    color: var(--text-4, #3a3a38);
    line-height: 1.5;
    margin: 0;
}
.booking-popup.mode-light .booking-popup__footer p {
    color: var(--text-4, #a0a0a0);
}
.booking-popup__footer a {
    color: var(--mm-gold, #b8a07a);
    text-decoration: none;
}
.booking-popup__footer a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════════════
   FLUENT FORMS — exact mockup v5 styles
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Field groups ────────────────────────────────────────────────────────── */
.booking-popup .ff-el-group,
.booking-popup .ff-el-form-control {
    margin-bottom: 14px !important;
}

/* ── Labels (field labels) — 11px, weight 500 ───────────────────────────── */
.booking-popup .ff-el-form-control > label,
.booking-popup .ff-el-input--label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: .3px !important;
    color: var(--text-3, #606058) !important;
    margin-bottom: 5px !important;
    text-transform: none !important;
}
.booking-popup.mode-light .ff-el-form-control > label,
.booking-popup.mode-light .ff-el-input--label {
    color: var(--text-3, #6a6a6a) !important;
}

/* ── Inputs, selects, textareas ──────────────────────────────────────────── */
.booking-popup .ff-el-input,
.booking-popup .ff-el-input--md,
.booking-popup select.ff-el-input,
.booking-popup textarea.ff-el-input {
    width: 100% !important;
    background: var(--surface-2, #141412) !important;
    border: 1px solid var(--border, #242422) !important;
    border-radius: 9px !important;
    padding: 11px 14px !important;
    color: var(--text, #f0efe8) !important;
    font-size: 13px !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    outline: none !important;
    transition: border-color .15s !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
}
.booking-popup.mode-light .ff-el-input,
.booking-popup.mode-light select.ff-el-input,
.booking-popup.mode-light textarea.ff-el-input {
    background: #ffffff !important;
    border-color: #d0cec6 !important;
    color: #0d0d0d !important;
}
.booking-popup .ff-el-input:focus,
.booking-popup select.ff-el-input:focus,
.booking-popup textarea.ff-el-input:focus {
    border-color: var(--mm-gold, #b8a07a) !important;
}
.booking-popup .ff-el-input::placeholder,
.booking-popup textarea.ff-el-input::placeholder {
    color: var(--text-4, #3a3a38) !important;
    opacity: 1 !important;
}
.booking-popup.mode-light .ff-el-input::placeholder,
.booking-popup.mode-light textarea.ff-el-input::placeholder {
    color: #d0cfc8 !important;
}
/* Select arrow */
.booking-popup select.ff-el-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 36px !important;
}

/* ── Checkbox wrapper (RGPD / consent) ───────────────────────────────────── */
.booking-popup .ff-el-form-check {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
}

/* ── Checkbox input — custom styled per mockup v5 ────────────────────────── */
.booking-popup .ff-el-form-check-input,
.booking-popup input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex-shrink: 0 !important;
    border: 1px solid var(--border, #242422) !important;
    border-radius: 4px !important;
    background: var(--surface-2, #141412) !important;
    cursor: pointer !important;
    margin-top: 1px !important;
    transition: background .15s, border-color .15s !important;
    position: relative !important;
}
.booking-popup.mode-light .ff-el-form-check-input,
.booking-popup.mode-light input[type="checkbox"] {
    background: #f5f4f0 !important;
    border-color: #d0cec6 !important;
}
/* Checked state */
.booking-popup .ff-el-form-check-input:checked,
.booking-popup input[type="checkbox"]:checked {
    background: var(--mm-gold, #b8a07a) !important;
    border-color: var(--mm-gold, #b8a07a) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4l3.5 3.5L10 1' stroke='%23000' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ── Checkbox label (consent text) — 12px per mockup v5 ─────────────────── */
.booking-popup .ff-el-form-check-label,
.booking-popup .ff-el-form-check label {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--text-3, #606058) !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    display: inline !important;
}
.booking-popup.mode-light .ff-el-form-check-label,
.booking-popup.mode-light .ff-el-form-check label {
    color: #6a6a6a !important;
}
/* Links inside consent text */
.booking-popup .ff-el-form-check-label a,
.booking-popup .ff-el-form-check label a {
    color: var(--mm-gold, #b8a07a) !important;
    text-decoration: none !important;
}
.booking-popup .ff-el-form-check-label a:hover,
.booking-popup .ff-el-form-check label a:hover {
    text-decoration: underline !important;
}

/* ── Terms and conditions text below form ────────────────────────────────── */
.booking-popup .ff-terms-and-condition,
.booking-popup .ff-el-tc-text,
.booking-popup .ff-message-info {
    font-size: 11px !important;
    color: var(--text-4, #3a3a38) !important;
    line-height: 1.5 !important;
    text-align: center !important;
    margin-top: 12px !important;
}
.booking-popup.mode-light .ff-terms-and-condition,
.booking-popup.mode-light .ff-el-tc-text,
.booking-popup.mode-light .ff-message-info {
    color: #a0a0a0 !important;
}
.booking-popup .ff-terms-and-condition a,
.booking-popup .ff-el-tc-text a {
    color: var(--mm-gold, #b8a07a) !important;
    text-decoration: none !important;
}

/* ── Submit button — full-width gold ─────────────────────────────────────── */
.booking-popup .ff-btn-submit,
.booking-popup .ff-btn {
    width: 100% !important;
    background: var(--mm-gold, #b8a07a) !important;
    color: #000 !important;
    padding: 12px 24px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    border: none !important;
    cursor: pointer !important;
    transition: filter .15s !important;
    letter-spacing: .2px !important;
    justify-content: center !important;
}
.booking-popup .ff-btn-submit:hover { filter: brightness(1.1) !important; }
.booking-popup.mode-light .ff-btn-submit:hover { filter: brightness(.92) !important; }
.booking-popup .ff-btn-submit:disabled { opacity: .5 !important; cursor: not-allowed !important; }

/* ── Validation errors ───────────────────────────────────────────────────── */
.booking-popup .error,
.booking-popup .ff-el-is-error .ff-el-input,
.booking-popup .has-error .ff-el-input {
    color: #e05252 !important;
    font-size: 11px !important;
    margin-top: 4px !important;
    border-color: #e05252 !important;
}
.booking-popup .error { border-color: transparent !important; }

/* ── Success message ─────────────────────────────────────────────────────── */
.booking-popup .ff-success-message,
.booking-popup .ff-message-success {
    background: transparent !important;
    border: 1px solid var(--mm-gold, #b8a07a) !important;
    border-radius: 9px !important;
    padding: 20px !important;
    text-align: center !important;
    color: var(--text, #f0efe8) !important;
    font-size: 14px !important;
}
.booking-popup.mode-light .ff-success-message,
.booking-popup.mode-light .ff-message-success {
    color: #0d0d0d !important;
}

/* ── Section break / divider label ──────────────────────────────────────── */
.booking-popup .ff-section-break-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--mm-gold, #b8a07a) !important;
    border-bottom: 1px solid var(--border, #242422) !important;
    padding-bottom: 8px !important;
    margin-bottom: 16px !important;
}

/* ── Mobile — bottom sheet ───────────────────────────────────────────────── */
@media (max-width: 600px) {
    .booking-popup {
        padding: 12px;
        align-items: flex-end;
    }
    .booking-popup__inner {
        border-radius: 20px 20px 0 0;
        max-width: 100%;
    }
    .booking-popup__header,
    .booking-popup__content,
    .booking-popup__footer {
        padding-left: 24px;
        padding-right: 24px;
    }
    .booking-popup__header {
        padding-top: 32px;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   INTL-TEL-INPUT (iti) — country code dropdown inside booking popup
   Fluent Forms phone field. Matches modal v5 design system.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Dropdown container ──────────────────────────────────────────────────── */
.booking-popup .iti__dropdown-content,
.booking-popup .iti--container {
    background: var(--surface-1, #0f0f0d) !important;
    border: 1px solid var(--border, #242422) !important;
    border-radius: 9px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .4) !important;
    overflow: hidden !important;
    z-index: 10001 !important;
}

.booking-popup.mode-light .iti__dropdown-content,
.booking-popup.mode-light .iti--container {
    background: #ffffff !important;
    border-color: #d0cec6 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .12) !important;
}

/* ── Search input ────────────────────────────────────────────────────────── */
.booking-popup .iti__search-input {
    background: var(--surface-2, #141412) !important;
    border: none !important;
    border-bottom: 1px solid var(--border, #242422) !important;
    border-radius: 0 !important;
    color: var(--text, #f0efe8) !important;
    font-size: 13px !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    padding: 10px 14px !important;
    width: 100% !important;
    outline: none !important;
}

.booking-popup.mode-light .iti__search-input {
    background: #f5f4f0 !important;
    border-bottom-color: #e4e2db !important;
    color: #0d0d0d !important;
}

.booking-popup .iti__search-input::placeholder {
    color: var(--text-4, #3a3a38) !important;
}

.booking-popup.mode-light .iti__search-input::placeholder {
    color: #a0a0a0 !important;
}

/* ── Country list ────────────────────────────────────────────────────────── */
.booking-popup .iti__country-list {
    background: transparent !important;
    border: none !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--border, #242422) transparent !important;
}

/* ── Individual country item ─────────────────────────────────────────────── */
.booking-popup .iti__country {
    padding: 8px 14px !important;
    color: var(--text-2, #a0a090) !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: background .1s !important;
}

.booking-popup .iti__country:hover,
.booking-popup .iti__country.iti__highlight {
    background: var(--surface-2, #141412) !important;
    color: var(--text, #f0efe8) !important;
}

.booking-popup.mode-light .iti__country {
    color: #3a3a3a !important;
}

.booking-popup.mode-light .iti__country:hover,
.booking-popup.mode-light .iti__country.iti__highlight {
    background: #f5f4f0 !important;
    color: #0d0d0d !important;
}

/* ── Country name + dial code ────────────────────────────────────────────── */
.booking-popup .iti__country-name {
    color: inherit !important;
}

.booking-popup .iti__dial-code {
    color: var(--mm-gold, #b8a07a) !important;
    font-size: 12px !important;
}

/* ── Divider between groups ──────────────────────────────────────────────── */
.booking-popup .iti__divider {
    border-color: var(--border, #242422) !important;
    margin: 0 !important;
}

/* ── Selected flag button (the trigger) ──────────────────────────────────── */
.booking-popup .iti__selected-country {
    background: var(--surface-2, #141412) !important;
    border-right: 1px solid var(--border, #242422) !important;
    border-radius: 9px 0 0 9px !important;
    padding: 0 8px !important;
}

.booking-popup.mode-light .iti__selected-country {
    background: #f5f4f0 !important;
    border-right-color: #d0cec6 !important;
}

.booking-popup .iti__selected-country:hover {
    background: var(--surface-2, #1c1c1a) !important;
}

.booking-popup .iti__arrow {
    border-top-color: var(--text-3, #606058) !important;
}

.booking-popup .iti__arrow--up {
    border-bottom-color: var(--text-3, #606058) !important;
    border-top: none !important;
}

/* ── Input with iti wrapper ──────────────────────────────────────────────── */
.booking-popup .iti {
    width: 100% !important;
}

.booking-popup .iti__tel-input {
    padding-left: 52px !important;
}