/* flieks.co.za -- components */
/* --- header ---
   Yellow bands (top strip + bottom tabs) are constrained to the same
   `--container-max` column as the page body so the yellow no longer
   bleeds edge-to-edge on wide viewports. The white wordmark band stays
   full-width so the page still reads as a header strip. The bottom
   border under the wordmark is dropped so the yellow tabs flow into
   the landing-page yellow band without a visible seam. */
.site-nav-strip { height: 6px; }
.site-nav-strip .container { height: 100%; background: var(--flk-accent); padding: 0; }
.site-nav-bar { background: #fff; border-top: 1px solid var(--flk-rule); }
.site-nav-bar .container { display: flex; align-items: baseline; justify-content: space-between; padding: 0.5rem 1rem; }
.site-logo { display: inline-flex; align-items: baseline; font-weight: 700; font-size: 1.4rem; letter-spacing: -0.5px; color: var(--flk-ink); line-height: 1; }
.site-logo:hover { color: var(--flk-ink); text-decoration: none; }
.site-logo-tld { font-size: 0.42em; color: var(--flk-hot); margin-left: 1px; font-weight: 700; }
.site-nav-controls { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; }
.city-picker { font-family: var(--font-stack); font-size: 0.85rem; font-weight: 600; color: var(--flk-ink); background: transparent; border: none; cursor: pointer; padding: 0.25rem 0; line-height: 1; }
.city-picker:focus { outline: 2px solid var(--flk-accent); outline-offset: 2px; }
.nav-tabs { background: transparent; }
/* Tab band font bumped from 0.85rem to 1rem (snag B13a): with only three
   tabs the band has room for a slightly larger label. */
.nav-tabs .container { display: flex; gap: 1.25rem; padding: 0.45rem 1rem 0.4rem; font-size: 1rem; color: var(--flk-ink); background: var(--flk-accent); }
.nav-tab { color: var(--flk-ink); opacity: 0.7; text-decoration: none; padding-bottom: 2px; }
/* Touch targets (#629): 44px minimum on coarse pointers, via padding not font scale. */
@media (pointer: coarse) { .nav-tab { min-height: 44px; display: inline-flex; align-items: center; padding: 0 0.25rem; } }
.nav-tab:hover { opacity: 1; color: var(--flk-ink); text-decoration: none; }
.nav-tab.active, .nav-tab[aria-current="page"] { font-weight: 800; opacity: 1; border-bottom: 2.5px solid var(--flk-ink); }

/* --- footer --- */
.site-footer { margin-top: 3rem; padding: 1.5rem 0; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 0.85rem; }
.site-footer .container { display: flex; justify-content: space-between; align-items: center; }

/* --- date strip (HomeByTime DayStrip mock; daypart band retired in snag B7) --- */
.date-selector { display: flex; gap: 0.4rem; padding: 0.5rem 0 0.4rem; margin-bottom: 0.4rem; }
.date-selector a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0.35rem 0; color: var(--flk-ink); text-align: center; border: 1px solid var(--flk-rule); border-radius: 5px; background: transparent; }
@media (pointer: coarse) { .date-selector a { min-height: 44px; } }
.date-selector a:hover { color: var(--flk-ink); text-decoration: none; background: rgba(0,0,0,0.03); }
.date-selector a.selected, .date-selector a[aria-current="date"] { background: var(--flk-accent); border-color: var(--flk-ink); font-weight: 800; }
.date-selector .day-name { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; }
.date-selector .day-num { font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }

/* --- filter chips --- */
.filter-chips { display: flex; gap: 0.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0.25rem 0; margin-bottom: 0.4rem; }
.chip-disabled { opacity: 0.45; pointer-events: none; }
.near-me-set { background: var(--bg-card); border: 1px dashed var(--border-subtle); color: var(--text-muted); cursor: pointer; font-family: var(--font-stack); }
.chip { display: inline-flex; align-items: center; padding: 0.35rem 0.75rem; font-size: 0.85rem; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border-subtle); cursor: pointer; white-space: nowrap; font-family: var(--font-stack); text-decoration: none; }
@media (pointer: coarse) { .chip { min-height: 44px; padding: 0.5rem 0.9rem; } }
.chip:hover { color: var(--text); text-decoration: none; }
.chip.active { color: var(--flk-ink); background: var(--flk-accent); border-color: var(--flk-ink); }

/* --- schedule rows (HomeByTime); time-of-day markers ship hidden but
   drive ad placement, the visible chrome is the per-hour band */
.time-of-day-header { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.hour-header { padding: 4px 12px; margin: 0 -1rem; background: var(--flk-band); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; position: sticky; top: 0; z-index: 2; }
.schedule-row { display: grid; grid-template-columns: 36px 1fr auto; column-gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px dashed rgba(0,0,0,0.12); }
.schedule-time { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; color: var(--flk-ink); }
.schedule-row-body { min-width: 0; }
.schedule-title-line { display: flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 600; }
.schedule-film { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schedule-film a { color: var(--flk-ink); }
.schedule-film a:hover { color: var(--accent); }
/* Snag B12: bumped from 10px / 0.6 opacity to 12px / 0.8 so the
   cinema name reads at a glance on a phone without competing with the
   film title above. */
.schedule-cinema-line { display: flex; align-items: baseline; gap: 6px; font-size: 12px; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schedule-cinema { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.schedule-cinema a { color: inherit; }
.schedule-cinema a:hover { color: var(--accent); }
.schedule-age { font-variant-numeric: tabular-nums; white-space: nowrap; }
.schedule-format { text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.schedule-book { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; background: var(--flk-accent); color: var(--flk-ink); border: 1px solid var(--flk-ink); border-radius: 3px; white-space: nowrap; }
.schedule-book:hover { color: var(--flk-ink); text-decoration: none; filter: brightness(0.95); }
@media (pointer: coarse) { .schedule-book { min-height: 44px; min-width: 44px; padding: 2px 12px; } }

.schedule-row-past .schedule-row { opacity: 0.45; }
.schedule-row-next-up .schedule-row { box-shadow: inset 3px 0 0 var(--flk-hot); padding-left: 8px; }

/* --- info button ---
   #762: 44px tap target on coarse pointers. #778: line-height: 1 +
   1px bottom padding centre the "i" against Flieks Sans's
   asymmetric ascent. #769: yellow-on-ink (high-contrast pair)
   complements the inverse yellow-bg booking chip next to it. */
.info-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; line-height: 1; padding-bottom: 1px; font-size: 0.85rem; font-weight: 700; color: var(--flk-accent); background: var(--flk-ink); vertical-align: middle; flex-shrink: 0; border-radius: 50%; }
.info-btn:hover { color: var(--flk-ink); background: var(--flk-accent); text-decoration: none; }
@media (pointer: coarse) { .info-btn { width: 1.75rem; height: 1.75rem; font-size: 0.95rem; } }

/* --- ad card --- */
.ad-card-wrapper { margin: 1rem 0; padding: 0.75rem; background: var(--bg-card); border-left: 3px solid var(--flk-rule); }
.ad-card-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.35rem; }
.ad-card { display: flex; gap: 0.75rem; align-items: center; text-decoration: none; color: inherit; }
.ad-card img { max-width: 100px; height: auto; object-fit: cover; flex-shrink: 0; }
.ad-card-body { flex: 1; min-width: 0; }
.ad-card-name { font-weight: 600; font-size: 0.9rem; color: var(--text); }
.ad-card-desc { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.15rem; }

/* --- near-me button --- */
.near-me-btn { display: inline-block; padding: 0.25rem 0.6rem; font-size: 0.7rem; font-family: var(--font-stack); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--flk-ink); background: var(--bg-card); border: 1.3px solid var(--flk-ink); cursor: pointer; line-height: 1; }
.near-me-btn:hover { background: var(--flk-ink); color: var(--flk-accent); }
.near-me-btn[disabled] { cursor: progress; opacity: 0.7; }
.near-me-error { font-size: 0.85rem; color: var(--text-muted); margin: 0.5rem 0 0; }

/* --- by-film grouping (HomeByFilm; #627) --- */
.by-film-sort { display: flex; gap: 8px; padding: 4px 0 8px; font-size: 11px; }
.by-film-sort-label { opacity: 0.6; }
.by-film-sort-link { opacity: 0.6; color: var(--flk-ink); padding-bottom: 1px; }
.by-film-sort-link:hover { opacity: 1; color: var(--flk-ink); text-decoration: none; }
.by-film-sort-link.active { opacity: 1; font-weight: 700; border-bottom: 1.5px solid var(--accent); }
.by-film-list { list-style: none; }
.by-film-row { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px dashed rgba(0,0,0,0.12); }
.by-film-poster { display: block; width: 44px; height: 64px; flex-shrink: 0; color: var(--flk-ink); }
.by-film-poster img, .by-film-poster-placeholder { display: block; width: 44px; height: 64px; object-fit: cover; }
.by-film-body { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.by-film-title-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.by-film-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 700; letter-spacing: -0.2px; color: var(--flk-ink); }
.by-film-meta { font-size: 10px; opacity: 0.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.by-film-times { display: flex; gap: 4px; flex-wrap: wrap; }
.by-film-time-chip { font-size: 10px; padding: 2px 5px; border: 1px solid var(--flk-ink); border-radius: 3px; font-variant-numeric: tabular-nums; background: #fff; color: var(--flk-ink); flex-shrink: 0; }
.by-film-time-chip:hover { background: var(--flk-band); color: var(--flk-ink); text-decoration: none; }
.by-film-overflow { font-size: 10px; opacity: 0.5; align-self: center; }

/* --- film rating chip (#767) --- */
.film-rating { display: inline-flex; line-height: 1; color: var(--flk-ink); }
.film-rating-stars { letter-spacing: 0.05em; font-size: 12px; }
.film-rating-caption { display: block; margin-top: 2px; font-size: 10px; opacity: 0.6; }
.film-rating-caption a { color: inherit; text-decoration: underline; }
.by-film-ad, .by-cinema-ad { list-style: none; }

/* --- by-cinema grouping (HomeByCinema; #627) --- */
.by-cinema-list { list-style: none; }
.by-cinema-card { margin-bottom: 12px; padding: 10px; border: 1.3px solid var(--flk-ink); background: #fff; }
.by-cinema-header { display: flex; justify-content: space-between; align-items: baseline; }
.by-cinema-name { font-size: 13px; font-weight: 700; color: var(--flk-ink); }
.by-cinema-name:hover { color: var(--flk-ink); text-decoration: underline; }
.by-cinema-chain { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 5px; }
.by-cinema-showtimes { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.by-cinema-row { display: flex; gap: 8px; align-items: center; font-size: 11px; }
.by-cinema-time { font-weight: 700; font-variant-numeric: tabular-nums; width: 36px; flex-shrink: 0; color: var(--flk-ink); }
.by-cinema-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--flk-ink); }
.by-cinema-more { display: inline-block; margin-top: 4px; padding-left: 44px; font-size: 10px; opacity: 0.6; color: var(--flk-ink); }

/* --- collapsible day-parts on the today view (#830) --- */
.daypart{display:block;margin:0 -1rem}
.daypart-summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;padding:6px 12px;background:var(--flk-band);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.daypart-summary::-webkit-details-marker{display:none}
.daypart-summary::before{content:"+";display:inline-block;width:10px;margin-right:6px}
.daypart[open]>.daypart-summary::before{content:"−"}
.daypart-count{font-weight:400;letter-spacing:.05em;text-transform:none;opacity:.65}
.daypart-body{padding:0 1rem}
.daypart-body .hour-header{margin:0 -1rem}
@media (pointer:coarse){.daypart-summary{min-height:44px}}

/* --- floating bug report button + dialog (#782) ---
   Lives above every page via base.html. The button is ~2.5rem wide
   (slightly larger than the .info-btn at 1.5rem / 1.75rem on coarse
   pointers, per the ticket) and floats bottom-right with a soft
   shadow. Tap expands an absolutely-positioned dialog anchored to
   the same corner; the form ships with a hidden honeypot field
   (.bug-report-hp) caught by the server. */
.bug-report-fab{position:fixed;right:14px;bottom:14px;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--flk-accent);border:1.5px solid var(--flk-ink);box-shadow:0 3px 10px rgba(0,0,0,.25);display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;z-index:1000;color:var(--flk-ink);font-family:var(--font-stack)}
.bug-report-fab:hover{filter:brightness(.95)}
.bug-report-fab:focus{outline:2px solid var(--flk-ink);outline-offset:2px}
.bug-report-fab svg{width:1.5rem;height:1.5rem;display:block}
@media (pointer:coarse){.bug-report-fab{width:3rem;height:3rem}.bug-report-fab svg{width:1.8rem;height:1.8rem}}
.bug-report-dialog{position:fixed;right:14px;bottom:calc(14px + 2.5rem + 8px);width:min(20rem,calc(100vw - 28px));background:var(--bg-card);border:1.5px solid var(--flk-ink);box-shadow:0 4px 16px rgba(0,0,0,.25);padding:.75rem;z-index:1000;font-size:.85rem}
@media (pointer:coarse){.bug-report-dialog{bottom:calc(14px + 3rem + 8px)}}
.bug-report-dialog[hidden]{display:none}
.bug-report-dialog label{display:block;font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.35rem}
.bug-report-dialog textarea{width:100%;min-height:6rem;max-height:10rem;resize:vertical;overflow:auto;font-family:var(--font-stack);font-size:.9rem;padding:.4rem;border:1px solid var(--flk-rule);background:#fff;color:var(--flk-ink);box-sizing:border-box}
.bug-report-dialog textarea:focus{outline:2px solid var(--flk-accent);outline-offset:1px}
.bug-report-actions{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem;gap:.5rem}
.bug-report-count{font-size:.7rem;color:var(--text-muted);font-variant-numeric:tabular-nums}
.bug-report-count.over{color:var(--flk-hot);font-weight:700}
.bug-report-send{font-family:var(--font-stack);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;padding:.4rem .9rem;background:var(--flk-accent);color:var(--flk-ink);border:1.3px solid var(--flk-ink);cursor:pointer}
.bug-report-send[disabled]{cursor:not-allowed;opacity:.6}
.bug-report-send:hover{filter:brightness(.95)}
.bug-report-status{margin-top:.45rem;font-size:.8rem;min-height:1em}
.bug-report-status.error{color:var(--flk-hot)}
.bug-report-status.thanks{color:var(--flk-ink);font-weight:700}
.bug-report-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* --- nearby list (NearbyList mock; #628) --- */
.nearby-heading{font-size:1.2rem;margin:.5rem 0 .25rem}
.nearby-location{display:flex;align-items:center;gap:6px;padding:8px 0;font-size:11px;border-bottom:1px dashed var(--flk-rule)}
.nearby-location-dot{color:var(--flk-accent)}
.nearby-location-change{margin-left:auto;font-size:10px;opacity:.6;text-decoration:underline;color:var(--flk-ink);background:none;border:none;padding:0;cursor:pointer;font-family:var(--font-stack)}
.nearby-location-set[hidden]{display:none}
.nearby-list{list-style:none;padding:0;margin:0}
.nearby-row{display:grid;grid-template-columns:30px 1fr auto;gap:9px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--flk-rule)}
.nearby-row-closed{opacity:.5}
.nearby-distance{text-align:center;font-variant-numeric:tabular-nums;border:1.3px solid var(--flk-ink);border-radius:4px;padding:3px 0}
.nearby-distance-km{font-size:11px;font-weight:700;line-height:1}
.nearby-distance-unit{font-size:7px;opacity:.6;margin-top:1px}
.nearby-body{min-width:0}
.nearby-name{display:block;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--flk-ink)}
.nearby-address{display:block;font-size:10px;color:var(--flk-ink);opacity:.7;text-decoration:underline dotted var(--flk-accent);text-underline-offset:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nearby-next{text-align:right}
.nearby-next-label{font-size:8px;opacity:.55;text-transform:uppercase;letter-spacing:1px}
.nearby-next-time{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}