/* ==========================================================================
   css/theme11.css   -   «آسا مدرن» (v2): the second skin
   --------------------------------------------------------------------------
   Every selector that restyles the site is prefixed html[data-ui="v2"], so
   this file is inert in the classic skin and the switch in the top bar is a
   single attribute flip. Only .th11* (the switch) is unprefixed - it has to
   look right in both.

   WHY THE FIRST VERSION HAD DARK-MODE BUGS, AND WHAT CHANGED
   It re-skinned the components it knew about and left the rest to the legacy
   sheets - which paint #fff cards and #424c55 text no matter what scheme the
   visitor asked for. White filter rails on a black page, invisible headings,
   pale labels. The fix is structural, in two passes that run BEFORE any
   component rule:

     2. THE TOKEN BRIDGE. css/booking-ui11.css and css/search11.css are both
        token-driven (--bk-* on .bk11, --s11-* on .asa-s11). Redefining those
        variables inside v2 repaints both sheets from our palette - hundreds of
        legacy rules, including every one nobody has looked at yet.
     3. THE NEUTRALISER. The colours those sheets hard-code rather than take
        from a variable, extracted selector by selector (92 of them) and mapped
        onto tokens. After this pass nothing on the page paints itself.

   Then, and only then, the design.

     0 switch      1 tokens        2 token bridge   3 neutraliser
     4 base        5 chrome        6 primitives     7 search page
     8 funnel      9 guest pages  10 widgets       11 motion / perf / print
   ========================================================================== */

/* ==========================================================================
   0. THE SWITCH   (unprefixed - lives in both skins)
   ========================================================================== */

.th11 {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 3px; border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .16);
    line-height: 1; vertical-align: middle;
}
.th11 button {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; cursor: pointer; color: inherit;
    font: inherit; font-size: .76rem; font-weight: 700;
    padding: 5px 11px; border-radius: 999px;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}
.th11 button:hover  { background: rgba(255, 255, 255, .14); }
.th11 button:active { transform: scale(.96); }
.th11__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; opacity: .4;
    transition: opacity .2s ease, box-shadow .2s ease, background .2s ease;
}
.th11__ui[aria-pressed="true"] .th11__dot { opacity: 1; }
.th11__scheme { padding: 5px 9px; }
.th11__scheme svg { width: 15px; height: 15px; display: block; }
.th11__sun  { fill: none; stroke: currentColor; stroke-width: 1.7; }
.th11__moon { fill: currentColor; display: none; }
html[data-scheme="dark"] .th11__sun  { display: none; }
html[data-scheme="dark"] .th11__moon { display: block; }
html[data-ui="classic"] .th11__scheme { display: none; }

.u11-top .th11, .u11-nav .th11, .th11--ink {
    background: rgba(15, 23, 42, .05); border-color: rgba(15, 23, 42, .10); color: #334155;
}
.u11-top .th11 button:hover, .th11--ink button:hover { background: rgba(15, 23, 42, .07); }

/* ==========================================================================
   1. TOKENS
   --------------------------------------------------------------------------
   Two palettes, one scale. Every colour below this block comes from here.
   Contrast was the first complaint about v2.0, so the ink ramp is checked:
   ink on surface >= 12:1, ink-2 >= 7:1, muted >= 4.6:1, in BOTH schemes.
   ========================================================================== */

html[data-ui="v2"] {
    --v2-brand:       #04936a;
    --v2-brand-2:     #06b183;          /* gradient top, hover               */
    --v2-brand-ink:   #037253;          /* brand text on a light surface     */
    --v2-brand-soft:  #e6f6f0;
    --v2-brand-line:  #a7ddcb;
    --v2-on-brand:    #ffffff;

    --v2-price:       #0f172a;          /* a price is INK, not a warning     */
    --v2-save:        #04936a;          /* a discount is green               */
    --v2-urgent:      #d92d20;          /* «تنها ۲ اتاق» only                */
    --v2-gold:        #f0a819;

    --v2-bg:          #f4f6f9;
    --v2-bg-2:        #eaeef4;
    --v2-surface:     #ffffff;
    --v2-surface-2:   #f5f7fa;
    --v2-surface-3:   #eef2f7;
    --v2-line:        #e2e8f0;
    --v2-line-2:      #cfd8e3;

    --v2-ink:         #0f172a;
    --v2-ink-2:       #475569;
    --v2-muted:       #64748b;

    --v2-ok:          #04936a;
    --v2-warn:        #b45309;
    --v2-bad:         #d92d20;
    --v2-bad-soft:    #fdeceb;
    --v2-chip:        #eef2f7;
    --v2-chip-ink:    #334155;

    --v2-r-xs: 8px; --v2-r-sm: 12px; --v2-r: 16px;
    --v2-r-lg: 20px; --v2-r-xl: 28px; --v2-r-pill: 999px;

    --v2-sh-1: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.045);
    --v2-sh-2: 0 2px 4px rgba(15,23,42,.05), 0 8px 20px rgba(15,23,42,.08);
    --v2-sh-3: 0 6px 12px rgba(15,23,42,.07), 0 20px 48px rgba(15,23,42,.14);

    --v2-t-xs:  clamp(.70rem, .68rem + .1vw,  .78rem);
    --v2-t-sm:  clamp(.80rem, .77rem + .12vw, .88rem);
    --v2-t-md:  clamp(.90rem, .87rem + .15vw, .99rem);
    --v2-t-lg:  clamp(1.05rem, 1.0rem + .3vw, 1.22rem);
    --v2-t-xl:  clamp(1.3rem, 1.15rem + .7vw, 1.75rem);
    --v2-t-2xl: clamp(1.65rem, 1.35rem + 1.5vw, 2.5rem);

    --v2-ease: cubic-bezier(.2,.7,.2,1);
    --v2-fast: .13s; --v2-mid: .2s; --v2-slow: .34s;

    color-scheme: light;
}

html[data-ui="v2"][data-scheme="dark"] {
    --v2-brand:       #0eae80;
    --v2-brand-2:     #13c692;
    --v2-brand-ink:   #4fd6ab;          /* brand TEXT in dark must be light   */
    --v2-brand-soft:  #10382d;
    --v2-brand-line:  #1c5b49;
    --v2-on-brand:    #04261c;

    --v2-price:       #f1f6fc;
    --v2-save:        #4fd6ab;
    --v2-urgent:      #ff7a70;
    --v2-gold:        #ffc14d;

    --v2-bg:          #0a1017;
    --v2-bg-2:        #0d141e;
    --v2-surface:     #131c28;
    --v2-surface-2:   #18232f;
    --v2-surface-3:   #1e2a38;
    --v2-line:        #263341;
    --v2-line-2:      #35455a;

    --v2-ink:         #f1f6fc;
    --v2-ink-2:       #c2cedd;
    --v2-muted:       #93a3b8;

    --v2-ok:          #4fd6ab;
    --v2-warn:        #f0b357;
    --v2-bad:         #ff6b63;
    --v2-bad-soft:    #3a1c1c;
    --v2-chip:        #1e2a38;
    --v2-chip-ink:    #cbd6e4;

    --v2-sh-1: 0 1px 2px rgba(0,0,0,.5);
    --v2-sh-2: 0 2px 6px rgba(0,0,0,.45), 0 10px 26px rgba(0,0,0,.4);
    --v2-sh-3: 0 8px 18px rgba(0,0,0,.5), 0 28px 64px rgba(0,0,0,.6);

    color-scheme: dark;
}

/* ==========================================================================
   2. THE TOKEN BRIDGE
   --------------------------------------------------------------------------
   booking-ui11.css declares --bk-* on .bk11; search11.css declares --s11-* on
   .asa-s11. Both sheets then consume them everywhere. Redefining them here -
   at higher specificity, because of the html[data-ui] prefix - repaints both
   sheets wholesale, including every rule this file never mentions.
   ========================================================================== */

html[data-ui="v2"] .bk11,
html[data-ui="v2"] .asa-s11,
html[data-ui="v2"] body {
    /* booking-ui11.css */
    --bk-green:       var(--v2-brand);
    --bk-green-dark:  var(--v2-brand-ink);
    --bk-green-pale:  var(--v2-brand-soft);
    --bk-peach:       var(--v2-chip);
    --bk-peach-ink:   var(--v2-chip-ink);
    --bk-blue:        var(--v2-brand);
    --bk-ink:         var(--v2-ink);
    --bk-muted:       var(--v2-muted);
    --bk-grey:        var(--v2-muted);
    --bk-rule:        var(--v2-line);
    --bk-line:        var(--v2-line);
    --bk-bg:          var(--v2-bg);
    --bk-card-shadow: var(--v2-sh-1);

    /* search11.css */
    --s11-green:        var(--v2-brand);
    --s11-green-dark:   var(--v2-brand-ink);
    --s11-green-soft:   var(--v2-brand-soft);
    --s11-ink:          var(--v2-ink);
    --s11-ink-soft:     var(--v2-ink-2);
    --s11-muted:        var(--v2-muted);
    --s11-line:         var(--v2-line);
    --s11-line-soft:    var(--v2-line);
    --s11-field-bg:     var(--v2-surface-2);
    --s11-field-line:   var(--v2-line-2);
    --s11-star:         var(--v2-gold);
    --s11-shadow:       var(--v2-sh-1);
    --s11-radius-card:  var(--v2-r-lg);
    --s11-radius-field: var(--v2-r-sm);
}

/* ==========================================================================
   3. THE NEUTRALISER
   --------------------------------------------------------------------------
   The colours the legacy sheets hard-code instead of taking from a variable.
   Extracted mechanically from booking-ui11.css / search11.css / user11.css /
   pay11.css - every rule whose background is #fff-ish or whose colour is one
   of the fixed inks - and mapped onto tokens here. This is what stops a white
   card or a dark label appearing on a dark page.
   ========================================================================== */

/* ---- generated from the .css files ----
   Luminance-classified. Two things are never emitted: a selector that does not
   name itself (a bare `div:first-child` repaints the page), and any selector
   naming a component this file designs by hand - a generated rule is one class
   deeper and would outrank the design wherever it sat. */

html[data-ui="v2"] .bk11 section.rooms .card-package,
html[data-ui="v2"] .bk11 section.rooms .card-package-page-list-hotel,
html[data-ui="v2"] .bk11 .page-hotel-list-filter,
html[data-ui="v2"] .bk11 .form-check-input,
html[data-ui="v2"] .bk11 .price-range-knob,
html[data-ui="v2"] .bk11 .card__form-input,
html[data-ui="v2"] .bk11 .form-floating > .form-control,
html[data-ui="v2"] .bk11 .form-floating > .form-select,
html[data-ui="v2"] .bk11 .card__dateil-container,
html[data-ui="v2"] .bk11 .reserve-final-container .card,
html[data-ui="v2"] .bk11 .rooms-card .room-item-card,
html[data-ui="v2"] .bk11 .gateway-item,
html[data-ui="v2"] .bk11 .card__next-step-mobile,
html[data-ui="v2"] .bk11 section.rooms .card-package > .room-item .capacity-box,
html[data-ui="v2"] .bk11 .page-hotel-list-filter .title,
html[data-ui="v2"] .bk11 .bk-topbar,
html[data-ui="v2"] .bk11 .facility-items,
html[data-ui="v2"] .bk11 .hotel-rules__card,
html[data-ui="v2"] .bk11 .hotel-sidenav,
html[data-ui="v2"] .bk11 .bk-searchbar__field,
html[data-ui="v2"] .bk11 .bk-searchbar__row,
html[data-ui="v2"] .bk11 .rating-wrapper,
html[data-ui="v2"] .bk11 .gallery__more:hover,
html[data-ui="v2"] .bk11 .bk-lightbox__panel,
html[data-ui="v2"] .bk11 .bk-lightbox__close,
html[data-ui="v2"] .bk11 .bk-lightbox__close:hover,
html[data-ui="v2"] .bk11 .bk-lightbox__stage,
html[data-ui="v2"] .bk11 .discount-row__btn:hover,
html[data-ui="v2"] .bk11 .s11-lang a:hover,
html[data-ui="v2"] .bk11 .s11-lang a.active,
html[data-ui="v2"] .bk11 .bk11-nav__btn,
html[data-ui="v2"] .bk11 .bk11-nav__btn:hover,
html[data-ui="v2"] .bk11 .bk11-nav__btn--home,
html[data-ui="v2"] .asa-s11 .quick-search,
html[data-ui="v2"] .asa-s11 .search-filter-area,
html[data-ui="v2"] .asa-s11 .filter-rate-range,
html[data-ui="v2"] .asa-s11 .filter-rate-range > span#min_rate,
html[data-ui="v2"] .asa-s11 .filter-rate-range > span#max_rate,
html[data-ui="v2"] .asa-s11 .search-result-area ul > li,
html[data-ui="v2"] .asa-s11 .s11-empty,
html[data-ui="v2"] .asa-s11 .search-filter-area .filter-box,
html[data-ui="v2"] .asa-s11 .filter-options,
html[data-ui="v2"] .asa-s11 .bk-topbar,
html[data-ui="v2"] .asa-s11 .search-result-img > img,
html[data-ui="v2"] .asa-s11 .filter_stars > label:before,
html[data-ui="v2"] .asa-s11 .filter_cap > label:before,
html[data-ui="v2"] .asa-s11 .filter-room-kind > div > label:before,
html[data-ui="v2"] .asa-s11 .s11-loadmore .btn:hover,
html[data-ui="v2"] .asa-s11 .btn-more:hover,
html[data-ui="v2"] .asa-s11 .s11-hero .quick-search-from-group-box,
html[data-ui="v2"] .asa-s11 .s11-filter-head,
html[data-ui="v2"] .asa-s11 .s11-filter-close,
html[data-ui="v2"] .asa-s11 .s11-flight-no,
html[data-ui="v2"] .asa-s11 .s11-flight-dur,
html[data-ui="v2"] .asa-s11 .s11-lang a:hover,
html[data-ui="v2"] .asa-s11 .s11-lang a.active,
html[data-ui="v2"] .asa-s11 .s11-src--asa,
html[data-ui="v2"] .asa-s11 .s11-src--gar,
html[data-ui="v2"] .asa-s11 .search-filter-area .filter-box:hover,
html[data-ui="v2"] .asa-s11 .s11-flight-chip,
html[data-ui="v2"] .u11-top,
html[data-ui="v2"] .u11-top .s11-lang a,
html[data-ui="v2"] .u11-top .s11-lang a:hover,
html[data-ui="v2"] .u11-avatar,
html[data-ui="v2"] .u11-stat,
html[data-ui="v2"] .u11-tabs a:hover,
html[data-ui="v2"] .u11-tabs a.on,
html[data-ui="v2"] .u11-tabs__out:hover,
html[data-ui="v2"] .u11-panel,
html[data-ui="v2"] .u11-filter,
html[data-ui="v2"] .u11-f input,
html[data-ui="v2"] .u11-btn--ghost,
html[data-ui="v2"] .u11-item,
html[data-ui="v2"] .u11-pill--flat,
html[data-ui="v2"] .u11-voucher,
html[data-ui="v2"] .u11-pager a,
html[data-ui="v2"] .u11-pager a:hover,
html[data-ui="v2"] .u11-cancel-link:hover,
html[data-ui="v2"] .pay11-card,
html[data-ui="v2"] .pay11-btn--ghost,
html[data-ui="v2"] .pay11-alert--bad,
html[data-ui="v2"] .pay11-field__input,
html[data-ui="v2"] .pay11-bank,
html[data-ui="v2"] .pay11-bank__dot,
html[data-ui="v2"] .bk11 {
    background-color: var(--v2-surface) !important;
}

html[data-ui="v2"] .bk11 .text-danger,
html[data-ui="v2"] .bk11 .reserve__exit-icon,
html[data-ui="v2"] .bk11 .reserve-exit-icon,
html[data-ui="v2"] .bk11 .hotel-rule-item--time .hotel-rule-item__title,
html[data-ui="v2"] .bk11 .room-left,
html[data-ui="v2"] .bk11 .discount-row__msg.is-bad,
html[data-ui="v2"] .asa-s11 .quick-search-from-group-box.error label,
html[data-ui="v2"] .asa-s11 .search-result-order a.btn-warning,
html[data-ui="v2"] .asa-s11 .tag,
html[data-ui="v2"] .asa-s11 .s11-src--snp,
html[data-ui="v2"] .asa-s11 .s11-src--irq,
html[data-ui="v2"] .asa-s11 .s11-flight-seats.is-low,
html[data-ui="v2"] .asa-s11 .s11-soon,
html[data-ui="v2"] .s11-soon,
html[data-ui="v2"] .u11-otp,
html[data-ui="v2"] .u11-tabs__out,
html[data-ui="v2"] .u11-pill--wait,
html[data-ui="v2"] .u11-cancel-link,
html[data-ui="v2"] .u11-cancel-link:hover,
html[data-ui="v2"] .pay11-note {
    color: var(--v2-bad) !important;
}

html[data-ui="v2"] .bk11 .capacity-box .item-person,
html[data-ui="v2"] .bk11 .capacity-box .item-extra,
html[data-ui="v2"] .bk11 .capacity-box .item-cross::after,
html[data-ui="v2"] .bk11 .capacity-box .item-number,
html[data-ui="v2"] .bk11 .bk-searchbar__label,
html[data-ui="v2"] .bk11 .rating-wrapper,
html[data-ui="v2"] .bk11 .s11-lang a,
html[data-ui="v2"] .bk11 .s11-lang a:hover,
html[data-ui="v2"] .bk11 .s11-lang a.active,
html[data-ui="v2"] .bk11 .bk11-nav__btn,
html[data-ui="v2"] .asa-s11 .quick-search-from-group-box > input,
html[data-ui="v2"] .asa-s11 .quick-search-from-group-box .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-ui="v2"] .asa-s11 .quick-search-from-group-box > div[style],
html[data-ui="v2"] .asa-s11 .s11-count,
html[data-ui="v2"] .asa-s11 .bk-topbar,
html[data-ui="v2"] .asa-s11 .s11-divider-title,
html[data-ui="v2"] .asa-s11 .search-result-info h4,
html[data-ui="v2"] .asa-s11 .search-result-info .s11-star,
html[data-ui="v2"] .asa-s11 .search-result-info .s11-loc,
html[data-ui="v2"] .asa-s11 .search-result-order > div:nth-child(1),
html[data-ui="v2"] .asa-s11 .search-result-order > div:nth-child(2),
html[data-ui="v2"] .asa-s11 .s11-filter-head,
html[data-ui="v2"] .asa-s11 .search-filter-area .filter-box h5,
html[data-ui="v2"] .asa-s11 .search-filter-area label,
html[data-ui="v2"] .asa-s11 .s11-filter-close,
html[data-ui="v2"] .asa-s11 .bk-topbar__credit,
html[data-ui="v2"] .asa-s11 .bk-topbar__credit b,
html[data-ui="v2"] .asa-s11 .s11-flight-dur,
html[data-ui="v2"] .asa-s11 .s11-flight-meta,
html[data-ui="v2"] .asa-s11 .s11-flight-chd,
html[data-ui="v2"] .asa-s11 .s11-lang a,
html[data-ui="v2"] .asa-s11 .s11-lang a:hover,
html[data-ui="v2"] .asa-s11 .s11-lang a.active,
html[data-ui="v2"] .asa-s11 .s11-src--egh,
html[data-ui="v2"] .asa-s11 .s11-src--gar,
html[data-ui="v2"] .asa-s11 .flight_passenger > div > div > span:first-child,
html[data-ui="v2"] .asa-s11 .flight_passenger > div > div > span:nth-child(2),
html[data-ui="v2"] .asa-s11 .flight_passenger > div:nth-child(2) > div > div:nth-child(1) > span.disabled,
html[data-ui="v2"] .asa-s11 .flight_passenger > div:nth-child(2) > div > div:nth-child(3) > span.disabled,
html[data-ui="v2"] .asa-s11 .s11-flight-chip,
html[data-ui="v2"] .asa-s11 .s11-flight-seats,
html[data-ui="v2"] .u11-linkbtn[disabled],
html[data-ui="v2"] .u11-pill--flat,
html[data-ui="v2"] .u11-hint {
    color: var(--v2-ink) !important;
}

html[data-ui="v2"] .bk11 .bk11-nav__btn:hover,
html[data-ui="v2"] .bk11 .bk11-nav__btn--home,
html[data-ui="v2"] .bk11 .room-line-price,
html[data-ui="v2"] .asa-s11 .bk-topbar__back,
html[data-ui="v2"] .asa-s11 .s11-filter-head a,
html[data-ui="v2"] .asa-s11 .s11-loadmore .btn,
html[data-ui="v2"] .asa-s11 .btn-more,
html[data-ui="v2"] .asa-s11 .s11-flight-no,
html[data-ui="v2"] .asa-s11 .s11-src--asa {
    color: var(--v2-brand-ink) !important;
}


/* ==========================================================================
   3b. THE INLINE SHEETS
   ========================================================================== */

/* ---- generated from the 18 inline <style> blocks ----
   authmodal11 carries the sign-in overlay, reserve_new11_rooms the cart,
   formerr11 the error state, search11 the page band. */

html[data-ui="v2"] .msg--bad,
html[data-ui="v2"] .msg--ok,
html[data-ui="v2"] input[type=text],
html[data-ui="v2"] input[type=password],
html[data-ui="v2"] .btn--ghost,
html[data-ui="v2"] .toggle i::after,
html[data-ui="v2"] .meta code,
html[data-ui="v2"] .bk11 .fl11-pass,
html[data-ui="v2"] .bk11 .fl11-pass__logo,
html[data-ui="v2"] .bk11 .fl11-pass__no,
html[data-ui="v2"] .bk11 .fl11-path__dot--end,
html[data-ui="v2"] .bk11 .fl11-path__dur,
html[data-ui="v2"] .bk11 .fl11-pass__foot,
html[data-ui="v2"] .bk11 .fl11-fact,
html[data-ui="v2"] .bk11 .fl11-fact--seats,
html[data-ui="v2"] .bk11 .fl11-panel,
html[data-ui="v2"] .bk11 .fl11-sum,
html[data-ui="v2"] .bk11 .form-control.is-invalid11,
html[data-ui="v2"] .form-control.is-invalid11,
html[data-ui="v2"] .bk11 .detail__room-count,
html[data-ui="v2"] .bk11 .room-count-chip,
html[data-ui="v2"] .rz11__box,
html[data-ui="v2"] .rz11__x,
html[data-ui="v2"] .rc11,
html[data-ui="v2"] .rc11__btn,
html[data-ui="v2"] .rc11__btn:hover:not(:disabled),
html[data-ui="v2"] .rc11-extra,
html[data-ui="v2"] .price-units,
html[data-ui="v2"] .bk11-cart__inner,
html[data-ui="v2"] .bk11-cart__list li,
html[data-ui="v2"] .ri11__box,
html[data-ui="v2"] .ri11__x,
html[data-ui="v2"] .ri11__x:hover,
html[data-ui="v2"] .ri11__foot,
html[data-ui="v2"] .ri11__off,
html[data-ui="v2"] .flight_price,
html[data-ui="v2"] .menuBtnStyle1,
html[data-ui="v2"] .menuBtnStyle2,
html[data-ui="v2"] .search_opt+label,
html[data-ui="v2"] .flight_passenger,
html[data-ui="v2"] span.disabled,
html[data-ui="v2"] .prepayment-card,
html[data-ui="v2"] .prepayment-table thead th,
html[data-ui="v2"] .prepayment-table tbody tr:hover,
html[data-ui="v2"] .payment-badge,
html[data-ui="v2"] .waiting-payment-warning,
html[data-ui="v2"] .demo-hint,
html[data-ui="v2"] .custom-progress-wrapper,
html[data-ui="v2"] .am11__panel,
html[data-ui="v2"] .am11__x:hover,
html[data-ui="v2"] .am11__msg,
html[data-ui="v2"] .am11__msg[data-am11-ok],
html[data-ui="v2"] .am11__field input,
html[data-ui="v2"] .am11__field input:focus,
html[data-ui="v2"] .am11-bar,
html[data-ui="v2"] .cb,
html[data-ui="v2"] .bk11 .fl11-field .form-control,
html[data-ui="v2"] .bk11 .fl11-field .form-control:focus,
html[data-ui="v2"] .bk11 .fl11-bad,
html[data-ui="v2"] .bk11 .fl11-sex__opt,
html[data-ui="v2"] .bk11 .fl11-sex__opt.is-on,
html[data-ui="v2"] .bk11 .fl11-seat__lead,
html[data-ui="v2"] .bk11 .fl11-recap,
html[data-ui="v2"] .bk11 .fl11-plist__tag,
html[data-ui="v2"] .fe11-bad,
html[data-ui="v2"] .bk11 .fe11-bad,
html[data-ui="v2"] .bk11 .form-control.fe11-bad,
html[data-ui="v2"] .fe11-box,
html[data-ui="v2"] .rules11__box,
html[data-ui="v2"] .rules11__x,
html[data-ui="v2"] .rules11__x:hover,
html[data-ui="v2"] .rules11__foot {
    background-color: var(--v2-surface) !important;
}

html[data-ui="v2"] .flight_info {
    background-color: var(--v2-brand-soft) !important;
}

html[data-ui="v2"] .dev11 .b-apply,
html[data-ui="v2"] .dev11 .dev11-note,
html[data-ui="v2"] .dev11 s,
html[data-ui="v2"] .bk11 .fl11-leg__time,
html[data-ui="v2"] .bk11 .fl11-leg__city,
html[data-ui="v2"] .bk11 .fl11-path__dur,
html[data-ui="v2"] .bk11 .fl11-fact,
html[data-ui="v2"] .bk11 .fl11-panel__head h3,
html[data-ui="v2"] .bk11 .fl11-panel__hint,
html[data-ui="v2"] .bk11 .fl11-pax__name,
html[data-ui="v2"] .bk11 .fl11-pax__age,
html[data-ui="v2"] .bk11 .fl11-pax__rate,
html[data-ui="v2"] .bk11 .fl11-sum__title,
html[data-ui="v2"] .bk11 .fl11-sum__line,
html[data-ui="v2"] .bk11 .fl11-sum__line b,
html[data-ui="v2"] .bk11 .fl11-sum__total span,
html[data-ui="v2"] .bk11 .fl11-sum__note,
html[data-ui="v2"] .rz11__cap,
html[data-ui="v2"] .rz11__x,
html[data-ui="v2"] .rc11__btn,
html[data-ui="v2"] .rc11__n,
html[data-ui="v2"] .rc11-extra__label,
html[data-ui="v2"] .rc11-extra__rate small,
html[data-ui="v2"] .bk11-cart__title,
html[data-ui="v2"] .bk11-cart__sum-label,
html[data-ui="v2"] .bk11-cart__sum-value,
html[data-ui="v2"] .ri11__title,
html[data-ui="v2"] .ri11__x,
html[data-ui="v2"] .ri11__row b,
html[data-ui="v2"] .ri11__row span,
html[data-ui="v2"] .ri11__was,
html[data-ui="v2"] .ri11__note,
html[data-ui="v2"] .search_opt+label,
html[data-ui="v2"] span.disabled,
html[data-ui="v2"] .tour-price,
html[data-ui="v2"] .prepayment-table thead th,
html[data-ui="v2"] .prepayment-table tfoot td:first-child,
html[data-ui="v2"] .prepayment-table tfoot td:last-child,
html[data-ui="v2"] .payment-badge,
html[data-ui="v2"] .demo-hint,
html[data-ui="v2"] .am11__panel,
html[data-ui="v2"] .am11__x,
html[data-ui="v2"] .am11__x:hover,
html[data-ui="v2"] .am11__lead,
html[data-ui="v2"] .am11__field span,
html[data-ui="v2"] .am11__field input,
html[data-ui="v2"] .am11__hint,
html[data-ui="v2"] .am11-bar__txt,
html[data-ui="v2"] .cb dt,
html[data-ui="v2"] .bk11 .fl11-field__label,
html[data-ui="v2"] .bk11 .fl11-sex__opt,
html[data-ui="v2"] .bk11 .fl11-recap__route,
html[data-ui="v2"] .bk11 .fl11-recap__meta,
html[data-ui="v2"] .bk11 .fl11-tick__route,
html[data-ui="v2"] .bk11 .fl11-tick__meta,
html[data-ui="v2"] .bk11 .fl11-plist__name,
html[data-ui="v2"] .bk11 .fl11-plist__tag,
html[data-ui="v2"] .bk11 .fl11-plist__id,
html[data-ui="v2"] .bk11 .fl11-phone,
html[data-ui="v2"] .bk11 .fl11-sum__line small,
html[data-ui="v2"] .pay11-gwstate.is-conf,
html[data-ui="v2"] .rules11__title,
html[data-ui="v2"] .rules11__x,
html[data-ui="v2"] .rules11__sec li {
    color: var(--v2-ink) !important;
}

html[data-ui="v2"] .btn-cu,
html[data-ui="v2"] .bk11 .fl11-fact--seats.is-low,
html[data-ui="v2"] .v11-err,
html[data-ui="v2"] .v11-err::before,
html[data-ui="v2"] .bk11 .form-control.is-invalid11,
html[data-ui="v2"] .form-control.is-invalid11,
html[data-ui="v2"] .form-control.is-invalid11 ~ label,
html[data-ui="v2"] .ri11__tag,
html[data-ui="v2"] .discount.discount1,
html[data-ui="v2"] .am11__msg,
html[data-ui="v2"] .cb .bad,
html[data-ui="v2"] .fe11-note,
html[data-ui="v2"] .fe11-note::before,
html[data-ui="v2"] .pay11-gwstate.is-dead {
    color: var(--v2-bad) !important;
}

html[data-ui="v2"] .bk11 .fl11-path__plane,
html[data-ui="v2"] .bk11 .fl11-fact--seats,
html[data-ui="v2"] .bk11 .fl11-sum__total b,
html[data-ui="v2"] .bk11 .detail__room-line,
html[data-ui="v2"] .bk11 .detail__room-count,
html[data-ui="v2"] .bk11 .room-count-chip,
html[data-ui="v2"] .rc11-extra__rate,
html[data-ui="v2"] .price-units,
html[data-ui="v2"] .bk11-cart__list li,
html[data-ui="v2"] .ri11__row--sum b,
html[data-ui="v2"] .ri11__off,
html[data-ui="v2"] .discount_style1,
html[data-ui="v2"] .menuBtnStyle1,
html[data-ui="v2"] .menuBtnStyle2,
html[data-ui="v2"] .am11__msg[data-am11-ok],
html[data-ui="v2"] .am11__links a,
html[data-ui="v2"] .am11__link,
html[data-ui="v2"] .cb .good,
html[data-ui="v2"] .bk11 .fl11-sex__opt.is-on,
html[data-ui="v2"] .bk11 .fl11-seat__lead,
html[data-ui="v2"] .bk11 .fl11-edit,
html[data-ui="v2"] .pay11-gwstate.is-live,
html[data-ui="v2"] .rules11__sec h3,
html[data-ui="v2"] .rules11-open {
    color: var(--v2-brand-ink) !important;
}


/* headings the legacy panel sheets (app4.css) paint, not ours */
html[data-ui="v2"] .page-header h4,
html[data-ui="v2"] .page-header h1,
html[data-ui="v2"] h1, html[data-ui="v2"] h2, html[data-ui="v2"] h3,
html[data-ui="v2"] h4, html[data-ui="v2"] h5, html[data-ui="v2"] h6 {
    color: var(--v2-ink);
}
/* …and the greys they set on body copy.
   DELIBERATELY NOT div/span: a one-class rule like .tag{color:#0b7a56} would
   lose to this and every intentional colour on the page would flatten to ink.
   Block elements only - they are the ones carrying paragraphs. */
html[data-ui="v2"] p, html[data-ui="v2"] li, html[data-ui="v2"] td,
html[data-ui="v2"] th, html[data-ui="v2"] label, html[data-ui="v2"] dd, html[data-ui="v2"] dt { color: inherit; }

/* ==========================================================================
   4. BASE
   ========================================================================== */

html[data-ui="v2"] body,
html[data-ui="v2"] body.asa-s11,
html[data-ui="v2"] body.bk11,
html[data-ui="v2"] body.pay11-body {
    background: var(--v2-bg) !important;
    color: var(--v2-ink) !important;
    font-size: var(--v2-t-md);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}
html[data-ui="v2"] h1, html[data-ui="v2"] h2, html[data-ui="v2"] h3,
html[data-ui="v2"] h4, html[data-ui="v2"] h5 {
    font-weight: 800; letter-spacing: -.015em; line-height: 1.45;
}
html[data-ui="v2"] a { color: var(--v2-brand-ink); text-decoration: none; }
html[data-ui="v2"] a:hover { color: var(--v2-brand); }
html[data-ui="v2"] hr { border-color: var(--v2-line); opacity: 1; }
html[data-ui="v2"] .text-muted, html[data-ui="v2"] small { color: var(--v2-muted) !important; }
html[data-ui="v2"] .text-success { color: var(--v2-brand-ink) !important; }
html[data-ui="v2"] .text-danger  { color: var(--v2-bad) !important; }

html[data-ui="v2"] :focus-visible {
    outline: 2px solid var(--v2-brand); outline-offset: 2px; border-radius: var(--v2-r-xs);
}
html[data-ui="v2"] ::selection { background: var(--v2-brand); color: var(--v2-on-brand); }
html[data-ui="v2"] * { scrollbar-width: thin; scrollbar-color: var(--v2-line-2) transparent; }
html[data-ui="v2"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-ui="v2"] ::-webkit-scrollbar-thumb {
    background: var(--v2-line-2); border-radius: 999px;
    border: 3px solid transparent; background-clip: content-box;
}

/* containers the panel sheets tint - they must not punch light holes */
html[data-ui="v2"] .main-content, html[data-ui="v2"] .bk-main,
html[data-ui="v2"] .container, html[data-ui="v2"] .container-fluid,
html[data-ui="v2"] .tab-content, html[data-ui="v2"] .tab-pane,
html[data-ui="v2"] .row, html[data-ui="v2"] [class^="col-"],
html[data-ui="v2"] .card, html[data-ui="v2"] .card-body {
    background: transparent !important;
}
html[data-ui="v2"] .card, html[data-ui="v2"] .card-body { border: 0; box-shadow: none; }

/* ==========================================================================
   5. CHROME
   ========================================================================== */

html[data-ui="v2"] .bk-topbar,
html[data-ui="v2"] .u11-top {
    position: sticky; top: 0; z-index: 900;
    display: flex; align-items: center; gap: 10px;
    padding: 9px clamp(12px, 3vw, 26px);
    background: color-mix(in srgb, var(--v2-surface) 82%, transparent) !important;
    border-bottom: 1px solid var(--v2-line);
    color: var(--v2-ink) !important;
    box-shadow: var(--v2-sh-1);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    html[data-ui="v2"] .bk-topbar, html[data-ui="v2"] .u11-top {
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        backdrop-filter: saturate(180%) blur(16px);
    }
}
html[data-ui="v2"] .bk-topbar__brand,
html[data-ui="v2"] .bk-topbar__user,
html[data-ui="v2"] .u11-top__brand {
    color: var(--v2-ink) !important; font-weight: 800;
    font-size: var(--v2-t-lg); letter-spacing: -.02em;
}
html[data-ui="v2"] .bk-topbar__brand::before {
    content: ""; display: inline-block; width: 9px; height: 9px;
    margin-inline-end: 8px; border-radius: 3px; vertical-align: 1px;
    background: linear-gradient(135deg, var(--v2-brand-2), var(--v2-brand));
}
html[data-ui="v2"] .bk-topbar__back,
html[data-ui="v2"] .bk-topbar__exit,
html[data-ui="v2"] .u11-nav__me {
    color: var(--v2-ink-2) !important; font-weight: 700; font-size: var(--v2-t-sm);
    padding: 6px 12px; border-radius: var(--v2-r-pill);
    border: 1px solid transparent; background: transparent;
    transition: background var(--v2-fast) var(--v2-ease), color var(--v2-fast) var(--v2-ease);
}
html[data-ui="v2"] .bk-topbar__back:hover,
html[data-ui="v2"] .bk-topbar__exit:hover,
html[data-ui="v2"] .u11-nav__me:hover {
    background: var(--v2-surface-2) !important; color: var(--v2-ink) !important;
    border-color: var(--v2-line);
}

/* THE SIGN-IN BUTTON.
   v2.0 gave it a brand-coloured glow, which on the dark bar turned into a
   halo and ate the label. A primary button needs contrast, not light. */
html[data-ui="v2"] .bk-topbar__acct,
html[data-ui="v2"] .u11-nav__in {
    background: var(--v2-brand) !important;
    color: var(--v2-on-brand) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 800; font-size: var(--v2-t-sm);
    padding: 8px 16px; border-radius: var(--v2-r-pill);
    transition: background var(--v2-fast) var(--v2-ease), transform var(--v2-fast) var(--v2-ease);
}
html[data-ui="v2"] .bk-topbar__acct:hover,
html[data-ui="v2"] .u11-nav__in:hover {
    background: var(--v2-brand-2) !important; color: var(--v2-on-brand) !important;
    transform: translateY(-1px); box-shadow: none !important;
}
html[data-ui="v2"] .bk-topbar__acct:focus-visible,
html[data-ui="v2"] .u11-nav__in:focus-visible {
    outline: 2px solid var(--v2-brand-2); outline-offset: 3px;
}
html[data-ui="v2"] .bk-topbar__credit {
    font-size: var(--v2-t-sm); color: var(--v2-ink-2) !important;
    background: var(--v2-surface-2); border: 1px solid var(--v2-line);
    padding: 5px 12px; border-radius: var(--v2-r-pill);
}
html[data-ui="v2"] .bk-topbar__credit b { color: var(--v2-brand-ink) !important; }

/* language switch - flags in equal pills */
html[data-ui="v2"] .s11-lang, html[data-ui="v2"] .u11-lang { gap: 4px; display: inline-flex; }
html[data-ui="v2"] .s11-lang a, html[data-ui="v2"] .u11-lang a {
    color: var(--v2-ink-2) !important; border-radius: var(--v2-r-pill) !important;
    border: 1px solid var(--v2-line) !important;
    background: var(--v2-surface) !important;
    padding: 5px 10px !important; font-size: var(--v2-t-xs); font-weight: 700;
    box-shadow: none !important;
}
html[data-ui="v2"] .s11-lang a.active, html[data-ui="v2"] .u11-lang a.active {
    background: var(--v2-brand-soft) !important; color: var(--v2-brand-ink) !important;
    border-color: var(--v2-brand-line) !important;
}
html[data-ui="v2"] .s11-lang a:hover { color: var(--v2-ink) !important; }

html[data-ui="v2"] .th11 {
    background: var(--v2-surface); border-color: var(--v2-line);
    color: var(--v2-ink-2); box-shadow: none;
}
html[data-ui="v2"] .th11 button:hover { background: var(--v2-surface-2); color: var(--v2-ink); }
html[data-ui="v2"] .th11__ui[aria-pressed="true"] { color: var(--v2-brand-ink); }
html[data-ui="v2"] .th11__ui[aria-pressed="true"] .th11__dot { background: var(--v2-brand); }

/* ==========================================================================
   6. PRIMITIVES
   ========================================================================== */

html[data-ui="v2"] .btn,
html[data-ui="v2"] .pay11-btn,
html[data-ui="v2"] .u11-submit,
html[data-ui="v2"] .am11__go {
    border-radius: var(--v2-r-sm);
    font-weight: 800; font-size: var(--v2-t-sm);
    padding: 11px 20px; border: 1px solid transparent;
    line-height: 1.4; text-shadow: none;
    transition: background var(--v2-fast) var(--v2-ease),
                transform var(--v2-fast) var(--v2-ease),
                box-shadow var(--v2-mid) var(--v2-ease);
}
html[data-ui="v2"] .btn-success,
html[data-ui="v2"] .btn-select,
html[data-ui="v2"] .pay11-btn--primary,
html[data-ui="v2"] .u11-submit,
html[data-ui="v2"] .am11__go,
html[data-ui="v2"] .bk11-cart__go,
html[data-ui="v2"] .btn-accept-reserve,
html[data-ui="v2"] .quick-search-from-group-button .btn {
    background: var(--v2-brand) !important;
    color: var(--v2-on-brand) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
html[data-ui="v2"] .btn-success:hover,
html[data-ui="v2"] .btn-select:hover,
html[data-ui="v2"] .pay11-btn--primary:hover,
html[data-ui="v2"] .u11-submit:hover,
html[data-ui="v2"] .am11__go:hover,
html[data-ui="v2"] .bk11-cart__go:hover,
html[data-ui="v2"] .quick-search-from-group-button .btn:hover {
    background: var(--v2-brand-2) !important;
    transform: translateY(-1px);
    box-shadow: var(--v2-sh-2) !important;
}
html[data-ui="v2"] .btn:active, html[data-ui="v2"] .pay11-btn:active { transform: translateY(0) scale(.99); }
html[data-ui="v2"] .btn-default, html[data-ui="v2"] .btn-secondary,
html[data-ui="v2"] .pay11-btn--ghost, html[data-ui="v2"] .u11-btn--ghost,
html[data-ui="v2"] .bk11-nav__btn {
    background: var(--v2-surface) !important; color: var(--v2-ink) !important;
    border: 1px solid var(--v2-line) !important; box-shadow: none !important;
}
html[data-ui="v2"] .btn-default:hover, html[data-ui="v2"] .pay11-btn--ghost:hover,
html[data-ui="v2"] .bk11-nav__btn:hover {
    background: var(--v2-surface-2) !important; border-color: var(--v2-line-2) !important;
}
html[data-ui="v2"] .btn[disabled], html[data-ui="v2"] button[disabled] {
    opacity: .5; box-shadow: none !important; transform: none !important; cursor: not-allowed;
}

/* ---- fields ---- */
html[data-ui="v2"] input[type="text"], html[data-ui="v2"] input[type="tel"],
html[data-ui="v2"] input[type="email"], html[data-ui="v2"] input[type="number"],
html[data-ui="v2"] input[type="password"], html[data-ui="v2"] input[type="search"],
html[data-ui="v2"] textarea, html[data-ui="v2"] select,
html[data-ui="v2"] .form-control, html[data-ui="v2"] .form-select,
html[data-ui="v2"] .pay11-field__input {
    background-color: var(--v2-surface) !important;
    color: var(--v2-ink) !important;
    border: 1.5px solid var(--v2-line) !important;
    border-radius: var(--v2-r-sm) !important;
    box-shadow: none !important;
    transition: border-color var(--v2-fast) var(--v2-ease), box-shadow var(--v2-fast) var(--v2-ease);
}
html[data-ui="v2"] input:hover, html[data-ui="v2"] select:hover,
html[data-ui="v2"] .form-control:hover { border-color: var(--v2-line-2) !important; }
html[data-ui="v2"] input:focus, html[data-ui="v2"] textarea:focus,
html[data-ui="v2"] select:focus, html[data-ui="v2"] .form-control:focus,
html[data-ui="v2"] .pay11-field__input:focus {
    border-color: var(--v2-brand) !important;
    box-shadow: 0 0 0 4px var(--v2-brand-soft) !important;
    outline: none !important;
}
html[data-ui="v2"] input::placeholder, html[data-ui="v2"] textarea::placeholder { color: var(--v2-muted); opacity: 1; }
html[data-ui="v2"] .pay11-field__label, html[data-ui="v2"] .am11__field span {
    color: var(--v2-ink-2) !important; font-weight: 700; font-size: var(--v2-t-xs);
}
html[data-ui="v2"] .u11-hint, html[data-ui="v2"] .am11__hint { color: var(--v2-muted) !important; }

/* checkboxes and radios - the filter rail is nothing but these */
html[data-ui="v2"] input[type="checkbox"], html[data-ui="v2"] input[type="radio"],
html[data-ui="v2"] .form-check-input {
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px; flex: 0 0 18px;
    border: 1.5px solid var(--v2-line-2) !important;
    background: var(--v2-surface) !important;
    border-radius: 6px; cursor: pointer; position: relative;
    transition: background var(--v2-fast) var(--v2-ease), border-color var(--v2-fast) var(--v2-ease);
}
html[data-ui="v2"] input[type="radio"], html[data-ui="v2"] .form-check-input[type="radio"] { border-radius: 50%; }
html[data-ui="v2"] input[type="checkbox"]:hover, html[data-ui="v2"] input[type="radio"]:hover { border-color: var(--v2-brand) !important; }
html[data-ui="v2"] input[type="checkbox"]:checked,
html[data-ui="v2"] input[type="radio"]:checked,
html[data-ui="v2"] .form-check-input:checked {
    background: var(--v2-brand) !important; border-color: var(--v2-brand) !important;
}
html[data-ui="v2"] input[type="checkbox"]:checked::after {
    content: ""; position: absolute; inset: 0;
    background: var(--v2-on-brand);
    clip-path: polygon(14% 44%, 0 60%, 39% 100%, 100% 22%, 84% 8%, 39% 68%);
    transform: scale(.62);
}
html[data-ui="v2"] input[type="radio"]:checked::after {
    content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--v2-on-brand);
}

/* the red state formerr11.php paints */
html[data-ui="v2"] .fe11-bad input, html[data-ui="v2"] input.fe11-bad,
html[data-ui="v2"] .fe11-bad .pay11-field__input, html[data-ui="v2"] .fe11-bad .form-control {
    border-color: var(--v2-bad) !important;
    box-shadow: 0 0 0 4px var(--v2-bad-soft) !important;
}
html[data-ui="v2"] .fe11-msg { color: var(--v2-bad) !important; }

/* ---- cards / alerts / tables ---- */
html[data-ui="v2"] .pay11-card, html[data-ui="v2"] .u11-card {
    border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r-xl) !important;
    box-shadow: var(--v2-sh-2);
    padding: clamp(20px, 3vw, 32px);
}
html[data-ui="v2"] .u11-card__title { font-size: var(--v2-t-xl); font-weight: 800; letter-spacing: -.02em; }
html[data-ui="v2"] .pay11-alert {
    border-radius: var(--v2-r); border: 1px solid var(--v2-line);
    font-size: var(--v2-t-sm); padding: 12px 16px;
}
html[data-ui="v2"] .pay11-alert--bad {
    background: var(--v2-bad-soft) !important; border-color: var(--v2-bad) !important;
    color: var(--v2-bad) !important;
}
html[data-ui="v2"] .pay11-alert--ok {
    background: var(--v2-brand-soft) !important; border-color: var(--v2-brand-line) !important;
    color: var(--v2-brand-ink) !important;
}
html[data-ui="v2"] table th {
    background: var(--v2-surface-2) !important; color: var(--v2-ink-2) !important;
    font-size: var(--v2-t-xs); font-weight: 800; border-color: var(--v2-line) !important;
}
html[data-ui="v2"] table td { border-color: var(--v2-line) !important; color: var(--v2-ink); }

/* ==========================================================================
   7. THE SEARCH PAGE
   ========================================================================== */

/* ---- the hero band ----
   search11.css:1354 pins it to #2f4858 with !important, which is why v2.0's
   white panel never appeared and the band stayed a flat slab in both schemes.
   Beaten here, and turned into a brand gradient that belongs to the palette. */
html[data-ui="v2"] .asa-s11 .s11-hero {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--v2-brand) 88%, #000 12%),
        color-mix(in srgb, var(--v2-brand) 55%, #0b2f3f 45%) 55%,
        var(--v2-bg-2) 190%) !important;
    border-radius: 0 !important;
    padding-block: clamp(18px, 3vw, 34px) !important;
    position: relative; isolation: isolate;
}
html[data-ui="v2"][data-scheme="dark"] .asa-s11 .s11-hero {
    background: linear-gradient(135deg, #0d2b25, #0a1a24 60%, var(--v2-bg) 150%) !important;
    border-bottom: 1px solid var(--v2-line);
}
/* the line-art skyline the band carries: keep it, calm it down */
html[data-ui="v2"] .asa-s11 .s11-hero > * { position: relative; z-index: 1; }
html[data-ui="v2"] .asa-s11 .s11-hero h1,
html[data-ui="v2"] .asa-s11 .s11-hero h2,
html[data-ui="v2"] .asa-s11 .s11-banner-head,
html[data-ui="v2"] .asa-s11 .s11-banner-head * { color: #fff !important; }
html[data-ui="v2"] .asa-s11 .s11-banner-head { text-shadow: 0 1px 12px rgba(0,0,0,.28); }

/* the white search card that sits in the band */
html[data-ui="v2"] .asa-s11 .quick-search {
    border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r-xl) !important;
    box-shadow: var(--v2-sh-3) !important;
    padding: clamp(12px, 1.8vw, 18px) !important;
}
html[data-ui="v2"] .asa-s11 .s11-hero .quick-search-from-group-box {
    border: 1.5px solid var(--v2-line) !important;
    border-radius: var(--v2-r) !important;
    padding: 9px 14px !important;
    transition: border-color var(--v2-fast) var(--v2-ease), box-shadow var(--v2-fast) var(--v2-ease);
}
html[data-ui="v2"] .asa-s11 .quick-search-from-group-box:focus-within {
    border-color: var(--v2-brand) !important;
    box-shadow: 0 0 0 4px var(--v2-brand-soft) !important;
    background: var(--v2-surface) !important;
}
html[data-ui="v2"] .asa-s11 .quick-search-from-group-box input,
html[data-ui="v2"] .asa-s11 .quick-search-from-group-box select {
    background: transparent !important; border: 0 !important;
    box-shadow: none !important; padding: 2px 0 !important;
    font-weight: 700; font-size: var(--v2-t-md); color: var(--v2-ink) !important;
}
html[data-ui="v2"] .asa-s11 .quick-search-from-group-box .title,
html[data-ui="v2"] .asa-s11 .quick-search-from-group-box label {
    color: var(--v2-muted) !important; font-size: var(--v2-t-xs); font-weight: 700;
}
html[data-ui="v2"] .asa-s11 .quick-search-from-group-button .btn {
    border-radius: var(--v2-r) !important; padding: 15px 28px !important;
    font-size: var(--v2-t-md); width: 100%;
}

/* ---- tabs ---- */
html[data-ui="v2"] .asa-s11 .quick-search-type.nav-tabs {
    border: 0 !important; gap: 4px;
    background: color-mix(in srgb, #000 18%, transparent);
    padding: 5px; border-radius: var(--v2-r-pill); display: inline-flex;
}
html[data-ui="v2"] .asa-s11 .quick-search-type li { border: 0; margin: 0; }
html[data-ui="v2"] .asa-s11 .quick-search-type li a,
html[data-ui="v2"] .asa-s11 .quick-search-type li > * {
    border: 0 !important; background: transparent !important;
    border-radius: var(--v2-r-pill) !important;
    color: rgba(255,255,255,.82) !important; font-weight: 800; font-size: var(--v2-t-sm);
    padding: 9px 22px !important;
    transition: background var(--v2-fast) var(--v2-ease), color var(--v2-fast) var(--v2-ease);
}
html[data-ui="v2"] .asa-s11 .quick-search-type li:hover > * { color: #fff !important; }
html[data-ui="v2"] .asa-s11 .quick-search-type li.selected > *,
html[data-ui="v2"] .asa-s11 .quick-search-type li.active > * {
    background: var(--v2-surface) !important; color: var(--v2-brand-ink) !important;
    box-shadow: var(--v2-sh-1);
}

/* ---- filter rail ---- */
html[data-ui="v2"] .asa-s11 .search-filter-area {
    border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r-lg) !important;
    box-shadow: var(--v2-sh-1);
    overflow: hidden;
}
html[data-ui="v2"] .asa-s11 .search-filter-area .filter-box {
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    border-bottom: 1px solid var(--v2-line) !important;
    margin: 0 !important; padding: 16px 18px !important;
}
html[data-ui="v2"] .asa-s11 .search-filter-area .filter-box:last-child { border-bottom: 0 !important; }
html[data-ui="v2"] .asa-s11 .s11-filter-head {
    border-bottom: 1px solid var(--v2-line) !important;
    padding: 14px 18px !important; font-weight: 800; font-size: var(--v2-t-md);
}
html[data-ui="v2"] .asa-s11 .s11-filter-head a,
html[data-ui="v2"] .asa-s11 .s11-filter-head button { color: var(--v2-brand-ink) !important; font-size: var(--v2-t-sm); }
html[data-ui="v2"] .asa-s11 .filter-box h5,
html[data-ui="v2"] .asa-s11 .filter-box .title {
    font-size: var(--v2-t-sm) !important; font-weight: 800; margin-bottom: 2px;
}
html[data-ui="v2"] .asa-s11 .filter-options {
    background: transparent !important; border: 0 !important; padding-top: 6px !important;
}
html[data-ui="v2"] .asa-s11 .search-filter-area label {
    font-size: var(--v2-t-sm) !important; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; gap: 9px; padding: 5px 0;
    transition: color var(--v2-fast) var(--v2-ease);
}
html[data-ui="v2"] .asa-s11 .search-filter-area label:hover { color: var(--v2-ink) !important; }
/* the legacy sheet fakes the box with label:before - ours is a real input */
html[data-ui="v2"] .asa-s11 .filter_stars > label:before,
html[data-ui="v2"] .asa-s11 .filter_cap > label:before,
html[data-ui="v2"] .asa-s11 .filter-room-kind > div > label:before {
    background: var(--v2-surface) !important;
    border-color: var(--v2-line-2) !important;
    border-radius: 6px !important;
}
html[data-ui="v2"] .asa-s11 .filter_stars > input:checked + label:before,
html[data-ui="v2"] .asa-s11 .filter_cap > input:checked + label:before,
html[data-ui="v2"] .asa-s11 .filter-room-kind > div > input:checked + label:before {
    background: var(--v2-brand) !important; border-color: var(--v2-brand) !important;
}
html[data-ui="v2"] .asa-s11 .chevron-area svg,
html[data-ui="v2"] .asa-s11 .chevron-area i { color: var(--v2-muted); }

/* the price range slider */
html[data-ui="v2"] .asa-s11 .filter-rate-range {
    background: var(--v2-surface-3) !important; height: 6px !important; border-radius: 999px;
}
html[data-ui="v2"] .asa-s11 .filter-rate-range-area {
    background: var(--v2-brand) !important; border-radius: 999px;
}
html[data-ui="v2"] .asa-s11 .filter-rate-range > span#min_rate,
html[data-ui="v2"] .asa-s11 .filter-rate-range > span#max_rate,
html[data-ui="v2"] .bk11 .price-range-knob {
    background: var(--v2-surface) !important;
    border: 3px solid var(--v2-brand) !important;
    box-shadow: var(--v2-sh-2) !important;
    width: 20px !important; height: 20px !important; border-radius: 50%;
    transition: transform var(--v2-fast) var(--v2-ease);
}
html[data-ui="v2"] .asa-s11 .filter-rate-range > span#min_rate:hover,
html[data-ui="v2"] .asa-s11 .filter-rate-range > span#max_rate:hover { transform: translateY(-50%) scale(1.12); }
html[data-ui="v2"] .asa-s11 .filter-rate { color: var(--v2-ink-2) !important; font-size: var(--v2-t-xs); font-weight: 700; }

/* «اعمال فیلتر» - v2.0 padded it into a box too small for its own label */
html[data-ui="v2"] .asa-s11 .s11-filter-apply {
    border-top: 1px solid var(--v2-line) !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}
html[data-ui="v2"] .asa-s11 .s11-filter-apply .btn {
    width: 100%; min-height: 46px; padding: 12px 18px !important;
    line-height: 1.4; white-space: nowrap; overflow: visible;
    display: flex; align-items: center; justify-content: center;
}

/* ---- sort bar ---- */
html[data-ui="v2"] .asa-s11 .s11-sort-btn {
    border: 1px solid var(--v2-line) !important;
    background: var(--v2-surface) !important;
    border-radius: var(--v2-r-pill) !important;
    padding: 8px 16px !important; font-weight: 700; font-size: var(--v2-t-xs);
    box-shadow: none !important;
}
html[data-ui="v2"] .asa-s11 .s11-sort-btn:hover { border-color: var(--v2-line-2) !important; }
html[data-ui="v2"] .asa-s11 .s11-sort-btn.active {
    background: var(--v2-brand) !important; color: var(--v2-on-brand) !important;
    border-color: transparent !important;
}

/* ---- result cards ---- */
html[data-ui="v2"] .asa-s11 .search-result-area ul > li {
    border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r-lg) !important;
    box-shadow: var(--v2-sh-1) !important;
    padding: 14px !important; gap: 14px;
    transition: transform var(--v2-mid) var(--v2-ease),
                box-shadow var(--v2-mid) var(--v2-ease),
                border-color var(--v2-mid) var(--v2-ease);
    content-visibility: auto; contain-intrinsic-size: 200px;
}
html[data-ui="v2"] .asa-s11 .search-result-area ul > li:hover {
    transform: translateY(-2px); box-shadow: var(--v2-sh-2) !important;
    border-color: var(--v2-line-2) !important;
}
html[data-ui="v2"] .asa-s11 .search-result-img {
    border-radius: var(--v2-r) !important; overflow: hidden;
    background: var(--v2-surface-3) !important;
}
html[data-ui="v2"] .asa-s11 .search-result-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--v2-slow) var(--v2-ease);
}
html[data-ui="v2"] .asa-s11 .search-result-area ul > li:hover .search-result-img img { transform: scale(1.05); }
html[data-ui="v2"] .asa-s11 .search-result-info h4 {
    font-size: var(--v2-t-lg) !important; font-weight: 800; letter-spacing: -.02em;
}
html[data-ui="v2"] .asa-s11 .s11-tags .tag {
    background: var(--v2-brand-soft) !important; color: var(--v2-brand-ink) !important;
    border: 1px solid var(--v2-brand-line) !important;
    border-radius: var(--v2-r-pill) !important; padding: 3px 10px !important;
    font-size: var(--v2-t-xs); font-weight: 700;
}
html[data-ui="v2"] .asa-s11 .s11-star { color: var(--v2-gold) !important; font-weight: 800; }
html[data-ui="v2"] .asa-s11 .s11-star svg { stroke: var(--v2-gold); fill: var(--v2-gold); }
html[data-ui="v2"] .asa-s11 .s11-loc svg { width: 14px; height: 14px; }

/* the price rail: one surface, a dashed seam, the amount in ink not orange */
html[data-ui="v2"] .asa-s11 .search-result-order {
    background: var(--v2-surface-2) !important;
    border: 1px dashed var(--v2-line) !important;
    border-radius: var(--v2-r) !important;
    padding: 14px 16px !important;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; text-align: center; min-width: 190px;
}
html[data-ui="v2"] .asa-s11 .search-result-order > div:nth-child(1) {
    font-size: var(--v2-t-xs) !important; font-weight: 700;
}
html[data-ui="v2"] .asa-s11 .search-result-order > div:nth-child(2) {
    font-size: var(--v2-t-xl) !important; font-weight: 850;
    color: var(--v2-price) !important; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; line-height: 1.25;
}
html[data-ui="v2"] .asa-s11 .search-result-order > div:nth-child(2) span {
    font-size: var(--v2-t-xs) !important; font-weight: 700;
    color: var(--v2-muted) !important; margin-inline-start: 4px;
}
html[data-ui="v2"] .asa-s11 .search-result-order .btn { width: 100%; margin-top: 2px; }

/* ==========================================================================
   8. THE BOOKING FUNNEL
   ========================================================================== */

html[data-ui="v2"] .bk11 { background: var(--v2-bg) !important; color: var(--v2-ink); }

/* the search bar above step 1 */
html[data-ui="v2"] .bk11 .bk-searchbar {
    background: var(--v2-surface) !important;
    border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r-xl) !important;
    box-shadow: var(--v2-sh-1);
    padding: clamp(10px, 1.6vw, 16px) !important;
}
html[data-ui="v2"] .bk11 .bk-searchbar__row { background: transparent !important; border: 0 !important; }
html[data-ui="v2"] .bk11 .bk-searchbar__field {
    border: 1.5px solid var(--v2-line) !important; border-radius: var(--v2-r) !important;
    padding: 9px 14px !important;
}
html[data-ui="v2"] .bk11 .bk-searchbar__field:focus-within {
    border-color: var(--v2-brand) !important; box-shadow: 0 0 0 4px var(--v2-brand-soft) !important;
}
html[data-ui="v2"] .bk11 .bk-searchbar__label { color: var(--v2-muted) !important; font-size: var(--v2-t-xs); font-weight: 700; }
html[data-ui="v2"] .bk11 .bk-searchbar__value,
html[data-ui="v2"] .bk11 .bk-searchbar__select { color: var(--v2-ink) !important; font-weight: 700; }
html[data-ui="v2"] .bk11 .bk-searchbar__cap { color: var(--v2-ink-2) !important; }
html[data-ui="v2"] .bk11 .bk-searchbar__btn { border-radius: var(--v2-r) !important; padding: 13px 26px !important; }

/* gallery + hotel head */
html[data-ui="v2"] .bk11 .gallery img,
html[data-ui="v2"] .bk11 .bk11-hotelhead__img img { border-radius: var(--v2-r); }
html[data-ui="v2"] .bk11 .gallery__more {
    background: color-mix(in srgb, var(--v2-surface) 92%, transparent) !important;
    color: var(--v2-ink) !important; border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r-pill) !important; font-weight: 700; box-shadow: var(--v2-sh-2);
}
html[data-ui="v2"] .bk11 .bk11-hotelhead__name { font-size: var(--v2-t-xl); font-weight: 850; letter-spacing: -.02em; }
html[data-ui="v2"] .bk11 .bk11-hotelhead__meta,
html[data-ui="v2"] .bk11 .bk11-hotelhead__addr { color: var(--v2-ink-2) !important; font-size: var(--v2-t-sm); }
html[data-ui="v2"] .bk11 .bk11-hotelhead__star { color: var(--v2-gold) !important; }
html[data-ui="v2"] .bk11 .hotel-sidenav { border: 1px solid var(--v2-line) !important; border-radius: var(--v2-r); }

/* dividers + section titles */
html[data-ui="v2"] .bk11 .divider-line { background: var(--v2-line) !important; }
html[data-ui="v2"] .bk11 .divider-title,
html[data-ui="v2"] .asa-s11 .s11-divider-title {
    font-weight: 800; font-size: var(--v2-t-lg); letter-spacing: -.02em;
}
html[data-ui="v2"] .bk11 .divider-info { color: var(--v2-muted) !important; font-size: var(--v2-t-sm); }
html[data-ui="v2"] .bk11 .divider-icon { color: var(--v2-brand) !important; }

/* the stepper */
html[data-ui="v2"] .bk11 .reserve__steps-box .step__item {
    color: var(--v2-muted) !important; font-weight: 700; font-size: var(--v2-t-sm);
    border-color: var(--v2-line) !important;
}
html[data-ui="v2"] .bk11 .step__item.active, html[data-ui="v2"] .bk11 .step__item.done { color: var(--v2-brand-ink) !important; }
html[data-ui="v2"] .bk11 .step__item-divider { background: var(--v2-line) !important; }
html[data-ui="v2"] .bk11 .step__item.active .step__item-divider,
html[data-ui="v2"] .bk11 .step__item.done .step__item-divider { background: var(--v2-brand) !important; }

/* room cards */
html[data-ui="v2"] .bk11 section.rooms .card-package,
html[data-ui="v2"] .bk11 .rooms-card .room-item-card,
html[data-ui="v2"] .bk11 .card__dateil-container {
    border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r-lg) !important;
    box-shadow: var(--v2-sh-1) !important;
    transition: box-shadow var(--v2-mid) var(--v2-ease), border-color var(--v2-mid) var(--v2-ease);
}
html[data-ui="v2"] .bk11 section.rooms .card-package:hover {
    box-shadow: var(--v2-sh-2) !important; border-color: var(--v2-line-2) !important;
}
html[data-ui="v2"] .bk11 section.rooms .card-package:has(.btn__selected) {
    border-color: var(--v2-brand) !important;
    box-shadow: 0 0 0 3px var(--v2-brand-soft), var(--v2-sh-1) !important;
}
html[data-ui="v2"] .bk11 .card-title { font-size: var(--v2-t-lg); font-weight: 800; }
html[data-ui="v2"] .bk11 .detail-text, html[data-ui="v2"] .bk11 .detail__room-title { color: var(--v2-ink-2) !important; }

/* the capacity / diet badges - legacy peach on dark was unreadable */
html[data-ui="v2"] .bk11 .capacity-box,
html[data-ui="v2"] .bk11 section.rooms .card-package > .room-item .capacity-box {
    border: 1px solid var(--v2-line) !important; border-radius: var(--v2-r-sm) !important;
}
html[data-ui="v2"] .bk11 .capacity-box .item-person,
html[data-ui="v2"] .bk11 .capacity-box .item-extra,
html[data-ui="v2"] .bk11 .capacity-box .item-number { color: var(--v2-chip-ink) !important; font-weight: 700; }
html[data-ui="v2"] .bk11 .tag, html[data-ui="v2"] .bk11 .badge-meal {
    background: var(--v2-chip) !important; color: var(--v2-chip-ink) !important;
    border: 1px solid var(--v2-line) !important; border-radius: var(--v2-r-pill) !important;
    font-weight: 700; font-size: var(--v2-t-xs);
}
html[data-ui="v2"] .bk11 .text-danger, html[data-ui="v2"] .bk11 .room-left { color: var(--v2-urgent) !important; font-weight: 700; }

/* prices */
html[data-ui="v2"] .bk11 .price, html[data-ui="v2"] .bk11 .price-box,
html[data-ui="v2"] .bk11 .room-line-price {
    color: var(--v2-price) !important; font-weight: 850;
    font-size: var(--v2-t-xl); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
html[data-ui="v2"] .bk11 .price-old {
    color: var(--v2-muted) !important; text-decoration: line-through;
    font-weight: 600; font-size: var(--v2-t-sm);
}
html[data-ui="v2"] .bk11 .price-units, html[data-ui="v2"] .bk11 .price-currency,
html[data-ui="v2"] .bk11 .price-info-icon { color: var(--v2-muted) !important; font-size: var(--v2-t-xs); font-weight: 700; }

/* the -/+ stepper */
html[data-ui="v2"] .bk11 .rc11 {
    background: var(--v2-surface-2) !important; border: 1.5px solid var(--v2-line) !important;
    border-radius: var(--v2-r-pill) !important; padding: 3px !important;
}
html[data-ui="v2"] .bk11 .rc11__btn, html[data-ui="v2"] .bk11 .item-plus, html[data-ui="v2"] .bk11 .item-cross {
    background: var(--v2-surface) !important; border: 1px solid var(--v2-line) !important;
    color: var(--v2-ink) !important; border-radius: 50% !important;
    width: 32px; height: 32px; font-weight: 800;
    transition: background var(--v2-fast) var(--v2-ease), color var(--v2-fast) var(--v2-ease), transform var(--v2-fast) var(--v2-ease);
}
html[data-ui="v2"] .bk11 .rc11__btn:hover { background: var(--v2-brand) !important; color: var(--v2-on-brand) !important; border-color: transparent !important; }
html[data-ui="v2"] .bk11 .rc11__n { font-weight: 850; font-size: var(--v2-t-md); color: var(--v2-ink) !important; }

/* links inside a room card (امکانات اتاق / قوانین کنسلی / جزییات قیمت) */
html[data-ui="v2"] .bk11 .btn-facilities, html[data-ui="v2"] .bk11 .btn-terms,
html[data-ui="v2"] .bk11 .price-info-icon + span { color: var(--v2-brand-ink) !important; font-weight: 700; }

/* the cart */
html[data-ui="v2"] .bk11 .bk11-cart,
html[data-ui="v2"] .bk11 .card__next-step-mobile {
    background: var(--v2-surface) !important;
    border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r-lg) !important;
    box-shadow: var(--v2-sh-2) !important;
    color: var(--v2-ink) !important;
}
@media (min-width: 992px) { html[data-ui="v2"] .bk11 .bk11-cart__inner { position: sticky; top: 82px; } }
html[data-ui="v2"] .bk11 .bk11-cart__title { font-size: var(--v2-t-lg); font-weight: 800; color: var(--v2-ink) !important; }
html[data-ui="v2"] .bk11 .bk11-cart__lines, html[data-ui="v2"] .bk11 .bk11-cart__list { color: var(--v2-ink-2) !important; font-size: var(--v2-t-sm); }
html[data-ui="v2"] .bk11 .bk11-cart__foot { border-top: 1px dashed var(--v2-line) !important; }
html[data-ui="v2"] .bk11 .bk11-cart__sum-label { color: var(--v2-muted) !important; font-size: var(--v2-t-xs); }
html[data-ui="v2"] .bk11 .bk11-cart__sum-value {
    color: var(--v2-price) !important; font-weight: 850;
    font-size: var(--v2-t-xl); font-variant-numeric: tabular-nums;
}
html[data-ui="v2"] .bk11 .bk11-cart__go { width: 100%; border-radius: var(--v2-r) !important; padding: 13px !important; }

/* guest form + payment */
html[data-ui="v2"] .bk11 .form__input-box, html[data-ui="v2"] .bk11 .card__form-input-container {
    border: 1px solid var(--v2-line) !important; border-radius: var(--v2-r-lg) !important;
    background: var(--v2-surface) !important; box-shadow: var(--v2-sh-1);
}
html[data-ui="v2"] .bk11 .form__title { font-weight: 800; font-size: var(--v2-t-lg); color: var(--v2-ink) !important; }
html[data-ui="v2"] .pay11-methods__title, html[data-ui="v2"] .pay11-banks__title { color: var(--v2-ink) !important; font-weight: 800; }
html[data-ui="v2"] .pay11-method, html[data-ui="v2"] .pay11-bank, html[data-ui="v2"] .bk11 .gateway-item {
    border: 1.5px solid var(--v2-line) !important; border-radius: var(--v2-r) !important;
    padding: 14px 16px !important;
    transition: border-color var(--v2-fast) var(--v2-ease), box-shadow var(--v2-fast) var(--v2-ease);
}
html[data-ui="v2"] .pay11-method:hover, html[data-ui="v2"] .pay11-bank:hover { border-color: var(--v2-line-2) !important; }
html[data-ui="v2"] .pay11-method:has(input:checked) {
    border-color: var(--v2-brand) !important; box-shadow: 0 0 0 4px var(--v2-brand-soft) !important;
}
html[data-ui="v2"] .pay11-method:has(input:checked) .pay11-method__dot {
    border-color: var(--v2-brand) !important; background: var(--v2-brand) !important;
    box-shadow: inset 0 0 0 3px var(--v2-surface) !important;
}
html[data-ui="v2"] .pay11-method__label { font-weight: 800; color: var(--v2-ink) !important; }
html[data-ui="v2"] .pay11-method__note, html[data-ui="v2"] .pay11-note { color: var(--v2-muted) !important; font-size: var(--v2-t-xs); }
html[data-ui="v2"] .pay11-payable {
    background: var(--v2-brand-soft) !important;
    border: 1px solid var(--v2-brand-line) !important;
    border-radius: var(--v2-r-lg) !important;
}
html[data-ui="v2"] .pay11-payable__label { color: var(--v2-ink-2) !important; font-weight: 700; }
html[data-ui="v2"] .pay11-payable__amount {
    color: var(--v2-brand-ink) !important; font-weight: 850;
    font-size: var(--v2-t-2xl); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
html[data-ui="v2"] .pay11-result, html[data-ui="v2"] .bk11 .reserve-final-container .card {
    border: 1px solid var(--v2-line) !important; border-radius: var(--v2-r-xl) !important;
    box-shadow: var(--v2-sh-2) !important;
}

/* lightbox */
html[data-ui="v2"] .bk11 .bk-lightbox { background: rgba(5,10,18,.88) !important; }
html[data-ui="v2"] .bk11 .bk-lightbox__panel { border-radius: var(--v2-r-xl) !important; box-shadow: var(--v2-sh-3) !important; }
html[data-ui="v2"] .bk11 .bk-lightbox__title { color: var(--v2-ink) !important; font-weight: 800; }
html[data-ui="v2"] .bk11 .bk-lightbox__nav {
    background: var(--v2-surface) !important; border: 1px solid var(--v2-line) !important;
    color: var(--v2-ink) !important; border-radius: 50%; box-shadow: var(--v2-sh-2);
}
html[data-ui="v2"] .bk11 .bk-lightbox__thumbs img.active { outline: 3px solid var(--v2-brand); }

/* ==========================================================================
   9. GUEST PAGES + OVERLAY
   ========================================================================== */

html[data-ui="v2"] .u11-card__lead { color: var(--v2-ink-2) !important; }
html[data-ui="v2"] .u11-links a, html[data-ui="v2"] .u11-linkbtn { color: var(--v2-brand-ink) !important; font-weight: 700; }
html[data-ui="v2"] .u11-linkbtn[disabled] { color: var(--v2-muted) !important; }
html[data-ui="v2"] .u11-timer, html[data-ui="v2"] .u11-count { color: var(--v2-muted) !important; }
html[data-ui="v2"] .u11-otp {
    background: var(--v2-brand-soft) !important; color: var(--v2-brand-ink) !important;
    border-radius: var(--v2-r); padding: 10px 14px; font-weight: 700;
}
html[data-ui="v2"] .u11-tabs a { color: var(--v2-ink-2) !important; border-radius: var(--v2-r-pill) !important; font-weight: 700; }
html[data-ui="v2"] .u11-tabs a.on { background: var(--v2-brand-soft) !important; color: var(--v2-brand-ink) !important; }
html[data-ui="v2"] .u11-item { border: 1px solid var(--v2-line) !important; border-radius: var(--v2-r) !important; }
html[data-ui="v2"] .u11-empty { color: var(--v2-muted) !important; }

html[data-ui="v2"] .am11__box {
    background: var(--v2-surface) !important; border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r-xl) !important; box-shadow: var(--v2-sh-3) !important;
    color: var(--v2-ink) !important;
}
html[data-ui="v2"] .am11__tab { color: var(--v2-ink-2) !important; border-radius: var(--v2-r-pill) !important; font-weight: 800; }
html[data-ui="v2"] .am11__tab.on, html[data-ui="v2"] .am11__tab[aria-selected="true"] {
    background: var(--v2-brand-soft) !important; color: var(--v2-brand-ink) !important;
}
html[data-ui="v2"] .am11__field input { background: var(--v2-surface) !important; }
html[data-ui="v2"] .am11__link { color: var(--v2-brand-ink) !important; }
html[data-ui="v2"] .am11-bar {
    background: color-mix(in srgb, var(--v2-surface) 90%, transparent) !important;
    border-top: 1px solid var(--v2-line) !important; color: var(--v2-ink) !important;
}

/* ==========================================================================
   10. WIDGETS
   ========================================================================== */

html[data-ui="v2"] .select2-container--default .select2-selection--single,
html[data-ui="v2"] .select2-container--default .select2-selection--multiple {
    background: var(--v2-surface) !important; border: 1.5px solid var(--v2-line) !important;
    border-radius: var(--v2-r-sm) !important; height: auto; padding: 6px 10px;
}
html[data-ui="v2"] .select2-container--default .select2-selection__rendered { color: var(--v2-ink) !important; font-weight: 700; }
html[data-ui="v2"] .select2-container--default .select2-selection__placeholder { color: var(--v2-muted) !important; }
html[data-ui="v2"] .select2-dropdown {
    background: var(--v2-surface) !important; border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r) !important; box-shadow: var(--v2-sh-3) !important; overflow: hidden;
}
html[data-ui="v2"] .select2-results__option { color: var(--v2-ink-2) !important; font-size: var(--v2-t-sm); padding: 9px 14px; }
html[data-ui="v2"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--v2-brand-soft) !important; color: var(--v2-brand-ink) !important;
}
html[data-ui="v2"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--v2-surface-2) !important; color: var(--v2-ink) !important;
}
html[data-ui="v2"] .select2-search--dropdown .select2-search__field {
    background: var(--v2-surface-2) !important; color: var(--v2-ink) !important;
    border: 1.5px solid var(--v2-line) !important; border-radius: var(--v2-r-xs) !important;
}

html[data-ui="v2"] .datepicker, html[data-ui="v2"] .datepicker-dropdown {
    background: var(--v2-surface) !important; border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r) !important; box-shadow: var(--v2-sh-3) !important; padding: 10px;
}
html[data-ui="v2"] .datepicker table tr td, html[data-ui="v2"] .datepicker table tr th {
    color: var(--v2-ink) !important; border-radius: var(--v2-r-xs) !important;
}
html[data-ui="v2"] .datepicker table tr td.day:hover,
html[data-ui="v2"] .datepicker table tr th:hover { background: var(--v2-surface-2) !important; }
html[data-ui="v2"] .datepicker table tr td.active,
html[data-ui="v2"] .datepicker table tr td.active:hover,
html[data-ui="v2"] .datepicker table tr td.range-start,
html[data-ui="v2"] .datepicker table tr td.range-end {
    background: var(--v2-brand) !important; color: var(--v2-on-brand) !important; background-image: none !important;
}
html[data-ui="v2"] .datepicker table tr td.range { background: var(--v2-brand-soft) !important; color: var(--v2-brand-ink) !important; }
html[data-ui="v2"] .datepicker table tr td.disabled,
html[data-ui="v2"] .datepicker table tr td.old,
html[data-ui="v2"] .datepicker table tr td.new { color: var(--v2-muted) !important; opacity: .5; }
html[data-ui="v2"] .datepicker table tr td.today { box-shadow: inset 0 0 0 1.5px var(--v2-brand); }

/* ==========================================================================
   11. MOTION / PERFORMANCE / RESPONSIVE / PRINT
   ========================================================================== */

@view-transition { navigation: none; }
::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: .26s; animation-timing-function: cubic-bezier(.2,.7,.2,1);
}
html.th11-swapping body { transition: opacity .15s linear; opacity: .4; }

@keyframes v2-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html[data-ui="v2"] .asa-s11 .search-result-area ul > li,
html[data-ui="v2"] .u11-card, html[data-ui="v2"] .pay11-card { animation: v2-rise .3s var(--v2-ease) both; }
html[data-ui="v2"] .asa-s11 .search-result-area ul > li:nth-child(1) { animation-delay: .02s; }
html[data-ui="v2"] .asa-s11 .search-result-area ul > li:nth-child(2) { animation-delay: .05s; }
html[data-ui="v2"] .asa-s11 .search-result-area ul > li:nth-child(3) { animation-delay: .08s; }
html[data-ui="v2"] .asa-s11 .search-result-area ul > li:nth-child(4) { animation-delay: .11s; }

@media (prefers-reduced-motion: reduce) {
    html[data-ui="v2"] *, html[data-ui="v2"] *::before, html[data-ui="v2"] *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    html[data-ui="v2"] .search-result-area ul > li:hover .search-result-img img { transform: none; }
}

@media (max-width: 768px) {
    html[data-ui="v2"] .bk-topbar, html[data-ui="v2"] .u11-top { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
    html[data-ui="v2"] .bk-topbar__credit { display: none; }
    html[data-ui="v2"] .th11 button { padding: 5px 9px; font-size: .7rem; }
    html[data-ui="v2"] .asa-s11 .quick-search-type.nav-tabs { display: flex; width: 100%; }
    html[data-ui="v2"] .asa-s11 .quick-search-type li { flex: 1; text-align: center; }
    html[data-ui="v2"] .asa-s11 .search-result-order {
        min-width: 0; flex-direction: row; justify-content: space-between; text-align: start;
    }
    html[data-ui="v2"] .asa-s11 .search-result-order .btn { width: auto; }
}

@media print {
    html[data-ui="v2"] .bk-topbar, html[data-ui="v2"] .u11-top, html[data-ui="v2"] .th11,
    html[data-ui="v2"] .am11-bar { display: none !important; }
    html[data-ui="v2"] body { background: #fff !important; color: #000 !important; }
    html[data-ui="v2"] .pay11-card, html[data-ui="v2"] .u11-card { box-shadow: none; border-color: #ccc; }
}

/* dark: photographs are the one thing that must NOT be tinted, but the page
   behind a transparent PNG must be */
html[data-ui="v2"][data-scheme="dark"] .loading_area,
html[data-ui="v2"][data-scheme="dark"] .loader {
    background: color-mix(in srgb, var(--v2-bg) 78%, transparent) !important;
}

/* ==========================================================================
   12. THE FINISH
   --------------------------------------------------------------------------
   The pieces the neutraliser cannot reason about (a dot that is white because
   an unchecked step SHOULD be white, a dashed black rule at 20% opacity), and
   the flourishes that make v2 look designed rather than merely repainted.
   ========================================================================== */

/* ---- the stepper: three dots and two rules, legible on any ground ---- */
html[data-ui="v2"] .bk11 .reserve__steps-box .step__item {
    background-color: var(--v2-surface-3) !important;
    border: 2px solid var(--v2-line-2) !important;
    box-shadow: none !important;
    transition: background var(--v2-mid) var(--v2-ease), border-color var(--v2-mid) var(--v2-ease);
}
html[data-ui="v2"] .bk11 .reserve__steps-box .step__item.active {
    background-color: var(--v2-surface) !important;
    border: 3px solid var(--v2-brand) !important;
    box-shadow: 0 0 0 4px var(--v2-brand-soft) !important;
}
html[data-ui="v2"] .bk11 .reserve__steps-box .step__item.passed {
    background-color: var(--v2-brand) !important;
    border: 3px solid var(--v2-brand) !important;
}
html[data-ui="v2"] .bk11 .reserve__steps-box .step__item-divider {
    border: 2px dashed var(--v2-line-2) !important; opacity: 1 !important;
}
html[data-ui="v2"] .bk11 .reserve__steps-box .step__item-divider.passed {
    border: 2px solid var(--v2-brand) !important;
}
html[data-ui="v2"] .bk11 .reserve__steps-title-box span { color: var(--v2-ink-2) !important; font-weight: 700; }

/* ---- the hotel identity strip (#f4f7f6 + #22313a + #6b7780) ---- */
html[data-ui="v2"] .bk11 .bk11-hotelhead {
    background: var(--v2-surface-2) !important;
    border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r) !important;
    padding: .7rem .8rem !important;
}
html[data-ui="v2"] .bk11 .bk11-hotelhead__name { color: var(--v2-ink) !important; font-size: var(--v2-t-md); font-weight: 800; }
html[data-ui="v2"] .bk11 .bk11-hotelhead__meta,
html[data-ui="v2"] .bk11 .bk11-hotelhead__addr { color: var(--v2-muted) !important; }
html[data-ui="v2"] .bk11 .bk11-hotelhead__star { color: var(--v2-gold) !important; }
html[data-ui="v2"] .bk11 .bk11-hotelhead__img { border-radius: var(--v2-r-sm); }

/* ---- capacity chips: one shape, one ink, no stray crosses ---- */
html[data-ui="v2"] .bk11 .capacity-box {
    background: var(--v2-surface-2) !important;
    border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r-pill) !important;
    padding: .25rem .6rem !important; gap: .35rem;
}
html[data-ui="v2"] .bk11 .capacity-box .item-person,
html[data-ui="v2"] .bk11 .capacity-box .item-extra,
html[data-ui="v2"] .bk11 .capacity-box .item-number { color: var(--v2-ink-2) !important; font-weight: 700; }
html[data-ui="v2"] .bk11 .capacity-box .item-cross::after { color: var(--v2-muted) !important; }
html[data-ui="v2"] .bk11 .room-count-chip {
    background: var(--v2-brand-soft) !important; color: var(--v2-brand-ink) !important;
    border: 1px solid var(--v2-brand-line) !important; border-radius: var(--v2-r-pill) !important;
    font-weight: 700; font-size: var(--v2-t-xs); padding: 2px 10px;
}

/* ---- section dividers on both pages ---- */
html[data-ui="v2"] .divider-title, html[data-ui="v2"] .section-divider .divider-title,
html[data-ui="v2"] .s11-divider-title, html[data-ui="v2"] .divider-info {
    color: var(--v2-ink) !important;
}
html[data-ui="v2"] .divider-info { color: var(--v2-muted) !important; }
html[data-ui="v2"] .divider-line, html[data-ui="v2"] .divider { background: var(--v2-line) !important; border-color: var(--v2-line) !important; }

/* ---- the loader: invisible on dark because it was a white veil ---- */
html[data-ui="v2"] .loading_area, html[data-ui="v2"] .loader, html[data-ui="v2"] .overlay1 {
    background: color-mix(in srgb, var(--v2-bg) 72%, transparent) !important;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
html[data-ui="v2"] .loading_area::after, html[data-ui="v2"] .loader::after {
    border-color: var(--v2-brand) transparent var(--v2-brand) transparent !important;
}
/* a determinate-looking bar for the ajax search, since the veil alone reads as
   "nothing is happening" on a dark ground */
@keyframes v2-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }
html[data-ui="v2"] .loading_area::before {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--v2-brand-2), transparent);
    animation: v2-bar 1.1s var(--v2-ease) infinite;
}

/* ---- payment method, checked: readable in both schemes ---- */
html[data-ui="v2"] .pay11-method:has(input:checked),
html[data-ui="v2"] .bk11 .gateway-item.is-active {
    background: var(--v2-brand-soft) !important;
    border-color: var(--v2-brand) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--v2-brand) 18%, transparent) !important;
}
html[data-ui="v2"] .pay11-method:has(input:checked) .pay11-method__label,
html[data-ui="v2"] .pay11-method:has(input:checked) .pay11-method__text {
    color: var(--v2-brand-ink) !important; font-weight: 800;
}

/* ==========================================================================
   13. THE FLOURISHES
   ========================================================================== */

/* ---- a living hero. Two brand blooms drifting behind the panel, at a size
   the GPU composites without repainting. Off for reduced-motion. ---- */
html[data-ui="v2"] .asa-s11 .s11-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(38% 60% at 18% 20%, color-mix(in srgb, var(--v2-brand-2) 46%, transparent), transparent 70%),
        radial-gradient(34% 55% at 82% 78%, color-mix(in srgb, #0ea5e9 30%, transparent), transparent 72%);
    filter: blur(28px); opacity: .55;
}
@media (prefers-reduced-motion: no-preference) {
    @keyframes v2-drift {
        0%   { transform: translate3d(0,0,0) scale(1); }
        50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
        100% { transform: translate3d(0,0,0) scale(1); }
    }
    html[data-ui="v2"] .asa-s11 .s11-hero::after { animation: v2-drift 18s ease-in-out infinite; will-change: transform; }
}

/* ---- gradient-ring cards. border-box/padding-box double background: a real
   1px gradient border, not a shadow pretending to be one. ---- */
html[data-ui="v2"] .asa-s11 .search-result-area ul > li:hover,
html[data-ui="v2"] .bk11 section.rooms .card-package:hover {
    border-color: transparent !important;
    background:
        linear-gradient(var(--v2-surface), var(--v2-surface)) padding-box,
        linear-gradient(135deg,
            color-mix(in srgb, var(--v2-brand) 70%, transparent),
            color-mix(in srgb, var(--v2-brand) 6%, transparent) 55%,
            transparent) border-box !important;
    border: 1px solid transparent !important;
}

/* ---- the primary CTA gets a light sweep on hover ---- */
html[data-ui="v2"] .btn-success, html[data-ui="v2"] .btn-select,
html[data-ui="v2"] .pay11-btn--primary, html[data-ui="v2"] .u11-submit,
html[data-ui="v2"] .bk11-cart__go, html[data-ui="v2"] .btn-accept-reserve {
    position: relative; overflow: hidden; isolation: isolate;
    background-image: linear-gradient(180deg,
        color-mix(in srgb, #fff 14%, transparent), transparent 60%) !important;
}
html[data-ui="v2"] .btn-success::after, html[data-ui="v2"] .btn-select::after,
html[data-ui="v2"] .pay11-btn--primary::after, html[data-ui="v2"] .u11-submit::after,
html[data-ui="v2"] .bk11-cart__go::after {
    content: ""; position: absolute; inset: 0 auto 0 -40%; width: 35%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    transform: skewX(-18deg); transition: left .5s var(--v2-ease); z-index: -1;
}
html[data-ui="v2"] .btn-success:hover::after, html[data-ui="v2"] .btn-select:hover::after,
html[data-ui="v2"] .pay11-btn--primary:hover::after, html[data-ui="v2"] .u11-submit:hover::after,
html[data-ui="v2"] .bk11-cart__go:hover::after { left: 105%; }
@media (prefers-reduced-motion: reduce) {
    html[data-ui="v2"] .btn-success::after, html[data-ui="v2"] .pay11-btn--primary::after { display: none; }
}

/* ---- prices get optical alignment and a soft rise on the card hover ---- */
html[data-ui="v2"] .asa-s11 .search-result-order {
    transition: background var(--v2-mid) var(--v2-ease), border-color var(--v2-mid) var(--v2-ease);
}
html[data-ui="v2"] .asa-s11 .search-result-area ul > li:hover .search-result-order {
    background: var(--v2-brand-soft) !important; border-color: var(--v2-brand-line) !important;
}

/* ---- cards reveal as they enter the viewport, where the browser can do it
   without javascript (scroll-driven animations) ---- */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        html[data-ui="v2"] .asa-s11 .search-result-area ul > li,
        html[data-ui="v2"] .bk11 section.rooms .card-package {
            animation: v2-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 40%;
        }
    }
}

/* ---- a skeleton the ajax can borrow: <div class="v2-skeleton"> ---- */
@keyframes v2-shimmer { to { background-position: -200% 0; } }
html[data-ui="v2"] .v2-skeleton {
    background: linear-gradient(90deg, var(--v2-surface-2) 25%,
                color-mix(in srgb, var(--v2-line) 65%, var(--v2-surface-2)) 37%,
                var(--v2-surface-2) 63%);
    background-size: 200% 100%; animation: v2-shimmer 1.25s linear infinite;
    border-radius: var(--v2-r-xs); color: transparent !important;
}

/* ---- typography: one optical size up for the numbers that matter ---- */
html[data-ui="v2"] .asa-s11 .search-result-order > div:nth-child(2),
html[data-ui="v2"] .bk11 .bk11-cart__sum-value,
html[data-ui="v2"] .pay11-payable__amount,
html[data-ui="v2"] .bk11 .price {
    font-feature-settings: "ss01" 1, "tnum" 1; letter-spacing: -.025em;
}

/* ---- dark: photographs keep their own light, everything else follows ---- */
html[data-ui="v2"][data-scheme="dark"] .search-result-img img,
html[data-ui="v2"][data-scheme="dark"] .bk11-hotelhead__img,
html[data-ui="v2"][data-scheme="dark"] .gallery img { filter: brightness(.96) saturate(1.03); }


/* ==========================================================================
   15. GUARDS - the things a blanket rule must never get wrong.
   Last in the file on purpose: nothing generated may outrank these.
   ========================================================================== */

/* ---- and the three things a blanket rule must never get wrong -------------
   1. a primary button's LABEL follows the button, never a generated ink;
   2. a failed field keeps the card surface - only its ring turns red;
   3. the overlay's own scrim stays a scrim.                                */
html[data-ui="v2"] .btn-success, html[data-ui="v2"] .btn-select,
html[data-ui="v2"] .pay11-btn--primary, html[data-ui="v2"] .u11-submit,
html[data-ui="v2"] .am11__go, html[data-ui="v2"] .bk11-cart__go,
html[data-ui="v2"] .btn-accept-reserve, html[data-ui="v2"] .am11-bar__go,
html[data-ui="v2"] .bk-topbar__acct, html[data-ui="v2"] .u11-nav__in,
html[data-ui="v2"] .quick-search-from-group-button .btn,
html[data-ui="v2"] .btn-success *, html[data-ui="v2"] .pay11-btn--primary *,
html[data-ui="v2"] .u11-submit *, html[data-ui="v2"] .am11__go *,
html[data-ui="v2"] .bk11-cart__go *, html[data-ui="v2"] .bk-topbar__acct *,
html[data-ui="v2"] .u11-nav__in * {
    color: var(--v2-on-brand) !important;
    -webkit-text-fill-color: var(--v2-on-brand);
}
html[data-ui="v2"] .fe11-bad input, html[data-ui="v2"] input.fe11-bad,
html[data-ui="v2"] .fe11-bad .pay11-field__input, html[data-ui="v2"] .fe11-bad .form-control,
html[data-ui="v2"] .fe11-bad .am11__field input {
    background-color: var(--v2-surface) !important;
    color: var(--v2-ink) !important;
    border-color: var(--v2-bad) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--v2-bad) 22%, transparent) !important;
}
html[data-ui="v2"] .am11__scrim {
    background: color-mix(in srgb, #000 62%, transparent) !important;
}
html[data-ui="v2"] .am11__panel {
    border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r-xl) !important;
    box-shadow: var(--v2-sh-3) !important;
}
html[data-ui="v2"] .am11__mark {
    background: linear-gradient(90deg, var(--v2-brand-2), var(--v2-brand)) !important;
}
html[data-ui="v2"] .am11__tabs { background: var(--v2-surface-2) !important; }
html[data-ui="v2"] .am11__tab.is-on {
    background: var(--v2-surface) !important; color: var(--v2-brand-ink) !important;
    box-shadow: var(--v2-sh-1) !important;
}
html[data-ui="v2"] .am11__x:hover { background: var(--v2-surface-2) !important; color: var(--v2-ink) !important; }
html[data-ui="v2"] .am11__msg { background: var(--v2-bad-soft) !important; color: var(--v2-bad) !important; }
html[data-ui="v2"] .am11__msg[data-am11-ok] { background: var(--v2-brand-soft) !important; color: var(--v2-brand-ink) !important; }

/* the page ground has the last word: a generic `body{background:#fff}` inside
   somebody's inline block must not turn the canvas into a card. */
html[data-ui="v2"] body,
html[data-ui="v2"] body.asa-s11,
html[data-ui="v2"] body.bk11,
html[data-ui="v2"] body.pay11-body { background: var(--v2-bg) !important; color: var(--v2-ink) !important; }
html[data-ui="v2"] .card, html[data-ui="v2"] .card-body { background: transparent !important; }

/* the ground search11.php used to force inline - see css/search11.css */
html[data-ui="v2"] body.asa-s11.s11-canvas { background-color: var(--v2-bg) !important; }
html[data-ui="v2"] .asa-s11 .card.s11-canvas { background-color: transparent !important; }

/* ==========================================================================
   16. THE SIGN-IN BUTTON, AND THE BANNER
   --------------------------------------------------------------------------
   Two fixes the screenshots asked for by name.
   ========================================================================== */

/* ---- «ورود / ثبت نام»: ONE box, ONE colour, no glow --------------------
   u11_nav_links() prints a WRAPPER: <span class="u11-nav bk-topbar__acct">
   around <a class="u11-nav__in">. Both were being painted as pills, which is
   the box-inside-a-box with a bright ring. The wrapper is now nothing at all
   and only the link is the button. */
html[data-ui="v2"] span.bk-topbar__acct,
html[data-ui="v2"] .u11-nav,
html[data-ui="v2"] .u11-nav.bk-topbar__acct {
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: inline-flex; align-items: center;
}

/* one flat brand fill, white label, no ring, no halo, no gradient */
html[data-ui="v2"] {
    --v2-cta-bg:  #04936a;
    --v2-cta-ink: #ffffff;
}
html[data-ui="v2"][data-scheme="dark"] {
    --v2-cta-bg:  #0c8a67;   /* a step deeper than the brand so white reads on it */
    --v2-cta-ink: #ffffff;
}
html[data-ui="v2"] .u11-nav__in,
html[data-ui="v2"] a.bk-topbar__acct {
    background: var(--v2-cta-bg) !important;
    background-image: none !important;
    color: var(--v2-cta-ink) !important;
    -webkit-text-fill-color: var(--v2-cta-ink);
    border: 0 !important;
    outline: 0;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    border-radius: var(--v2-r-pill) !important;
    padding: 9px 20px !important;
    font-weight: 800; font-size: var(--v2-t-sm); line-height: 1.5;
    transition: background var(--v2-fast) var(--v2-ease);
}
html[data-ui="v2"] .u11-nav__in:hover,
html[data-ui="v2"] a.bk-topbar__acct:hover {
    background: color-mix(in srgb, var(--v2-cta-bg) 86%, #000) !important;
    color: var(--v2-cta-ink) !important;
    transform: none !important;
    box-shadow: none !important;
}
html[data-ui="v2"] .u11-nav__in:focus-visible { outline: 2px solid var(--v2-cta-ink); outline-offset: 2px; }
html[data-ui="v2"] .u11-nav__in::after,
html[data-ui="v2"] a.bk-topbar__acct::after { display: none !important; }

/* every other primary button gets the same single flat colour */
html[data-ui="v2"] .btn-success, html[data-ui="v2"] .btn-select,
html[data-ui="v2"] .pay11-btn--primary, html[data-ui="v2"] .u11-submit,
html[data-ui="v2"] .am11__go, html[data-ui="v2"] .bk11-cart__go,
html[data-ui="v2"] .btn-accept-reserve, html[data-ui="v2"] .am11-bar__go,
html[data-ui="v2"] .quick-search-from-group-button .btn,
html[data-ui="v2"] .s11-filter-apply .btn {
    background: var(--v2-cta-bg) !important;
    background-image: none !important;
    color: var(--v2-cta-ink) !important;
    -webkit-text-fill-color: var(--v2-cta-ink);
    border: 0 !important; box-shadow: none !important; text-shadow: none !important;
}
html[data-ui="v2"] .btn-success:hover, html[data-ui="v2"] .btn-select:hover,
html[data-ui="v2"] .pay11-btn--primary:hover, html[data-ui="v2"] .u11-submit:hover,
html[data-ui="v2"] .am11__go:hover, html[data-ui="v2"] .bk11-cart__go:hover,
html[data-ui="v2"] .quick-search-from-group-button .btn:hover {
    background: color-mix(in srgb, var(--v2-cta-bg) 86%, #000) !important;
    box-shadow: none !important; transform: translateY(-1px);
}

/* ---- the banner ---------------------------------------------------------
   A deep emerald-to-teal sweep, the skyline art kept but calmed, a soft
   rounded foot instead of a hard edge, and the search card lifted onto it. */
html[data-ui="v2"] .asa-s11 .s11-hero {
    background:
        radial-gradient(120% 140% at 88% -20%, rgba(255,255,255,.10), transparent 55%),
        linear-gradient(135deg, #06503e 0%, #067a5c 42%, #0a3f4d 100%) !important;
    border-radius: 0 0 var(--v2-r-xl) var(--v2-r-xl) !important;
    box-shadow: 0 18px 44px rgba(3, 32, 25, .28) !important;
    padding-block: clamp(22px, 3.4vw, 40px) !important;
    margin-bottom: clamp(14px, 2vw, 26px);
    overflow: hidden;
}
html[data-ui="v2"][data-scheme="dark"] .asa-s11 .s11-hero {
    background:
        radial-gradient(120% 140% at 88% -20%, rgba(255,255,255,.06), transparent 55%),
        linear-gradient(135deg, #05231b 0%, #073f31 45%, #06222c 100%) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.5) !important;
}
/* the drifting blooms, quieter on the new ground */
html[data-ui="v2"] .asa-s11 .s11-hero::after { opacity: .38; filter: blur(34px); }
html[data-ui="v2"] .asa-s11 .s11-hero .quick-search {
    box-shadow: 0 24px 60px rgba(3, 26, 20, .35), var(--v2-sh-2) !important;
}

/* ==========================================================================
   17. THE FUNNEL'S SEARCH BAR
   --------------------------------------------------------------------------
   It was a white card of white fields on a white page - nothing to look at and
   nothing to aim at. Now: a tinted card, pill fields that lift off it, a label
   above each value, and the CTA in the one button colour.
   ========================================================================== */

html[data-ui="v2"] .bk11 .bk-searchbar {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--v2-brand) 6%, var(--v2-surface)),
        var(--v2-surface)) !important;
    border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r-xl) !important;
    box-shadow: var(--v2-sh-2) !important;
    padding: clamp(12px, 1.8vw, 18px) !important;
}
html[data-ui="v2"] .bk11 .bk-searchbar__row {
    background: transparent !important; border: 0 !important; gap: 10px;
}
html[data-ui="v2"] .bk11 .bk-searchbar__field {
    background: var(--v2-surface) !important;
    border: 1.5px solid var(--v2-line) !important;
    border-radius: var(--v2-r) !important;
    padding: 10px 16px !important;
    box-shadow: var(--v2-sh-1) !important;
    transition: border-color var(--v2-fast) var(--v2-ease),
                box-shadow var(--v2-fast) var(--v2-ease),
                transform var(--v2-fast) var(--v2-ease);
}
html[data-ui="v2"] .bk11 .bk-searchbar__field:hover { transform: translateY(-1px); box-shadow: var(--v2-sh-2) !important; }
html[data-ui="v2"] .bk11 .bk-searchbar__field:focus-within {
    border-color: var(--v2-brand) !important;
    box-shadow: 0 0 0 4px var(--v2-brand-soft) !important;
}
html[data-ui="v2"] .bk11 .bk-searchbar__label {
    color: var(--v2-muted) !important; font-size: var(--v2-t-xs) !important;
    font-weight: 700; letter-spacing: .01em; margin-bottom: 1px;
}
html[data-ui="v2"] .bk11 .bk-searchbar__value,
html[data-ui="v2"] .bk11 .bk-searchbar__select,
html[data-ui="v2"] .bk11 .bk-searchbar__field input,
html[data-ui="v2"] .bk11 .bk-searchbar__field select {
    color: var(--v2-ink) !important; font-weight: 800; font-size: var(--v2-t-md);
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    padding: 0 !important;
}
html[data-ui="v2"] .bk11 .bk-searchbar__btn {
    border-radius: var(--v2-r) !important; padding: 0 30px !important;
    min-height: 56px; font-size: var(--v2-t-md);
}
/* the skyline line-art behind it belongs to the hero, not to this bar */
html[data-ui="v2"] .bk11 .bk-searchbar { position: relative; z-index: 1; }

/* the signed-in chip, so it is not mistaken for the CTA */
html[data-ui="v2"] .u11-nav__me {
    background: var(--v2-surface-2) !important;
    color: var(--v2-ink) !important;
    border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r-pill) !important;
    padding: 8px 16px !important; font-weight: 700; box-shadow: none !important;
}
html[data-ui="v2"] .u11-nav__me:hover { background: var(--v2-surface-3) !important; }
html[data-ui="v2"] .u11-nav__dot { background: var(--v2-brand) !important; }

/* ...and the LABEL has to win the text-fill fight.
 *
 * u11_nav_links() prints <span class="u11-nav bk-topbar__acct"> around the
 * link, so when the guest is SIGNED IN the `.bk-topbar__acct *` rule above —
 * written for text sitting on the green CTA — also catches this chip and
 * forces `-webkit-text-fill-color: var(--v2-on-brand)` on it. That property
 * beats `color`, so the `color: var(--v2-ink)` two rules up never showed:
 *
 *      light : #ffffff on #f5f7fa   (white on near-white)
 *      dark  : #04261c on #18232f   (dark green on dark)
 *
 * — the name was invisible in BOTH schemes. The chip is not a CTA; it paints
 * itself, and it has to say so in the same property. */
html[data-ui="v2"] .u11-nav__me,
html[data-ui="v2"] .bk-topbar__acct .u11-nav__me,
html[data-ui="v2"] .bk-topbar__acct .u11-nav__me * {
    color: var(--v2-ink) !important;
    -webkit-text-fill-color: var(--v2-ink) !important;
}
html[data-ui="v2"] .bk-topbar__acct .u11-nav__dot {
    background: var(--v2-brand) !important;
    -webkit-text-fill-color: initial;
}

/* ==========================================================================
   18. THE CTA, AT THE SPECIFICITY THE LEGACY SHEETS ACTUALLY USE
   --------------------------------------------------------------------------
   «اعمال فیلتر» is `.btn.btn-success`, and search11.css:583 styles it as a
   GHOST button - `background: transparent !important; color: var(--s11-green)`
   - at (0,3,0). The CTA rule above is (0,2,0), so the background stayed
   transparent while `-webkit-text-fill-color` from that rule still painted the
   glyphs white: an empty white box with a green ring.

   Two lessons, both encoded here:
   • match the legacy sheet's OWN depth; a one-class rule cannot win against a
     three-class one, wherever it sits in the file.
   • never set `-webkit-text-fill-color` unless the same rule also wins
     `background` - the two can disagree, and text-fill is what you see.
   ========================================================================== */

html[data-ui="v2"] .asa-s11 .filter-rate .btn,
html[data-ui="v2"] .asa-s11 .filter-rate .btn-success,
html[data-ui="v2"] .asa-s11 .s11-filter-apply .btn,
html[data-ui="v2"] .asa-s11 .btn-success,
html[data-ui="v2"] .asa-s11 a.btn-success,
html[data-ui="v2"] .asa-s11 .search-result-order a.btn-success,
html[data-ui="v2"] .bk11 .btn-success,
html[data-ui="v2"] .bk11 a.btn-success,
html[data-ui="v2"] .bk11 .btn-select,
html[data-ui="v2"] .bk11 .btn-accept-reserve,
html[data-ui="v2"] .bk11 .bk-searchbar__btn,
html[data-ui="v2"] .bk11 .bk11-cart__go {
    background-color: var(--v2-cta-bg) !important;
    background-image: none !important;
    color: var(--v2-cta-ink) !important;
    -webkit-text-fill-color: var(--v2-cta-ink);
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 800;
}
html[data-ui="v2"] .asa-s11 .filter-rate .btn:hover,
html[data-ui="v2"] .asa-s11 .filter-rate .btn-success:hover,
html[data-ui="v2"] .asa-s11 .btn-success:hover,
html[data-ui="v2"] .asa-s11 a.btn-success:hover,
html[data-ui="v2"] .bk11 .btn-success:hover,
html[data-ui="v2"] .bk11 .btn-select:hover,
html[data-ui="v2"] .bk11 .bk-searchbar__btn:hover,
html[data-ui="v2"] .bk11 .bk11-cart__go:hover {
    background-color: color-mix(in srgb, var(--v2-cta-bg) 86%, #000) !important;
    color: var(--v2-cta-ink) !important;
    -webkit-text-fill-color: var(--v2-cta-ink);
}
/* the price group's apply button is the full width of the group in v2 */
html[data-ui="v2"] .asa-s11 .filter-rate .btn,
html[data-ui="v2"] .asa-s11 .filter-rate .btn-success {
    width: 100% !important; margin-top: .6rem !important;
    padding: 11px 18px !important; border-radius: var(--v2-r-sm) !important;
    min-height: 44px; display: flex; align-items: center; justify-content: center;
}

/* ==========================================================================
 * 2026-09-13 — three fixes, all inside the v2 skin. Classic is untouched.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. The capacity chip's × and + were rendered as big bordered circles.
 *
 * The stepper rule further up styles `.rc11__btn, .item-plus, .item-cross` as a
 * 32x32 round button. That is right for the -/+ stepper, but `.item-cross` and
 * `.item-plus` are also the tiny separators INSIDE a capacity chip — the base
 * sheet makes them .56rem wide with the glyph in ::after — so «۴ X 👤» came out
 * as two overlapping rings. Put the separators back to plain inline glyphs.
 * Scoped to .capacity-box so the real stepper keeps its circles.
 * ------------------------------------------------------------------------ */
html[data-ui="v2"] .bk11 .capacity-box .item-cross,
html[data-ui="v2"] .bk11 .capacity-box .item-plus {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: .62rem !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    position: relative !important;
    display: inline-block !important;
    transform: none !important;
}
html[data-ui="v2"] .bk11 .capacity-box .item-cross::after,
html[data-ui="v2"] .bk11 .capacity-box .item-plus::after {
    font-size: .78rem !important;
    font-weight: 700;
    top: 50% !important;
    inset-inline-start: 0;
    color: var(--v2-muted) !important;
}
/* the whole chip reads as one unit: same ink, centred, no baseline wobble */
html[data-ui="v2"] .bk11 .capacity-box {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}
html[data-ui="v2"] .bk11 .capacity-box .item-number {
    font-size: var(--v2-t-sm) !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* --------------------------------------------------------------------------
 * 2. «امکانات اتاق / قوانین کنسلی / جزییات قیمت» looked different in light and
 *    dark.
 *
 * booking-ui11.css gives them `border: 1px solid var(--bk-green-dark)`, a FIXED
 * legacy green. On the light surface that reads as a tidy outlined pill; on the
 * dark surface the same green all but disappears, so the buttons looked like
 * bare text links and the two schemes did not match. v2 only ever overrode
 * their colour, never the border — so restyle the whole button from v2 tokens,
 * which resolve per scheme and therefore look identical in both.
 * ------------------------------------------------------------------------ */
html[data-ui="v2"] .bk11 .btn-facilities,
html[data-ui="v2"] .bk11 .btn-terms,
html[data-ui="v2"] .bk11 .btn-calendar {
    color: var(--v2-brand-ink) !important;
    background: transparent !important;
    border: 1px solid var(--v2-brand-line) !important;
    border-radius: var(--v2-r-pill) !important;
    padding: .25rem .8rem !important;
    font-size: var(--v2-t-sm);
    font-weight: 700;
    transition: background var(--v2-fast) var(--v2-ease),
                border-color var(--v2-fast) var(--v2-ease);
}
html[data-ui="v2"] .bk11 .btn-facilities:hover,
html[data-ui="v2"] .bk11 .btn-terms:hover,
html[data-ui="v2"] .bk11 .btn-calendar:hover {
    background: var(--v2-brand-soft) !important;
    border-color: var(--v2-brand) !important;
    color: var(--v2-brand-ink) !important;
}

/* --------------------------------------------------------------------------
 * 3. The per-night average price: same weight and size in both schemes.
 *    --v2-price already resolves per scheme; the size was inherited from two
 *    different places, so pin it here.
 * ------------------------------------------------------------------------ */
html[data-ui="v2"] .bk11 .night-price-box .price,
html[data-ui="v2"] .bk11 .night-price-box .price-amount {
    color: var(--v2-price) !important;
    font-size: var(--v2-t-md) !important;
    font-weight: 800 !important;
}

/* --------------------------------------------------------------------------
 * 4. The switch on the login screen.
 *
 * Every other *11 page gets it from bk11_page_open(); login11 renders its own
 * document, so it places the pill itself. Unscoped on purpose — it has to be
 * reachable in BOTH skins, which is the whole point of putting it here.
 * ------------------------------------------------------------------------ */
.pay11-login__theme {
    position: fixed;
    top: 14px;
    inset-inline-end: 14px;
    z-index: 40;
}
@media (max-width: 480px) {
    .pay11-login__theme { top: 8px; inset-inline-end: 8px; }
}