:root{
  --void:#dce9f7;
  --blue-deep:#0F2C73; --blue:#17358F; --blue-2:#3B7BFF;
  --panel-glass:linear-gradient(155deg, rgba(45,82,140,.82), rgba(22,47,96,.92));
  --gold:#F6B93B; --gold-deep:#D99A1E; --gold-soft:#FFD98A; --gold-pale:rgba(246,185,59,.14);
  --ink:#FFFFFF; --text-dim:#D7E2F5; --text-faint:#AEC0E0;
  --line:rgba(148,178,255,.22); --line-soft:rgba(148,178,255,.12);
  --blue-glow:#1769d1; --blue-glow-soft:rgba(23,105,209,.28);
  --aurora-1:#3B7BFF; --aurora-2:#8A5CFF;
  --font-display:'Poppins', sans-serif; --font-body:'Inter', -apple-system, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
}

/* Bootstrap does the layout/grid/components — this file applies the brand's
   aurora-glass identity on top of it. */

body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--font-body);
  min-height:100vh;
  margin:0;
}

.ts-wrap{
  position:relative;
  isolation:isolate;
  min-height:100vh;
}

.container{position:relative; z-index:2;}

.ts-bg{position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--void);}
.ts-bg-slide{
  position:absolute; inset:-20px;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  filter:blur(7px) brightness(.9) saturate(1.15); transform:scale(1.08);
  opacity:0; animation:tsBgFade 24s infinite;
}
@keyframes tsBgFade{0%{opacity:0;} 8%{opacity:.85;} 42%{opacity:.85;} 50%{opacity:0;} 100%{opacity:0;}}
.ts-bg::after{content:""; position:absolute; inset:0; background:rgba(8,20,48,.5);}
.ts-bg::before{
  content:"";
  position:absolute; inset:-2px; z-index:1;
  background-image:linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(120% 80% at 50% 20%, #000 45%, transparent 90%);
  animation:tsGridDrift 40s linear infinite;
  opacity:.22;
}
@keyframes tsGridDrift{from{background-position:0 0, 0 0;} to{background-position:46px 92px, 46px 92px;}}

/* floating aurora glow orbs */
.ts-wrap::before,
.ts-wrap::after{
  content:"";
  position:fixed; z-index:1;
  border-radius:50%;
  filter:blur(110px);
  pointer-events:none;
  opacity:.4;
}
.ts-wrap::before{
  width:520px; height:520px; top:-180px; left:-140px;
  background:radial-gradient(circle, var(--aurora-1), transparent 70%);
  animation:tsOrbFloatA 18s ease-in-out infinite;
}
.ts-wrap::after{
  width:460px; height:460px; bottom:-160px; right:-120px;
  background:radial-gradient(circle, var(--gold), transparent 70%);
  animation:tsOrbFloatB 20s ease-in-out infinite;
}
@keyframes tsOrbFloatA{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(34px,22px) scale(1.07);}}
@keyframes tsOrbFloatB{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-26px,-20px) scale(1.05);}}

@media (prefers-reduced-motion:reduce){
  .ts-bg-slide, .ts-bg::before{animation:none;}
  .ts-wrap::before, .ts-wrap::after{animation:none;}
}

.brand-shield{width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 0 14px rgba(246,185,59,.35));}
.brand-name{font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--ink);}
.brand-sub{font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--gold); letter-spacing:.14em; text-transform:uppercase; margin-top:-2px;}

.ticket-card{
  border-radius:20px;
  border:1px solid var(--line) !important;
  background:var(--panel-glass);
  box-shadow:0 30px 70px rgba(10,30,66,.42), 0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(14px);
  position:relative;
  overflow:hidden;
}
/* slow animated gradient sheen along the border, replacing the flat gold bar */
.ticket-card::before{
  content:"";
  position:absolute; inset:0;
  padding:1px;
  border-radius:20px;
  background:linear-gradient(120deg, rgba(246,185,59,.7), rgba(59,123,255,.15) 35%, rgba(138,92,255,.35) 65%, rgba(246,185,59,.7));
  background-size:220% 220%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:tsBorderSheen 10s linear infinite;
  pointer-events:none;
}
@keyframes tsBorderSheen{0%{background-position:0% 50%;} 100%{background-position:200% 50%;}}
.ticket-card::after{
  content:"";
  position:absolute; left:6%; right:6%; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-soft), transparent);
  opacity:.7;
}
.ticket-card h1{font-family:var(--font-display); color:var(--ink); text-align:center; margin-bottom:15px;}
.ticket-card-title{position:relative;}
.ticket-card-title::after{
  content:"AUTHENTICATION REQUIRED";
  display:block;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); text-align:center; margin-top:6px; opacity:.8;
}

/* Pills tab styling in brand colors */
.ticket-nav .nav-link{
  font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--text-dim);
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  border-radius:10px;
  transition:background .2s ease, box-shadow .2s ease, color .2s ease;
}
.ticket-nav .nav-link:hover:not(.active){background:rgba(76,141,255,.1); color:var(--ink);}
.ticket-nav .nav-link.active{
  background:linear-gradient(180deg, var(--gold-soft), var(--gold));
  color:var(--blue-deep); border-color:transparent;
  box-shadow:0 8px 18px rgba(246,185,59,.28);
}

/* Brand button, with a holographic shine sweep on hover */
.btn-gold{
  position:relative; overflow:hidden;
  min-height:46px; background:linear-gradient(180deg, var(--gold-soft), var(--gold)); color:var(--blue-deep); border:none; font-weight:600; border-radius:10px;
  box-shadow:0 10px 24px rgba(246,185,59,.25), 0 0 0 1px rgba(255,255,255,.08) inset;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-gold::before{
  content:"";
  position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg);
  transition:left .5s ease;
}
.btn-gold:hover::before{left:130%;}
.btn-gold:hover{filter:brightness(1.06); background:linear-gradient(180deg, var(--gold-soft), var(--gold)); color:var(--blue-deep); box-shadow:0 12px 30px rgba(246,185,59,.35), 0 0 0 1px rgba(255,255,255,.1) inset;}
.btn-gold:active{transform:translateY(1px);}
.btn-gold:focus-visible{outline:2px solid var(--blue-glow); outline-offset:2px;}

.btn-outline-primary{color:var(--gold-soft); border-color:var(--line);}
.btn-outline-primary:hover{background:rgba(76,141,255,.12); color:var(--ink); border-color:var(--blue-glow);}

.form-label{font-size:12.5px; font-weight:600; color:var(--text-dim);}
.form-control, .form-select{min-height:46px; border:1px solid var(--line); background:rgba(255,255,255,.9); color:#0F1A33; border-radius:10px; transition:border-color .15s ease, box-shadow .15s ease;}
.form-control::placeholder{color:#6F7C96;}
.form-control:focus, .form-select:focus{border-color:var(--blue-glow); background:#fff; box-shadow:0 0 0 3px rgba(76,141,255,.18), 0 0 18px rgba(76,141,255,.15);}
.form-control:read-only{background:rgba(255,255,255,.55);}

/* Tom Select control matches the input styling */
.ts-control{background:rgba(255,255,255,.9) !important; border:1px solid var(--line) !important; border-radius:10px !important; min-height:46px; color:#0F1A33 !important;}
.ts-wrapper.focus .ts-control{border-color:var(--blue-glow) !important; box-shadow:0 0 0 3px rgba(76,141,255,.18), 0 0 18px rgba(76,141,255,.15) !important;}
.ts-dropdown{border:1px solid var(--line); border-radius:10px; overflow:hidden;}

.photo-preview-wrap{background:rgba(255,255,255,.08) !important; border-color:var(--line) !important;}
.photo-preview-wrap i{color:var(--text-faint) !important;}

.form-text{color:var(--text-faint) !important;}
.invalid-feedback{color:#FFB2B2 !important;}
.alert-danger{background:rgba(200,59,75,.14); color:#FFB2B2; border:1px solid rgba(255,107,107,.35); border-radius:10px;}
.alert-success{background:rgba(67,209,122,.14); color:#8CF0AF; border:1px solid rgba(67,209,122,.35); border-radius:10px;}

.confirm-box{
  position:relative; overflow:hidden;
  border:1px dashed var(--gold); background:rgba(246,185,59,.08); border-radius:12px; padding:16px;
}
.confirm-box .tid{font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--gold-soft); letter-spacing:.03em;}
.confirm-box .tid-label{font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px;}
.confirm-box .tid-sub{color:var(--text-dim);}

.ticket-link{color:var(--gold-soft); font-weight:600; text-decoration:none;}
.ticket-link:hover{color:var(--gold); text-decoration:underline;}

.stage-list .badge{min-width:88px;}
.stage-list .list-group-item{background:rgba(255,255,255,.06); color:var(--ink); border-color:var(--line-soft);}

.signin-prompt{font-size:14px; color:var(--text-dim);}
.signin-prompt .ticket-link{font-size:14px;}

#trackResult .card{background:rgba(255,255,255,.06) !important; border:1px solid var(--line-soft);}
#trackResult .text-dark{color:var(--ink) !important;}
#trackResult .text-muted{color:var(--text-faint) !important;}

.ts-wrap .container{padding-top:clamp(1.5rem, 5vw, 3rem) !important; padding-bottom:clamp(1.5rem, 5vw, 3rem) !important;}
.ticket-card .form-text{color:var(--text-faint);}

@media (max-width:575.98px){
  .ticket-card .card-body{padding:1.25rem !important;}
  .ticket-card h1{font-size:1.2rem;}
  .ticket-nav .nav-link{font-size:12px; padding:.6rem .35rem;}
}