/* ============================================================
 * BUILD: assets/css/theme-fixes.css
 * Light-theme compatibility layer loaded after the main theme.
 * Keeps dark/accent components white while forcing normal light
 * surfaces, headings and form controls to use readable dark text.
 * ============================================================ */

html[data-theme="light"]{
  color-scheme:light;

  /* Re-assert shared variables because shop.css is loaded per page
     and its dark :root block otherwise overwrites the light palette. */
  --bg:#eef4fb !important;
  --bg-soft:#e3edf8 !important;
  --surface:#ffffff !important;
  --surface-2:#f2f7fe !important;
  --border:#dbe6f3 !important;
  --border-2:#c7d7ea !important;
  --ink:#13235b !important;
  --ink-soft:#33436b !important;
  --muted:#6b7a99 !important;

  --navy:#13235b !important;
  --navy2:#33436b !important;
  --line:#dbe6f3 !important;
  --line-2:#c7d7ea !important;
  --glow:0 12px 36px rgba(20,50,110,.14) !important;
  --glow-soft:0 14px 40px rgba(20,50,110,.12) !important;
}

html[data-theme="light"] body{
  background:#eef4fb !important;
  color:#13235b !important;
}
html[data-theme="light"] body::before{
  background:
    radial-gradient(620px 380px at 12% -4%,rgba(46,166,255,.14),transparent 60%),
    radial-gradient(680px 460px at 96% 6%,rgba(139,92,255,.10),transparent 60%),
    #eef4fb !important;
}

/* ---------- Header on the blue light-theme bar ---------- */
html[data-theme="light"] .topbar .ta-icon,
html[data-theme="light"] .topbar .ta-fav,
html[data-theme="light"] .topbar .ta-user,
html[data-theme="light"] .topbar .ta-uname,
html[data-theme="light"] .topbar .ta-caret{
  color:#fff !important;
}
html[data-theme="light"] .topbar .ta-icon,
html[data-theme="light"] .topbar .ta-fav,
html[data-theme="light"] .topbar .ta-user{
  border-color:rgba(255,255,255,.28) !important;
  background:rgba(255,255,255,.12) !important;
}
html[data-theme="light"] .topbar .ta-icon:hover,
html[data-theme="light"] .topbar .ta-fav:hover,
html[data-theme="light"] .topbar .ta-user:hover{
  background:rgba(255,255,255,.22) !important;
}
html[data-theme="light"] .topbar .btn-login{
  color:#13235b !important;
  background:#fff !important;
  border-color:rgba(255,255,255,.55) !important;
}

/* ---------- Normal cards/headings on light surfaces ---------- */
html[data-theme="light"] :is(
  .sec-head h2,
  .ev-body h3,
  .ev-price,
  .feat h4,
  .site-foot .sf-brand,
  .detail-info h1,
  .pkg .pkg-info h4,
  .tr-row b,
  .auth-card h1,
  .acc-h,
  .bevent,
  .tks-label,
  .tk-code,
  .fb-item b,
  .qa-tx h3,
  .tf b,
  .page-head h1,
  .pcard .pname,
  .pcard .pprice b,
  .pdetail h1,
  .cart-item .ci-name,
  .sumrow.total,
  .plan h3,
  .deal .d-title,
  .au-card h1
){
  color:#13235b !important;
}

html[data-theme="light"] :is(
  .qm-item,
  .ev-card,
  .feat,
  .feature-bar,
  .qa-card,
  .cat-pill,
  .trust-bar,
  .detail-desc,
  .pkg,
  .ticket-result,
  .auth-card,
  .bcard,
  .acc-empty,
  .pcard,
  .pdetail,
  .cart-item,
  .sumbox,
  .cform,
  .plan,
  .deal,
  .empty,
  .au-card
){
  border-color:#dbe6f3 !important;
  box-shadow:0 12px 34px rgba(20,50,110,.08);
}
html[data-theme="light"] .feature-bar{
  background:#fff !important;
}
html[data-theme="light"] .qa-card{
  background:
    radial-gradient(150% 110% at 0 0,color-mix(in srgb,var(--c) 9%,transparent),transparent 52%),
    #fff !important;
}
html[data-theme="light"] .sumbar{
  background:rgba(255,255,255,.96) !important;
  border-color:#c7d7ea !important;
  box-shadow:0 14px 40px rgba(20,50,110,.15) !important;
}

/* ---------- Controls and secondary buttons ---------- */
html[data-theme="light"] :is(
  input:not([type="button"]):not([type="submit"]):not([type="reset"]),
  textarea,
  select,
  .field input,
  .field textarea,
  .field select,
  .auth-form input,
  .prof-form input,
  .cfg input,
  .cfg textarea,
  .au-fg input,
  .au-fg select,
  .qtybox input,
  .stepper input
){
  background:#fff !important;
  color:#13235b !important;
  border-color:#c7d7ea !important;
  -webkit-text-fill-color:#13235b;
}
html[data-theme="light"] :is(input,textarea)::placeholder{
  color:#8192ad !important;
  opacity:1;
  -webkit-text-fill-color:#8192ad;
}
html[data-theme="light"] :is(.field select,.au-fg select,select) option{
  background:#fff !important;
  color:#13235b !important;
}
html[data-theme="light"] input:disabled,
html[data-theme="light"] textarea:disabled,
html[data-theme="light"] select:disabled{
  background:#edf2f8 !important;
  color:#71809a !important;
  -webkit-text-fill-color:#71809a;
}
html[data-theme="light"] input[type="checkbox"],
html[data-theme="light"] input[type="radio"]{
  accent-color:#1f7fd6;
  -webkit-text-fill-color:initial;
}

html[data-theme="light"] :is(
  .ev-btn,
  .btn-login,
  .hero-cta a:not(.primary),
  .stepper button,
  .qtybox button,
  .btn-out,
  .tk-actions .alt
){
  background:#f2f7fe !important;
  border-color:#c7d7ea !important;
  color:#13235b !important;
}
html[data-theme="light"] :is(.stepper button:hover,.qtybox button:hover){
  background:var(--coral) !important;
  border-color:var(--coral) !important;
  color:#fff !important;
}

/* ---------- Inline login/register page styles ---------- */
html[data-theme="light"] .au-card{
  background:#fff !important;
  border-color:#dbe6f3 !important;
  box-shadow:0 20px 55px rgba(20,50,110,.13) !important;
}
html[data-theme="light"] .au-card .sub,
html[data-theme="light"] .au-foot{
  color:#6b7a99 !important;
}
html[data-theme="light"] .au-fg label{
  color:#33436b !important;
}

/* ---------- Status/feedback colours tuned for white cards ---------- */
html[data-theme="light"] :is(.auth-err,.au-err,.acc-flash.err,.flash-msg.err){
  background:#fff1f2 !important;
  border-color:#fecdd3 !important;
  color:#9f1239 !important;
}
html[data-theme="light"] :is(.acc-flash.ok,.flash-msg.ok){
  background:#ecfdf5 !important;
  border-color:#a7f3d0 !important;
  color:#166534 !important;
}
html[data-theme="light"] .login-hint{
  background:#f5f3ff !important;
  border-color:#ddd6fe !important;
  color:#5b21b6 !important;
}
html[data-theme="light"] .login-hint a{color:#6d28d9 !important}
html[data-theme="light"] .tk-issued{background:#eef2ff !important;color:#4338ca !important}
html[data-theme="light"] .tk-activated{background:#ecfdf5 !important;color:#047857 !important}
html[data-theme="light"] .tk-used{background:#eef2f8 !important;color:#64748b !important}
html[data-theme="light"] :is(.cart-rm,.pcard .soldout){color:#be123c !important}

/* ---------- Dark/gradient islands that must remain white ---------- */
html[data-theme="light"] :is(
  .brand,
  .topsearch button,
  .ta-live,
  .ta-live-menu a,
  .ev-tag,
  .hero-cta a.primary,
  .hf-badge,
  .bn-arrow,
  .ev-heart,
  .cat-ic,
  .qa-btn,
  .promo-btn,
  .btn-book,
  .btn-auth,
  .au-btn,
  .bpay,
  .btn-buy,
  .pcard .ptag,
  .plan .pl-badge,
  .ctabs a.on,
  .ctabs a:hover,
  .tr-head,
  .toast,
  .botnav .center .ic,
  .tk-actions button,
  .tk-actions a:not(.alt)
){
  color:#fff !important;
  -webkit-text-fill-color:currentColor;
}
html[data-theme="light"] :is(
  .btn-login:hover,
  .ev-card:hover .ev-btn
){
  color:#fff !important;
}

/* Cards intentionally kept dark in the light theme. Their nested
   text must not inherit the light palette's dark muted colours. */
html[data-theme="light"] :is(.memcard,.promo-card,.vip-banner,.pt-card){
  color:#fff !important;
}
html[data-theme="light"] .memcard{
  --ink:#eef1f8 !important;
  --ink-soft:#cdd3e4 !important;
  --muted:#aab4ca !important;
  --surface-2:rgba(255,255,255,.10) !important;
  --border:rgba(255,255,255,.12) !important;
  --border-2:rgba(255,255,255,.20) !important;
}
html[data-theme="light"] .memcard :is(.memname,.memstats>div span,.memout){color:#fff !important}
html[data-theme="light"] .memcard :is(.memcode,.memstats>div){color:#cdd3e4 !important}
html[data-theme="light"] .promo-card{
  --ink-soft:#d8dcef !important;
  --muted:#aeb7cf !important;
}
html[data-theme="light"] .promo-card :is(.promo-top b,.promo-cd){color:#fff !important}
html[data-theme="light"] .promo-card .promo-sub{color:#d8dcef !important}
html[data-theme="light"] .vip-banner{border-color:rgba(255,255,255,.16) !important}

/* Ticket keeps its own paper/text variables. Only the secondary
   action changes from translucent dark-mode styling to a light pill. */
html[data-theme="light"] .tk-actions .alt{
  box-shadow:none !important;
}

/* Header login hover must override the light pill's !important base. */
html[data-theme="light"] .topbar .btn-login:hover{
  background:var(--grad) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:var(--glow-coral) !important;
}
html[data-theme="light"] .ev-card:hover .ev-btn{
  background:var(--grad) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:var(--glow-coral) !important;
}

/* ============================================================
 * MOBILE PUBLIC HEADER — compact single-row header with an
 * on-demand search row. Loaded last so page-specific CSS cannot
 * stretch or break the header on phones.
 * ============================================================ */
.mobile-search-toggle{
  display:none;
  appearance:none;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
}
.mobile-search-toggle svg,
.topsearch svg,
.ta-icon svg,
.btn-login svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.mobile-search-toggle .mst-close{display:none}
.topbar.search-open .mobile-search-toggle .mst-search{display:none}
.topbar.search-open .mobile-search-toggle .mst-close{display:block}
.topsearch .ts-ic{display:grid;place-items:center;flex:0 0 auto}
.topsearch .ts-ic svg{width:18px;height:18px}
.topsearch button{display:grid;place-items:center;flex:0 0 auto}
.topsearch button svg{width:18px;height:18px}
.ta-icon svg{width:19px;height:19px}
.btn-login{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn-login svg{width:18px;height:18px}
.topsearch input[type="search"]::-webkit-search-decoration,
.topsearch input[type="search"]::-webkit-search-cancel-button,
.topsearch input[type="search"]::-webkit-search-results-button,
.topsearch input[type="search"]::-webkit-search-results-decoration{-webkit-appearance:none}

@media(max-width:768px){
  .topbar{
    isolation:isolate;
  }
  .topbar .inner{
    min-height:56px;
    height:auto;
    padding-top:7px;
    padding-right:12px;
    padding-bottom:7px;
    padding-left:12px;
    gap:6px;
    flex-wrap:wrap;
    justify-content:flex-start;
  }
  .topbar .brand{
    flex:1 1 auto;
    min-width:0;
    gap:8px;
    font-size:15px;
    letter-spacing:0;
  }
  .topbar .brand .logo{
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:10px;
    font-size:18px;
    box-shadow:0 7px 20px rgba(255,59,92,.24);
  }
  .topbar .brand-tx{
    display:block;
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    line-height:1.1;
  }
  .topbar .brand-tx small{display:none!important}

  .topbar .top-actions{
    flex:0 0 auto;
    margin-left:auto;
    gap:5px;
    min-width:0;
  }
  .mobile-search-toggle,
  .topbar .ta-icon,
  .topbar .ta-user,
  .topbar .btn-login{
    width:36px;
    height:36px;
    min-width:36px;
    padding:0;
    border-radius:11px;
    display:grid;
    place-items:center;
  }
  .mobile-search-toggle{
    color:#fff;
    transition:background .18s ease,border-color .18s ease,transform .18s ease;
  }
  .mobile-search-toggle:active{transform:scale(.94)}
  .topbar.search-open .mobile-search-toggle{
    background:rgba(255,255,255,.18);
    border-color:rgba(255,255,255,.28);
  }
  .topbar .ta-icon{
    font-size:0;
  }
  .topbar .ta-icon .dot{
    width:7px;
    height:7px;
    top:6px;
    right:6px;
    border:2px solid rgba(10,12,22,.82);
    box-sizing:content-box;
  }
  .topbar .ta-fav,
  .topbar .ta-uname,
  .topbar .ta-caret,
  .topbar .btn-login .login-tx{
    display:none!important;
  }
  .topbar .ta-user{
    gap:0;
    border-color:transparent;
    background:transparent;
  }
  .topbar .ta-av{
    width:34px;
    height:34px;
    font-size:14px;
    box-shadow:0 6px 18px rgba(255,59,92,.24);
  }
  .topbar .btn-login svg{width:18px;height:18px}

  .topbar .ta-live-wrap{
    width:36px;
    height:36px;
    flex:0 0 36px;
  }
  .topbar .ta-live{
    width:36px;
    height:36px;
    min-width:36px;
    padding:0;
    gap:0;
    border-radius:11px;
    justify-content:center;
    animation:none;
    box-shadow:0 7px 18px rgba(255,45,85,.26);
  }
  .topbar .ta-live .lbltx,
  .topbar .ta-live .cv{display:none!important}
  .topbar .ta-live .ld{
    width:10px;
    height:10px;
    box-shadow:0 0 0 4px rgba(255,255,255,.18);
  }
  .topbar .ta-live .lvn{
    position:absolute;
    top:-5px;
    right:-5px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    display:grid;
    place-items:center;
    background:#fff;
    color:#d7153d;
    border:2px solid #ff2d55;
    font-size:9px;
    line-height:1;
    z-index:2;
  }
  .topbar .ta-live-menu{
    position:fixed;
    top:62px;
    left:12px;
    right:12px;
    width:auto;
    min-width:0;
    max-height:min(62vh,440px);
    overflow:auto;
    border-radius:14px;
  }
  .topbar .ta-live-menu .tlm-tt{max-width:none}

  /* Search is collapsed by default and becomes a clean second row only
     after the search icon is pressed. */
  .topbar .topsearch{
    display:none;
    order:3;
    flex:1 0 100%;
    width:100%;
    max-width:none;
    min-height:42px;
    margin:1px 0 0;
    padding:4px 5px 4px 12px;
    gap:8px;
    border-radius:13px;
    box-shadow:0 9px 24px rgba(0,0,0,.15);
  }
  .topbar.search-open .topsearch{
    display:flex;
    animation:mobileHeaderSearchIn .18s ease-out both;
  }
  .topbar .topsearch input{
    min-width:0;
    height:34px;
    font-size:16px; /* prevents iOS form zoom */
    line-height:34px;
  }
  .topbar .topsearch button{
    width:34px;
    height:34px;
    min-width:34px;
    box-shadow:none;
  }
  @keyframes mobileHeaderSearchIn{
    from{opacity:0;transform:translateY(-5px)}
    to{opacity:1;transform:translateY(0)}
  }
}

@media(max-width:380px){
  .topbar .inner{gap:4px;padding-left:10px;padding-right:10px}
  .topbar .top-actions{gap:3px}
  .mobile-search-toggle,
  .topbar .ta-icon,
  .topbar .ta-user,
  .topbar .btn-login,
  .topbar .ta-live,
  .topbar .ta-live-wrap{
    width:34px;
    height:34px;
    min-width:34px;
  }
  .topbar .brand .logo{
    width:32px;
    height:32px;
    flex-basis:32px;
  }
  .topbar .ta-av{width:32px;height:32px}
  .topbar .brand{font-size:14px;gap:6px}
}

/* Light header keeps compact mobile action buttons legible over blue. */
@media(max-width:768px){
  html[data-theme="light"] .topbar .mobile-search-toggle,
  html[data-theme="light"] .topbar .ta-icon,
  html[data-theme="light"] .topbar .btn-login{
    color:#fff!important;
    background:rgba(255,255,255,.13)!important;
    border-color:rgba(255,255,255,.25)!important;
  }
  html[data-theme="light"] .topbar.search-open .mobile-search-toggle{
    background:rgba(255,255,255,.25)!important;
  }
  html[data-theme="light"] .topbar .ta-icon .dot{
    border-color:#2389da;
  }
}