/* ==========================================================================
   TheatresDB refine layer (v11.69)
   Loaded after brand.css. Template-level <style> blocks load later still, so
   selectors here use a `body` prefix (and !important only where a template
   already does) to win without touching those templates.

   What this layer does
   1. One page width shared by header, content and footer.
   2. One colour per meaning: amber = things you can act on; every screen
      format owns a fixed hue that is never amber.
   3. Pill controls (search fields, filters) to match the pill buttons.
   4. Honest data states: illustrative diagrams are labelled, and missing
      values are left blank instead of printing placeholder text.
   5. Mobile bottom pill navigation.
   6. Small layout fixes (tech strip, breadcrumb, amenity icons).

   All of this is original work built on the theme's existing tokens.
   ========================================================================== */

/* ── 1. Shared page width ──────────────────────────────────────────────── */
:root{
    --wrap:1240px;
    --gutter:24px;

    /* ── 2. Meaning tokens: format hues (never amber) ───────────────────── */
    --tone-premium:#4DB3F0;   /* PLF / EPIQ / IMAX class screens          */
    --tone-atmos:#A78BFA;     /* Dolby Atmos / Scope + Atmos              */
    --tone-laser:#1BBB93;     /* 4K / RGB laser projection                */
    --tone-scope:#F06A8E;     /* 2.39:1 scope                             */
    --tone-flat:#6781E9;      /* 1.85:1 flat                              */
    --tint-mix:14%;           /* how strongly a tone tints a surface      */
}
[data-theme=light]{
    --tone-premium:#1673AE;
    --tone-atmos:#6D4FD6;
    --tone-laser:#0B7F63;
    --tone-scope:#C23D68;
    --tone-flat:#3B54C4;
    --tint-mix:10%;
}

body .hdr-wrap,
body .container,
body .footer-inner,
body .tech-ticker-inner{
    max-width:var(--wrap);
    padding-left:var(--gutter);
    padding-right:var(--gutter);
    box-sizing:border-box;
}
body .city-picker-section .container{max-width:var(--wrap)}
@media (max-width:820px){
    :root{--gutter:18px}
}

/* ── 3. Pill controls ──────────────────────────────────────────────────── */
body .hero-search-bar,
body #theater-search,
body #htspec-search-input,
body #htcomp-search-input,
body .city-picker-section input[type=text],
body .city-picker-section input[type=search]{
    border-radius:var(--radius-pill);
}
body .filter-chip{border-radius:var(--radius-pill)}

/* Header controls share one 36px rhythm */
body .hdr-search-btn{width:36px;height:36px;border-radius:50%}

/* ── 4. Honest data states ─────────────────────────────────────────────── */
/* A screen without a seat count leaves its cell empty (the grid column stays so rows line up). */
body .th-sx-seats.is-empty{min-height:1px}

/* The diagram is a drawing of the format, not a seat plan. Say so. */
.sp-diagram-note{
    margin:0;
    padding:10px 18px 14px;
    font-family:var(--font-mono);
    font-size:.68rem;
    line-height:1.4;
    letter-spacing:.02em;
    color:var(--text-dim);
    text-align:center;
}
.sp-diagram-note::before{
    content:"";
    display:inline-block;
    width:14px;
    height:0;
    margin-right:8px;
    vertical-align:middle;
    border-top:1px dashed var(--text-dim);
}

/* ── 5. Tinted surfaces: a dark wash of each format's own hue ─────────── */
body .sp-other-card:hover{background:color-mix(in srgb,var(--acc,var(--gold)) var(--tint-mix),var(--bg-card))}
body .sp-scheme-premium     .sp-unified-card,
body .sp-scheme-scope-atmos .sp-unified-card,
body .sp-scheme-scope       .sp-unified-card,
body .sp-scheme-flat        .sp-unified-card,
body .sp-scheme-laser       .sp-unified-card{
    border-color:color-mix(in srgb,var(--acc) 38%,var(--border));
}

/* ── 6. Amenity chips: one icon set, one size ─────────────────────────── */
body .th-amenity-tag{
    display:inline-flex;
    align-items:center;
    gap:7px;
    border-radius:var(--radius-pill);
}
body .th-amenity-tag .ht-ico{
    flex:0 0 auto;
    color:var(--gold);
    opacity:.9;
}

/* ── 7. Screen page: breadcrumb never cuts a name mid-word ────────────── */
body .sp-back{
    display:inline-block;
    max-width:min(100%,46ch);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    vertical-align:bottom;
}

/* ── 8. Home: technology strip ────────────────────────────────────────── */
body .tech-ticker-inner{align-items:center}
body .tech-ticker-label{padding-top:0}
body .tech-ticker-row{
    /* fade the right edge so the scroll is obvious instead of a clipped card */
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);
    scroll-snap-type:x proximity;
}
body .tech-ticker-chip{scroll-snap-align:start}
body .tech-ticker-viewall{align-self:center;white-space:nowrap}

/* ── 9. Keyboard focus is always visible ──────────────────────────────── */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── 10. Mobile bottom pill navigation ────────────────────────────────── */
.ht-bnav{display:none}

@media (max-width:900px){
    .ht-bnav{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:2px;
        position:fixed;
        z-index:850;                      /* under header drawer (899), search (9999) */
        left:50%;
        bottom:calc(12px + env(safe-area-inset-bottom,0px));
        transform:translateX(-50%);
        width:min(420px,calc(100% - 24px));
        padding:6px;
        background:var(--hdr-bg);
        -webkit-backdrop-filter:blur(18px);
                backdrop-filter:blur(18px);
        border:1px solid var(--border-hi);
        border-radius:var(--radius-pill);
        box-shadow:0 12px 32px var(--shadow);
    }
    .ht-bnav a,
    .ht-bnav button{
        flex:1 1 0;
        min-width:0;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:2px;
        padding:7px 4px 6px;
        border:0;
        border-radius:var(--radius-pill);
        background:transparent;
        color:var(--text-muted);
        font-family:var(--font-body);
        font-size:.66rem;
        font-weight:600;
        line-height:1.1;
        text-decoration:none;
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
        transition:background .15s,color .15s;
    }
    .ht-bnav svg{width:20px;height:20px;flex:0 0 auto}
    .ht-bnav a:hover,
    .ht-bnav button:hover{color:var(--text)}
    .ht-bnav a[aria-current=page]{
        background:var(--gold);
        color:var(--on-gold);
    }
    /* keep the last line of every page clear of the bar */
    body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
    body .ht-toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
}

/* ── 11. Motion: respect the visitor's setting ────────────────────────── */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        scroll-behavior:auto!important;
        transition-duration:.01ms!important;
    }
}

/* ── 12. Mobile hero actions: labels never wrap; partner button is quieter ─ */
body .th-hero .th-hero-actions > a,
body .th-hero .th-hero-actions > button{white-space:nowrap}
@media (max-width:820px){
    body .th-hero .th-hero-actions > .th-btn-bms,
    body .th-hero .th-hero-actions > .th-btn-dist{flex:1 1 auto}
    body .th-hero .th-hero-actions > .th-btn-ghost{flex:0 1 auto}
}
/* District keeps its indigo identity but drops the glow and gradient so the
   amber primary action stays the loudest thing on the page. */
body .th-btn-dist{
    background:color-mix(in srgb,#6366f1 22%,var(--bg-card));
    color:var(--text);
    border:1px solid color-mix(in srgb,#6366f1 55%,transparent);
    box-shadow:none;
}
body .th-btn-dist:hover{
    background:color-mix(in srgb,#6366f1 34%,var(--bg-card));
    box-shadow:none;
}
[data-theme=light] body .th-btn-dist,
body[data-theme=light] .th-btn-dist{color:var(--text)}

/* ── 13. Theatres that have not opened yet: calm, premium, no dead links ── */
body .th-badge-uc-coming{
    gap:7px;
    background:color-mix(in srgb,var(--gold) 12%,transparent);
    color:var(--gold);
    border:1px solid color-mix(in srgb,var(--gold) 38%,transparent);
    font-weight:600;
}
body .th-uc-card{
    background:var(--bg-card)!important;
    border-color:color-mix(in srgb,var(--gold) 30%,var(--border))!important;
}

/* ── 14. Unopened hero, tidy: one status line, then two equal actions ── */
body .th-uc-status{margin:0 0 14px}
body .th-uc-status .th-badge-uc-coming{cursor:default}
body .th-hero-uc .th-hero-actions{flex-wrap:nowrap}
body .th-hero-uc .th-hero-actions > .th-btn-notify{
    background:var(--gold);
    color:var(--on-gold);
    border:0;
    font-weight:700;
    border-radius:var(--radius-pill);
    box-shadow:none;
}
body .th-hero-uc .th-hero-actions > .th-btn-notify:hover{background:var(--gold-lt);color:var(--on-gold)}
body .th-hero-uc .th-hero-actions > .th-btn-notify,
body .th-hero-uc .th-hero-actions > .th-btn-ghost{flex:1 1 0;justify-content:center;min-height:44px}

/* ── 15. Screen page: compare action ──────────────────────────────────── */
body .sp-actions{margin:16px 0 0}
body .sp-compare-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    padding:0 20px;
    border:1px solid var(--border-hi);
    border-radius:var(--radius-pill);
    background:transparent;
    color:var(--text);
    font-size:.85rem;
    font-weight:600;
    text-decoration:none;
    transition:border-color .15s,background .15s;
}
body .sp-compare-link:hover{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent);color:var(--text)}
body .sp-compare-link svg{color:var(--gold)}

/* ── 16. Language menu + Indic typography (Tamil, Telugu, Hindi) ─────── */
:root{
    --font-indic:'Noto Sans Tamil','Noto Sans Telugu','Noto Sans Devanagari','Nirmala UI','Latha','Gautami','Mangal','Tamil Sangam MN','Telugu Sangam MN','Kohinoor Devanagari','Lohit Tamil',sans-serif;
}
body .hdr-lang{position:relative;display:inline-flex}
body .hdr-lang-btn{
    width:36px;height:36px;
    display:inline-flex;align-items:center;justify-content:center;
    padding:0;
    border:1px solid var(--border-hi);
    border-radius:50%;
    background:transparent;
    color:var(--text);
    cursor:pointer;
    transition:border-color .15s,color .15s;
}
body .hdr-lang-btn:hover,
body .hdr-lang-btn[aria-expanded=true]{border-color:var(--gold);color:var(--gold)}
body .hdr-lang-menu{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    z-index:910;
    min-width:160px;
    padding:6px;
    background:var(--bg-card);
    border:1px solid var(--border-hi);
    border-radius:16px;
    box-shadow:0 16px 40px var(--shadow);
}
body .hdr-lang-menu[hidden]{display:none}
body .hdr-lang-menu button{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:42px;
    padding:0 14px;
    border:0;
    border-radius:12px;
    background:transparent;
    color:var(--text);
    font-family:var(--font-indic),var(--font-body);
    font-size:.92rem;
    font-weight:600;
    text-align:left;
    cursor:pointer;
}
body .hdr-lang-menu button:hover{background:color-mix(in srgb,var(--gold) 10%,transparent)}
body .hdr-lang-menu button[aria-checked=true]{color:var(--gold)}
body .hdr-lang-menu button[aria-checked=true]::after{
    content:"";
    width:7px;height:12px;
    border:solid currentColor;
    border-width:0 2px 2px 0;
    transform:rotate(45deg) translate(-2px,-2px);
}

/* Indic scripts: keep IBM Plex for Latin text and let the browser fall back to a
   Tamil / Telugu / Devanagari font for those letters only. (Putting the Indic
   font first would also change every English word on the page.) */
html[lang=ta],html[lang=te],html[lang=hi]{
    --font-body:'IBM Plex Sans',var(--font-indic),system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --font-mono:'IBM Plex Mono',var(--font-indic),ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
html[lang=ta] body,html[lang=te] body,html[lang=hi] body{line-height:1.65}
/* Only text that was actually translated loses letter-spacing (it breaks conjuncts)
   and forced capitals, so English badges and labels keep their normal styling. */
html[lang=ta] .ht-x,html[lang=te] .ht-x,html[lang=hi] .ht-x{
    letter-spacing:normal!important;
    text-transform:none!important;
}
html[lang=ta] h1,html[lang=ta] h2,html[lang=ta] h3,
html[lang=te] h1,html[lang=te] h2,html[lang=te] h3,
html[lang=hi] h1,html[lang=hi] h2,html[lang=hi] h3{line-height:1.3}
/* Indic headlines are taller and wider than Latin ones; keep the hero in 2-3 lines. */
html[lang=ta] .hero.hero-v2 h1,html[lang=te] .hero.hero-v2 h1,html[lang=hi] .hero.hero-v2 h1{
    font-size:clamp(1.7rem,3.3vw,2.5rem);
    line-height:1.28;
    font-weight:700;
}
/* The seats cell holds a number plus a longer word, so give it room (and the
   header row the same widths so columns stay aligned). */
@media (min-width:821px){
    html[lang=ta] .th-sx-head,html[lang=ta] .th-sx-row,
    html[lang=te] .th-sx-head,html[lang=te] .th-sx-row,
    html[lang=hi] .th-sx-head,html[lang=hi] .th-sx-row{
        grid-template-columns:78px minmax(0,1fr) 148px 132px 34px;
    }
}
html[lang=ta] .th-sx-seats,html[lang=te] .th-sx-seats,html[lang=hi] .th-sx-seats{white-space:nowrap}
@media (max-width:480px){
    body .hdr-lang-btn{width:34px;height:34px}
    body .hdr-lang-menu{right:-40px}
}