/* ===== Ticket VeriGuard Demo — Dark + Teal→Blue Theme ===== */
:root{
  --brand:#2563eb;   /* Blue */
  --accent:#22d3ee;  /* Teal */
  --ink:#eaf2ff;
  --muted:#9fb0cc;

  --bg:#0a1322;   /* Base background */
  --panel:rgba(255,255,255,0.06);
  --panel-2:rgba(255,255,255,0.10);

  --radius:18px;
  --shadow:0 24px 60px rgba(2,6,23,.35);
  --ring:0 0 0 3px rgba(34,211,238,.35);

  --ok:#10b981;
  --bad:#ef4444;
}

/* Base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font:16px/1.55 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(34,211,238,.14), transparent 70%),
    radial-gradient(900px 600px at -10% 40%, rgba(37,99,235,.18), transparent 70%),
    linear-gradient(180deg,#0f1a2d,#0a1322);
}

/* =========================== NAV BAR =========================== */
.tvg-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:32px;
  padding:22px 48px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(34,211,238,.15), transparent 70%),
    radial-gradient(120% 140% at 100% 100%, rgba(59,130,246,.10), transparent 70%),
    linear-gradient(180deg,#0f1a2d,#0d1528);
  border-bottom:1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(24px);
}

/* BIG logo */
.tvg-logo{
  height:165px; width:auto;
  filter:drop-shadow(0 0 14px rgba(34,211,238,.55));
  transition:.25s ease;
}
.tvg-logo:hover{ transform:scale(1.05); }

/* Center tabs */
.tvg-links{
  display:flex; gap:32px;
  flex:1;
  justify-content:center;
}
.tvg-tab{
  text-decoration:none;
  color:#cfe2ff;
  font-weight:600;
  padding:12px 26px;
  border-radius:999px;
  font-size:18px;
  transition:.18s ease;
}
.tvg-tab:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
}

/* Active state: Teal → Blue */
.tvg-tab.active{
  background:linear-gradient(90deg,#22d3ee,#2563eb);
  color:#fff!important;
  box-shadow:0 14px 32px rgba(34,211,238,.28), 0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Right-side actions */
.tvg-actions{
  display:flex; align-items:center;
  gap:16px;
}

/* Back to website pill */
.tvg-home{
  text-decoration:none;
  padding:10px 22px;
  border-radius:999px;
  background:linear-gradient(90deg,#22d3ee,#2563eb);
  color:#fff;
  font-weight:700;
  font-size:16px;
  box-shadow:0 10px 28px rgba(34,211,238,.25);
  transition:.15s;
}
.tvg-home:hover{ filter:brightness(1.06); }

/* Gear button */
.api-gear{
  padding:10px 14px;
  background:rgba(255,255,255,.16);
  border:0;
  border-radius:12px;
  cursor:pointer;
  font-size:20px;
  color:#fff;
}
.api-gear:hover{ filter:brightness(1.25); }

/* Mobile nav */
@media(max-width:900px){
  .tvg-nav{
    flex-wrap:wrap;
    justify-content:center;
    padding:18px 44px;
  }
  .tvg-links{
    order:3; width:100%;
    justify-content:center;
    gap:28px;
  }
  .tvg-logo{ height:110px; }
}

/* ============================================================= */
/* Layout */
.container{
  max-width:1300px;
  margin:40px auto;
  padding:0 32px;
}
h1{
  font-size:34px; margin:0 0 16px;
  font-weight:800; color:var(--ink);
}
h2{
  font-size:24px; margin:0 0 12px;
  font-weight:700;
}
.muted{ color:var(--muted); }

/* Cards */
.card, .table-wrap{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.16);
  backdrop-filter:blur(22px);
  padding:20px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin:18px 0;
}

/* Forms */
.grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(220px,1fr));
  gap:16px;
  margin-bottom:14px;
}
label{
  display:flex; flex-direction:column;
  gap:6px;
  font-size:14px; color:var(--muted);
}
input, select{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:var(--panel-2);
  color:var(--ink);
}
input:focus, select:focus{
  box-shadow:var(--ring);
}

/* Buttons */
.btn{
  border:0; cursor:pointer;
  padding:12px 18px;
  border-radius:12px;
  font-weight:700;
  background:linear-gradient(90deg,#22d3ee,#2563eb);
  color:#fff;
  box-shadow:0 8px 24px rgba(37,99,235,.35);
}
.btn:hover{ filter:brightness(1.07); }

/* Alerts */
.alert{
  padding:14px 16px;
  border-radius:12px;
  font-size:15px;
}
.alert.ok{
  background:rgba(16,185,129,.18);
  color:#cafff0;
}
.alert.bad{
  background:rgba(239,68,68,.18);
  color:#ffe0e0;
}

/* Dashboard table */
.table-wrap{ overflow:auto; }
#tickets-table{
  width:100%;
  border-collapse:collapse;
}
#tickets-table th,
#tickets-table td{
  padding:13px 16px;
  border-bottom:1px solid rgba(255,255,255,.10);
  white-space:nowrap;
  font-size:15px;
}
#tickets-table th{
  color:#d7e7ff;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.6px;
}
#tickets-table tr.ok{ background:rgba(16,185,129,.16); }
#tickets-table tr.bad{ background:rgba(239,68,68,.16); }
#tickets-table tbody tr:hover{ filter:brightness(1.14); }

/* Responsive grids */
@media(max-width:1024px){
  .grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:720px){
  .grid{ grid-template-columns:1fr; }
  .btn{ width:100%; }
}
@media(max-width:480px){
  .container{ padding:0 18px; }
  #tickets-table th,#tickets-table td{ font-size:13px; }
}

/* ===== NAV SIZE + RESPONSIVE TUNING (override) ===== */

/* Default (desktop ≤ 1440px) */
.tvg-nav{
  padding:14px 36px;     /* was 22px 48px */
}
.tvg-logo{
  height:118px;          /* was 150px */
}
.tvg-links{ gap:24px; }
.tvg-tab{
  font-size:16px;        /* was 18px */
  padding:10px 20px;     /* was 12px 26px */
}
.tvg-home{ padding:10px 18px; font-size:15px; }
.api-gear{ padding:8px 12px; font-size:18px; }

/* Large tablet */
@media (max-width: 1024px){
  .tvg-nav{ padding:12px 24px; }
  .tvg-logo{ height:92px; }
  .tvg-links{ gap:18px; }
  .tvg-tab{ font-size:15px; padding:9px 16px; }
  .tvg-home{ padding:9px 16px; font-size:14px; }
}

/* Tablet / small laptop */
@media (max-width: 820px){
  .tvg-nav{
    padding:10px 18px;
    gap:12px;
    flex-wrap:wrap;             /* allow wrap */
    justify-content:space-between;
  }
  .tvg-logo{ height:72px; }
  .tvg-links{
    order:3;
    width:100%;
    justify-content:center;
    gap:14px;
    margin-top:6px;
    flex-wrap:wrap;
  }
  .tvg-tab{ font-size:14px; padding:8px 14px; }
}

/* Phones */
@media (max-width: 560px){
  .tvg-logo{ height:58px; }
  .tvg-links{ gap:10px; }
  .tvg-tab{ font-size:13px; padding:8px 12px; }
  .tvg-home{ display:none; }    /* hide Home pill on very small screens */
  .api-gear{ font-size:17px; padding:7px 10px; }
}

/* ===== PAGE LAYOUT TUNING ===== */

.container{ max-width:1100px; } /* slightly tighter than 1300 */

.card, .table-wrap{ padding:16px; }   /* was 20px */

.grid{ gap:12px; }  /* slightly tighter */

/* Form controls: reduce height a hair */
input,select,textarea{ padding:10px 12px; }

/* Break grid earlier so forms stack */
@media (max-width: 980px){
  .grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 720px){
  .grid{ grid-template-columns:1fr; }
  .btn{ width:100%; }
}

/* Heading sizes down a notch on small screens */
@media (max-width: 820px){
  h1{ font-size:30px; }
}
@media (max-width: 560px){
  h1{ font-size:26px; }
}

/* Table: slightly smaller cells on narrow widths */
@media (max-width: 900px){
  #tickets-table th, #tickets-table td{
    padding:10px 12px; font-size:14px;
  }
}
/* ===== Cross-browser select fixes (esp. Firefox) ===== */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding-right: 34px; /* space for the arrow */
  position: relative;
}

/* Custom arrow */
select {
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.85) 45%, transparent 45%),
    linear-gradient(135deg, rgba(255,255,255,.85) 45%, transparent 45%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Focus ring consistent */
select:focus {
  outline: none;
  box-shadow: var(--ring);
}

/* Ensure option colors are readable in FF */
option {
  color: #0a0f18;            /* dark text in dropdown list */
  background: #eaf2ff;       /* light option background */
}
/* ===== Responsive frame for the simulator form ===== */
.frame{
  position: relative;
  width: 100%;
  max-width: 920px;                 /* roomy on desktop */
  margin: 0 auto;                   /* center the card */
  padding: clamp(16px, 2vw, 24px);  /* responsive padding */
  border-radius: 18px;
  background: rgba(17,24,38,.66);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 12px 28px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.02) inset;
}

/* Soft ambient edge glow that scales with the card */
.frame::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 18% -10%, rgba(34,211,238,.12), transparent 65%),
    radial-gradient(900px 420px at 85% -10%, rgba(99,102,241,.12), transparent 70%);
  filter: saturate(1.1);
  z-index: -1;
}

/* Grid inside the form: 2 columns on desktop, single column on phones */
#sim-form .grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

/* Make the “Seat(s)” row span both columns on desktop */
#sim-form .grid > label[style*="grid-column:1 / -1"]{
  grid-column: 1 / -1 !important;
}

/* Inputs and selects never overflow the frame */
#sim-form input,
#sim-form select,
#sim-form textarea{
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,14,22,.7);
  color: var(--text, #e5e7eb);
}

/* The small preview card inside the frame matches spacing on mobile */
#sim-form .card{
  padding: clamp(12px, 1.6vw, 16px);
}

/* Primary submit button spans the card nicely while not feeling huge */
#sim-form .btn{
  width: 100%;
  margin-top: 8px;
  padding: 12px 18px;
  border-radius: 12px;
}

/* ===== Mobile tweaks ===== */
@media (max-width: 860px){
  .frame{ max-width: 720px; } /* tighten cap a bit */
}

@media (max-width: 720px){
  #sim-form .grid{ grid-template-columns: 1fr; } /* stack fields */
  .frame{ border-radius: 16px; }
}

@media (max-width: 420px){
  .frame{ padding: 14px; border-radius: 14px; }
}