/* ===========================================================
   QUOTE FORM — DESKTOP/LAPTOP BASE (YOUR GOOD VERSION)
   =========================================================== */
:root{
  --bg:#ffffff;
  --surface:rgba(255,255,255,0.96);
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --accent:#2563eb;
  --accent-contrast:#ffffff;

  --radius:14px;
  --panel-w:520px;
  --pad-x-mobile:12px;
  --pad-x-desktop:18px;
  --gap-sm:10px;
  --gap-md:12px;
  --gap-lg:14px;

  --shadow:0 10px 28px rgba(17,24,39,.12);
}

/* ---------- Overlay & Scrim (centered + safe areas) ---------- */
.quote-overlay[hidden]{display:none;}
.quote-overlay{
  position:fixed; inset:0; 
  z-index:2000; /* ↑↑ was 70; ensure overlay sits above sticky header (z 1000) */
  display:grid; place-items:center;
  padding-left:12px; padding-right:12px;
  padding-top:calc(env(safe-area-inset-top) + 12px);
  padding-bottom:calc(env(safe-area-inset-bottom) + 12px);
}
.quote-scrim{
  position:absolute; inset:0;
  background:rgba(17,24,39,.45);
  border:0; backdrop-filter:blur(1.5px);
}

/* ---------- Panel (height-capped + internal scroll) ---------- */
.quote-panel{
  position:relative;
  width:min(var(--panel-w), 100%);
  max-height:calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;

  background:linear-gradient(180deg, rgba(255,255,255,.94), var(--surface));
  backdrop-filter:blur(8px);
  border:1px solid rgba(229,231,235,.8);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--pad-x-mobile);
  transform:translateY(8px);
  opacity:0;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
  outline:none;
}
@supports (height: 100svh){
  .quote-panel{
    max-height:calc(100svh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}
@media (min-width:720px){
  .quote-panel{ padding:var(--pad-x-desktop); }
}
.quote-overlay[data-state="open"] .quote-panel{ transform:translateY(0); opacity:1; }
@media (prefers-reduced-motion: reduce){
  .quote-panel{ transition:opacity .15s linear !important; transform:none !important; }
}

/* ---------- Header (sticky in base) ---------- */
.quote-header{
  position:sticky; top:0;
  background:inherit;
  padding-bottom:8px; margin:-2px -2px 0 -2px; padding:8px 2px 8px 2px;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--gap-md);
  border-bottom:1px solid var(--border);
  z-index:1;
}
.quote-header h2{ font-size:18px; font-weight:800; margin:0; color:var(--text); }
.quote-close{
  border:0; background:#f3f4f6; width:30px; height:30px;
  border-radius:10px; cursor:pointer; font-size:18px; line-height:1;
}
.quote-close:hover{ filter:brightness(.96); }

/* ---------- Grid ---------- */
.grid{
  display:grid; grid-template-columns:1fr;
  gap:var(--gap-md);
  padding-top:var(--gap-lg);
}
@media (min-width:720px){
  .grid{ grid-template-columns:repeat(2,1fr); gap:var(--gap-lg); }
  .span-2{ grid-column:span 2; }
}

/* ---------- Fields ---------- */
.field label{
  display:inline-block; font-weight:600; font-size:13px;
  color:var(--text); margin-bottom:6px;
}
.field input, .field select, .field textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  padding:9px 11px;
  font:inherit; background:#fff;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.field input:hover, .field select:hover, .field textarea:hover{ background:#fcfcfd; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:color-mix(in oklab, var(--accent) 70%, white);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 18%, white);
}
.field textarea{ resize:vertical; min-height:96px; }

.req{ color:#ef4444; }
.hint{ color:var(--muted); font-size:12px; margin:4px 0 0; }
.err{ color:#b91c1c; font-size:12px; margin:4px 0 0; min-height:1em; }
.hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- Footer buttons (sticky in base) ---------- */
.quote-footer{
  position:sticky; bottom:0;
  background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.95));
  backdrop-filter:blur(4px);
  margin:8px -2px -2px -2px; padding:10px 2px 2px 2px;
  display:flex; gap:10px;
  border-top:1px solid var(--border);
}
.btn{
  display:inline-block; padding:10px 14px;
  border-radius:10px; border:1px solid var(--border);
  background:#f9fafb; font-weight:600; line-height:1; min-height:40px;
  cursor:pointer; transition:background .15s, transform .12s, box-shadow .15s;
}
.btn:hover{ background:#f3f4f6; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

/* Orange CTA, but hover turns blue */
.btn.cta {
  background: var(--highlight);   /* orange base */
  color: var(--highlight-contrast);
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.btn.cta:hover {
  background: var(--accent);      /* blue on hover */
  color: var(--accent-contrast);
}
.btn.ghost{ background:#fff; }

/* ---------- Inline status ---------- */
.form-status{ margin-top:10px; font-size:13px; color:var(--muted); }
.form-status.success{ color:#065f46; }
.form-status.error{ color:#b91c1c; }

/* ---------- Status popup (success/error) ---------- */
.qpop-overlay[hidden]{ display:none; }
.qpop-overlay{
  position:fixed; inset:0; z-index:999;
  display:grid; place-items:center;
  padding:12px; background:rgba(17,24,39,.32);
  backdrop-filter:blur(2px);
}
.qpop{
  width:min(360px, 100%); border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.96));
  box-shadow:0 12px 28px rgba(0,0,0,.16);
  border:1px solid rgba(229,231,235,.9);
  padding:14px 14px 12px 14px;
  display:grid; grid-template-columns:28px 1fr auto;
  gap:10px; animation:qpop-in .18s cubic-bezier(.2,.8,.2,1);
}
@keyframes qpop-in{ from{ transform:translateY(6px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.qpop .icon{ display:grid; place-items:center; width:28px; height:28px; border-radius:999px; }
.qpop.ok .icon{ background:#e5f9ee; } .qpop.err .icon{ background:#fdecec; }
.qpop .icon svg{ width:16px; height:16px; }
.qpop .content{ display:grid; gap:2px; }
.qpop .title{ font-weight:800; color:#111827; margin:0; line-height:1.2; font-size:14px; }
.qpop .msg{ color:#374151; margin:0; font-size:13px; }
.qpop .close{
  align-self:start; border:0; background:#f3f4f6;
  width:28px; height:28px; border-radius:8px; cursor:pointer; font-size:16px;
}
.qpop .close:hover{ filter:brightness(.96); }
.qpop .close:focus{ outline:2px solid color-mix(in oklab, var(--accent) 50%, white); outline-offset:2px; }

/* ===========================================================
   SHORT/SMALL VIEWPORT OVERRIDES (YOUR MOBILE-GOOD VERSION)
   Applies when width < 720px OR height < 780px.
   Keeps desktop look unchanged.
   =========================================================== */
@media (max-width: 720px), (max-height: 780px) {
  .quote-overlay{
    display:grid; place-items:center;
    padding-left:12px; padding-right:12px;
    padding-top:calc(8svh + env(safe-area-inset-top));
    padding-bottom:calc(8svh + env(safe-area-inset-bottom));
  }

  .quote-panel{
    width:min(var(--panel-w), 92vw);
    max-height:82svh;
    overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    border-radius:20px;
    padding:var(--pad-x-mobile);
  }

  .grid{ gap:12px; padding-top:14px; }
  .field label{ font-size:13px; margin-bottom:6px; }
  .field input, .field select, .field textarea{ padding:9px 11px; }
  .field textarea{ min-height:92px; }

  .quote-header,
  .quote-footer{
    position:static;
    background:transparent;
    margin:0; padding-top:10px;
    border-color:var(--border);
  }

  .quote-footer{ gap:10px; padding-top:12px; }
  .btn{ min-height:40px; padding:10px 14px; border-radius:10px; }
}

/* ---------- Super-small screens polish ---------- */
@media (max-width:380px){
  .quote-panel{ border-radius:14px; padding:12px; }
}

/* ===========================================================
   DESKTOP / ROOMY VIEWPORT OVERRIDE
   Remove internal scrolling for screens >= 721px wide AND >= 721px tall
   (Mobile/short screens keep the capped height + internal scroll)
   =========================================================== */
@media (min-width: 721px) and (min-height: 721px) {
  .quote-overlay {
    padding-top: calc(env(safe-area-inset-top) + 24px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
  }
  .quote-panel {
    max-height: none;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
  }
}
/* Always float success/error popup above the quote overlay */
.qpop-overlay {
  z-index: 4000 !important;  /* higher than .quote-overlay (2000) */
}

/* (Optional) if you ever nest the popup inside other transformed elements */
.qpop {
  position: relative;
  z-index: 1;                 /* ensure content sits above its own scrim */
}