/**
 * FairMaster – country & phone-code picker (visitor registration form and
 * the stand reservation form of [fair_map]).
 * Selectors are specific + !important because fairmaster-login-form.css
 * resets every element of the form (and themes style buttons globally).
 */

/* Country flags on Windows: the system emoji font has none, so a small
   bundled font covers just the regional-indicator range. */
@font-face {
    font-family: "FM Flag Emoji";
    src: url("../fonts/TwemojiCountryFlags.woff2") format("woff2");
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
    font-display: swap;
}

:is(.fairmaster-registration-form, #reservation-form) .fm-req { color: #dc2626 !important; font-weight: 700 !important; }

:is(.fairmaster-registration-form, #reservation-form) .fm-field-hint {
    display: block !important;
    margin: 6px 0 0 !important;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

/* ── Picker shell ─────────────────────────────────────────── */
:is(.fairmaster-registration-form, #reservation-form) .fm-cp {
    position: relative !important;
    display: block !important;
    margin: 5px 0 0 !important;
}

:is(.fairmaster-registration-form, #reservation-form) .fm-cp select.fm-cp-native {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

:is(.fairmaster-registration-form, #reservation-form) .fm-cp button.fm-cp-button {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    background: #fff !important;
    color: #1f2937 !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}

:is(.fairmaster-registration-form, #reservation-form) .fm-cp button.fm-cp-button:hover { border-color: #94a3b8 !important; background: #fff !important; }
:is(.fairmaster-registration-form, #reservation-form) .fm-cp button.fm-cp-button:focus,
:is(.fairmaster-registration-form, #reservation-form) .fm-cp.is-open button.fm-cp-button {
    outline: none !important;
    border-color: #0073aa !important;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, .15) !important;
}
:is(.fairmaster-registration-form, #reservation-form) .fm-cp.is-invalid button.fm-cp-button {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, .18) !important;
}

:is(.fairmaster-registration-form, #reservation-form) .fm-cp-flag {
    flex: 0 0 auto !important;
    display: inline-block !important;
    width: 1.45em !important;
    font-family: "FM Flag Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    font-size: 19px !important;
    line-height: 1 !important;
    text-align: center !important;
}
:is(.fairmaster-registration-form, #reservation-form) .fm-cp-flag.is-blank {
    height: 15px !important;
    width: 21px !important;
    border-radius: 3px !important;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1) !important;
    font-size: 0 !important;
}

:is(.fairmaster-registration-form, #reservation-form) .fm-cp-value {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
:is(.fairmaster-registration-form, #reservation-form) .fm-cp-value.is-placeholder { color: #94a3b8 !important; }

:is(.fairmaster-registration-form, #reservation-form) .fm-cp-dial {
    flex: 0 0 auto !important;
    color: #64748b !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 13px !important;
}

:is(.fairmaster-registration-form, #reservation-form) .fm-cp-caret {
    flex: 0 0 auto !important;
    width: 8px !important;
    height: 8px !important;
    margin: -3px 2px 0 4px !important;
    border-right: 2px solid #64748b !important;
    border-bottom: 2px solid #64748b !important;
    transform: rotate(45deg) !important;
    transition: transform .15s ease !important;
}
:is(.fairmaster-registration-form, #reservation-form) .fm-cp.is-open .fm-cp-caret { transform: rotate(-135deg) !important; margin-top: 3px !important; }

/* ── Dropdown ─────────────────────────────────────────────── */
:is(.fairmaster-registration-form, #reservation-form) .fm-cp-pop {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    min-width: 280px !important;
    padding: 8px !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .06) !important;
}
:is(.fairmaster-registration-form, #reservation-form) .fm-cp-pop[hidden] { display: none !important; }
:is(.fairmaster-registration-form, #reservation-form) .fm-cp.is-up .fm-cp-pop { top: auto !important; bottom: calc(100% + 6px) !important; }

:is(.fairmaster-registration-form, #reservation-form) .fm-cp-pop input.fm-cp-search {
    display: block !important;
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 0 6px !important;
    padding: 8px 10px !important;
    border: 1px solid #d6dee8 !important;
    border-radius: 7px !important;
    background: #f8fafc !important;
    font-size: 14px !important;
    font-family: inherit !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
:is(.fairmaster-registration-form, #reservation-form) .fm-cp-pop input.fm-cp-search:focus {
    outline: none !important;
    border-color: #0073aa !important;
    background: #fff !important;
}

:is(.fairmaster-registration-form, #reservation-form) ul.fm-cp-list {
    list-style: none !important;
    max-height: 264px !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overscroll-behavior: contain !important;
}
:is(.fairmaster-registration-form, #reservation-form) li.fm-cp-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
    color: #1f2937 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
    list-style: none !important;
}
:is(.fairmaster-registration-form, #reservation-form) li.fm-cp-item[hidden] { display: none !important; }
:is(.fairmaster-registration-form, #reservation-form) li.fm-cp-item .fm-cp-name { flex: 1 1 auto !important; min-width: 0 !important; }
:is(.fairmaster-registration-form, #reservation-form) li.fm-cp-item.is-active { background: #eff6ff !important; }
:is(.fairmaster-registration-form, #reservation-form) li.fm-cp-item.is-selected { font-weight: 600 !important; }
:is(.fairmaster-registration-form, #reservation-form) li.fm-cp-item.is-selected::after {
    content: "" !important;
    width: 5px !important;
    height: 10px !important;
    margin: -3px 2px 0 0 !important;
    border-right: 2px solid #0073aa !important;
    border-bottom: 2px solid #0073aa !important;
    transform: rotate(45deg) !important;
}
:is(.fairmaster-registration-form, #reservation-form) .fm-cp-empty {
    padding: 14px 10px !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    text-align: center !important;
}
:is(.fairmaster-registration-form, #reservation-form) .fm-cp-empty[hidden] { display: none !important; }

/* ── Phone row: [flag +90 ▾][ number            ] ──────────── */
:is(.fairmaster-registration-form, #reservation-form) .fm-phone-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin: 5px 0 0 !important;
}
:is(.fairmaster-registration-form, #reservation-form) .fm-phone-row > select.fm-cp-source { flex: 0 0 132px !important; width: 132px !important; margin: 0 !important; }
:is(.fairmaster-registration-form, #reservation-form) .fm-phone-row .fm-cp {
    flex: 0 0 auto !important;
    width: 118px !important;
    margin: 0 !important;
}
:is(.fairmaster-registration-form, #reservation-form) .fm-phone-row .fm-cp-pop { width: 320px !important; max-width: calc(100vw - 48px) !important; }
:is(.fairmaster-registration-form, #reservation-form) .fm-phone-row input[type="tel"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: .02em !important;
}

@media (max-width: 480px) {
    :is(.fairmaster-registration-form, #reservation-form) .fm-phone-row .fm-cp { width: 104px !important; }
    :is(.fairmaster-registration-form, #reservation-form) .fm-cp button.fm-cp-button { padding: 9px 10px !important; gap: 7px !important; }
}