/* ============================================================================
   Schwack Cinema — Public site theme
   A dark, editorial "night at the movies" theme layered on top of Bootstrap 5
   (bootstrap.css is loaded first via the "~/Content/css" bundle in
   App_Start/BundleConfig.cs, this file loads after it so these rules win).
   Fonts are linked from Google Fonts in Views/Shared/_Layout.cshtml:
     - Fraunces (display serif) for headlines / brand wordmark
     - Inter (sans) for body copy and UI chrome
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Design tokens
   ------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg:            #0b0d0f;
  --bg-alt:        #101315;
  --bg-elevated:   #171b1e;
  --bg-card:       #191d20;
  --bg-sunk:       #07090a;

  /* Ink */
  --ink:           #f5f4f1;
  --ink-soft:      #d8d6d1;
  --ink-dim:       #a4a29c;
  --ink-mute:      #6c6a65;

  /* Lines */
  --line:          #2a2e31;
  --line-soft:     #1c2023;
  --overlay:       rgba(6, 7, 8, 0.72);

  /* Signature accent — teal */
  --accent:        #17b3a3;
  --accent-bright: #3fe0ce;
  --accent-dim:    #0d6d63;
  --accent-ink:    #04211d;
  --accent-soft:   rgba(23, 179, 163, 0.12);

  /* Secondary accent — warm brass, used sparingly for premium touches */
  --gold:          #c9a468;
  --gold-bright:   #e3c489;
  --gold-dim:      #8a6c3d;
  --gold-ink:      #241b0e;

  --success:       #4caf7d;
  --danger:        #e2685a;
  --warning:       #e0b04a;

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Shape */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm:   0 4px 16px -6px rgba(0, 0, 0, 0.4);
  --shadow-md:   0 16px 40px -16px rgba(0, 0, 0, 0.55);
  --shadow-lg:   0 30px 70px -24px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 0 1px rgba(23, 179, 163, 0.25), 0 20px 50px -20px rgba(23, 179, 163, 0.25);

  --container-max: 1240px;
}

/* Light mode - the default look for a first-time visitor (set in
   Views/Shared/_Layout.cshtml's pre-paint script). Dark is opt-in via the
   toggle in the header; the choice is persisted in localStorage as
   data-theme="dark" on <html>. */
html[data-theme="light"] {
  --bg:            #f7f6f2;
  --bg-alt:        #efeee8;
  --bg-elevated:   #ffffff;
  --bg-card:       #ffffff;
  --bg-sunk:       #eae8e1;

  --ink:           #14171a;
  --ink-soft:      #34383c;
  --ink-dim:       #5b5f63;
  --ink-mute:      #8a8d90;

  --line:          #ddd9d0;
  --line-soft:     #ece9e2;
  --overlay:       rgba(20, 20, 18, 0.55);

  --accent:        #0e8f80;
  --accent-bright: #0bab99;
  --accent-dim:    #0a5c52;
  --accent-ink:    #ffffff;
  --accent-soft:   rgba(14, 143, 128, 0.1);

  --gold:          #a5793a;
  --gold-bright:   #c99a52;
  --gold-dim:      #7a5827;
  --gold-ink:      #fffaf1;

  --shadow-sm:   0 4px 16px -6px rgba(20, 20, 18, 0.12);
  --shadow-md:   0 16px 40px -16px rgba(20, 20, 18, 0.16);
  --shadow-lg:   0 30px 70px -24px rgba(20, 20, 18, 0.2);
  --shadow-glow: 0 0 0 1px rgba(14, 143, 128, 0.18), 0 20px 50px -20px rgba(14, 143, 128, 0.2);
}

/* ---------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--ink);
  height: 100%;
}

/* Sticky footer: on a short page (few rows on "My Requests", an empty state, etc.) the footer
   used to trail right after whatever little content there was, leaving the rest of the viewport
   below it showing bare page background instead of looking anchored to the bottom like the rest
   of the site's chrome. #main-content (the <main> in _Layout.cshtml) is the one flex child that
   grows to fill any leftover space, so .site-footer always sits flush against the bottom of the
   viewport on short pages while still flowing normally (and scrolling normally) on long ones. */
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
  transition: background-color 200ms ease, color 200ms ease;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#main-content {
  flex: 1 0 auto;
}

.site-footer {
  flex-shrink: 0;
}

/* Very faint grain so large dark fields don't look flat */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  z-index: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h1 { font-size: clamp(38px, 5.2vw, 68px); line-height: 1.05; font-weight: 600; }
h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; }
h3 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.2; }

p { margin: 0 0 1em; color: var(--ink-dim); }

a { color: var(--accent-bright); }
a:hover { color: var(--accent-bright); }

::selection { background: var(--accent); color: var(--accent-ink); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------------------
   Layout helpers
   ------------------------------------------------------------------------- */
.container-cinema {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.section { padding: 44px 0; }
.section-tight { padding: 28px 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
}

.section-head { max-width: 640px; margin-bottom: 24px; }
.section-head.center { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }
.section-head p.lead-text { font-size: 17px; }

.lead-text { font-size: 19px; color: var(--ink-dim); }

.divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* ---------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn-cinema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 160ms ease;
  white-space: nowrap;
}
.btn-cinema:hover { border-color: var(--accent); color: var(--accent-bright); text-decoration: none; }
.btn-cinema:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-cinema:disabled, .btn-cinema:disabled:hover { opacity: 0.45; cursor: default; background: var(--bg-elevated); border-color: var(--line); color: var(--ink-mute); }

.btn-cinema-sm { padding: 9px 18px; font-size: 11px; }

.btn-cinema-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-cinema-primary:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: var(--accent-ink);
}

.btn-cinema-ghost {
  border-color: transparent;
  color: var(--ink-dim);
  padding-left: 4px;
  padding-right: 4px;
}
.btn-cinema-ghost:hover { color: var(--accent-bright); border-color: transparent; }

.btn-cinema-outline-gold {
  border-color: var(--gold-dim);
  color: var(--gold-bright);
}
.btn-cinema-outline-gold:hover { border-color: var(--gold); background: rgba(201, 164, 104, 0.08); color: var(--gold-bright); }

/* Solid, filled treatment for the single primary action on a movie card (Book Tickets) so it
   reads as the one thing to click, distinct from the neutral outline Details button beside it. */
.btn-cinema-solid-gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--gold-ink);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.4);
}
.btn-cinema-solid-gold:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--gold-ink);
}

.btn-cinema-block { width: 100%; }

/* ---------------------------------------------------------------------------
   Chips / badges
   ------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: var(--bg-elevated);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.chip-accent { border-color: var(--accent-dim); color: var(--accent-bright); background: var(--accent-soft); }
.chip-gold { border-color: var(--gold-dim); color: var(--gold-bright); background: rgba(201, 164, 104, 0.08); }
.chip-warn { border-color: rgba(220, 80, 70, 0.3); color: #e2685b; background: rgba(220, 80, 70, 0.08); }
/* Movie format (2D/3D/2D-3D) - solid-filled and extra bold so it reads as a badge rather than
   just another tag alongside genre/certification/language. Its own soft shadow lifts it a touch
   above the outline chips beside it, reinforcing that it's the "headline" tag of the row. */
.chip-type { font-weight: 800; color: var(--accent-ink); background: var(--accent); border-color: var(--accent); box-shadow: 0 3px 10px -4px rgba(0, 0, 0, 0.4); }

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-bright);
}

/* ---------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.site-header .container-cinema {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.brand:hover { color: var(--ink); text-decoration: none; }
.brand .brand-mark { color: var(--accent); font-style: italic; }

.main-nav { display: flex; align-items: center; gap: 36px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  position: relative;
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 0;
  transition: color 160ms ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transition: right 200ms ease;
}
.nav-links a:hover,
.nav-links a.active { color: var(--ink); text-decoration: none; }
.nav-links a:hover::after,
.nav-links a.active::after { right: 0; }

.header-actions { display: flex; align-items: center; gap: 14px; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  transition: all 160ms ease;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent-bright); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-moon { display: inline-block; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: inline-block; }

.nav-burger {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Customer auth (header Sign In / Sign Out button + Sign In/Sign Up modal)
   ------------------------------------------------------------------------- */
.auth-account { display: flex; align-items: center; gap: 10px; }

.account-menu { position: relative; }
.account-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px 14px 4px 4px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}
.account-menu-toggle:hover { border-color: var(--accent); color: var(--accent-bright); }
.account-menu-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-caret { flex: none; color: var(--ink-mute); transition: transform 160ms ease; }
.account-menu.open .account-menu-caret { transform: rotate(180deg); }

.account-menu-avatar {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-bright);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
}

.account-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 20;
}
.account-menu.open .account-menu-dropdown { display: block; }

.account-menu-dropdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--line-soft);
}
.account-menu-dropdown-header .account-menu-avatar { width: 38px; height: 38px; font-size: 14px; }
.account-menu-dropdown-name {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu-dropdown-ref { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }

.account-menu-items { padding: 6px; }
.account-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.account-menu-item svg { width: 16px; height: 16px; color: var(--ink-mute); flex: none; }
.account-menu-item:hover { background: var(--accent-soft); color: var(--accent-bright); text-decoration: none; }
.account-menu-item:hover svg { color: var(--accent-bright); }

.auth-modal-content {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.auth-modal-content .modal-header { border-bottom: 1px solid var(--line-soft); padding: 22px 26px 18px; }
.auth-modal-content .modal-title { font-family: var(--font-display); font-size: 20px; color: var(--ink); }
.auth-modal-content .modal-body { padding: 26px; }
.auth-modal-content .btn-close { filter: none; }
html[data-theme="dark"] .auth-modal-content .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

.auth-alert {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.auth-alert-error { background: rgba(220, 80, 70, 0.1); border-color: rgba(220, 80, 70, 0.3); color: #e2685b; }
.auth-alert-success { background: var(--accent-soft); border-color: var(--accent-dim); color: var(--accent-bright); }

.auth-phone-input {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-elevated);
}
.auth-phone-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auth-phone-prefix {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-mute);
  border-right: 1px solid var(--line-soft);
  background: var(--bg-alt);
}
.auth-phone-input .form-control { border: none; border-radius: 0; box-shadow: none !important; background: transparent; }

.auth-otp-input { font-size: 22px; letter-spacing: 0.5em; text-align: center; font-weight: 600; }

.auth-otp-hint { font-size: 13px; color: var(--ink-dim); margin-bottom: 18px; }
.auth-otp-hint strong { color: var(--ink); }

.auth-optional { text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--ink-mute); }

.auth-switch { text-align: center; font-size: 13px; color: var(--ink-dim); margin: 18px 0 0; }
.auth-switch a { color: var(--accent-bright); text-decoration: none; font-weight: 600; }
.auth-switch a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 56px 0 28px;
  overflow: hidden;
  background:
    radial-gradient(760px 420px at 82% -10%, var(--accent-soft), transparent 60%),
    var(--bg);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 56px;
  align-items: center;
}

.hero-copy .eyebrow { margin-bottom: 16px; }
.hero-copy h1 { margin-bottom: 16px; }
.hero-copy .lead-text { max-width: 480px; margin-bottom: 24px; }

.hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.hero-stats {
  display: flex;
  gap: 34px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}
.hero-stats .stat-value {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--ink);
  display: block;
}
.hero-stats .stat-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Decorative fanned poster stack */
.poster-stack {
  position: relative;
  height: 460px;
}
.poster-stack .poster-mini {
  position: absolute;
  width: 220px;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.poster-stack .poster-mini:nth-child(1) { top: 10px; left: 60px; transform: rotate(-6deg); z-index: 1; }
.poster-stack .poster-mini:nth-child(2) { top: 70px; left: 170px; transform: rotate(4deg); z-index: 2; }
.poster-stack .poster-mini:nth-child(3) { top: 0; left: 0; transform: rotate(-14deg); z-index: 0; opacity: 0.7; }

/* ---------------------------------------------------------------------------
   Movie slider (homepage hero - cycles Now Showing + Coming Soon movies)
   ------------------------------------------------------------------------- */
.movie-slider .slider-panel { display: none; }
.movie-slider .slider-panel.active { display: grid; }

.slider-copy .eyebrow { margin-bottom: 14px; }
.slider-copy h1 { margin-bottom: 12px; }

.slider-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 480px;
  margin-bottom: 12px;
}

.slider-meta {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 20px;
}

.slider-poster {
  width: 100%;
  max-width: 340px;
  margin-left: auto;
  box-shadow: var(--shadow-lg);
}

.slider-nav {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.slider-nav-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  border-top: 2px solid transparent;
  padding: 12px 0 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  max-width: 180px;
  opacity: 0.55;
  transition: opacity 160ms ease, border-color 160ms ease;
}
.slider-nav-item:hover { opacity: 0.85; }
.slider-nav-item.active { opacity: 1; border-top-color: var(--accent); }
.slider-nav-index {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}
.slider-nav-item.active .slider-nav-index { color: var(--accent-bright); }
.slider-nav-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   Movie posters (CSS-only placeholder art - no image assets required)
   ------------------------------------------------------------------------- */
.movie-poster {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  color: #f3efe6;
  font-family: var(--font-display);
  box-shadow: var(--shadow-sm);
  isolation: isolate;
}
.movie-poster::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(130% 90% at 15% 5%, rgba(255, 255, 255, 0.16), transparent 55%),
    linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}
.movie-poster .mp-top {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.85;
}
.movie-poster .mp-title {
  position: relative; z-index: 1;
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
  /* Real movie titles vary in length (unlike the short placeholder titles this was
     first designed for) - clip gracefully instead of overflowing the poster. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mp-1 { background: linear-gradient(175deg, #123b3a 0%, #0a1f1f 60%, #050d0d 100%); }
.mp-2 { background: linear-gradient(175deg, #3a2a12 0%, #1f150a 60%, #0d0805 100%); }
.mp-3 { background: linear-gradient(175deg, #2a1230 0%, #170a1c 60%, #0a050c 100%); }
.mp-4 { background: linear-gradient(175deg, #123023 0%, #0a1c15 60%, #050d0a 100%); }
.mp-5 { background: linear-gradient(175deg, #331616 0%, #1c0d0d 60%, #0c0505 100%); }
.mp-6 { background: linear-gradient(175deg, #14243a 0%, #0a1420 60%, #05090d 100%); }

/* ---------------------------------------------------------------------------
   Now showing grid
   ------------------------------------------------------------------------- */
.movie-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.movie-card { display: flex; flex-direction: column; gap: 14px; }
.movie-card .movie-info { display: flex; flex-direction: column; gap: 8px; }
.movie-card .movie-title-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.movie-card .movie-title-row h3 { margin: 0; font-size: 19px; }
.movie-card .movie-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.movie-card .movie-meta { font-size: 13px; color: var(--ink-mute); }
.movie-card .movie-actions { margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   Movie details page
   ------------------------------------------------------------------------- */
.movie-details-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: start;
}
.movie-details-poster { width: 100%; }
.movie-details-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0;
}
.movie-details-meta .info-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.movie-details-meta .info-value {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
}
.movie-details-meta .info-value.info-value-sans {
  font-family: var(--font-body);
  font-weight: 500;
}
.movie-details-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }

/* Desktop/tablet: date cards (Today, Tomorrow, ...) sit side by side and wrap to a new row once
   a row is full, same reasoning as the theatre-block row below - a lone or narrow-content date
   card shouldn't force a full-width line when there's room for the next one alongside it. Phones
   override each card back to one-per-row (see the 720px breakpoint). */
.showtimes-list { display: flex; flex-wrap: wrap; gap: 18px; }
.showtimes-date-group {
  flex: 1 1 520px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
}
.showtimes-date-label {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 16px;
}
/* Desktop/tablet: each theatre's block (name + its own chips) flows in a row alongside the
   others and wraps to a new line once a row is full, instead of every theatre forcing its own
   full-width line regardless of how little space its chips actually need. Phones override this
   back to one theatre block per line below (see the 720px breakpoint). */
.showtimes-theatres { display: flex; flex-wrap: wrap; gap: 24px 40px; }
.showtimes-theatre-row { flex: 0 0 auto; }
.showtimes-theatre-name {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.showtimes-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.showtime-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* Fixed width (not min-width) so every chip is exactly the same size no matter how long its
     hall name is - min-width alone still let a long name like "Movie Hall, Ground Floor (HUL)"
     grow wider than a short one like "Movie Hall, 3rd Floor (MLE)" once both exceeded the
     min-width. .showtime-chip-hall below has no nowrap, so a name that doesn't fit just wraps
     onto a second line inside this fixed box instead of stretching it. */
  width: 240px;
  padding: 10px 12px;
  border: 1px solid #EAE8E1;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.showtime-chip:hover {
  border-color: var(--accent-bright);
  background: rgba(23, 179, 163, 0.22);
  transform: translateY(-2px);
}
.showtime-chip-date {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.showtime-chip-time { font-size: 13px; font-weight: 600; color: var(--accent-bright); }
.showtime-chip-hall {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  /* Reserves space for a full two lines (line-height 1.4 x 10px = 14px each) even when this
     particular hall name only needs one - otherwise a short name like "Movie Hall, 3rd Floor"
     left its chip shorter than a longer one like "Movie Hall, Ground Floor" that wraps, so the
     two chips in the same row ended up different heights. */
  line-height: 1.4;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.showtimes-empty { color: var(--ink-mute); font-size: 14px; margin-bottom: 0; }
.showtimes-hint {
  font-size: 13px;
  color: var(--ink-mute);
  margin-bottom: 16px;
}

/* .showtime-chip is now a <button> (clickable when the assigned hall has a seat available for
   that specific showtime) - these reset the default button chrome so it still looks like the
   plain pill above, then layer in the disabled/sold-out and selected states. */
.showtime-chip {
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.showtime-chip.is-selected {
  border-color: var(--accent-bright);
  background: rgba(23, 179, 163, 0.22);
}
.showtime-chip-seats {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--success);
  background: rgba(76, 175, 125, 0.14);
}
.showtime-chip-seats.is-zero {
  color: var(--danger);
  background: rgba(226, 104, 90, 0.14);
}
.showtime-chip:disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.55;
}

.is-hidden { display: none; }

/* Read-only seat map panel, revealed under the schedule chips once one is clicked - shows the
   assigned theatre/hall and which seats are currently free to buy for that specific showtime.
   No seat is clickable here yet - selecting seats to book is a later step. */
.seatmap-panel {
  margin-top: 28px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
}
.seatmap-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.seatmap-panel-location {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  display: block;
}
.seatmap-panel-datetime {
  font-size: 13px;
  color: var(--ink-mute);
  display: block;
  margin-top: 4px;
}
.seatmap-panel-close {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-mute);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.seatmap-panel-close:hover { border-color: var(--accent); color: var(--accent-bright); }

.seatmap-panel-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.seatmap-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-mute); }
.seatmap-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.seatmap-legend-swatch.is-available { background: var(--accent-soft); border-color: var(--accent); }
.seatmap-legend-swatch.is-unavailable { background: var(--bg-elevated); border-color: var(--ink-mute); opacity: 0.6; }

.seatmap-screen { width: 100%; max-width: 420px; margin: 0 auto 24px; text-align: center; }
.seatmap-screen-bar {
  height: 10px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, var(--accent-soft), transparent);
  border-bottom: 2px solid var(--accent);
  box-shadow: 0 12px 24px -12px var(--accent);
}
.seatmap-screen span {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.seatmap-panel-status { text-align: center; color: var(--ink-mute); font-size: 14px; margin: 8px 0; }

.seatmap-rows {
  display: flex;
  flex-direction: column;
  /* Plain "center" is kept first as a fallback for browsers that don't understand "safe center"
     (an invalid value is ignored, leaving the previous declaration in place). Where it IS
     understood, "safe center" still centers rows that fit, but switches to start-alignment once
     the widest row needs to scroll - centering a scrollable flex container otherwise clips
     whatever overflows the far edge (here, the left side) because centered content can't be
     scrolled far enough to reveal it. That's what made seats A1/A2 unreachable on narrower
     screens - no amount of scrolling could bring them into view. */
  align-items: center;
  align-items: safe center;
  gap: 8px;
  overflow-x: auto;
  /* Setting overflow-x without an explicit overflow-y implicitly makes overflow-y "auto" too (per
     the CSS Overflow spec), which turns this into a clipping context on the vertical axis as well.
     The top padding (offset by a matching negative margin, so the visual gap above this element
     stays the same as before) gives the first row's hover lift
     (.seatmap-seat.is-clickable:hover's translateY(-2px)) room to move into, instead of having its
     top border clipped by that edge. */
  padding-top: 6px;
  margin-top: -6px;
  padding-bottom: 8px;
}
.seatmap-row { display: flex; align-items: center; gap: 8px; }
.seatmap-row-label { width: 22px; flex: none; font-size: 13px; font-weight: 600; color: var(--ink-mute); text-align: center; }
.seatmap-seats { display: flex; flex-wrap: nowrap; gap: 6px; }
.seatmap-seat {
  /* Desktop/tablet size - phones get a smaller override further down (see the
     max-width: 720px media query) since this size wouldn't fit a full row on a narrow screen. */
  width: 38px;
  height: 34px;
  flex: none;
  border-radius: 7px 7px 3px 3px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
}
.seatmap-seat.is-available { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-bright); }
.seatmap-seat.is-unavailable { background: var(--bg-elevated); border-color: var(--ink-mute); color: var(--ink-mute); opacity: 0.55; }
.seatmap-seat.is-selected { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.seatmap-seat.is-clickable { cursor: pointer; transition: transform 0.1s ease; }
.seatmap-seat.is-clickable:hover { transform: translateY(-2px); }
.seatmap-rows.is-syncing { opacity: 0.6; pointer-events: none; }

.seatmap-legend-swatch.is-selected { background: var(--accent); border-color: var(--accent); }

/* ---------------------------------------------------------------------------
   Seat booking panel (interactive selection, timer, pricing, inventory)
   ------------------------------------------------------------------------- */
.booking-panel {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}

.booking-timer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: rgba(224, 176, 74, 0.1);
  border: 1px solid rgba(224, 176, 74, 0.3);
}
/* .booking-timer-row's own "display: flex" above has the same specificity as the generic
   ".is-hidden { display: none; }" utility and comes later in the file, so it would otherwise win
   and leave the row (and its static "5:00" placeholder text) visible even while hidden. This
   compound selector is more specific, so it always wins regardless of source order. */
.booking-timer-row.is-hidden { display: none; }
.booking-timer-label { font-size: 13px; color: var(--ink-mute); }
.booking-timer {
  /* Same monospace stack as .profile-phone-number - a serif display font (the site's default
     headline font, used elsewhere) isn't monospaced, so the digit widths shift slightly every
     second as the countdown ticks; a monospace font keeps it visually steady. */
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 700;
  color: var(--warning);
  letter-spacing: 0.03em;
}

.booking-hint { text-align: center; font-size: 13px; color: var(--ink-mute); margin-bottom: 16px; }

.booking-alert {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 16px;
  border: 1px solid rgba(220, 80, 70, 0.3);
  background: rgba(220, 80, 70, 0.1);
  color: #e2685b;
  text-align: center;
}

.booking-summary {
  background: var(--bg-elevated);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.booking-summary-empty { font-size: 13px; color: var(--ink-mute); text-align: center; }
.booking-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--ink);
  padding: 6px 0;
}
.booking-summary-row:not(:last-child) { border-bottom: 1px dashed var(--line-soft); }
.booking-summary-subtotal { font-weight: 700; color: var(--ink); }

.booking-summary-group { padding: 6px 0; }
.booking-summary-group:not(:last-child) { border-bottom: 1px dashed var(--line-soft); }
.booking-summary-group .booking-summary-row { padding: 0 0 8px; border-bottom: none; }
.booking-summary-rate { font-weight: 400; color: var(--ink-mute); font-size: 12px; }

.booking-seat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.booking-seat-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent-dim);
  color: var(--accent-bright);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.booking-section-title {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 4px;
}
.booking-optional { font-size: 12px; font-weight: 400; color: var(--ink-mute); }

.booking-inventory { margin-bottom: 20px; }
.booking-inventory-empty { font-size: 13px; color: var(--ink-mute); }

.booking-inventory-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.booking-inventory-search {
  flex: none;
  width: 100%;
  max-width: 220px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  color: var(--ink);
  font-size: 13px;
}
.booking-inventory-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.booking-inventory-search::placeholder { color: var(--ink-mute); }

/* Card grid, styled after the internal admin app's Item Sales picker (Cinema.Views.InventoryItemSales) -
   name, unit/price, then a qty stepper pinned to the bottom via margin-top:auto on the stepper below.
   Capped height with its own scrollbar (rather than left to grow the page like the internal app's
   version does) since this grid sits partway down the movie Details page, not on its own dedicated
   screen - see the renderInventory() comment in Details.cshtml for the reasoning. */
.booking-inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 8px;
  max-height: 380px;
  overflow-y: auto;
  /* Padding on every side gives .booking-item-card's hover translateY(-2px) room to move into -
     without it, a card's top (or side) border gets clipped by this container's own scroll edge the
     moment it shifts on hover (only an issue because this grid scrolls; the internal admin app's
     equivalent card grid isn't a scroll container, so it never needed this). The negative left/right
     margin cancels the padding's visual indent so the grid still lines up with the search box and
     section title above it; margin-top is left alone so the 8px gap above still applies. */
  padding: 4px 8px 4px 4px;
  margin-left: -4px;
  margin-right: -4px;
}
.booking-inventory-empty-search { font-size: 13px; color: var(--ink-mute); text-align: center; margin-top: 12px; }

.booking-item-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.booking-item-card:hover { border-color: var(--accent-dim); transform: translateY(-2px); box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.4); }
.booking-item-card.has-qty { border-color: var(--accent); background: var(--accent-soft); }
.booking-item-card.is-hidden { display: none; }

.booking-item-card-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.booking-item-card-meta { font-size: 11px; color: var(--ink-mute); margin-bottom: 4px; }

.booking-qty-stepper { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: auto; }
.booking-qty-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.booking-qty-btn:hover { border-color: var(--accent); color: var(--accent-bright); }
.booking-qty-value { min-width: 18px; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink); }

.booking-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  margin-bottom: 16px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
}
.booking-total-amount { color: var(--accent-bright); font-weight: 700; }

.booking-proceed-hint {
  text-align: center;
  font-size: 12px;
  color: var(--ink-mute);
  margin: 0 0 10px;
}

.booking-confirmation {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-dim);
  color: var(--accent-bright);
  font-size: 14px;
  text-align: center;
}
.booking-confirmation a { color: var(--accent-bright); font-weight: 600; text-decoration: underline; }

/* "Pay by Bank Transfer" modal, opened from the Proceed button once the customer's seat holds are
   confirmed still valid - mirrors .ticket-modal-content/.auth-modal-content's styling pattern so
   every modal on the site looks related. */
.bank-transfer-modal-content {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.bank-transfer-modal-content .modal-header { border-bottom: 1px solid var(--line-soft); padding: 22px 26px 18px; }
.bank-transfer-modal-content .modal-title { font-family: var(--font-display); font-size: 20px; color: var(--ink); }
.bank-transfer-modal-content .modal-body { padding: 26px; }
.bank-transfer-modal-content .modal-footer { border-top: 1px solid var(--line-soft); padding: 16px 26px; }
.bank-transfer-modal-content .btn-close { filter: none; }
html[data-theme="dark"] .bank-transfer-modal-content .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

.bank-transfer-show-info { margin-bottom: 16px; }

.bank-transfer-hint { font-size: 13px; color: var(--ink-mute); margin-bottom: 18px; }

.bank-transfer-account {
  background: var(--bg-elevated);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.bank-transfer-account-loading, .bank-transfer-account-error { font-size: 13px; color: var(--ink-mute); text-align: center; margin-bottom: 0; }
.bank-transfer-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--ink);
  padding: 4px 0;
}
.bank-transfer-account-row strong { color: var(--accent-bright); font-weight: 700; letter-spacing: 0.02em; }

.bank-transfer-summary { margin-bottom: 8px; }
.bank-transfer-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--ink);
  padding: 5px 0;
}
.bank-transfer-summary-row:not(:last-child) { border-bottom: 1px dashed var(--line-soft); }

.bank-transfer-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  margin-bottom: 18px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
}
.bank-transfer-total-amount { color: var(--accent-bright); font-weight: 700; }

.bank-transfer-field { margin-bottom: 16px; }
.bank-transfer-field .form-label { font-size: 13px; color: var(--ink-mute); margin-bottom: 6px; }

.bank-transfer-alert {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 0;
  border: 1px solid rgba(220, 80, 70, 0.3);
  background: rgba(220, 80, 70, 0.1);
  color: #e2685b;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Feature strip
   ------------------------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
}
.feature-icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-bright);
  margin-bottom: 20px;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 { font-size: 17px; margin-bottom: 8px; }
.feature-card p { font-size: 14px; margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   CTA band
   ------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 48px 36px;
  text-align: center;
  background:
    radial-gradient(600px 260px at 50% 0%, var(--accent-soft), transparent 70%),
    var(--bg-elevated);
  border: 1px solid var(--line-soft);
}
.cta-band h2 { margin-bottom: 14px; }
.cta-band p { max-width: 520px; margin-left: auto; margin-right: auto; }
.cta-band .hero-actions { justify-content: center; margin-top: 20px; }

/* ---------------------------------------------------------------------------
   Content cards (About / Contact / generic pages)
   ------------------------------------------------------------------------- */
.page-hero {
  padding: 44px 0 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 36px;
}
.page-hero h1 { margin-bottom: 12px; }

.content-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 40px;
}

.prose p { font-size: 16px; color: var(--ink-dim); text-align: justify; text-justify: inter-word; }
.prose p:last-child { margin-bottom: 0; }

/* Story (prose) + facts side-by-side, used on About - fills the container instead of a lone
   narrow card floating in the middle of the page. Grid items stretch to equal height by
   default, so the facts card matches the story card's height; .about-story-facts then spreads
   its entries across that height with justify-content: space-between. */
.about-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 28px;
}
.about-story-facts {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.about-fact .stat-value { font-size: 30px; margin-bottom: 6px; }

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.value-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 24px;
  background: var(--bg-elevated);
}
.value-card .eyebrow { margin-bottom: 10px; }
.value-card h3 { font-size: 16px; margin-bottom: 6px; }
.value-card p { font-size: 13px; margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Error pages (404 / 500)
   ------------------------------------------------------------------------- */
.error-page {
  padding: 80px 0;
  text-align: center;
}
.error-page .container-cinema { max-width: 640px; }
.error-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-bright);
  margin: 0 auto 28px;
}
.error-icon svg { width: 40px; height: 40px; }
.error-page .eyebrow { justify-content: center; margin-bottom: 18px; }
.error-page h1 { margin-bottom: 16px; }
.error-page .lead-text { max-width: 480px; margin: 0 auto 34px; }
.error-page .hero-actions { justify-content: center; }

/* ---------------------------------------------------------------------------
   Contact info cards
   ------------------------------------------------------------------------- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
.info-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
}
.info-card .feature-icon { margin-bottom: 18px; }
.info-card .info-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.info-card .info-value {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
}
.info-card .info-note { font-size: 12px; color: var(--ink-mute); margin-top: 4px; margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Customer profile page ("Update Personal Details")
   ------------------------------------------------------------------------- */
.profile-summary {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.profile-avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-bright);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}
.profile-summary-name { font-family: var(--font-display); font-size: 22px; color: var(--ink); margin-bottom: 8px; }
.profile-summary-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.profile-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.profile-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.profile-card-header .feature-icon { margin-bottom: 0; width: 40px; height: 40px; }
.profile-card-header .feature-icon svg { width: 18px; height: 18px; }
.profile-card-header h3 { font-size: 16px; margin-bottom: 0; }
.profile-card-header p { font-size: 12px; color: var(--ink-mute); margin: 2px 0 0; }

.profile-phone-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.profile-phone-number {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   Bootstrap form control theming (used once booking/contact forms come online)
   ------------------------------------------------------------------------- */
.form-control,
.form-select {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  max-width: none;
}
.form-control:focus,
.form-select:focus {
  background: var(--bg-elevated);
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-control::placeholder { color: var(--ink-mute); }
.form-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 8px;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line-soft);
  background: var(--bg-sunk);
  padding: 14px 0 10px;
  margin-top: 4px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 18px;
  padding-bottom: 10px;
}
.footer-brand .brand { margin-bottom: 4px; }
.footer-brand p { font-size: 14px; max-width: 280px; margin-bottom: 4px; }

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.footer-col a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 14px;
  transition: color 160ms ease;
}
.footer-col a:hover { color: var(--accent-bright); text-decoration: none; }
.footer-col p { margin-bottom: 0; }

.social-links { display: flex; gap: 10px; margin-top: 6px; }
.social-links a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-dim);
  transition: all 160ms ease;
}
.social-links a:hover { border-color: var(--accent); color: var(--accent-bright); }
.social-links svg { width: 15px; height: 15px; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--ink-mute);
}
.footer-bottom a { color: var(--ink-mute); text-decoration: none; }
.footer-bottom a:hover { color: var(--accent-bright); }
.footer-legal { display: flex; gap: 20px; }

/* ---------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .movie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .profile-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .about-story-grid { grid-template-columns: 1fr; }
  .about-story-facts { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 28px; }
  .poster-stack { height: 320px; max-width: 360px; margin: 0 auto; }
  .poster-stack .poster-mini { width: 170px; }
  .poster-stack .poster-mini:nth-child(2) { left: 130px; }

  .movie-details-grid { grid-template-columns: 1fr; }
  .movie-details-poster { max-width: 280px; margin: 0 auto; }

  .slider-poster { max-width: 260px; margin: 0 auto; }
  .slider-nav { gap: 20px; }
  .slider-nav-item { max-width: 140px; }

  .main-nav { display: none; }
  .nav-burger { display: inline-flex; }

  .site-header.nav-open .main-nav {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--line-soft);
    padding: 8px 24px 20px;
  }
  .site-header.nav-open .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
  }
  .site-header.nav-open .nav-links a { display: block; width: 100%; padding: 12px 0; }
  .site-header.nav-open .header-actions { padding-top: 12px; }
}

@media (max-width: 720px) {
  .section { padding: 32px 0; }

  /* Now Showing / Coming Soon become a finger-swipeable strip on phones only -
     desktop and tablet keep the plain wrapping grid above untouched. */
  .movie-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: none;
    margin: 0;
    padding-bottom: 2px;
  }
  .movie-grid::-webkit-scrollbar { display: none; }
  .movie-grid .movie-card { flex: 0 0 78%; scroll-snap-align: start; }

  .feature-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }

  /* Mobile footer is just the copyright line - brand/links columns and the
     legal links only show on tablet/desktop. */
  .footer-grid { display: none; }
  .footer-legal { display: none; }
  .footer-bottom { justify-content: center; padding-top: 0; border-top: none; }

  .cta-band { padding: 44px 24px; }
  .hero-stats { flex-wrap: wrap; gap: 24px; }
  .movie-details-meta { grid-template-columns: 1fr; }
  /* Phones only: one date card (Today, Tomorrow, ...) per row, full-width, instead of the
     desktop/tablet row-that-wraps layout above. */
  .showtimes-date-group { flex: 1 1 100%; padding: 18px; }
  /* Phones only: one theatre block per line (stacked, full-width, divider between them) instead
     of the desktop/tablet row-that-wraps layout above, and within each theatre, one chip per
     row too - a fixed chip width on a narrow screen left room for a second chip/theatre to sit
     alongside the first, which read as an inconsistent, cramped grid on mobile. */
  .showtimes-theatres { flex-direction: column; gap: 0; }
  .showtimes-theatre-row { width: 100%; padding: 16px 0; border-top: 1px solid var(--line-soft); }
  .showtimes-theatre-row:first-child { border-top: none; padding-top: 0; }
  .showtimes-chips { flex-direction: column; gap: 8px; }
  .showtime-chip { width: 100%; padding: 10px 14px; }

  .seatmap-panel { padding: 18px; }
  .seatmap-panel-header { flex-direction: column; gap: 12px; }
  .seatmap-panel-close { align-self: flex-end; margin-top: -40px; }
  .seatmap-seat { width: 26px; height: 24px; font-size: 9px; }

  .error-page { padding: 72px 0; }

  .profile-avatar { display: none; }
}

/* ---------------------------------------------------------------------------
   Customer transactions page ("My Transactions")
   ------------------------------------------------------------------------- */
.txn-header { margin-bottom: 24px; }
.txn-header p { margin-top: 6px; margin-bottom: 0; }

.txn-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.txn-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.txn-stat-card .feature-icon { margin-bottom: 0; width: 44px; height: 44px; flex: none; }
.txn-stat-card .feature-icon svg { width: 20px; height: 20px; }
.txn-stat-label { font-size: 12px; color: var(--ink-mute); margin-bottom: 2px; }
.txn-stat-value { font-family: var(--font-body); font-size: 20px; font-weight: 600; color: var(--ink); }

.txn-layout {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.txn-split-card, .txn-history-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.txn-split-card h3, .txn-history-card h3 { font-family: var(--font-body); font-size: 16px; margin-bottom: 20px; }
.txn-history-hint { margin-top: -12px; margin-bottom: 18px; font-size: 12px; color: var(--ink-mute); }

.split-donut {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  margin: 4px auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.split-donut-hole {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.split-donut-percent { font-family: var(--font-body); font-size: 21px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.split-donut-label { font-size: 10px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 3px; }

.split-legend { display: flex; flex-direction: column; gap: 10px; }
.split-legend-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.split-legend-name { display: flex; align-items: center; color: var(--ink-dim); }
.split-legend-swatch { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 8px; flex: none; }
.split-legend-swatch.is-ticket { background: var(--accent-bright); }
.split-legend-swatch.is-item { background: var(--gold-bright); }
.split-legend-value { color: var(--ink); font-weight: 600; }

.txn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.txn-row:last-child { border-bottom: none; padding-bottom: 4px; }
.txn-row-main { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.txn-row-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.txn-row-icon.is-ticket { background: var(--accent-soft); color: var(--accent-bright); }
.txn-row-icon.is-item { background: rgba(201, 164, 104, 0.14); color: var(--gold-bright); }
.txn-row-icon svg { width: 18px; height: 18px; }
.txn-row-desc { font-size: 14px; color: var(--ink); font-weight: 500; }
.txn-row-meta { font-size: 12px; color: var(--ink-mute); margin-top: 3px; }
.txn-row-amount { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.txn-row.is-hidden { display: none; }

.txn-empty { text-align: center; padding: 40px 0; color: var(--ink-mute); font-size: 14px; }
.txn-capped-note { font-size: 12px; color: var(--ink-mute); margin-top: 16px; margin-bottom: 0; text-align: center; }

.txn-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.txn-page-btn, .txn-page-number {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-dim);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.txn-page-btn:hover, .txn-page-number:hover { background: var(--accent-soft); color: var(--accent-bright); border-color: var(--accent-dim); }
.txn-page-btn:disabled { opacity: 0.35; cursor: default; background: none; color: var(--ink-dim); border-color: var(--line); }
.txn-page-number.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.txn-page-numbers { display: flex; align-items: center; gap: 6px; }

.txn-row-clickable { cursor: pointer; }
.txn-row-clickable:hover { background: var(--accent-soft); border-radius: var(--radius-sm); }

/* Ticket-details modal opened by clicking a Ticket-type row above - mirrors .auth-modal-content's
   styling pattern (see that block earlier in this file) so both modals on the site look related. */
.ticket-modal-content {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.ticket-modal-content .modal-header { border-bottom: 1px solid var(--line-soft); padding: 22px 26px 18px; }
.ticket-modal-content .modal-title { font-family: var(--font-display); font-size: 20px; color: var(--ink); }
.ticket-modal-content .modal-body { padding: 26px; }
.ticket-modal-content .modal-footer { border-top: 1px solid var(--line-soft); padding: 16px 26px; }
.ticket-modal-content .btn-close { filter: none; }
html[data-theme="dark"] .ticket-modal-content .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

.ticket-modal-hidden { display: none !important; }
.ticket-modal-loading { color: var(--ink-dim); font-size: 13px; margin-bottom: 0; }

.ticket-modal-summary { margin-bottom: 20px; }
.ticket-modal-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.ticket-modal-summary-row:last-child { border-bottom: none; }
.ticket-modal-summary-row span:first-child { color: var(--ink-dim); }
.ticket-modal-summary-row span:last-child { font-weight: 600; text-align: right; }

.ticket-modal-seats { display: flex; flex-direction: column; gap: 10px; }
.ticket-seat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  flex-wrap: wrap;
}
.ticket-seat-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ticket-seat-label { font-weight: 700; font-size: 15px; color: var(--ink); min-width: 34px; }
.ticket-seat-type { font-size: 12px; color: var(--ink-dim); }
.ticket-seat-amount { font-size: 13px; font-weight: 600; color: var(--ink); }

@media (max-width: 900px) {
  .txn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .txn-layout { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Customer online requests page ("My Requests") - reuses the txn-row /
   ticket-modal building blocks above so both list pages look related.
   ------------------------------------------------------------------------- */
.req-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.req-items-list { margin-top: 18px; }
.req-items-list h4 { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink-dim); margin-bottom: 10px; }

.req-rejection-note {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(220, 80, 70, 0.08);
  border: 1px solid rgba(220, 80, 70, 0.3);
  color: #e2685b;
  font-size: 13px;
}

.req-slip-update { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.req-slip-update h4 { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.req-slip-update #requestSlipMessage { margin-top: 0; margin-bottom: 12px; }
.req-slip-update-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.req-slip-update-row input[type="file"] { flex: 1; min-width: 180px; font-size: 12px; color: var(--ink-dim); }