/* =============================================
   Akord Music — style.css
   ============================================= */

/* ── TOKENS ──────────────────────────────────── */
:root {
  --bg:          #fcecd2;
  --surface:     #ffffff;
  --surface-2:   #f9fafb;
  --text:        #13141a;
  --text-2:      #4a4d5e;
  --muted:       #878ca2;
  --line:        #e2e4ed;
  --primary:     #9a6b1e;
  --primary-dk:  #7d5518;
  --primary-tint:rgba(154,107,30,0.10);
  --sale:        #d95f2b;
  --sale-tint:   rgba(217,95,43,0.09);

  /* Layered shadows — resting and hover */
  --shadow-card:
    0 1px 3px rgba(20,22,40,0.06),
    0 4px 14px rgba(20,22,40,0.08);
  --shadow-card-hover:
    0 2px 8px rgba(20,22,40,0.07),
    0 12px 36px rgba(20,22,40,0.13);
  --shadow-panel:
    0 2px 8px rgba(20,22,40,0.07),
    0 10px 32px rgba(20,22,40,0.10);

  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  22px;

  --container:  1320px;
  --header-h:   80px;
  --ease:       0.22s ease;
}

[data-theme="dark"] {
  --bg:          #0a0b0d;
  --surface:     #111214;
  --surface-2:   #0d0e10;
  --text:        #ededef;
  --text-2:      #8c8c95;
  --muted:       #505058;
  --line:        #1d1e22;
  --primary:     #c49a52;
  --primary-dk:  #a67c3a;
  --primary-tint:rgba(196,154,82,0.12);
  --sale-tint:   rgba(217,95,43,0.13);

  --shadow-card:
    0 1px 4px rgba(0,0,0,0.40),
    0 4px 18px rgba(0,0,0,0.48);
  --shadow-card-hover:
    0 2px 8px rgba(0,0,0,0.50),
    0 14px 48px rgba(0,0,0,0.60);
  --shadow-panel:
    0 2px 8px rgba(0,0,0,0.44),
    0 10px 34px rgba(0,0,0,0.54);
}

/* ── RESET ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img   { display: block; max-width: 100%; }
a     { color: inherit; text-decoration: none; }
p     { margin: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }

/* ── LAYOUT ──────────────────────────────────── */
.container {
  width: min(calc(100% - 32px), var(--container));
  margin: 0 auto;
}
.site-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ══════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  transition: background var(--ease), border-color var(--ease);
}
[data-theme="dark"] .topbar {
  background: rgba(10,11,13,0.97);
}
.topbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Logo */
.brand       { display: inline-flex; align-items: center; flex-shrink: 0; gap: 11px; }
.logo-img    { height: 54px; width: auto; display: block; }
.logo-footer { height: 42px; margin-bottom: 20px; }

.brand-name {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: var(--text);
  white-space: nowrap;
}

/* Desktop nav */
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.desktop-nav a {
  padding: 6px 13px;
  border-radius: var(--radius-sm);
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--text-2);
  transition: background var(--ease), color var(--ease);
}
.desktop-nav a:hover {
  background: var(--primary-tint);
  color: var(--primary);
}

/* Actions row */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.top-link {
  padding: 6px 13px;
  border-radius: var(--radius-sm);
  font-size: 0.91rem;
  font-weight: 500;
  color: var(--text-2);
  transition: background var(--ease), color var(--ease);
}
.top-link:hover {
  background: var(--primary-tint);
  color: var(--primary);
}

/* ── BUTTONS ─────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 0.91rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--ease), box-shadow var(--ease),
              filter var(--ease), transform 0.14s ease;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dk));
  color: #fff;
  box-shadow: 0 2px 8px rgba(168,240,64,0.22), 0 6px 18px rgba(168,240,64,0.16);
}
.btn-primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 3px 12px rgba(168,240,64,0.28), 0 8px 26px rgba(168,240,64,0.20);
}
.btn-outline {
  border: 1.5px solid var(--primary);
  color: var(--primary);
  background: transparent;
}
.btn-outline:hover {
  background: var(--primary-tint);
}

/* Theme toggle */
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  background: var(--surface);
  flex-shrink: 0;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.theme-toggle:hover { border-color: var(--primary); color: var(--primary); }
.theme-toggle svg {
  width: 17px; height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Language toggle */
.lang-toggle {
  height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.lang-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-tint);
}

/* Hamburger */
.menu-toggle {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  background: var(--surface);
  flex-shrink: 0;
  transition: border-color var(--ease);
}
.menu-toggle:hover { border-color: var(--primary); }
.menu-toggle span {
  height: 1.5px;
  background: var(--text-2);
  border-radius: 999px;
}

/* Mobile menu */
.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text-2);
  transition: background var(--ease), color var(--ease);
}
.mobile-menu a:hover { background: var(--primary-tint); color: var(--primary); }
.btn-mobile { width: 100%; margin-top: 6px; justify-content: center; }

/* Desktop nav dropdown */
.nav-dropdown {
  position: relative;
}
/* Invisible bridge that fills the 8px gap between the trigger and the menu,
   keeping .nav-dropdown:hover true while the cursor travels downward */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
}
.nav-drop-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: var(--radius-sm);
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--text-2);
  transition: background var(--ease), color var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.nav-drop-btn:hover,
.nav-dropdown.open .nav-drop-btn {
  background: var(--primary-tint);
  color: var(--primary);
}
.drop-arrow {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--ease);
}
.nav-dropdown.open .drop-arrow {
  transform: rotate(180deg);
}
.nav-drop-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
  min-width: 170px;
  z-index: 110;
  padding: 6px;
  overflow: hidden;
}
.nav-dropdown.open .nav-drop-menu,
.nav-dropdown:hover .nav-drop-menu {
  display: block;
}
.nav-dropdown:hover .drop-arrow {
  transform: rotate(180deg);
}
.nav-drop-item {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-2);
  transition: background var(--ease), color var(--ease);
  cursor: pointer;
}
.nav-drop-item:hover {
  background: var(--primary-tint);
  color: var(--primary);
}

/* Mobile nav dropdown (accordion inside mobile-menu) */
.mobile-nav-drop-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text-2);
  transition: background var(--ease), color var(--ease);
  cursor: pointer;
}
.mobile-nav-drop-btn:hover,
.mobile-nav-drop-btn[aria-expanded="true"] {
  background: var(--primary-tint);
  color: var(--primary);
}
.mobile-nav-drop-items {
  display: none;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0 4px 10px;
}
.mobile-nav-drop-items.open {
  display: flex;
}
.mobile-cat-link {
  display: block;
  padding: 8px 13px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-2);
  transition: background var(--ease), color var(--ease);
}
.mobile-cat-link:hover {
  background: var(--primary-tint);
  color: var(--primary);
}

/* Filter empty state */
.filter-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
}
.filter-empty p:first-child {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 8px;
}
.filter-empty p:last-child {
  font-size: 0.87rem;
  color: var(--muted);
}

/* ══════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════ */
.hero {
  position: relative;
  overflow: hidden;
  /* Light mode: warm cream family — #fcecd2 base */
  background:
    radial-gradient(ellipse at 10% 55%, rgba(245,185,80,0.28) 0%, transparent 52%),
    radial-gradient(ellipse at 82% 18%, rgba(252,210,140,0.32) 0%, transparent 42%),
    linear-gradient(135deg, #fdf4e3 0%, #fcecd2 55%, #f5ddb0 100%);
}
[data-theme="dark"] .hero {
  /* Dark mode: near-black with subtle warm amber glow */
  background:
    radial-gradient(ellipse at 8% 45%, rgba(196,154,82,0.07) 0%, transparent 46%),
    radial-gradient(ellipse at 88% 14%, rgba(196,154,82,0.04) 0%, transparent 36%),
    linear-gradient(135deg, #080909 0%, #0c0f0a 55%, #090a08 100%);
}

/* Light mode hero — text & element overrides (dark mode untouched) */
[data-theme="light"] .hero-copy { color: #1c1208; }
[data-theme="light"] .hero h1   { color: #1c1208; }
[data-theme="light"] .hero h1 .dot { color: #7d5518; }
[data-theme="light"] .hero p    { color: rgba(28,18,8,0.68); }
[data-theme="light"] .eyebrow   { color: #7d5518; }
[data-theme="light"] .hero-glow {
  background: radial-gradient(circle, rgba(245,185,80,0.22), transparent 68%);
}
[data-theme="light"] .artist-card img {
  border-color: rgba(220,175,100,0.45);
  box-shadow: 0 24px 60px rgba(120,80,20,0.18);
}

/* ── LIGHT MODE: replace all hardcoded neon-green rgba accent values ──────── */

/* Buttons — primary & checkout & submit */
[data-theme="light"] .btn-primary {
  box-shadow: 0 2px 8px rgba(154,107,30,0.22), 0 6px 18px rgba(154,107,30,0.16);
}
[data-theme="light"] .btn-primary:hover {
  box-shadow: 0 3px 12px rgba(154,107,30,0.28), 0 8px 26px rgba(154,107,30,0.20);
}
[data-theme="light"] .btn-checkout {
  box-shadow: 0 4px 16px rgba(154,107,30,0.26);
}
[data-theme="light"] .btn-checkout:hover {
  box-shadow: 0 6px 22px rgba(154,107,30,0.34);
}
[data-theme="light"] .btn-submit {
  box-shadow: 0 4px 16px rgba(154,107,30,0.26);
}
[data-theme="light"] .btn-submit:hover {
  box-shadow: 0 6px 22px rgba(154,107,30,0.34);
}

/* Section icon glow */
[data-theme="light"] .section-icon {
  box-shadow: 0 6px 20px rgba(154,107,30,0.26);
}

/* City pill active state */
[data-theme="light"] .city-pill.active {
  box-shadow: 0 2px 10px rgba(154,107,30,0.22);
}

/* Event card category badge (default/concert) */
[data-theme="light"] .event-badge {
  background: rgba(154,107,30,0.90);
  color: #fff;
}

/* Form focus ring */
[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group select:focus,
[data-theme="light"] .form-group textarea:focus {
  box-shadow: 0 0 0 3px rgba(154,107,30,0.12);
}

/* ── DARK MODE: replace all hardcoded neon-green rgba accent values ───────── */

/* Hero eyebrow + headline dot */
[data-theme="dark"] .eyebrow      { color: #c49a52; }
[data-theme="dark"] .hero h1 .dot { color: #c49a52; }

/* Hero ambient glow orb */
[data-theme="dark"] .hero-glow {
  background: radial-gradient(circle, rgba(196,154,82,0.13), transparent 68%);
}

/* Buttons — shadow + dark text (caramel is mid-tone; white text fails contrast) */
[data-theme="dark"] .btn-primary {
  color: #0a0b0a;
  box-shadow: 0 2px 8px rgba(196,154,82,0.22), 0 6px 18px rgba(196,154,82,0.16);
}
[data-theme="dark"] .btn-primary:hover {
  box-shadow: 0 3px 12px rgba(196,154,82,0.28), 0 8px 26px rgba(196,154,82,0.20);
}
[data-theme="dark"] .search-btn  { color: #0a0b0a; }
[data-theme="dark"] .btn-checkout {
  box-shadow: 0 4px 16px rgba(196,154,82,0.26);
}
[data-theme="dark"] .btn-checkout:hover {
  box-shadow: 0 6px 22px rgba(196,154,82,0.34);
}
[data-theme="dark"] .btn-submit {
  color: #0a0b0a;
  box-shadow: 0 4px 16px rgba(196,154,82,0.26);
}
[data-theme="dark"] .btn-submit:hover {
  box-shadow: 0 6px 22px rgba(196,154,82,0.34);
}

/* Section icon glow */
[data-theme="dark"] .section-icon {
  box-shadow: 0 6px 20px rgba(196,154,82,0.26);
}

/* City pill active state */
[data-theme="dark"] .city-pill.active {
  box-shadow: 0 2px 10px rgba(196,154,82,0.22);
}

/* Event card category badge (default/concert) */
[data-theme="dark"] .event-badge {
  background: rgba(196,154,82,0.90);
  color: #0a0b0a;
}

/* Cookie bar accent ring */
[data-theme="dark"] .cookie-bar {
  box-shadow: 0 8px 30px rgba(0,0,0,0.48), 0 0 0 1px rgba(196,154,82,0.22);
}

/* Form focus ring */
[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus {
  box-shadow: 0 0 0 3px rgba(196,154,82,0.14);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 32px;
  min-height: 620px;
  padding: 68px 0 72px;
  position: relative;
  z-index: 1;
}
.hero-copy { color: #fff; }

.eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  color: #a8f040;
}
.hero h1 {
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.96;
  color: #fff;
}
.hero h1 .dot { color: #a8f040; }
.hero p {
  max-width: 500px;
  margin-top: 22px;
  font-size: 1.05rem;
  line-height: 1.74;
  color: rgba(255,255,255,0.78);
}

/* Search bar */
.search-box {
  margin-top: 34px;
  width: min(100%, 520px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(10,14,40,0.22), 0 2px 6px rgba(10,14,40,0.10);
  position: relative;
}
.search-box svg {
  width: 18px; height: 18px;
  fill: #a2a6bc;
  flex-shrink: 0;
}
.search-box input {
  border: 0; outline: 0; flex: 1;
  font-size: 0.97rem;
  color: #13141a;
  background: transparent;
}
.search-box input::placeholder { color: #b4b8ce; }
.search-btn {
  flex-shrink: 0;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dk));
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  transition: filter var(--ease);
}
.search-btn:hover { filter: brightness(1.08); }

/* Search results dropdown */
.search-results {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(10,14,40,0.18), 0 2px 8px rgba(10,14,40,0.08);
  overflow: hidden;
  z-index: 200;
}
.search-results.open { display: block; }
.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s;
}
.search-result-item + .search-result-item {
  border-top: 1px solid var(--line);
}
.search-result-item:hover { background: var(--bg); }
.search-result-thumb {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--line);
}
.search-result-title {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
}
.search-no-results {
  padding: 16px;
  color: var(--muted);
  font-size: 0.88rem;
  text-align: center;
}

/* Hero visual */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 0;
}
.hero-glow {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,240,64,0.18), transparent 68%);
  filter: blur(10px);
  pointer-events: none;
}
.artist-card {
  width: min(100%, 500px);
  position: relative;
  transform: rotate(-3deg);
}
.artist-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(8,10,34,0.34);
  border: 5px solid rgba(255,255,255,0.12);
}
.artist-splash {
  position: absolute;
  inset: -14px;
  background:
    radial-gradient(circle at 18% 42%, rgba(255,255,255,0.34) 0 10%, transparent 10.5%),
    radial-gradient(circle at 74% 14%, rgba(255,255,255,0.28) 0  9%, transparent  9.5%),
    radial-gradient(circle at 87% 74%, rgba(255,255,255,0.22) 0 11%, transparent 11.5%),
    radial-gradient(circle at 28% 84%, rgba(255,255,255,0.16) 0  7%, transparent  7.5%);
  filter: blur(1px);
  pointer-events: none;
}

/* ══════════════════════════════════════════════
   CATEGORY TABS
   ══════════════════════════════════════════════ */
.filters-section {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.category-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 66px;
  overflow-x: auto;
  scrollbar-width: none;
}
.category-tabs::-webkit-scrollbar { display: none; }

.category-tab {
  white-space: nowrap;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
  transition: background var(--ease), color var(--ease);
}
.category-tab:hover {
  background: var(--bg);
  color: var(--text-2);
}
.category-tab.active {
  background: var(--primary-tint);
  color: var(--primary);
  font-weight: 600;
}

/* ══════════════════════════════════════════════
   CITY SECTION
   ══════════════════════════════════════════════ */
.city-section { padding: 52px 0 100px; }
[data-theme="light"] .city-section { background: #ffffff; }

.section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.section-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 6px 20px rgba(168,240,64,0.26);
  flex-shrink: 0;
}
.section-head h2 {
  font-size: clamp(1.55rem, 2.2vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}

/* City pills */
.city-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}
.city-pill {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface);
  transition: border-color var(--ease), color var(--ease),
              background var(--ease), box-shadow var(--ease);
}
.city-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.city-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 10px rgba(168,240,64,0.22);
}
[data-theme="dark"] .city-pill.active {
  color: #0a0b0a;
}

/* ══════════════════════════════════════════════
   EVENT CARDS
   ══════════════════════════════════════════════ */
.events-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.event-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.event-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: transparent;
}
.event-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
}

/* Image */
.event-image {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  flex-shrink: 0;
}
.event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}
.event-card:hover .event-image img { transform: scale(1.04); }

/* Badges */
.event-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #0a0b0a;
  background: rgba(168,240,64,0.90);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.badge-festival { background: rgba(232,86,12,0.90); }
.badge-party    { background: rgba(217,39,119,0.90); }
.badge-movie    { background: rgba(28,62,174,0.90);  }
.badge-exp      { background: rgba(4,148,104,0.90);  }
.badge-travel   { background: rgba(68,82,100,0.90);  }

/* Card body */
.event-body {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 16px 16px 18px;
  flex: 1;
}

/* Date column */
.event-date {
  text-align: center;
  padding-top: 1px;
}
.event-month {
  display: block;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.event-day {
  display: block;
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--primary);
  margin-top: 1px;
}

/* Info column */
.event-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.event-info h3 {
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.36;
  letter-spacing: -0.01em;
  color: var(--text);
  /* Allow 2 lines, then truncate */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event-time {
  margin-top: 7px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--primary);
}
.event-place {
  margin-top: 2px;
  font-size: 0.77rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── PRICE DISPLAY ───────────────────────────── */
.event-price {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

/* Standard price */
.price-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
}
.price-value {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.01em;
}

/* Discounted price pair */
.price-original {
  font-size: 0.77rem;
  font-weight: 400;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--muted);
  text-decoration-thickness: 1.5px;
}
.price-value.discounted {
  color: var(--sale);
  font-size: 0.95rem;
  background: var(--sale-tint);
  padding: 1px 8px;
  border-radius: 6px;
}

/* ── SEE MORE ────────────────────────────────── */
.see-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

/* ══════════════════════════════════════════════
   MAP SECTION
   ══════════════════════════════════════════════ */
.map-section {
  padding: 64px 0 80px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.map-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}
.map-header-text h2 {
  font-size: clamp(1.55rem, 2.2vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 6px;
}
.map-header-text p {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 480px;
}
.map-frame-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-panel);
  height: 420px;
}
.map-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
.site-footer {
  margin-top: auto;
  padding: 60px 0 72px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.footer-brand { display: flex; flex-direction: column; }

.footer-mail,
.footer-social {
  display: block;
  font-size: 0.89rem;
  color: var(--muted);
  margin-bottom: 10px;
  transition: color var(--ease);
}
.footer-mail:hover,
.footer-social:hover { color: var(--primary); }

.footer-col h4 {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  font-size: 0.89rem;
  color: var(--muted);
  margin-bottom: 10px;
  transition: color var(--ease);
}
.footer-col a:hover { color: var(--primary); }

.footer-bottom {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-copy { font-size: 0.84rem; color: var(--muted); }
/* Merchant identity — full-width last row of .footer-bottom, deliberately quiet. */
.footer-merchant { width: 100%; margin: 0; font-size: 0.78rem; line-height: 1.6; color: var(--muted); }
.footer-merchant a { color: inherit; text-decoration: none; transition: color var(--ease); }
.footer-merchant a:hover { color: var(--primary); }
.footer-meta a { color: inherit; text-decoration: none; transition: color var(--ease); }
.footer-meta a:hover { color: var(--primary); }
.footer-meta {
  display: flex;
  gap: 22px;
  font-size: 0.84rem;
  color: var(--muted);
}

/* ══════════════════════════════════════════════
   COOKIE BAR  — floating, rounded
   ══════════════════════════════════════════════ */
.cookie-bar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 820px;
  z-index: 70;
  border-radius: var(--radius-md);
  padding: 14px 20px;
  background: #111214;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.48), 0 0 0 1px rgba(168,240,64,0.20);
}
.cookie-bar.hidden { display: none; }
.cookie-bar p { font-size: 0.88rem; line-height: 1.5; flex: 1; }
.cookie-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-link {
  font-size: 0.86rem;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  transition: color var(--ease);
}
.cookie-link:hover { color: #fff; }
.btn-cookie {
  height: 38px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.58);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  transition: background var(--ease), border-color var(--ease);
}
.btn-cookie:hover { background: rgba(255,255,255,0.14); border-color: #fff; }

/* ══════════════════════════════════════════════
   EVENT PAGE
   ══════════════════════════════════════════════ */
.event-hero {
  position: relative;
  height: 240px;
  overflow: hidden;
}
.event-hero-img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.event-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8,10,20,0.22) 0%,
    rgba(8,10,20,0.68) 62%,
    rgba(8,10,20,0.94) 100%
  );
}
.event-hero-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 38px 0;
  color: #fff;
}
.event-hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.event-hero-badge {
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--primary);
  color: #fff;
}
.event-hero-date-pill {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.76);
}
.event-hero h1 {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.08;
}
.event-hero-sub {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 0.91rem;
  color: rgba(255,255,255,0.74);
}

/* Event detail layout */
.event-detail { padding: 52px 0 96px; }
[data-theme="light"] .event-detail { background: #fff; }
.event-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}
.event-description h2 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.event-description p {
  font-size: 0.96rem;
  line-height: 1.80;
  color: var(--text-2);
}
.event-description p + p { margin-top: 14px; }

.event-info-list {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.event-info-item {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 15px 17px;
  border: 1px solid var(--line);
}
.event-info-item .label {
  font-size: 0.70rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin-bottom: 4px;
}
.event-info-item .value {
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--text);
}

/* Ticket widget */
.ticket-widget {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  padding: 24px 22px 28px;
  border: 1px solid var(--line);
}
.ticket-widget h3 {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.ticket-types {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.ticket-type {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: border-color var(--ease), background var(--ease);
}
.ticket-type:hover { border-color: var(--primary); }
.ticket-type.selected {
  border-color: var(--primary);
  background: var(--primary-tint);
}
.ticket-type-name { font-weight: 600; font-size: 0.93rem; }
.ticket-type-desc { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.ticket-type-price { font-size: 0.96rem; font-weight: 700; color: var(--primary); white-space: nowrap; }

.ticket-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.ticket-qty label { font-weight: 600; font-size: 0.91rem; }
.qty-control {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.qty-btn {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--primary);
  transition: background var(--ease);
}
.qty-btn:hover { background: var(--primary-tint); }
.qty-value {
  width: 34px;
  text-align: center;
  font-weight: 700;
  font-size: 0.96rem;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.ticket-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  margin-bottom: 16px;
}
.ticket-total .label { font-size: 0.86rem; color: var(--muted); }
.ticket-total .amount {
  font-size: 1.32rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}
.btn-checkout {
  display: flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-dk));
  color: #fff;
  border-radius: 999px;
  font-size: 0.96rem;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(168,240,64,0.26);
  transition: filter var(--ease), box-shadow var(--ease), transform 0.14s ease;
}
.btn-checkout:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 22px rgba(168,240,64,0.34);
}
.btn-checkout:active { transform: scale(0.99); }
[data-theme="dark"] .btn-checkout { color: #0a0b0a; }
/* Countdown moved below button — reset margins accordingly */
.btn-checkout + .countdown-wrap {
  margin-top: 18px;
  margin-bottom: 0;
}

/* Countdown timer */
.countdown-wrap {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 15px 18px 13px;
  margin-bottom: 20px;
}
.countdown-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 11px;
}
.countdown-digits {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2px;
}
.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.countdown-num {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown-unit-label {
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted);
  margin-top: 6px;
}
.countdown-sep {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--muted);
  opacity: 0.30;
  padding-bottom: 13px;
  flex-shrink: 0;
  user-select: none;
}

/* ══════════════════════════════════════════════
   CHECKOUT PAGE
   ══════════════════════════════════════════════ */
.checkout-section { padding: 48px 0 96px; }
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  align-items: start;
}
.checkout-form-wrap h1 {
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 0.83rem;
  font-weight: 600;
  margin-bottom: 7px;
  color: var(--text);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(168,240,64,0.10);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-section-title {
  font-size: 0.94rem;
  font-weight: 700;
  margin: 24px 0 14px;
  color: var(--text);
}
.payment-placeholder {
  padding: 20px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
  background: var(--surface-2);
}
.btn-submit {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dk));
  color: #fff;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(168,240,64,0.26);
  transition: filter var(--ease), box-shadow var(--ease), transform 0.14s ease;
}
.btn-submit:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 22px rgba(168,240,64,0.34);
}
.btn-submit:active { transform: scale(0.99); }

/* Order summary */
.order-summary {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  border: 1px solid var(--line);
  overflow: hidden;
}
.order-summary-img { aspect-ratio: 16/9; overflow: hidden; }
.order-summary-img img { width: 100%; height: 100%; object-fit: cover; }
.order-summary-body { padding: 20px 22px 26px; }
.order-summary-body h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.order-event-date { font-size: 0.81rem; color: var(--muted); margin-bottom: 18px; }
.order-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.order-line { display: flex; justify-content: space-between; font-size: 0.87rem; }
.order-line .ol-label { color: var(--muted); }
.order-line .ol-value { font-weight: 600; }
.order-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order-total-row .label { font-weight: 700; font-size: 0.93rem; }
.order-total-row .amount {
  font-size: 1.42rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.02em;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.83rem;
  color: rgba(255,255,255,0.60);
  margin-bottom: 14px;
}
.breadcrumb a { color: rgba(255,255,255,0.60); transition: color var(--ease); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { opacity: 0.45; }

/* Admin placeholder */
.admin-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 40px 20px;
  background: var(--bg);
}
.admin-placeholder .admin-logo { height: 38px; width: auto; margin-bottom: 28px; }
.admin-placeholder h1 { font-size: 1.85rem; font-weight: 800; margin-bottom: 10px; }
.admin-placeholder p { color: var(--muted); max-width: 400px; font-size: 0.97rem; }

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */

@media (max-width: 1200px) {
  .events-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .event-layout {
    gap: 28px;
  }
  .checkout-layout {
    grid-template-columns: 1fr 320px;
    gap: 28px;
  }
}

@media (max-width: 1060px) {
  .desktop-nav,
  .topbar-actions .top-link,
  .topbar-actions .btn-primary { display: none; }
  .menu-toggle { display: flex; }

  .hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 52px 0 58px;
    gap: 0;
  }
  .hero-visual { display: none; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 840px) {
  .events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

  .event-layout,
  .checkout-layout { grid-template-columns: 1fr; }
  /* Purchase card rises above description on mobile */
  .event-description { order: 2; }
  .ticket-widget { order: 1; }
  .ticket-widget,
  .order-summary { position: static; }

  .event-info-list { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 600px) {
  :root { --header-h: 66px; }

  .logo-img { height: 44px; }
  .brand-name { display: none; }

  .hero-grid { padding: 40px 0 48px; }
  .hero h1 { font-size: clamp(2.4rem, 10vw, 3.4rem); }
  .hero p { font-size: 0.98rem; }
  .search-box { padding: 5px 5px 5px 16px; }
  .search-btn { height: 40px; padding: 0 16px; font-size: 0.84rem; }

  .category-tabs { height: 58px; }
  .category-tab { font-size: 0.88rem; padding: 0 11px; }

  .events-grid { grid-template-columns: 1fr; gap: 16px; }

  .event-hero { height: 340px; }

  .map-section { padding: 44px 0 56px; }
  .map-frame-wrap { height: 280px; }

  .site-footer { padding: 44px 0 56px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-meta { flex-direction: column; gap: 4px; }

  .cookie-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    bottom: 10px;
    width: calc(100% - 20px);
    padding: 16px;
  }
  .cookie-actions { width: 100%; justify-content: flex-end; }
}

/* ============================================================
   PHASE 2B — capacity, terms, checkout messaging, order status
   ============================================================
   Additions only. No existing rule above this block was changed.
   Everything uses the existing custom properties, so both the light
   beige theme and the dark theme are inherited rather than re-stated.
   ============================================================ */

/* ── Availability badges (event page + checkout summary) ──── */
.ticket-availability {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: 5px;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
}
.ticket-availability--low {
  color: var(--sale);
  background: var(--sale-tint);
}
.ticket-availability--sold_out {
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
}

/* A sold-out tier stays visible but is plainly not an option:
   dimmed, not clickable, and with the pointer cursor removed so the
   affordance matches the behaviour. */
.ticket-type--soldout {
  opacity: 0.55;
  cursor: not-allowed;
}
.ticket-type--soldout:hover { border-color: var(--line); }
.ticket-type--soldout .ticket-type-price { text-decoration: line-through; }

/* ── Purchase closed (past event / everything sold out) ───── */
.ticket-closed {
  text-align: center;
  padding: 18px 14px 22px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.ticket-closed-title {
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 6px;
}
.ticket-closed-sub {
  font-size: 0.84rem;
  color: var(--muted);
  margin: 0 0 14px;
}

/* ── Checkout alerts ──────────────────────────────────────── */
.checkout-alert {
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 0.88rem;
}
.checkout-alert ul { margin: 0; padding-left: 18px; }
.checkout-alert p  { margin: 0 0 6px; }
.checkout-alert p:last-child { margin-bottom: 0; }
.checkout-alert--error {
  background: var(--sale-tint);
  border: 1px solid var(--sale);
  color: var(--sale);
}
.checkout-alert--notice {
  background: var(--primary-tint);
  border: 1px solid var(--primary);
  color: var(--text-2);
}
.checkout-alert--notice a { color: var(--primary); font-weight: 600; }

/* ── Terms acceptance checkbox ────────────────────────────── */
.terms-group { margin-top: 4px; }
.terms-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-2);
  cursor: pointer;
  font-weight: 400;
}
.terms-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--primary);
  cursor: pointer;
}
.terms-check a { color: var(--primary); font-weight: 600; }

/* ── Honeypot ─────────────────────────────────────────────────
   Visually removed WITHOUT display:none, so form-filling bots that
   skip hidden inputs still see it, while remaining unreachable to
   people: the wrapper is aria-hidden and the input carries
   tabindex="-1", so neither a screen reader nor the Tab key can
   land on it. That combination is what keeps this a bot trap
   rather than an accessibility trap. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Order status page ────────────────────────────────────── */
.order-status-card {
  max-width: 620px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-card);
  padding: 32px 30px 34px;
}
.order-status-card h1 {
  font-size: 1.45rem;
  line-height: 1.25;
  margin: 12px 0 10px;
}
.order-status-card--empty { text-align: center; }
.order-status-detail {
  color: var(--text-2);
  font-size: 0.9rem;
  margin: 0 0 20px;
}
.order-status-badge {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.order-status-badge--hold {
  color: var(--primary);
  background: var(--primary-tint);
}
.order-status-badge--good {
  color: #1f7a4d;
  background: rgba(31,122,77,0.12);
}
.order-status-badge--bad {
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.order-status-lines { margin: 22px 0 4px; }
.order-status-footnote {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 18px 0 0;
  line-height: 1.55;
}
.order-status-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

/* ── Reservation countdown ────────────────────────────────── */
.reservation-timer {
  text-align: center;
  border: 1.5px solid var(--primary);
  background: var(--primary-tint);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 18px 0 4px;
}
.reservation-timer-label {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
}
.reservation-timer-value {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  margin: 4px 0 2px;
}
.reservation-timer-note {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0;
}
.reservation-timer--expired {
  border-color: var(--line);
  background: var(--surface-2);
}
.reservation-timer--expired .reservation-timer-value { color: var(--muted); }

@media (max-width: 600px) {
  .order-status-card { padding: 24px 20px 26px; }
  .order-status-card h1 { font-size: 1.22rem; }
  .reservation-timer-value { font-size: 1.7rem; }
}


/* ============================================================
   PHASE 3A - PAYMENT START (order.php, en/order.php)
   Appended block. Nothing above this line was modified.
   ============================================================ */

/* One-shot notice left by payment/start.php when it could not begin.
   Deliberately neutral: it never says why, because the reasons are either
   things the customer cannot act on or things they should not be told. */
.payment-notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  background: var(--surface-2);
  border-radius: var(--radius-sm, 8px);
  padding: 12px 14px;
  margin: 18px 0 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text);
}

/* ── Settled payment outcome (Phase 3B2) ──────────────────────────────────
   The block the customer reads after returning from the bank. Three tones,
   because the three states genuinely differ in what the customer should do:

     ok    settled and issued        -> nothing to do
     wait  unknown, or paid+oversold -> DO NOT pay again
     bad   declined                  -> start a new reservation

   No tone is used for anything else. In particular there is no tone that
   says "try paying again", because version 1 never repays an order that
   already carries an authorisation attempt.                                */
.payment-result {
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  background: var(--surface-2);
  border-radius: var(--radius-sm, 8px);
  padding: 16px 18px;
  margin: 22px 0 0;
}

.payment-result--ok   { border-left-color: #198754; }
.payment-result--wait { border-left-color: #b8860b; }
.payment-result--bad  { border-left-color: #dc3545; }

.payment-result-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
}

.payment-result-body {
  margin: 8px 0 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--muted);
}

.payment-result-body a {
  color: var(--text);
}

.payment-start-form {
  margin: 22px 0 0;
}

/* Full width, and visibly the primary action on the page. This is the moment
   the customer is deciding whether to trust us with a card, so the button
   should look deliberate rather than incidental. */
.btn-pay {
  /* .btn is inline-flex with a fixed 42px height and 0 vertical padding, so
     this overrides the height rather than adding padding to it. */
  display: flex;
  width: 100%;
  height: 50px;
  padding: 0 22px;
  font-size: 1rem;
}

.payment-start-note {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 10px 0 0;
  line-height: 1.55;
  text-align: center;
}