/* ==========================================================================
   xoo-el Login / Register — Glassmorphism Override (site-wide)
   Replaces the plugin's plain white #fff pane with the boutique account
   pane treatment: rgba(20,20,20,0.7) glass, blur(15px), aviation inputs,
   teal labels and buttons. Mirrors .tourflow-boutique-account styles.

   This lives in its own small stylesheet (NOT tourflow-shortcodes.css) because
   the login/register popup is a global header element that can be triggered on
   ANY page. tourflow-shortcodes.css only loads on the booking-summary and
   account pages, so the popup rendered unstyled (flat white) everywhere else.
   Enqueued site-wide via TourFlow_Frontend::enqueue_frontend_scripts().
   ========================================================================== */

/* 1. Modal overlay — dark blur backdrop */
.xoo-el-modal {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* 2. Inner content pane — boutique glass layer.
   NOTE: the plugin paints an OPAQUE pane background via an inline style on the inner
   .xoo-el-srcont element (templates/global/inline-style.php -> sy-popup-bgcolor, white
   by default). That inline rule sits on top of .xoo-el-inmodal, so without overriding
   .xoo-el-srcont too the glass never shows — this is why the popup rendered flat white
   even after our stylesheet loaded. We override both, and !important beats the inline
   rule injected via wp_add_inline_style on the xoo-el-style handle. */
.xoo-el-srcont {
    background-color: transparent !important;
}

.xoo-el-container:not(.xoo-el-style-slider) .xoo-el-inmodal,
.xoo-el-notice-inmodal {
    background: rgba(20, 20, 20, 0.7) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
    color: #fff !important;
    /* GPU composite layer — prevents Safari flicker */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* 3. Section header / title area */
.xoo-el-head {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
}

.xoo-el-head span,
.xoo-el-head-title {
    color: var(--ast-global-color-0, #14abc4) !important;
    text-transform: uppercase !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

/* 4. Tab bar (Login / Register tabs) */
.xoo-el-form-container ul.xoo-el-tabs {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    gap: 0 !important;
}

.xoo-el-form-container ul.xoo-el-tabs li {
    color: rgba(255, 255, 255, 0.6) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
}

.xoo-el-form-container ul.xoo-el-tabs li.xoo-el-active {
    color: #fff !important;
    border-bottom-color: var(--ast-global-color-0, #14abc4) !important;
    font-weight: 700 !important;
    background: transparent !important;
}

/* 5. Labels — aviation uppercase style */
label.xoo-el-form-label,
.xoo-el-form-container label {
    color: rgba(255, 255, 255, 0.9) !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}

/* 6. Aviation inputs */
.xoo-el-form-container input[type="text"],
.xoo-el-form-container input[type="email"],
.xoo-el-form-container input[type="password"],
.xoo-el-form-container input[type="tel"],
.xoo-el-fields input[type="text"],
.xoo-el-fields input[type="email"],
.xoo-el-fields input[type="password"],
.xoo-el-fields input[type="tel"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: none !important;
    border-bottom: 1px solid rgba(80, 227, 194, 0.5) !important;
    border-radius: 4px 4px 0 0 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: inherit !important;
    padding: 12px 15px !important;
    transition: all 0.3s ease;
    box-shadow: none !important;
    width: 100% !important;
}

.xoo-el-form-container input[type="text"]:focus,
.xoo-el-form-container input[type="email"]:focus,
.xoo-el-form-container input[type="password"]:focus,
.xoo-el-form-container input[type="tel"]:focus,
.xoo-el-fields input[type="text"]:focus,
.xoo-el-fields input[type="email"]:focus,
.xoo-el-fields input[type="password"]:focus,
.xoo-el-fields input[type="tel"]:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-bottom-color: #50e3c2 !important;
    box-shadow: 0 4px 12px rgba(80, 227, 194, 0.1) !important;
    outline: none !important;
}

/* Placeholder text — readable light on EVERY browser. Vendor prefixes go in
   SEPARATE rules (a grouped selector list is dropped whole by any browser that
   doesn't recognise one pseudo-element). opacity:1 (Firefox dims placeholders);
   -webkit-text-fill-color (Safari/WebKit paints placeholder text via text-fill-
   color and would otherwise override `color`, rendering it dark). */
.xoo-el-form-container input::-webkit-input-placeholder,
.xoo-el-fields input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1 !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

.xoo-el-form-container input::-moz-placeholder,
.xoo-el-fields input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1 !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

.xoo-el-form-container input:-ms-input-placeholder,
.xoo-el-fields input:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

/* 6b. Password show/hide eye toggle. xoo-el emits it as a bare
   <div class="xoo-aff-pw-toggle"> of Font Awesome <i>s and never colors it
   (its own inline style only positions it), so it inherits .xoo-el-main's
   sy-popup-txtcolor — #000 on this site — and vanishes against the dark glass.
   The rules above only re-color inputs/labels/placeholders, which it is none of.
   Matched to the placeholder tone, teal on hover like the focus border. */
.xoo-aff-pw-toggle,
.xoo-aff-pw-toggle i {
    color: rgba(255, 255, 255, 0.6) !important;
}

.xoo-aff-pw-toggle:hover,
.xoo-aff-pw-toggle:hover i {
    color: #50e3c2 !important;
}

.xoo-el-form-container input::placeholder,
.xoo-el-fields input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1 !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

/* 7. Submit / action button — teal primary.
   The plugin sets .xoo-el-section { padding-left: 20px } with no padding-right,
   and compensates with width: calc(100% - 20px). We zero the section padding so
   the button can be a clean 100% width. */
.xoo-el-section {
    padding-left: 0 !important;
}

.xoo-el-form-container button.button.btn.xoo-el-action-btn,
.xoo-el-form-container .xoo-el-action-btn {
    background-color: var(--ast-global-color-0, #14abc4) !important;
    color: #fff !important;
    border: none !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 20px 0 0 0 !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
    box-shadow: none !important;
}

.xoo-el-form-container button.button.btn.xoo-el-action-btn:hover,
.xoo-el-form-container .xoo-el-action-btn:hover {
    background-color: var(--ast-global-color-0, #14abc4) !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(80, 227, 194, 0.5) !important;
}

/* 8. Links (lost password, login/register toggle) */
.xoo-el-lostpw-tgr,
.xoo-el-login-tgr,
.xoo-el-reg-tgr,
.xoo-el-head-nav,
.xoo-el-head-action a {
    color: var(--ast-global-color-0, #14abc4) !important;
    text-decoration: underline !important;
    font-size: 0.85rem !important;
}

.xoo-el-lostpw-tgr:hover,
.xoo-el-login-tgr:hover,
.xoo-el-reg-tgr:hover,
.xoo-el-head-action a:hover {
    color: #50e3c2 !important;
}

/* 9. Notice messages */
.xoo-el-notice {
    border-radius: 4px !important;
    font-size: 0.85rem !important;
}

.xoo-el-notice-error {
    background: rgba(255, 107, 107, 0.15) !important;
    border-color: rgba(255, 107, 107, 0.4) !important;
    color: #ff9a9a !important;
}

.xoo-el-notice-success {
    background: rgba(80, 227, 194, 0.1) !important;
    border-color: rgba(80, 227, 194, 0.3) !important;
    color: #50e3c2 !important;
}

/* 10. Close button */
span.xoo-el-close {
    color: rgba(255, 255, 255, 0.6) !important;
    transition: color 0.2s !important;
}

span.xoo-el-close:hover {
    color: #ff6b6b !important;
}

/* 11. Remember Me / checkbox row */
.xoo-aff-group.xoo-el-login-btm-fields {
    margin-top: 15px !important;
}

.xoo-aff-group.xoo-el-login-btm-fields .xoo-el-form-label {
    color: rgba(255, 255, 255, 0.7) !important;
    text-transform: none !important;
    font-size: 0.85rem !important;
    letter-spacing: 0 !important;
}

/* 12. Password strength meter */
span.xoo-el-pm-head {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.75rem !important;
}

/* 12b. Password show/hide eye icon — teal (defaults to dark/black on the white pane).
   The plugin renders it via the icon-font glyph classes .xoo-el-icon-eye /
   .xoo-el-icon-eye-blocked (assets/css/xoo-el-fonts.css). */
.xoo-el-icon-eye,
.xoo-el-icon-eye-blocked,
.xoo-el-show-pass,
.xoo-el-fields .xoo-el-icon-eye,
.xoo-el-fields .xoo-el-icon-eye-blocked {
    color: var(--ast-global-color-0, #14abc4) !important;
}

/* 12c. In-form links (e.g. "Términos y condiciones") — teal, not the inherited
   dark popup text color. Scoped to the popup form so site links are unaffected. */
.xoo-el-form-container a,
.xoo-el-main a,
.xoo-el-fields a {
    color: var(--ast-global-color-0, #14abc4) !important;
    text-decoration: underline !important;
}

.xoo-el-form-container a:hover,
.xoo-el-main a:hover,
.xoo-el-fields a:hover {
    color: #50e3c2 !important;
}

/* 13. Mobile: full-width pane, stay centered in the viewport.
   (Centering itself is enforced in rule 17 for all sizes; here we only widen the
   pane and keep it scrollable within the viewport — NOT top-aligned, which is what
   previously made it land mid-page.) */
@media (max-width: 768px) {
    .xoo-el-container:not(.xoo-el-style-slider) .xoo-el-inmodal {
        margin: 0 !important;
        max-height: calc(100dvh - 32px) !important;
        overflow-y: auto !important;
        padding: 20px !important;
        width: 100% !important;
    }
}

/* 14. Browser autofill — keep the dark glass look (the yellow/white box on the
   email & other fields is the browser's autofill UA style overriding ours).
   The inset box-shadow trick repaints the field background; -webkit-text-fill-color
   keeps the typed text white. */
.xoo-el-form-container input:-webkit-autofill,
.xoo-el-form-container input:-webkit-autofill:hover,
.xoo-el-form-container input:-webkit-autofill:focus,
.xoo-el-fields input:-webkit-autofill,
.xoo-el-fields input:-webkit-autofill:hover,
.xoo-el-fields input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(20, 20, 20, 0.9) inset !important;
    box-shadow: 0 0 0 1000px rgba(20, 20, 20, 0.9) inset !important;
    transition: background-color 9999s ease-in-out 0s !important; /* defeat the autofill bg animation */
    border-bottom-color: rgba(80, 227, 194, 0.5) !important;
}

/* 14b. Catch the email field even if the plugin renders it as type="text"
   (some xoo-el field configs do), so it gets the same aviation input styling
   as the email/tel rules above instead of a plain white box. */
.xoo-el-form-container input[name*="email"],
.xoo-el-fields input[name*="email"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: none !important;
    border-bottom: 1px solid rgba(80, 227, 194, 0.5) !important;
    border-radius: 4px 4px 0 0 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* 15. Country-code field (Select2 "Phone Code"). This is a SEPARATE 1/4-width field
   from the phone — the form handles the column layout, so we touch ONLY the look of
   the Select2 control, never layout/width. The field carries the Extra CSS Class
   `tf-country-code` (set in easy-login → Codigo de Pais → Advanced → Extra CSS Class),
   which is our scope so no other Select2/select on the site is affected.

   The flag + code text lives in .xoo-aff-flag-cont. */

/* KEY: `tf-country-code` is on the HIDDEN <select> (.select2-hidden-accessible). The
   visible white control is its ADJACENT-SIBLING Select2 span (`<select> + .select2`),
   which carries no tf class. The plugin paints it white with exactly that combinator:
       .xoo-aff-group select.xoo-aff-field + .select2 { background-color:#fff }
   So we override on the SAME plane — `select.tf-country-code + .select2` — which is
   anchored to our class (scoped to this one field) and matches/【beats】the white rule
   with !important. This is why earlier `.tf-country-code .select2-...` (descendant)
   rules never matched: the control is a sibling, not a descendant. */
/* COLOR-ONLY override. The visible control is the adjacent sibling of the hidden
   <select.tf-country-code> (i.e. `select + .select2`). We change ONLY colors and leave
   Select2's native sizing/layout (height, padding, flag/arrow positioning) untouched —
   forcing flex/heights here broke the pill's internal rendering.

   The plugin/Astra paint the control white on TWO layers:
     1. the container:  select.xoo-aff-field + .select2            { background:#fff }
     2. the selection:  .select2-container--default .select2-selection--single { #fff }
   Tint the container to match the sibling aviation inputs and make the inner selection
   transparent so the tint shows through once — no box-in-a-box, no layout changes. */
select.tf-country-code + .select2 {
    /* Match the sibling inputs (email/phone/name) exactly: same translucent-white tint
       over the cloud background, not a dark slab. (My Account already uses this value.) */
    background-color: rgba(255, 255, 255, 0.05) !important;
    background-image: none !important;
    border-radius: 4px 4px 0 0 !important;
}

select.tf-country-code + .select2 .select2-selection--single {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 1px solid rgba(80, 227, 194, 0.5) !important;
}

/* Flag + code text + the dropdown arrow → white. */
select.tf-country-code + .select2 .select2-selection__rendered,
select.tf-country-code + .select2 .xoo-aff-flag-cont,
select.tf-country-code + .select2 .xoo-aff-flag-cont span,
select.tf-country-code + .select2 .select2-selection__arrow b {
    color: #ffffff !important;
}

/* Open dropdown panel for THIS field — dark glass. The panel is appended to <body>,
   so it cannot be scoped via .tf-country-code; these target the select2 default theme
   panel. (Acceptable: it only restyles select2 dropdowns, which on this popup is just
   the country code.) */
.select2-container--default .select2-dropdown {
    background: rgba(20, 20, 20, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.select2-container--default .select2-results__option {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: rgba(80, 227, 194, 0.2) !important;
    color: #ffffff !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(80, 227, 194, 0.4) !important;
    color: #ffffff !important;
}

/* 17. Center the popup in the VIEWPORT every time (all devices).
   The plugin centers via an inline-block + ::before/vertical-align:middle trick on a
   fixed, overflow:auto container. On mobile that aligns to the scrollable CONTENT mid-
   point (and iOS dynamic toolbars break 100%/100vh), so the modal can appear mid-page
   instead of centered. Switch the fixed overlay to flexbox centering with dynamic
   viewport units, which is reliable across Chrome/Firefox/Safari on iOS + Android. */
.xoo-el-container:not(.xoo-el-style-slider) .xoo-el-modal,
.xoo-el-notice-modal {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important;
    height: 100dvh !important;       /* dynamic viewport height — accounts for mobile toolbars */
    padding: 16px !important;
    box-sizing: border-box !important;
}

/* Neutralize the legacy vertical-align centering helper. */
.xoo-el-modal:before,
.xoo-el-notice-modal:before {
    display: none !important;
}

/* Let the pane size to its content and cap it to the viewport so it stays centered
   and scrolls internally on short screens rather than pushing off-screen. */
.xoo-el-container:not(.xoo-el-style-slider) .xoo-el-inmodal,
.xoo-el-notice-inmodal {
    vertical-align: initial !important;
    height: auto !important;
    max-height: calc(100dvh - 32px) !important;
    overflow: auto !important;
    margin: 0 !important;
}

/* 16. (Removed.) Country-code and phone are SEPARATE fields whose 1/4 + 3/4 column
   widths are set by the form itself, so no same-row CSS is needed here. */