/* =============================================================================
   widget.css — white-label styles for the embeddable widget.
   Every colour flows from a --w-* variable set by the shell from the tenant's
   theme, so a garage can fully rebrand it. Sensible defaults are provided inline
   so it always looks finished even with no theme configured.
   ============================================================================= */
:root{
  --w-accent:#3E8BFF; --w-accent-2:#2E6FE0;
  --w-bg:#0A0B0D; --w-surface:#131519; --w-surface-2:#191C22; --w-elevated:#1F232A;
  --w-line:#262B33; --w-line-soft:#1B1F25;
  --w-text:#F2F4F7; --w-text-2:#AEB4BE; --w-text-3:#767D89;
  --w-gain:#FF6A2C; --w-warn:#FF6A2C; --w-verified:#4FE3F0;
  --w-radius:12px;
  --w-font:'Inter Tight', system-ui, -apple-system, sans-serif;
  --w-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --w-ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
.wgt-body{margin:0; background:transparent; color:var(--w-text); font-family:var(--w-font); -webkit-font-smoothing:antialiased}
.wgt-dim{color:var(--w-text-3)}

.wgt{background:var(--w-surface); border:1px solid var(--w-line); border-radius:calc(var(--w-radius) + 8px);
  padding:clamp(16px,3vw,26px)}

/* selects */
.wgt-selects{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.wgt-field{display:flex; flex-direction:column; gap:7px}
.wgt-field > span{font-family:var(--w-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--w-text-3)}
.wgt-field select{appearance:none; -webkit-appearance:none; background:var(--w-bg)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23767D89' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1px solid var(--w-line); border-radius:9px; color:var(--w-text); padding:13px 34px 13px 14px;
  font-family:var(--w-font); font-size:.95rem; cursor:pointer; transition:border-color .2s}
.wgt-field select:focus{outline:none; border-color:var(--w-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--w-accent) 22%, transparent)}
.wgt-field select:disabled{opacity:.5; cursor:not-allowed}

/* results */
.wgt-results{display:none}
.wgt-results.show{display:block; margin-top:22px; padding-top:22px; border-top:1px solid var(--w-line-soft);
  animation:wgtFade .45s var(--w-ease) both}
@keyframes wgtFade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.wgt-res-head{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px}
.wgt-res-car{font-weight:700; font-size:clamp(1.05rem,2.4vw,1.35rem); letter-spacing:-.01em}
.wgt-res-car .wgt-dim{font-weight:600; font-size:.82em}
.wgt-stagepick{display:flex; gap:5px; background:var(--w-bg); border:1px solid var(--w-line-soft); border-radius:100px; padding:4px}
.wgt-stagebtn{border:0; background:none; cursor:pointer; padding:7px 15px; border-radius:100px; font-family:var(--w-mono);
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--w-text-2); transition:.2s var(--w-ease)}
.wgt-stagebtn.active{background:var(--w-accent); color:#fff}

.wgt-badge{display:inline-block; font-family:var(--w-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--w-text-3); border:1px solid var(--w-line); border-radius:6px; padding:5px 10px; margin-bottom:18px}
.wgt-badge--dyno{color:var(--w-verified); border-color:color-mix(in srgb, var(--w-verified) 40%, transparent);
  background:color-mix(in srgb, var(--w-verified) 8%, transparent)}

.wgt-metrics{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.wgt-metric{background:var(--w-bg); border:1px solid var(--w-line-soft); border-radius:var(--w-radius); padding:15px 17px}
.wgt-metric__top{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px}
.wgt-metric__k{font-family:var(--w-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--w-text-3)}
.wgt-metric__gain{font-weight:700; font-size:.92rem; color:var(--w-gain)}
.wgt-metric__val{font-size:1.3rem; font-weight:600; color:var(--w-text)}
.wgt-metric__val strong{font-weight:800; color:#fff}
.wgt-metric__val .wgt-dim{font-weight:500; font-size:.9rem}
.wgt-metric__note{margin-top:6px; font-size:.72rem; color:var(--w-text-3)}
.wgt-bar{position:relative; height:7px; margin-top:11px; background:var(--w-surface-2); border-radius:100px; overflow:hidden}
.wgt-bar__stock,.wgt-bar__tuned{position:absolute; left:0; top:0; height:100%; border-radius:100px; width:0; transition:width .9s var(--w-ease)}
.wgt-bar__stock{background:var(--w-text-3); opacity:.55; z-index:1}
.wgt-bar__tuned{background:linear-gradient(90deg,var(--w-accent),var(--w-verified)); z-index:2}

/* stage 3 hardware */
.wgt-hw{margin-top:18px; border:1px solid color-mix(in srgb, var(--w-warn) 35%, transparent);
  background:color-mix(in srgb, var(--w-warn) 6%, transparent); border-radius:var(--w-radius); padding:15px 17px}
.wgt-hw__h{font-family:var(--w-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--w-warn); margin-bottom:8px}
.wgt-hw p{font-size:.9rem; color:var(--w-text-2); line-height:1.55; margin:0}
.wgt-hw__note{margin-top:10px !important; font-size:.82rem !important; color:var(--w-text-3) !important}

/* extras */
.wgt-extras{margin-top:22px}
.wgt-extras__h{font-weight:700; font-size:1rem; margin-bottom:13px}
.wgt-extras__grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.wgt-extra{position:relative; text-align:left; display:flex; flex-direction:column; gap:3px; cursor:pointer;
  background:var(--w-bg); border:1px solid var(--w-line); border-radius:var(--w-radius); padding:13px 40px 13px 15px;
  font-family:var(--w-font); transition:border-color .18s, background .18s}
.wgt-extra:hover{border-color:var(--w-text-3)}
.wgt-extra.on{border-color:var(--w-accent); background:color-mix(in srgb, var(--w-accent) 8%, transparent)}
.wgt-extra__name{font-weight:700; font-size:.92rem; color:var(--w-text)}
.wgt-extra__desc{font-size:.8rem; color:var(--w-text-3); line-height:1.4}
.wgt-extra__note{font-size:.74rem; color:var(--w-warn); line-height:1.4; margin-top:2px}
.wgt-extra__tag{display:inline-block; font-family:var(--w-mono); font-size:.56rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--w-warn); border:1px solid color-mix(in srgb, var(--w-warn) 40%, transparent); border-radius:4px; padding:1px 5px; margin-left:4px}
.wgt-extra__tick{position:absolute; top:12px; right:13px; width:22px; height:22px; border-radius:50%;
  border:1px solid var(--w-line); color:transparent; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; transition:.18s}
.wgt-extra.on .wgt-extra__tick{background:var(--w-accent); border-color:var(--w-accent); color:#fff}
.wgt-extra--offroad.on{border-color:var(--w-warn); background:color-mix(in srgb, var(--w-warn) 8%, transparent)}
.wgt-extra--offroad.on .wgt-extra__tick{background:var(--w-warn); border-color:var(--w-warn)}

/* cta */
.wgt-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:var(--w-font); font-weight:600; border-radius:var(--w-radius); border:1px solid transparent;
  padding:15px 30px; font-size:1.02rem; text-decoration:none; background:var(--w-accent); color:#fff; transition:.2s var(--w-ease)}
.wgt-btn:hover{background:var(--w-accent-2)}
.wgt-cta{margin-top:22px; text-align:center}
.wgt-disclaimer{margin-top:14px; font-size:.78rem; color:var(--w-text-3); max-width:60ch; margin-inline:auto; line-height:1.55}

/* footer */
.wgt-foot{margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:.72rem; color:var(--w-text-3)}
.wgt-credit{line-height:1.5}
.wgt-credit a{color:var(--w-text-2); text-decoration:underline; text-underline-offset:2px}
.wgt-credit a:hover{color:var(--w-text)}

/* dead states */
.wgt-dead{padding:8px}
.wgt-dead__card{background:var(--w-surface); border:1px solid var(--w-line); border-radius:var(--w-radius);
  padding:22px 24px; text-align:center}
.wgt-dead__title{font-weight:700; font-size:1.05rem; color:var(--w-text)}
.wgt-dead__sub{margin-top:6px; font-size:.86rem; color:var(--w-text-3); line-height:1.5}

@media (max-width:620px){
  .wgt-selects{grid-template-columns:1fr}
  .wgt-metrics{grid-template-columns:1fr}
  .wgt-extras__grid{grid-template-columns:1fr}
  .wgt-stagebtn{padding:7px 12px; font-size:.68rem}
}

/* =============================================================================
   Customer-configurable colour model + always-legible details.
   (Appended so these win by source order.)
   - "Background colour" = the widget container (--w-bg), pattern paints here.
   - "Dropdown / box colour" = selects, cards, chips (--w-surface).
   - --w-on-accent auto-contrasts text sitting on the accent (any accent stays readable).
   ============================================================================= */
:root{
  --w-on-accent:#fff;
  --w-accent-soft:color-mix(in srgb, var(--w-accent) 16%, transparent);
  --w-pattern:rgba(255,255,255,.06);
  --w-glow:color-mix(in srgb, var(--w-accent) 10%, transparent);
  --w-glow2:color-mix(in srgb, var(--w-accent) 5%, transparent);
  --w-tag:var(--w-text-3);
  --w-tag-link:var(--w-accent);
}
.wgt{background-color:var(--w-bg); position:relative}
.wgt-field select{background-color:var(--w-surface)}
.wgt-stagepick{background:var(--w-surface)}
.wgt-metric{background:var(--w-surface)}
.wgt-extra{background:var(--w-surface)}

/* legible on any accent */
.wgt-btn{color:var(--w-on-accent)}
.wgt-stagebtn.active{color:var(--w-on-accent)}
.wgt-extra.on .wgt-extra__tick{color:var(--w-on-accent)}
.wgt-metric__val strong{color:var(--w-text)}

/* the required "GainsCalculator by PowerIndex" tagline — auto-contrast, always shown */
.wgt-tag{margin-left:auto; display:inline-flex; gap:.32em; align-items:baseline; text-decoration:none;
  font-family:var(--w-mono); font-size:.66rem; letter-spacing:.03em; color:var(--w-tag); white-space:nowrap;
  opacity:.92; transition:opacity .18s}
.wgt-tag span{color:var(--w-tag-link); font-weight:600}
.wgt-tag:hover{opacity:1}
.wgt-datacredit{flex-basis:100%; margin-top:8px; font-size:.66rem; color:var(--w-text-3); line-height:1.5}
.wgt-datacredit a{color:var(--w-text-3); text-decoration:underline; text-underline-offset:2px}