/* ==========================================================================
   DNA Tint Studio — builds on the site's tokens in /style.css
   ========================================================================== */
.sim-page .hero{padding:44px 0 30px;}
.sim-page .hero h1{font-size:clamp(28px,5vw,44px);}
.sim-page .hero .sub{margin-bottom:0;}
.sim-section{padding:28px 0 64px;}

.sim{display:grid;grid-template-columns:minmax(0,1fr) 340px;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--charcoal);}

/* STAGE */
.sim-stage{position:relative;min-height:520px;isolation:isolate;background:radial-gradient(ellipse 70% 60% at 50% 40%, #1d2025, var(--charcoal) 70%);}
.sim-canvas{position:absolute;inset:0;}
.sim-canvas canvas{width:100%;height:100%;display:block;touch-action:none;}
.sim-stage-top{position:absolute;left:22px;right:22px;top:20px;z-index:1;pointer-events:none;}
.sim-model{margin:0;font-size:16px;font-weight:700;}
.sim-badge{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gold-soft);
  background:rgba(184,149,80,0.10);border:1px solid rgba(184,149,80,0.3);padding:5px 10px;border-radius:30px;}
.sim-badge[hidden]{display:none;}
.sim-stage-bottom{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.sim-hint{display:block;margin-top:8px;font-size:12px;color:var(--text-dim);}
.sim-stage:not([data-state="ready"]) .sim-hint{display:none;}
.sim-views{display:flex;gap:6px;}
.sim-views button{background:rgba(7,8,10,0.6);color:var(--off-white);border:1px solid var(--line-strong);padding:0 14px;border-radius:30px;font-size:12.5px;font-weight:600;min-height:38px;cursor:pointer;backdrop-filter:blur(6px);}
@media (hover:hover){.sim-views button:hover{border-color:var(--gold);}}
.sim-compare{background:rgba(7,8,10,0.6);color:var(--off-white);border:1px solid var(--line-strong);
  padding:0 16px;min-height:40px;border-radius:30px;font-size:12.5px;font-weight:700;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;backdrop-filter:blur(6px);}
.sim-compare[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#1a1508;}
/* Views need a live 3D model; compare also works on the 2D sample. */
.sim-stage:not([data-state="ready"]) .sim-views{display:none;}
.sim-stage:not([data-state="ready"]):not([data-state="no-asset"]):not([data-state="webgl"]) .sim-stage-bottom{display:none;}

/* STATUS + 2D SAMPLE */
.sim-status{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:80px 28px 76px;text-align:center;}
.sim-status[hidden]{display:none;}
.sim-stage[data-state="loading"] .sim-status{background:linear-gradient(rgba(18,19,23,0.55),rgba(18,19,23,0.55)),var(--poster,none) center/cover no-repeat;}
.sim-status-text{max-width:400px;margin:0;color:var(--text-dim);font-size:14.5px;line-height:1.6;}
.sim-status progress{width:180px;height:3px;accent-color:var(--gold);}
.sim-status progress[hidden],.sim-retry[hidden]{display:none;}
.sim-pane{display:none;position:relative;width:min(320px,70%);aspect-ratio:16/10;border-radius:18px 46px 10px 10px;overflow:hidden;border:2px solid #2a2d33;
  background:linear-gradient(180deg,#8fa3b8 0%,#c9d3dc 38%,#6d665d 39%,#3f3a34 100%);}
.sim-pane::before{content:"";position:absolute;left:14%;bottom:0;width:24%;height:58%;border-radius:14px 14px 0 0;background:#2b2724;box-shadow:130px 6px 0 #2b2724;}
.sim-pane-glass{position:absolute;inset:0;background:var(--glass-color,#3f4b47);opacity:var(--glass-opacity,0.24);transition:opacity .25s ease, background .25s ease;}
.sim-pane::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,0.22) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,0.08) 100%);}
.sim-stage[data-state="no-asset"] .sim-pane,.sim-stage[data-state="webgl"] .sim-pane{display:block;}

/* PANEL */
.sim-panel{padding:24px 22px;background:var(--charcoal-2);border-left:1px solid var(--line);}
.sim-group{border:0;margin:0 0 22px;padding:0 0 22px;border-bottom:1px solid var(--line);min-width:0;}
.sim-group[hidden]{display:none;}
.sim-group:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0;}
.sim-step{color:var(--gold-soft);font-weight:700;letter-spacing:2px;font-size:11.5px;text-transform:uppercase;margin:0 0 14px;padding:0;}
.sim-step span{color:var(--gold);margin-right:8px;}
.sim-vehicles{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.sim-vehicles button{background:var(--charcoal);border:1.5px solid var(--line-strong);color:var(--off-white);border-radius:var(--radius-sm);padding:12px;text-align:left;cursor:pointer;min-height:58px;}
.sim-vehicles b{display:block;font-size:14.5px;}
.sim-vehicles small{display:block;font-size:11.5px;color:var(--text-dim);margin-top:3px;}
.sim-vehicles button[aria-checked="true"]{border-color:var(--gold);background:rgba(184,149,80,0.10);}
@media (hover:hover){.sim-vehicles button:hover{border-color:var(--gold);}}
.sim-link{background:none;border:none;color:var(--text-dim);font-size:13px;text-decoration:underline;padding:12px 0 0;cursor:pointer;}
.sim-colors{display:flex;flex-wrap:wrap;gap:10px;}
.sim-colors button{width:32px;height:32px;border-radius:50%;background:var(--paint);border:2px solid var(--line-strong);cursor:pointer;}
.sim-colors button[aria-checked="true"]{box-shadow:0 0 0 2px var(--charcoal-2),0 0 0 4px var(--gold);}
.sim-value{margin:0 0 12px;font-size:34px;font-weight:800;letter-spacing:-1px;}
.sim-value small{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--text-dim);margin-left:8px;}
.sim-presets{display:flex;border-radius:10px;overflow:hidden;border:1px solid var(--line);}
.sim-presets button{flex:1;min-width:0;height:48px;border:0;border-right:1px solid rgba(7,8,10,0.4);cursor:pointer;font-size:11.5px;font-weight:700;color:var(--off-white);
  text-shadow:0 1px 2px rgba(0,0,0,0.7);background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)),#c9d0d6;position:relative;isolation:isolate;}
.sim-presets button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--swatch);opacity:var(--swatch-opacity);}
.sim-presets button:last-child{border-right:0;}
.sim-presets button[aria-checked="true"]{box-shadow:inset 0 0 0 2px var(--gold-soft);}
.sim-scale{display:flex;justify-content:space-between;color:var(--text-dim);font-size:11px;margin-top:8px;}
.sim-windows{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;}
.sim-windows legend{float:left;width:100%;}
.sim-window{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--off-white);min-height:40px;cursor:pointer;}
.sim-window input{accent-color:var(--gold);width:18px;height:18px;}
.sim-window:has(input:disabled){opacity:.4;cursor:default;}
.sim-customer summary{cursor:pointer;font-size:14px;font-weight:700;padding:4px 0;}
.sim-customer summary small{color:var(--text-dim);font-weight:400;}
.sim-customer p{color:var(--text-dim);font-size:12.5px;margin:10px 0;}
.sim-customer-fields{display:grid;grid-template-columns:.7fr 1fr 1fr;gap:8px;}
.sim-customer-fields label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);}
.sim-customer-fields input{display:block;width:100%;margin-top:6px;background:var(--charcoal);border:1px solid var(--line-strong);color:var(--off-white);
  font:inherit;font-size:16px;padding:10px;border-radius:var(--radius-sm);min-height:44px;}

/* CONVERSION */
.sim-disclaimer{font-size:12px;color:var(--text-dim);margin:12px 0 0;}
.sim-cta-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding:18px 22px;
  background:var(--charcoal-2);border:1px solid var(--line);border-radius:var(--radius-lg);}
.sim-summary{margin:0;font-size:14px;color:var(--off-white);}
.sim-ctas{display:flex;gap:10px;flex:none;}
.sim-ctas a{padding:13px 22px;font-size:14px;}
.sim-ctas [aria-disabled="true"]{opacity:.45;pointer-events:none;}
.sim-foot{padding:30px 0;}

@media (max-width: 860px){
  .sim{grid-template-columns:1fr;}
  .sim-stage{min-height:0;height:min(58vh,440px);}
  .sim-panel{border-left:0;border-top:1px solid var(--line);}
  .sim-hint{display:none !important;}
  .sim-stage-bottom{left:12px;right:12px;bottom:12px;gap:6px;}
  .sim-compare,.sim-views button{padding:0 10px;font-size:12px;white-space:nowrap;}
  .sim-compare{flex:none;}
  .sim-page{padding-bottom:96px;}
  .sim-cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;margin:0;border-radius:0;border-width:1px 0 0;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(7,8,10,0.94);backdrop-filter:blur(10px);}
  .sim-summary{font-size:12px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
  .sim-ctas a{padding:12px 16px;font-size:13.5px;}
}
@media (max-width: 480px){
  .sim-summary{display:none;}
  .sim-cta-bar{justify-content:stretch;}
  .sim-ctas{width:100%;}
  .sim-ctas .sim-book-cta{flex:1;justify-content:center;}
  .sim-ctas .sim-call,.sim-ctas .sim-quote{flex:none;padding:12px;}
  .sim-customer-fields{grid-template-columns:1fr 1fr;}
  .sim-customer-fields label:first-child{grid-column:1 / -1;}
  .sim-stage{height:54vh;}
}