/* =====================================================
   TunerSuite Connect — Vehicle Search + Dyno Card v5
   Strategy: gradient-glass (no backdrop-filter dep.)
   ===================================================== */

/* ── SELECTS ──────────────────────────────────────── */
.tsc-vs { max-width: 920px; margin: 0 auto; }

.tsc-vs-selects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}

.tsc-vs-field { display: flex; flex-direction: column; gap: 6px; }

.tsc-vs-field label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}

.tsc-select-wrap { position: relative; }

.tsc-select-wrap select {
  width: 100%;
  padding: 12px 36px 12px 14px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.tsc-select-wrap select:focus {
  outline: none;
  border-color: rgba(255,107,0,0.8);
  background-color: rgba(255,107,0,0.1);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.15);
}
.tsc-select-wrap select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tsc-select-wrap select option { background: #111118; color: #fff; }

.tsc-spinner {
  display: none;
  position: absolute;
  right: 34px; top: 50%;
  transform: translateY(-50%);
  width: 13px; height: 13px;
  border: 2px solid rgba(255,107,0,0.2);
  border-top-color: #ff6b00;
  border-radius: 50%;
  animation: tscSpin .7s linear infinite;
}
@keyframes tscSpin { to { transform: translateY(-50%) rotate(360deg); } }

/* ── RESULTS WRAPPER ──────────────────────────────── */
.tsc-results { margin-top: 14px; }

/* ── DYNO CARD ────────────────────────────────────── */
.tsc-dcard {
  position: relative;
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.09) 0%,
      rgba(8,6,18,0.88) 60%,
      rgba(8,6,18,0.92) 100%);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 22px 22px 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 1px 0 0 rgba(255,255,255,0.05),
    0 28px 64px rgba(0,0,0,0.65);
  animation: dCardIn .38s cubic-bezier(.22,1,.36,1) both;
  overflow: hidden;
}

@keyframes dCardIn {
  from { opacity:0; transform:translateY(14px) scale(.98); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ── HEADER ───────────────────────────────────────── */
.tsc-dcard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.tsc-dcard-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.3px;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}
.tsc-dcard-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  margin-top: 3px;
  font-family: 'Fira Code','Courier New',monospace;
  letter-spacing: .4px;
}

/* Fuel badges */
.tsc-fb {
  font-size: 10px; font-weight: 700;
  padding: 4px 12px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 1.2px;
  white-space: nowrap; flex-shrink: 0;
  border: 1px solid currentColor;
}
.tsc-fb-petrol  { color:#22c55e; background:rgba(34,197,94,.12); }
.tsc-fb-diesel  { color:#60a5fa; background:rgba(96,165,250,.12); }
.tsc-fb-hybrid  { color:#c084fc; background:rgba(192,132,252,.12); }
.tsc-fb-electric{ color:#22d3ee; background:rgba(34,211,238,.12); }
.tsc-fb-lpg     { color:#fbbf24; background:rgba(251,191,36,.12); }
.tsc-fb-other   { color:#94a3b8; background:rgba(148,163,184,.12); }

/* ── STAGE TABS ───────────────────────────────────── */
.tsc-stabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  background: rgba(0,0,0,0.4);
  padding: 4px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.08);
}
.tsc-stab {
  flex: 1;
  padding: 9px 4px;
  background: transparent;
  border: none;
  border-radius: 9px;
  color: rgba(255,255,255,0.4);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition: all .2s ease-out;
}
.tsc-stab:hover {
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.07);
}
.tsc-stab--active {
  background: linear-gradient(135deg, rgba(255,107,0,0.28), rgba(255,107,0,0.15));
  color: #ffaa60;
  border: 1px solid rgba(255,107,0,0.4);
  box-shadow: 0 0 18px rgba(255,107,0,0.18), inset 0 1px 0 rgba(255,255,255,0.12);
}

/* ── GAUGES ───────────────────────────────────────── */
.tsc-gauges-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 14px 8px 10px;
  box-shadow: inset 0 2px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
}
.tsc-gauge-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tsc-gauge-lbl-top {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  font-family: 'Fira Code','Courier New',monospace;
}
.tsc-gauge-body {
  position: relative;
  width: 148px;
  height: 132px;
}
.tsc-gauge-svg { width: 148px; height: 132px; display: block; overflow: visible; }

.tsc-arc-bg {
  fill: none;
  stroke: rgba(255,255,255,0.06);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 209.44 314.16;
  stroke-dashoffset: -130.9;
}
.tsc-arc-glow {
  fill: none;
  stroke: #ff6b00;
  stroke-width: 18;
  stroke-linecap: round;
  stroke-dasharray: 0.01 314.16;
  stroke-dashoffset: -130.9;
  opacity: 0.2;
  filter: blur(7px);
}
.tsc-arc-fill {
  fill: none;
  stroke: #ff6b00;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 0.01 314.16;
  stroke-dashoffset: -130.9;
}

/* cx=60/120*148=74 cy=70/120*132=77 */
.tsc-gauge-overlay {
  position: absolute;
  top: 77px; left: 74px;
  transform: translate(-50%,-50%);
  text-align: center;
  pointer-events: none;
  line-height: 1;
}
.tsc-gauge-num {
  display: block;
  font-family: 'Fira Code','Courier New',monospace;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  min-width: 74px;
  text-align: center;
  text-shadow: 0 2px 16px rgba(0,0,0,0.9), 0 0 24px rgba(255,107,0,0.4);
}
.tsc-gauge-unit {
  display: block;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  text-align: center;
  margin-top: 2px;
  font-family: 'Fira Code','Courier New',monospace;
}
.tsc-gauge-gain {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #ff9940;
  margin-top: 5px;
  text-align: center;
  min-height: 16px;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(255,107,0,0.6);
}
.tsc-gain--show {
  animation: gainPop .38s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes gainPop {
  0%   { opacity:0; transform:scale(.5) translateY(6px); }
  60%  { opacity:1; transform:scale(1.18) translateY(-2px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}

.tsc-gauge-sep {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  padding: 0 4px; flex-shrink: 0;
}
.tsc-stage-chip {
  font-family: 'Fira Code','Courier New',monospace;
  font-size: 9px; font-weight: 700;
  letter-spacing: 2px;
  color: #475569;
  background: rgba(71,85,105,0.2);
  border: 1px solid rgba(71,85,105,0.35);
  padding: 6px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .3s, border-color .3s, background .3s;
}
.tsc-vs-label {
  font-size: 10px; font-weight: 700;
  color: #ff9940; text-align: center;
  white-space: nowrap; opacity: 0;
  transition: opacity .4s;
  font-family: 'Fira Code','Courier New',monospace;
}

/* ── COMPARE BARS ─────────────────────────────────── */
.tsc-compare {
  display: flex; flex-direction: column; gap: 7px;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
}
.tsc-cmp-row { display: flex; align-items: center; gap: 10px; }
.tsc-cmp-label {
  font-size: 9px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  min-width: 50px; flex-shrink: 0;
}
.tsc-cmp-track {
  flex: 1; height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px; overflow: hidden;
}
.tsc-cmp-bar {
  height: 100%; border-radius: 2px;
  transition: width .7s cubic-bezier(.22,1,.36,1);
}
.tsc-cmp-val {
  font-size: 10px; color: rgba(255,255,255,0.45);
  font-family: 'Fira Code','Courier New',monospace;
  min-width: 52px; text-align: right; flex-shrink: 0;
}

/* ── FUEL SAVINGS ─────────────────────────────────── */
.tsc-fuel-row {
  display: flex; gap: 10px;
  padding: 11px 14px;
  background: rgba(34,197,94,0.07);
  border: 1px solid rgba(34,197,94,0.18);
  border-radius: 11px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.tsc-fuel-item { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 130px; }
.tsc-fuel-icon {
  width: 28px; height: 28px;
  background: rgba(34,197,94,0.12);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tsc-fuel-info { display: flex; flex-direction: column; gap: 1px; }
.tsc-fuel-lbl { font-size: 9px; color: rgba(255,255,255,0.6); }
.tsc-fuel-val { font-size: 15px; font-weight: 800; color: #22c55e; font-family: 'Fira Code','Courier New',monospace; }

/* ── BUTTONS ──────────────────────────────────────── */
.tsc-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.tsc-btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px 18px; border-radius: 12px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  cursor: pointer; transition: transform .2s, box-shadow .2s;
  min-width: 130px; border: none;
}
.tsc-btn-primary {
  background: linear-gradient(135deg, #ff6b00, #ff9100);
  color: #fff;
  box-shadow: 0 4px 24px rgba(255,107,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}
.tsc-btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(255,107,0,0.55); color:#fff; text-decoration:none; }
.tsc-btn-wa {
  background: rgba(37,211,102,0.12);
  color: #25d366;
  border: 1px solid rgba(37,211,102,0.3);
}
.tsc-btn-wa:hover { background:rgba(37,211,102,0.2); border-color:#25d366; transform:translateY(-2px); color:#25d366; text-decoration:none; }

/* ── REDUCED MOTION ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tsc-dcard, .tsc-gain--show { animation:none; opacity:1; transform:none; }
  .tsc-btn, .tsc-stab { transition:none; }
}

/* ── MOBILE ───────────────────────────────────────── */
@media (max-width: 480px) {
  .tsc-gauge-body { width: 118px; height: 106px; }
  .tsc-gauge-svg  { width: 118px; height: 106px; }
  .tsc-gauge-overlay { top: 62px; left: 59px; }
  .tsc-gauge-num { font-size: 26px; min-width: 60px; }
  .tsc-dcard { padding: 16px 14px; }
  .tsc-dcard-title { font-size: 16px; }
  .tsc-stage-chip, .tsc-vs-label { display: none; }
}