@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600&display=swap');

/* ═══ TOKENS ═══ */
#oppex-quote-root {
  --red:#c21807; --red-d:#9e1506; --ink:#0c0c0c; --ink2:#1e1e1e;
  --ink3:#565656; --ink4:#9a9a9a; --g50:#f9f9f9; --g100:#f2f2f2;
  --g150:#ebebeb; --g200:#e2e2e2; --g300:#cccccc; --w:#ffffff;
  --grn:#15803d; --grn-bg:#f0fdf4; --grn-bd:#bbf7d0;
  --bar-h:58px; --hdr-h:56px; --r:18px; --r-sm:12px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --font-h:'Sora',sans-serif; --font-b:'DM Sans',sans-serif;
  font-family:var(--font-b); color:var(--ink); background:var(--g100);
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
  text-size-adjust:100%; box-sizing:border-box; width:100%; display:block;
}
#oppex-quote-root *,#oppex-quote-root *::before,#oppex-quote-root *::after {
  box-sizing:border-box; -webkit-tap-highlight-color:transparent;
}

/* ═══ SHELL ═══ */
.oq { display:flex; flex-direction:column; height:100svh; max-height:100svh;
  background:var(--g100); overflow:hidden; position:relative; }

/* ═══ HEADER ═══ */
.oq-hdr { flex-shrink:0; background:var(--w); border-bottom:1px solid var(--g200);
  padding-top:var(--safe-t); z-index:20; }
.oq-hdr-inner { height:var(--hdr-h); display:flex; align-items:center;
  justify-content:space-between; padding:0 16px; position:relative; }
.oq-logo { display:flex; align-items:center; gap:9px; }
.oq-logo-mark { width:34px; height:34px; background:var(--red); border-radius:10px;
  display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.oq-logo-mark svg { width:17px; height:17px; }
.oq-logo-word { font-family:var(--font-h); font-size:18px; font-weight:800;
  letter-spacing:-.5px; color:var(--ink); line-height:1; }
.oq-logo-word span { color:var(--red); }
.oq-hdr-back { width:36px; height:36px; border:none; background:var(--g100);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink); transition:background .15s,transform .1s; flex-shrink:0; }
.oq-hdr-back:active { transform:scale(.9); background:var(--g200); }
.oq-hdr-back svg { width:20px; height:20px; }
.oq-hdr-title { position:absolute; left:50%; transform:translateX(-50%);
  font-family:var(--font-h); font-size:15px; font-weight:700; color:var(--ink);
  white-space:nowrap; pointer-events:none; }
.oq-hdr-right { display:flex; align-items:center; }
.oq-hdr-badge { font-size:9.5px; font-weight:700; letter-spacing:.7px;
  text-transform:uppercase; color:var(--ink4); background:var(--g100);
  border:1px solid var(--g200); padding:4px 9px; border-radius:20px; white-space:nowrap; }

/* ═══ BODY ═══ */
.oq-body { flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  padding-bottom:calc(var(--bar-h) + var(--safe-b) + 16px); }

/* ═══ SCREEN ANIMATIONS ═══ */
.oq-screen { animation:oq-in .26s cubic-bezier(.25,.46,.45,.94) both; }
.oq-screen-back { animation:oq-back .26s cubic-bezier(.25,.46,.45,.94) both; }
@keyframes oq-in   { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }
@keyframes oq-back { from{opacity:0;transform:translateX(-14px)} to{opacity:1;transform:none} }

/* ═══ PRIMITIVES ═══ */
.oq-pad  { padding:16px; }
.oq-stitle { font-size:11px; font-weight:700; letter-spacing:.9px;
  text-transform:uppercase; color:var(--ink4); margin:0 0 10px; padding:0 2px; }

.oq-card { background:var(--w); border:1px solid var(--g200); border-radius:var(--r); overflow:hidden; }
.oq-card+.oq-card { margin-top:10px; }

.oq-row { display:flex; align-items:center; gap:13px; padding:13px 16px;
  border-bottom:1px solid var(--g150); }
.oq-row:last-child { border-bottom:none; }
.oq-row.tap { cursor:pointer; transition:background .12s; }
.oq-row.tap:active { background:var(--g100); }

.oq-ri { width:38px; height:38px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; }
.oq-ri svg { width:18px; height:18px; }
.oq-ri.gray   { background:var(--g100); color:var(--ink3); }
.oq-ri.red    { background:#fef2f2;     color:var(--red); }
.oq-ri.green  { background:var(--grn-bg); color:var(--grn); }
.oq-ri.blue   { background:#eff6ff;     color:#1d4ed8; }
.oq-ri.amber  { background:#fffbeb;     color:#b45309; }
.oq-ri.purple { background:#f5f3ff;     color:#6d28d9; }

.oq-rt { flex:1; min-width:0; }
.oq-rt-title { font-size:14px; font-weight:600; color:var(--ink); }
.oq-rt-sub   { font-size:12px; color:var(--ink4); margin-top:1px; }
.oq-rt-chev  { color:var(--g300); flex-shrink:0; }
.oq-rt-chev svg { width:16px; height:16px; }

/* Segmented control */
.oq-seg { display:flex; background:var(--g150); border-radius:var(--r-sm); padding:3px; gap:2px; }
.oq-seg-btn { flex:1; padding:9px 10px; border:none; border-radius:9px; background:transparent;
  font-family:var(--font-h); font-size:12.5px; font-weight:700; color:var(--ink4); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:background .18s,color .18s,box-shadow .18s; -webkit-user-select:none; user-select:none;
  white-space:nowrap; }
.oq-seg-btn svg { width:14px; height:14px; flex-shrink:0; }
.oq-seg-btn.on { background:var(--w); color:var(--ink);
  box-shadow:0 1px 4px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04); }

/* Label */
.oq-lbl { display:block; font-size:10px; font-weight:700; letter-spacing:.9px;
  text-transform:uppercase; color:var(--ink3); margin-bottom:7px; }

/* Select */
.oq-sel-wrap { position:relative; margin-bottom:10px; }
.oq-sel-wrap:last-child { margin-bottom:0; }
.oq-sel-caret { position:absolute; right:12px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:var(--ink4); display:flex; align-items:center; }
.oq-sel-caret svg { width:16px; height:16px; }
.oq-select { display:block; width:100%; padding:13px 40px 13px 14px;
  background:var(--g100); border:1.5px solid var(--g200); border-radius:var(--r-sm);
  font-family:var(--font-b); font-size:14px; font-weight:500; color:var(--ink);
  cursor:pointer; appearance:none; -webkit-appearance:none; outline:none;
  transition:border-color .15s,background .15s; min-height:48px; }
.oq-select:focus { background:var(--w); border-color:var(--g300); }
.oq-2col { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* Pills */
.oq-pills { display:flex; gap:8px; }
.oq-pill { flex:1; padding:11px 8px; min-height:46px; background:var(--g100);
  border:1.5px solid var(--g200); border-radius:var(--r-sm);
  font-family:var(--font-b); font-size:13px; font-weight:600; color:var(--ink3);
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;
  transition:all .15s; -webkit-user-select:none; user-select:none; }
.oq-pill svg { width:15px; height:15px; flex-shrink:0; }
.oq-pill.on { background:var(--w); border-color:var(--ink2); color:var(--ink);
  box-shadow:0 1px 4px rgba(0,0,0,.08); }

/* Zone tag */
.oq-zone-tag { display:inline-flex; align-items:center; gap:6px;
  background:var(--grn-bg); border:1px solid var(--grn-bd); color:var(--grn);
  border-radius:30px; font-size:12px; font-weight:600; padding:5px 12px; margin-top:10px; }
.oq-zone-tag svg { width:13px; height:13px; }

/* Primary button */
.oq-btn { display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:15px; background:var(--red); color:#fff; border:none;
  border-radius:14px; font-family:var(--font-h); font-size:15px; font-weight:700;
  cursor:pointer; transition:background .15s,transform .1s;
  -webkit-user-select:none; user-select:none; margin-top:14px; }
.oq-btn svg { width:17px; height:17px; flex-shrink:0; }
.oq-btn:active:not(:disabled) { transform:scale(.98); background:var(--red-d); }
.oq-btn:disabled { background:var(--g200); color:var(--ink4); cursor:not-allowed; }

/* Ghost button */
.oq-btn-ghost { display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px; background:var(--w); border:1.5px solid var(--g200);
  border-radius:14px; font-family:var(--font-h); font-size:14px; font-weight:700;
  color:var(--ink3); cursor:pointer; transition:background .15s,color .15s;
  -webkit-user-select:none; user-select:none; }
.oq-btn-ghost svg { width:16px; height:16px; flex-shrink:0; }
.oq-btn-ghost:active { background:var(--g100); color:var(--ink); }

/* ═══ HOME ═══ */
.oq-hero { background:var(--ink); border-radius:var(--r); padding:22px 20px 20px;
  position:relative; overflow:hidden; margin-bottom:18px; }
.oq-hero::before { content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 85% 12%,rgba(194,24,7,.28) 0%,transparent 52%),
    radial-gradient(circle at 8% 85%,rgba(255,255,255,.03) 0%,transparent 40%);
  pointer-events:none; }
.oq-hero-eye { display:inline-flex; align-items:center; gap:6px; font-size:9.5px;
  font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:rgba(255,255,255,.4); margin-bottom:12px; }
.oq-hero-dot { width:5px; height:5px; border-radius:50%; background:var(--red); flex-shrink:0; }
.oq-hero-h { font-family:var(--font-h); font-size:23px; font-weight:800; line-height:1.15;
  letter-spacing:-.5px; color:#fff; margin-bottom:8px; position:relative; }
.oq-hero-h em { font-style:normal; color:var(--red); }
.oq-hero-sub { font-size:13px; color:rgba(255,255,255,.4); line-height:1.55;
  margin-bottom:20px; font-weight:300; position:relative; }
.oq-hero-cta { display:inline-flex; align-items:center; gap:8px; background:var(--red);
  color:#fff; padding:12px 18px; border-radius:12px; border:none; cursor:pointer;
  font-family:var(--font-h); font-size:13.5px; font-weight:700;
  transition:background .15s,transform .1s; position:relative;
  -webkit-user-select:none; user-select:none; }
.oq-hero-cta:active { transform:scale(.97); background:var(--red-d); }
.oq-hero-cta svg { width:15px; height:15px; }

.oq-svc-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.oq-svc { background:var(--w); border:1px solid var(--g200); border-radius:var(--r);
  padding:16px 14px; cursor:pointer; display:flex; flex-direction:column;
  transition:transform .15s,border-color .15s; -webkit-user-select:none; user-select:none; }
.oq-svc:active { transform:scale(.97); border-color:var(--g300); }
.oq-svc-ic { width:42px; height:42px; border-radius:13px; background:var(--g100);
  display:flex; align-items:center; justify-content:center; margin-bottom:11px;
  color:var(--ink2); }
.oq-svc-ic svg { width:20px; height:20px; }
.oq-svc-name { font-family:var(--font-h); font-size:13px; font-weight:700; color:var(--ink); margin-bottom:3px; }
.oq-svc-desc { font-size:11.5px; color:var(--ink4); line-height:1.4; flex:1; }
.oq-svc-arr { display:flex; justify-content:flex-end; margin-top:12px; color:var(--g300); }
.oq-svc-arr svg { width:15px; height:15px; }

.oq-stats { display:flex; gap:8px; margin-bottom:18px; }
.oq-stat { flex:1; background:var(--w); border:1px solid var(--g200);
  border-radius:var(--r-sm); padding:13px 10px; text-align:center; }
.oq-stat-n { font-family:var(--font-h); font-size:20px; font-weight:800; color:var(--ink); line-height:1; }
.oq-stat-l { font-size:9.5px; color:var(--ink4); font-weight:600; letter-spacing:.5px;
  text-transform:uppercase; margin-top:4px; }

/* ═══ QUOTE STEPS ═══ */
.oq-step { background:var(--w); border:1.5px solid var(--g200); border-radius:var(--r);
  overflow:hidden; margin-bottom:10px; transition:border-color .2s; }
.oq-step.open  { border-color:var(--g300); }
.oq-step.done  { border-color:var(--g150); }

.oq-step-hd { display:flex; align-items:center; gap:12px; padding:14px 16px;
  cursor:pointer; -webkit-user-select:none; user-select:none; transition:background .12s; }
.oq-step-hd:active { background:var(--g50); }

.oq-step-ic { width:36px; height:36px; border-radius:10px; background:var(--g100);
  border:1.5px solid var(--g200); display:flex; align-items:center; justify-content:center;
  flex-shrink:0; color:var(--ink4); transition:all .2s; }
.oq-step-ic svg { width:16px; height:16px; }
.oq-step.open .oq-step-ic { background:var(--red); border-color:var(--red); color:#fff; }
.oq-step.done .oq-step-ic { background:var(--grn); border-color:var(--grn); color:#fff; }

.oq-step-info { flex:1; min-width:0; }
.oq-step-name { font-family:var(--font-h); font-size:14px; font-weight:700; color:var(--ink); }
.oq-step-hint { font-size:12px; color:var(--ink4); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oq-step.done .oq-step-hint { color:var(--grn); font-weight:500; }

.oq-step-chev { color:var(--g300); transition:transform .22s; flex-shrink:0; }
.oq-step-chev svg { width:16px; height:16px; }
.oq-step.open .oq-step-chev { transform:rotate(90deg); }

.oq-step-body { display:none; padding:2px 16px 18px; }
.oq-step.open .oq-step-body { display:block; }

/* ═══ RESULT ═══ */
.oq-result-hero { background:var(--ink); border-radius:var(--r); padding:24px 20px 20px;
  margin-bottom:12px; position:relative; overflow:hidden; }
.oq-result-hero::before { content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 90% 10%,rgba(194,24,7,.28) 0%,transparent 50%);
  pointer-events:none; }
.oq-rbadge { display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.65); padding:4px 11px; border-radius:30px;
  font-size:10px; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
  margin-bottom:16px; position:relative; }
.oq-rbadge svg { width:11px; height:11px; }
.oq-rlbl { font-size:9.5px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:4px; position:relative; }
.oq-rprice { display:flex; align-items:flex-start; gap:1px; line-height:1; position:relative; }
.oq-rcur { font-family:var(--font-h); font-size:20px; font-weight:700;
  color:rgba(255,255,255,.5); padding-top:9px; }
.oq-ramt { font-family:var(--font-h); font-size:56px; font-weight:800;
  color:#fff; letter-spacing:-3px; line-height:1; }

.oq-rrow { display:flex; justify-content:space-between; align-items:center;
  padding:13px 16px; gap:10px; border-bottom:1px solid var(--g100); }
.oq-rrow:last-child { border-bottom:none; }
.oq-rrow-l { display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink3); }
.oq-rdot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.oq-rrow-v { font-size:13.5px; font-weight:600; color:var(--ink2); font-variant-numeric:tabular-nums; flex-shrink:0; }
.oq-rrow-v.g { color:var(--grn); }
.oq-rtotal { display:flex; justify-content:space-between; align-items:center; padding:15px 16px;
  border-top:1.5px solid var(--g200); background:var(--g50); }
.oq-rtotal-l { font-family:var(--font-h); font-size:11px; font-weight:700;
  color:var(--ink3); text-transform:uppercase; letter-spacing:.6px; }
.oq-rtotal-v { font-family:var(--font-h); font-size:22px; font-weight:800; color:var(--ink); }
.oq-rdisclaim { font-size:11.5px; color:var(--ink4); text-align:center;
  line-height:1.6; padding:4px 8px 12px; }

/* ═══ RATES ═══ */
.oq-tscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.oq-thead { display:grid; gap:6px; padding:10px 14px; background:var(--g50);
  border-bottom:1px solid var(--g200); font-size:9.5px; font-weight:700;
  letter-spacing:.7px; text-transform:uppercase; color:var(--ink4); }
.oq-trow { display:grid; gap:6px; padding:11px 14px; border-bottom:1px solid var(--g100); align-items:center; }
.oq-trow:last-child { border-bottom:none; }
.oq-twt { font-weight:600; font-size:12.5px; color:var(--ink); }
.oq-tv  { font-size:11px; color:var(--ink3); font-variant-numeric:tabular-nums; }
.oq-dom-g { grid-template-columns:68px repeat(4,1fr); }
.oq-exp-g { grid-template-columns:68px repeat(9,minmax(46px,1fr)); min-width:540px; }
.oq-zlist { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.oq-zrow { background:var(--w); border:1px solid var(--g200); border-radius:var(--r-sm);
  padding:12px 14px; display:flex; gap:10px; align-items:flex-start; }
.oq-zbadge { background:var(--ink); color:#fff; font-family:var(--font-h); font-size:9px;
  font-weight:800; padding:3px 8px; border-radius:5px; flex-shrink:0; margin-top:2px; }
.oq-zname   { font-family:var(--font-h); font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:3px; }
.oq-zcities { font-size:11.5px; color:var(--ink4); line-height:1.5; }

/* ═══ INFO ═══ */
.oq-info-sec { margin-bottom:20px; }
.oq-ver { text-align:center; font-size:11px; color:var(--ink4); padding:6px 8px 16px; line-height:1.7; }

/* ═══ BOTTOM TABBAR ═══ */
.oq-tabbar { flex-shrink:0; display:flex;
  height:calc(var(--bar-h) + var(--safe-b)); padding-bottom:var(--safe-b);
  background:rgba(255,255,255,.94); backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px); border-top:1px solid var(--g200); z-index:20; }
.oq-tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; border:none; background:transparent; padding:0; cursor:pointer;
  color:var(--ink4); -webkit-user-select:none; user-select:none;
  transition:color .18s; position:relative; }
.oq-tab svg { width:23px; height:23px; transition:transform .15s; }
.oq-tab-lbl { font-size:10px; font-weight:600; letter-spacing:.1px; }
.oq-tab.on { color:var(--red); }
.oq-tab.on svg { transform:translateY(-1px); }
.oq-tab.on .oq-tab-lbl { font-weight:700; }
.oq-tab.on::after { content:''; position:absolute; bottom:4px;
  width:4px; height:4px; border-radius:50%; background:var(--red); }

/* ═══ DESKTOP ═══ */
@media (min-width:540px) {
  #oppex-quote-root { padding:40px 0; }
  .oq { max-width:400px; height:780px; max-height:780px; margin:0 auto;
    border-radius:40px;
    box-shadow:0 0 0 10px rgba(0,0,0,.06),0 30px 80px rgba(0,0,0,.18); }
}
@media (max-width:374px) {
  .oq-2col,.oq-svc-grid { grid-template-columns:1fr; }
  .oq-pills { flex-direction:column; }
  .oq-ramt { font-size:46px; }
}

/* ═══════════════════════════════════════════════
   DESKTOP WIDGET  (≥760px)
   Two-column card — form left, result right
═══════════════════════════════════════════════ */

.oq-dsk {
  background: var(--w);
  border: 1px solid var(--g200);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.06);
  max-width: 860px;
  margin: 0 auto;
  font-family: var(--font-b);
}

/* Header */
.oq-dsk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--g150);
  background: var(--g50);
}
.oq-dsk-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.oq-dsk-brand-name {
  font-family: var(--font-h);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--ink);
}
.oq-dsk-brand-name span { color: var(--red); }
.oq-dsk-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Two-column body */
.oq-dsk-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
}

/* Left — form */
.oq-dsk-form {
  padding: 24px;
  border-right: 1px solid var(--g150);
  display: flex;
  flex-direction: column;
}
.oq-dsk-fields {
  margin-top: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Right — result */
.oq-dsk-result {
  padding: 24px;
  background: var(--g50);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

/* Desktop result idle state — centered */
.oq-result-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 16px;
  flex: 1;
}
.oq-result-idle-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--g150);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink4);
  margin-bottom: 14px;
}
.oq-result-idle-title {
  font-family: var(--font-h);
  font-size: 15px; font-weight: 700;
  color: var(--ink3);
  margin-bottom: 6px;
}
.oq-result-idle-sub {
  font-size: 12.5px;
  color: var(--ink4);
  line-height: 1.6;
  max-width: 200px;
}

/* Desktop result hero — slightly more compact */
.oq-dsk-result .oq-result-hero {
  border-radius: 14px;
}

/* Desktop result card */
.oq-result-card {
  /* inherits .oq-card */
}

/* Footer */
.oq-dsk-footer {
  padding: 12px 24px;
  border-top: 1px solid var(--g150);
  font-size: 11.5px;
  color: var(--ink4);
  text-align: center;
  background: var(--g50);
}

/* ── Ensure mobile shell hidden on desktop ── */
@media (min-width: 760px) {
  /* Hide the mobile phone-frame wrapper */
  .oq { display: none !important; }
  /* Show desktop widget */
  .oq-dsk { display: block; }
}

/* ── Ensure desktop widget hidden on mobile ── */
@media (max-width: 759px) {
  .oq-dsk { display: none !important; }
  .oq { display: flex; }
}

/* ── Tighten desktop two-col on mid widths ── */
@media (min-width: 760px) and (max-width: 900px) {
  .oq-dsk-body { grid-template-columns: 1.1fr 0.9fr; }
  .oq-dsk-form, .oq-dsk-result { padding: 20px; }
}