/* ============================================================================
   SimBooking — Global Styles
   Motorsport telemetry aesthetic. Same palette across customer + admin.
   ============================================================================ */

:root {
  --bg:         #0a0a0a;
  --surface:   #161616;
  --surface-2: #1f1f1f;
  --border:    #262626;
  --border-hover: #404040;
  --text:      #fafafa;
  --text-2:    #a3a3a3;
  --text-3:    #6b6b6b;
  --text-4:    #404040;
  --amber:     #fbbf24;
  --amber-dim: rgba(251, 191, 36, 0.1);
  --emerald:   #34d399;
  --red:       #ef4444;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
}

.display, .display-lg { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.02em; line-height: 0.9; }
.display-lg { font-size: 4rem; }
.display { font-size: 2.5rem; }

.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.tracking { letter-spacing: 0.2em; }
.tracking-wide { letter-spacing: 0.25em; }

/* Background grid */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: 600px; height: 300px;
  background: rgba(251, 191, 36, 0.08);
  filter: blur(120px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.container {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Header */
.app-header {
  border-bottom: 1px solid rgba(38,38,38,0.8);
  background: rgba(10,10,10,0.7);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20;
  padding: 1rem 0;
}
.app-header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

/* Subtle "back to academysim.com" link in the header. Lets customers
   bail back to the main storefront from anywhere in the booking flow
   without using the browser back button. On mobile we hide the URL
   text and just keep the arrow + a short label to save space. */
.header-back-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--text-2);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.header-back-link:hover {
  color: var(--amber);
  border-color: var(--amber);
  background: rgba(251, 191, 36, 0.06);
}
.header-back-arrow { font-size: 14px; line-height: 1; }
@media (max-width: 640px) {
  .header-back-text { display: none; }
  .header-back-link::after {
    content: 'STORE';
    font-size: 11px; letter-spacing: 0.18em;
  }
}
.brand-pulse {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 10px; letter-spacing: 0.25em;
  color: rgba(251, 191, 36, 0.9);
}
.brand-pulse::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.brand-name { font-family: 'Bebas Neue'; font-size: 1.5rem; line-height: 1; margin-top: 4px; }

/* Hero */
.hero {
  position: relative;
  padding: 5rem 2rem 4rem;
  margin: 0 -2rem;
  overflow: hidden;
  /* Photo as background, darkened with a gradient so text reads on top and it fades into the page */
  background-image:
    linear-gradient(to bottom, rgba(10,10,10,0.82) 0%, rgba(10,10,10,0.6) 40%, rgba(10,10,10,0.92) 68%, rgba(10,10,10,1) 85%),
    url('../images/hero-lounge.jpg');
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}
.hero-content {
  position: relative;
  z-index: 1;
}
/* Solid fade pinned to the bottom edge — guarantees the photo melts to black no matter the hero height */
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(10,10,10,0) 0%, rgba(10,10,10,1) 100%);
  pointer-events: none;
  z-index: 0;
}
.hero--plain::after { display: none; }
.hero h1 {
  font-family: 'Bebas Neue'; font-size: 5rem; line-height: 0.85; letter-spacing: 0.02em;
}
.hero h1 .accent { color: var(--amber); }
.hero p { color: var(--text); margin-top: 1.25rem; max-width: 600px; font-size: 17px; line-height: 1.5; }
/* When inside the booking flow, drop the photo background so task screens stay clean */
.hero--plain {
  background-image: none;
  padding: 4rem 0 2rem;
  margin: 0;
}

/* Step indicator */
.step-indicator {
  display: flex; gap: 0.25rem; margin-bottom: 2rem;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.18em; font-weight: 500;
}
.step-pill {
  flex: 1; padding: 0.75rem 0.75rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-3);
  text-align: center;
  transition: all 0.2s;
}
.step-pill.active {
  border-color: var(--amber);
  background: var(--amber-dim);
  color: var(--amber);
  font-weight: 600;
}
.step-pill.done { color: var(--emerald); border-color: rgba(52, 211, 153, 0.3); cursor: pointer; }
.step-pill.done:hover { background: rgba(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 0.6); }

/* Cards */
.card {
  background: rgba(22,22,22,0.4);
  border: 1px solid var(--border);
  transition: all 0.2s;
}
.card:hover { border-color: var(--border-hover); }
.card.selected { border-color: var(--amber); background: rgba(251, 191, 36, 0.05); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: none; background: none; cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: all 0.2s;
}
.btn-primary {
  background: var(--amber); color: var(--bg);
}
.btn-primary:hover { background: #fcd34d; }
.btn-primary:disabled { background: var(--surface-2); color: var(--text-4); cursor: not-allowed; }
.btn-ghost {
  color: var(--text-2);
}
.btn-ghost:hover { color: var(--text); background: rgba(38,38,38,0.5); }
.btn-outline {
  border: 1px solid var(--border);
  color: var(--text-2);
}
.btn-outline:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-dim); }
.btn-danger {
  background: var(--red); color: white;
}
.btn-danger:hover { background: #f87171; }

/* Inputs */
.input, .textarea, .select {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  transition: border-color 0.2s;
}
.textarea { font-family: 'IBM Plex Sans', sans-serif; resize: vertical; min-height: 90px; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,168,30,0.15); }

/* Experience level radio options */
.exp-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.exp-option {
  display: block;
  padding: 0.875rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.exp-option:hover { border-color: var(--amber); background: rgba(245,168,30,0.05); }
.exp-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.exp-option:has(input:checked) {
  border-color: var(--amber);
  background: rgba(245,168,30,0.1);
  box-shadow: 0 0 0 2px rgba(245,168,30,0.2);
}
.exp-option-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.exp-option-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text);
}
.exp-option:has(input:checked) .exp-option-title { color: var(--amber); }
.exp-option-sub {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0;
}
@media (max-width: 600px) {
  .exp-options { grid-template-columns: 1fr; }
  .exp-option { text-align: left; }
  .exp-option-label { flex-direction: row; align-items: baseline; gap: 0.75rem; }
}

.label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em;
  color: var(--text-2);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

/* Date grid */
.date-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem;
}
/* Mobile: 7 columns on a 375px viewport leaves ~47px per cell which gets
   squished, especially with two-line labels (DOW + day + month + optional
   CLOSED/TOO LATE). Drop to 4 columns so cells breathe. Two weeks = 4 rows
   on mobile, still scrollable in one screen. */
@media (max-width: 640px) {
  .date-grid { grid-template-columns: repeat(4, 1fr); }
}
.date-cell {
  padding: 1rem 0.5rem; text-align: center; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  transition: all 0.15s;
}
.date-cell:hover { border-color: var(--amber); background: rgba(245,168,30,0.05); }
.date-cell.selected { background: var(--amber); color: var(--bg); border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,168,30,0.2); }
.date-cell.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: repeating-linear-gradient(
    45deg,
    var(--surface),
    var(--surface) 6px,
    rgba(255,255,255,0.02) 6px,
    rgba(255,255,255,0.02) 12px
  );
}
.date-cell.disabled:hover { border-color: var(--border); background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 6px, rgba(255,255,255,0.02) 6px, rgba(255,255,255,0.02) 12px); }
.date-cell .dow { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.2em; color: var(--text-2); font-weight: 500; }
.date-cell.selected .dow { color: rgba(0,0,0,0.7); }
.date-cell .day { font-family: 'Bebas Neue'; font-size: 1.875rem; line-height: 1; margin-top: 0.25rem; }
.date-cell .mo { font-size: 10px; color: var(--text-3); font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.15em; margin-top: 0.25rem; }
.date-cell.selected .mo { color: rgba(0,0,0,0.7); }
.date-cell .closed-label { font-size: 9px; color: #d65a5a; font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.2em; margin-top: 0.25rem; font-weight: 600; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.chip {
  padding: 0.875rem 1.5rem;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px; letter-spacing: 0.15em; font-weight: 600;
  transition: all 0.15s;
}
.chip:hover { color: var(--amber); border-color: var(--amber); }
.chip.selected { background: var(--amber); color: var(--bg); border-color: var(--amber); }

/* Time slots grid */
.slot-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 0.625rem;
}
.slot {
  padding: 1rem 0.75rem; text-align: center; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  font-family: 'IBM Plex Mono', monospace; font-size: 16px; font-weight: 600;
  transition: all 0.15s;
}
.slot:hover { border-color: var(--amber); background: rgba(245,168,30,0.05); }
.slot.selected { background: var(--amber); color: var(--bg); border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,168,30,0.2); }
.slot .meta { font-size: 11px; letter-spacing: 0.15em; color: var(--text-2); margin-top: 6px; font-weight: 500; }
.slot.selected .meta { color: rgba(0,0,0,0.7); }
.slot.unavailable { opacity: 0.3; cursor: not-allowed; }

/* Rig card */
.rig-card { padding: 0; cursor: pointer; overflow: hidden; }
.rig-card-body { padding: 1.25rem; }
.rig-card.rig-card-locked { opacity: 0.55; cursor: not-allowed; }
.rig-card.rig-card-locked .rig-photo { filter: grayscale(0.6); }

/* Full Lounge Bookout card: spans both columns, amber accent border so it
   stands apart from individual class cards. Visual signal that this is the
   "or" path — buy out everything, not pick from the list. */
.rig-card.rig-card-buyout {
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.04) 0%, transparent 100%);
}
.rig-card.rig-card-buyout .rig-photo {
  aspect-ratio: 2.5 / 1;
  max-height: none;
}
.rig-photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.rig-photo-placeholder {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-4);
  font-size: 11px; letter-spacing: 0.25em;
  background-image:
    linear-gradient(rgba(251, 191, 36, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 191, 36, 0.04) 1px, transparent 1px);
  background-size: 20px 20px;
}
.rig-card .rig-type {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.2em;
  color: var(--text-3);
}
.rig-card .rig-name { font-family: 'Bebas Neue'; font-size: 2rem; line-height: 1; margin: 0.25rem 0 0.75rem; }
.rig-card .rig-desc { color: var(--text-2); font-size: 13px; margin-bottom: 1rem; }
.rig-card .rig-price {
  font-family: 'IBM Plex Mono', monospace; color: var(--amber);
  font-size: 1.5rem; font-weight: 500;
}
.rig-card .rig-price-unit { color: var(--text-3); font-size: 11px; letter-spacing: 0.1em; margin-left: 0.25rem; }

/* Availability badge — sits in the top-right of the card body. Solid amber
   fill with dark text for high contrast on the dark card background, so
   "2 LEFT" actually catches the eye instead of disappearing as amber text. */
.avail-pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.6rem;
  background: var(--amber);
  color: #0a0a0a;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.avail-pill.sold-out {
  background: transparent;
  color: var(--text-3);
  border: 1px solid var(--border);
}
.rig-card .caps { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.75rem 0; }
.cap-badge {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.1em;
  padding: 0.25rem 0.5rem;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2);
}

/* Summary panel */
.summary {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.25rem;
}
.summary-row { display: flex; justify-content: space-between; padding: 0.5rem 0; font-size: 14px; }
.summary-row.total {
  border-top: 1px solid var(--border); margin-top: 0.5rem; padding-top: 0.75rem;
  font-family: 'IBM Plex Mono', monospace; font-size: 18px;
}
.summary-row.total .val { color: var(--amber); }
.summary-row .key { color: var(--text-2); }
.summary-row .val { font-family: 'IBM Plex Mono', monospace; color: var(--text); }

/* Step navigation */
.step-nav {
  display: flex; justify-content: space-between; margin-top: 2rem;
  padding-top: 1.5rem; border-top: 1px solid var(--border);
}

/* Toast */
.toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--surface); border: 1px solid var(--border);
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.25em;
  z-index: 100;
}
.toast.error { border-color: var(--red); color: var(--red); }
.toast.success { border-color: var(--emerald); color: var(--emerald); }

/* Admin layout */
.admin-nav {
  display: flex; gap: 0; border: 1px solid var(--border); margin-bottom: 2rem;
}
.admin-nav-item {
  padding: 0.75rem 1.25rem; cursor: pointer;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.2em;
  color: var(--text-2);
  border-right: 1px solid var(--border);
  background: var(--surface);
  transition: all 0.15s;
}
.admin-nav-item:last-child { border-right: none; }
.admin-nav-item:hover { color: var(--text); background: var(--surface-2); }
.admin-nav-item.active { background: var(--amber); color: var(--bg); }

.table {
  width: 100%; border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
}
.table th {
  text-align: left; padding: 0.75rem 1rem;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.2em;
  color: var(--text-3); border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.table td {
  padding: 0.875rem 1rem; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: rgba(255,255,255,0.02); }

.badge {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.2em;
  padding: 0.25rem 0.5rem;
  border: 1px solid;
}
.badge-active { color: var(--emerald); border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.08); }
.badge-held { color: var(--amber); border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.08); }
.badge-cancelled, .badge-retired { color: var(--text-3); border-color: var(--border); background: var(--surface); }
.badge-confirmed { color: var(--emerald); border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.08); }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(4px);
  z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.modal {
  background: var(--bg); border: 1px solid var(--border);
  max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto;
}
.modal-header {
  padding: 1rem 1.5rem; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.modal-body { padding: 1.5rem; }
.modal-footer {
  padding: 1rem 1.5rem; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 0.5rem;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 3rem; }
  .display-lg { font-size: 2.5rem; }
}

.stack > * + * { margin-top: 1rem; }
.stack-sm > * + * { margin-top: 0.5rem; }
.stack-lg > * + * { margin-top: 1.5rem; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-4 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 2rem; }

/* Caps icons row in customer view */
.caps-row { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.text-amber { color: var(--amber); }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.text-emerald { color: var(--emerald); }
.text-red { color: var(--red); }

.divider { height: 1px; background: var(--border); margin: 1.5rem 0; }

/* Empty state */
.empty {
  text-align: center; padding: 3rem 1rem;
  border: 1px solid var(--border); background: rgba(22,22,22,0.3);
  color: var(--text-3);
}
.empty .mono { display: block; margin-bottom: 0.5rem; }

/* Category picker (initial landing) */
.category-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.category-card {
  background: var(--surface); border: 1px solid var(--border);
  padding: 1.75rem 1.5rem; text-align: left; cursor: pointer;
  transition: all 0.15s ease; font-family: inherit; color: inherit;
  display: flex; flex-direction: column;
}
.category-card:hover {
  border-color: var(--amber);
  background: rgba(245,168,30,0.04);
  transform: translateY(-2px);
}
.category-card:hover .display-lg { color: var(--amber); }

/* Data tables (admin member list, etc.) */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left;
  padding: 0.625rem 0.75rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}
.data-table td {
  padding: 0.875rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}
.data-table tr:hover td { background: rgba(255,255,255,0.02); }