/* mq-calculator.css — scoped styles for the shared live Vehicle Gap Simulator.
   Uses the pages' brand CSS vars where present, with hard fallbacks so it also
   renders correctly if dropped into a page that doesn't define them. */
.mqc{
  --_navy:var(--navy,#012A37); --_teal:var(--teal,#366C7D); --_mint:var(--mint,#B8E5CF);
  --_mint2:var(--mint-2,#E8F1EB); --_premium:var(--premium,#279B8F); --_alert:var(--alert,#EF4343);
  --_radius:14px; --_shadow:0 4px 20px -2px rgba(1,42,55,.08); --_shadow-lg:0 12px 40px -8px rgba(1,42,55,.18);
  font-family:'DM Sans',system-ui,sans-serif; color:var(--_navy); text-align:left;
}
.mqc *{box-sizing:border-box}
.mqc-grid{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:22px;align-items:stretch}
@media(max-width:860px){.mqc-grid{grid-template-columns:1fr}}

.mqc-panel{background:#fff;border:1px solid var(--_mint2);border-radius:var(--_radius);box-shadow:var(--_shadow);padding:26px}
.mqc-h{font-size:19px;font-weight:800;letter-spacing:-.01em;margin:0 0 4px}
.mqc-hint,.mqc-sub{font-size:13.5px;color:var(--_teal);margin:0 0 16px;line-height:1.5}
.mqc-note{font-size:12px;color:var(--_teal);text-align:center;margin:14px 0 0}

/* progress dots */
.mqc-steps{display:flex;gap:8px;margin:2px 0 20px}
.mqc-dot{width:26px;height:5px;border-radius:99px;background:var(--_mint2);transition:background .3s}
.mqc-dot.on{background:var(--_premium)}

/* fields */
.mqc-field{margin-bottom:14px}
.mqc-field label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--_navy);margin-bottom:6px}
.mqc-field select{
  width:100%;font-family:inherit;font-size:15px;color:var(--_navy);background:#fff;
  border:1.5px solid #d7e5dd;border-radius:10px;padding:12px 14px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23366C7D' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  transition:border-color .15s, box-shadow .15s;
}
.mqc-field select:focus{outline:none;border-color:var(--_premium);box-shadow:0 0 0 3px rgba(39,155,143,.15)}
.mqc-field select:disabled{background-color:#f4f8f6;color:#9db3ab;cursor:not-allowed;opacity:1}

/* buttons */
.mqc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:700;font-size:15px;border-radius:10px;padding:14px 22px;border:0;cursor:pointer;text-decoration:none;transition:transform .15s, box-shadow .15s, opacity .15s}
.mqc-btn:hover{transform:translateY(-1px)}
.mqc-navy{background:var(--_navy);color:#fff}
.mqc-navy:hover{box-shadow:var(--_shadow-lg)}
.mqc-mint{background:var(--_mint);color:var(--_navy)}
.mqc-outline{background:transparent;border:1.5px solid var(--_navy);color:var(--_navy)}
.mqc-cta{width:100%;margin-top:6px}
.mqc-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* result panel states */
.mqc-result{display:flex;flex-direction:column;justify-content:center;min-height:340px}
/* !important is load-bearing: the display:flex rule below matches with identical
   specificity and comes later, so without it a "hidden" state stays on screen. */
.mqc-state[hidden]{display:none!important}
.mqc-state[data-state="empty"],.mqc-state[data-state="loading"],.mqc-state[data-state="error"]{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex:1}
.mqc-emoji{font-size:40px;line-height:1}
.mqc-state .mqc-sub{max-width:340px;margin:4px 0 0}
.mqc-state[data-state="error"] .mqc-outline{margin-top:14px}

/* spinner */
.mqc-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--_mint2);border-top-color:var(--_premium);animation:mqcSpin .8s linear infinite;margin-bottom:6px}
@keyframes mqcSpin{to{transform:rotate(360deg)}}

/* result content */
.mqc-vehicle{font-size:15px;color:var(--_teal);margin:0 0 14px;text-align:center}
.mqc-vehicle b{color:var(--_navy)}
.mqc-hero{text-align:center;margin-bottom:16px}
.mqc-hero-k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--_teal)}
.mqc-hero-v{font-size:clamp(30px,5vw,40px);font-weight:800;letter-spacing:-.02em;color:var(--_navy);font-variant-numeric:tabular-nums;margin-top:2px}

.mqc-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
@media(max-width:640px){.mqc-nums{grid-template-columns:1fr}}
.mqc-num{background:var(--_mint2);border-radius:12px;padding:14px}
.mqc-num.mqc-amber{background:rgba(245,166,35,.12)}
.mqc-num.mqc-red{background:rgba(239,67,67,.10)}
.mqc-v{font-size:17px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.2}
.mqc-amber .mqc-v{color:#B8791B}
.mqc-red .mqc-v{color:var(--_alert)}
.mqc-k{font-size:11.5px;color:var(--_teal);margin-top:5px;line-height:1.35}
.mqc-k span{opacity:.75;white-space:nowrap}

.mqc-chart{width:100%;height:auto;display:block;margin-bottom:8px}
.mqc-legend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;font-size:11.5px;color:var(--_teal);margin-bottom:16px}
.mqc-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.mqc-li-opt{background:var(--_premium)}
.mqc-li-pess{background:var(--_alert)}
.mqc-li-band{background:rgba(239,67,67,.2);outline:1px solid var(--_alert)}

.mqc-cta-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.mqc-cta-row .mqc-btn{flex:1;min-width:190px}