/*
 * ticketcroc.css — Shared stylesheet for all TicketCroc pages
 * Load order: Bootstrap 5.3 → ticketcroc.css → page <style> block
 * Linked by: ticketcroc-home.html, ticketcroc-search.html, ticketcroc-event.html
 */

/* ── Brand variables ─────────────────────────────────────────────── */
:root {
  --bg:        #0b0e17;
  --bg2:       #111422;
  --bg3:       #181c2e;
  --surface:   #1e2235;
  --surface2:  #252a42;
  --border:    rgba(255,255,255,0.08);
  --border2:   rgba(255,255,255,0.14);
  --accent:    #6f5fff;
  --accent2:   #8b7aff;
  --green:     #22c55e;
  --amber:     #f59e0b;
  --red:       #ef4444;
  --text:      #f0f2ff;
  --text2:     #8891b4;
  --text3:     #5a6180;
  --radius:    10px;
  --radius-lg: 14px;
  --font:      'DM Sans', sans-serif;
  --mono:      'DM Mono', monospace;

  /* Layout tokens — override in page <style> as needed */
  --page-pad:   32px;   /* navbar + section horizontal padding */
  --ticket-pad: 22px;   /* ticket row / list-hdr horizontal padding */
  --summary-w:  210px;  /* right summary sidebar width */

  /* Ticket column widths — override on event page for narrower panel */
  --col-src:   110px;
  --col-fees:   90px;
  --col-price:  80px;
  --col-btn:    80px;
}

/* ── Bootstrap dark-mode overrides ──────────────────────────────── */
[data-bs-theme="dark"] {
  --bs-body-bg:           var(--bg);
  --bs-body-color:        var(--text);
  --bs-body-font-family:  var(--font);
  --bs-primary:           var(--accent);
  --bs-primary-rgb:       111, 95, 255;
  --bs-border-color:      var(--border);
  --bs-card-bg:           var(--surface);
  --bs-card-border-color: var(--border);
  --bs-secondary-bg:      var(--bg2);
  --bs-tertiary-bg:       var(--bg3);
  --bs-secondary-color:   var(--text2);
  --bs-tertiary-color:    var(--text3);
  --bs-success:           var(--green);
  --bs-success-rgb:       34, 197, 94;
  --bs-warning:           var(--amber);
  --bs-warning-rgb:       245, 158, 11;
  --bs-danger:            var(--red);
  --bs-danger-rgb:        239, 68, 68;
  --bs-link-color:        var(--accent2);
  --bs-link-hover-color:  var(--accent);
}

/* ── Base ────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
a    { text-decoration: none; color: inherit; }
button, input, select { font-family: var(--font); }

::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 99px; }

/* ── Navbar ──────────────────────────────────────────────────────── */
.navbar {
  background: rgba(11,14,23,0.88) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  height: 56px;
  padding: 0 var(--page-pad) !important;
}
.navbar-brand {
  font-size: 19px; font-weight: 600;
  letter-spacing: -0.4px; color: var(--text) !important;
}
.navbar-brand span { color: var(--accent2); }

.nav-pill-btn {
  font-size: 13px; color: var(--text2); padding: 6px 12px;
  border-radius: 8px; border: none; background: transparent;
  cursor: pointer; transition: color .15s, background .15s;
}
.nav-pill-btn:hover { color: var(--text); background: var(--surface); }

.back-btn {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text2);
  background: transparent; border: none; padding: 0; cursor: pointer;
  transition: color .15s;
}
.back-btn:hover { color: var(--text); }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn { font-family: var(--font); }
.btn-primary            { background: var(--accent);  border-color: var(--accent); }
.btn-primary:hover,
.btn-primary:focus      { background: var(--accent2); border-color: var(--accent2); }

.btn-outline-surface {
  background: var(--surface); color: var(--text2); border: 1px solid var(--border);
  font-size: 13px; font-weight: 500; padding: 7px 16px; border-radius: 8px; cursor: pointer;
  transition: all .15s;
}
.btn-outline-surface:hover { background: var(--surface2); color: var(--text); }

/* ── Category tabs (home + search) ───────────────────────────────── */
.cat-bar { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 0 var(--page-pad); }
.cat-row { display: flex; gap: 2px; overflow-x: auto; }
.cat-row::-webkit-scrollbar { display: none; }
.cat {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px 11px; font-size: 13px; color: var(--text2);
  border: none; background: transparent; border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s;
}
.cat:hover  { color: var(--text); }
.cat.active { color: var(--accent2); border-bottom-color: var(--accent2); }

/* ── Sort toggle ─────────────────────────────────────────────────── */
.sort-toggle {
  display: flex; background: var(--surface);
  border-radius: 8px; padding: 3px; border: 1px solid var(--border);
}
.toggle-opt {
  font-size: 12px; font-weight: 500; padding: 5px 16px; border-radius: 6px;
  cursor: pointer; color: var(--text2); border: none; background: transparent; transition: all .15s;
}
.toggle-opt.active { background: var(--surface2); color: var(--text); }

/* ── Deal bar ────────────────────────────────────────────────────── */
.deal-bar {
  background: rgba(34,197,94,0.08); border-bottom: 1px solid rgba(34,197,94,0.15);
  padding: 8px var(--ticket-pad); font-size: 12px; color: #4ade80;
  display: flex; align-items: center; gap: 7px;
}
.deal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

/* ── List header ─────────────────────────────────────────────────── */
.list-hdr {
  display: flex; align-items: center; padding: 8px var(--ticket-pad);
  background: var(--bg2); border-bottom: 1px solid var(--border);
  font-size: 11px; color: var(--text3); gap: 10px;
}
.lh-main  { flex: 1; }
.lh-src   { width: var(--col-src);   text-align: center; }
.lh-fees  { width: var(--col-fees);  text-align: right; }
.lh-price { width: var(--col-price); text-align: right; }
.lh-btn   { width: var(--col-btn); }

/* ── Ticket rows ─────────────────────────────────────────────────── */
.ticket-row {
  display: flex; align-items: center; padding: 13px var(--ticket-pad);
  border-bottom: 1px solid var(--border); background: var(--bg);
  gap: 10px; cursor: pointer; transition: background .12s;
}
.ticket-row:hover { background: var(--bg2); }
.ticket-row.best  { border-left: 3px solid var(--green); }
.tr-info    { flex: 1; min-width: 0; }
.tr-section { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 2px; }
.tr-detail  { font-size: 12px; color: var(--text2); margin-bottom: 5px; }
.tr-tags    { display: flex; gap: 4px; flex-wrap: wrap; }
.tag         { font-size: 10px; padding: 2px 7px; border-radius: 4px; font-weight: 500; }
.tag-instant { background: rgba(59,130,246,0.15); color: #93c5fd; }
.tag-mobile  { background: rgba(34,197,94,0.15);  color: #86efac; }
.tr-fees  { width: var(--col-fees);  text-align: right; font-size: 11px; color: var(--text3); flex-shrink: 0; }
.tr-price { width: var(--col-price); text-align: right; font-size: 17px; font-weight: 600; flex-shrink: 0; color: var(--text); }
.tr-price.deal { color: var(--green); }

/* ── Source badges ───────────────────────────────────────────────── */
.src-badge { width: var(--col-src); text-align: center; font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 5px; flex-shrink: 0; }
.src-sg { background: rgba(236,72,153,0.15); color: #f9a8d4; }
.src-gt { background: rgba(34,197,94,0.15);  color: #86efac; }
.src-vs { background: rgba(239,68,68,0.15);  color: #fca5a5; }
.src-sh { background: rgba(139,92,246,0.2);  color: #c4b5fd; }
.src-tm { background: rgba(59,130,246,0.15); color: #93c5fd; }

/* ── Buy button ──────────────────────────────────────────────────── */
.buy-btn {
  width: var(--col-btn); background: var(--accent); color: #fff;
  border: none; border-radius: 8px; padding: 8px 0;
  font-size: 12px; font-weight: 500; flex-shrink: 0;
  text-align: center; cursor: pointer; transition: background .15s;
  display: inline-block;
}
.buy-btn:hover { background: var(--accent2); color: #fff; }

/* ── Price colors ────────────────────────────────────────────────── */
.p-green { color: var(--green); }
.p-amber { color: var(--amber); }
.p-red   { color: var(--red); }

/* ── Summary sidebar ─────────────────────────────────────────────── */
.summary {
  width: var(--summary-w); flex-shrink: 0;
  background: var(--bg2); border-left: 1px solid var(--border);
  padding: 18px 14px;
  position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto;
}
.sum-label { font-size: 10px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text3); margin-bottom: 10px; }
.sum-src   { font-size: 13px; color: var(--text2); }
.sum-price { font-size: 13px; font-weight: 600; }
.bar-row  { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.bar-name { font-size: 10px; color: var(--text3); width: 56px; text-align: right; flex-shrink: 0; }
.bar-track { flex: 1; height: 5px; background: var(--surface); border-radius: 3px; overflow: hidden; }
.bar-fill  { height: 100%; border-radius: 3px; }
.bar-val   { font-size: 10px; color: var(--text2); width: 30px; text-align: right; }

/* shared price-alert button inside summary on both search + event pages */
.sum-alert-btn {
  width: 100%; background: transparent; border: 1px solid var(--border2);
  border-radius: 8px; color: var(--accent2); font-size: 12px; font-weight: 500;
  padding: 9px; cursor: pointer; margin-top: 14px; transition: all .15s;
  display: block; text-align: center;
}
.sum-alert-btn:hover { background: rgba(111,95,255,0.1); border-color: var(--accent); }

/* ── Shared divider ──────────────────────────────────────────────── */
.tc-hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }

/* ── Animations ──────────────────────────────────────────────────── */
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}