/* =========================
   Quote page (scoped)
   ========================= */
.quote-page{
  padding: clamp(18px, 3vw, 34px) 14px 60px;
}
.quote-wrap{
  max-width: 980px;            /* ✅ max page width */
  margin: 0 auto;
}
.quote-hero{
  text-align:center;
  margin: 18px auto 22px;
}
.quote-hero .kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  font-weight: 700;
  letter-spacing:.08em;
  text-transform: uppercase;
  font-size: .82rem;
  color: rgba(255,255,255,.82);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
}
:root[data-theme="light"] .quote-hero .kicker{ color: rgba(0,0,0,.75); }

.quote-hero .lead{
  max-width: 64ch;
  margin: 0 auto;
  opacity: .92;
}

.quote-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  border-radius: 18px;
  overflow: hidden;
}

/* alerts */
.quote-alert{
  padding: 16px 16px 0;
}
.quote-alert .success,
.quote-alert .error{
  border-radius: 14px;
  padding: 14px 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
}
.quote-alert .success{ border-color: rgba(var(--gold-rgb) / .35); }
.quote-alert .success-title,
.quote-alert .error-title{
  font-weight: 800;
  margin-bottom: 4px;
}
.quote-alert .error{ border-color: rgba(255,80,80,.35); }

/* wizard top */
.quote-wizard{ padding: 14px; }
.quote-wizard-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 10px 8px 14px;
}
.quote-progress{
  display:flex;
  align-items:center;
  gap: 12px;
  width: min(420px, 55vw);
}
.quote-bar{
  position: relative;
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  overflow: hidden;
}
.quote-bar > span{
  position:absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(var(--gold-rgb) / .25), rgba(var(--gold-rgb) / .55));
  transform-origin: 0 50%;
}
.quote-steptext{
  font-weight: 800;
  opacity: .92;
  min-width: 62px;
  text-align:right;
}
.quote-note{
  opacity: .85;
  font-size: .95rem;
  white-space: nowrap;
  align-items: center;
  text-align: center;
  justify-content: center;
}
@media (max-width: 720px){
  .quote-wizard-top{ flex-direction: column;  align-items: center;
  text-align: center;
  justify-content: center;}
  .quote-note{ white-space: normal; }
  .quote-progress{ width: 100%; }
}

/* panels */
.quote-form{ padding: 0 8px 10px; }
.wizard-panel{
  display:none;
  padding: 6px 8px 14px;
}
.wizard-panel.is-active{ display:block; }

.quote-h2{ margin: 8px 0 6px; }
.quote-lead{ margin: 0 0 12px; opacity:.92; }

/* inputs */
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 720px){
  .form-grid{ grid-template-columns: 1fr; }
}

.field label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-weight: 700;
  margin-bottom: 8px;
  opacity: .95;
}
.field .req{
  font-weight: 800;
  font-size: .85rem;
  color: rgba(var(--gold-rgb) / .95);
}
.field-hint{
  margin-top: 6px;
  font-size: .92rem;
  opacity: .8;
}

.input, select.input, textarea.input{
  width: 100%;
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid var(--stroke);
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
:root[data-theme="light"] .input,
:root[data-theme="light"] select.input,
:root[data-theme="light"] textarea.input{
  background: rgba(255,255,255,.75);
  color: var(--text);
}

.input:focus{
  border-color: rgba(var(--gold-rgb) / .55);
  box-shadow: 0 0 0 4px rgba(var(--gold-rgb) / .12);
}

/* dropdown styling */
.select-wrap{
  position: relative;
}
.select-wrap::after{
  content:"";
  position:absolute;
  right: 14px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-45%);
  pointer-events:none;
  opacity: .85;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
select.input{
  appearance:none;
  padding-right: 42px;
}

/* service multiselect */
.service-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 880px){
  .service-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .service-grid{ grid-template-columns: 1fr; }
}

.service-pill{
  position: relative;
  text-align:left;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  padding: 14px 14px;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.service-pill:hover{
  transform: translateY(-1px);
  border-color: var(--gold);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.service-pill .title{
  color: var(--text);
  font-weight: 900;
  letter-spacing: .01em;
  margin-bottom: 2px;
}
.service-pill .sub{
    color: var(--muted);

  opacity: .85;
  font-size: .95rem;
}

/* selected state */
.service-pill.is-selected{
  border-color: rgba(var(--gold-rgb) / .65);
  background: linear-gradient(180deg, rgba(var(--gold-rgb)/.16), rgba(255,255,255,.04));
  box-shadow: 0 14px 36px rgba(0,0,0,.25);
}
.service-pill.is-selected::after{
  content:"✓";
  position:absolute;
  right: 14px;
  top: 14px;
  font-weight: 900;
  color: rgba(var(--gold-rgb) / .98);
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(var(--gold-rgb) / .35);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* budget chips */
.chip-row{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip{
  border-radius: 999px;
  padding: 10px 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  font-weight: 800;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.chip:hover{ transform: translateY(-1px); border-color: rgba(var(--gold-rgb)/.35); }
.chip.is-selected{
  border-color: rgba(var(--gold-rgb)/.65);
  background: rgba(var(--gold-rgb)/.16);
}

/* checkbox grid */
.check-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 720px){ .check-grid{ grid-template-columns: 1fr; } }
.check{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  cursor:pointer;
}
.check input{
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}

/* nav */
.wizard-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
/* Wizard nav: icon-only buttons */
.wizard-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* Make icon-only buttons consistent + centered */
.wizard-nav .btn{
  min-width: 0;                 /* override old min-width */
  padding: 0;                   /* icon handles sizing */
  width: 52px;
  height: 52px;
  border-radius: 999px;         /* pill/circle */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

/* primary icon button: gold glow */
.wizard-nav .btn.primary{
  border-color: rgba(var(--gold-rgb) / .55);
  background: linear-gradient(180deg,
    rgba(var(--gold-rgb) / .18),
    rgba(255,255,255,.04)
  );
}

/* hover/focus */
.wizard-nav .btn:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--gold-rgb) / .65);
  box-shadow: 0 18px 46px rgba(0,0,0,.28);
}
.wizard-nav .btn:active{
  transform: translateY(0px) scale(.98);
}
.wizard-nav .btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(var(--gold-rgb) / .14), 0 18px 46px rgba(0,0,0,.28);
}

/* Icon sizing + alignment */
.wizard-nav .btn .magnetic-inner{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 100%;
  height: 100%;
  font-size: 1.05rem;
  line-height: 1;
}

/* Secondary/back button variant (if you use .sheen for back) */
.wizard-nav .btn.sheen{
  background: rgba(255,255,255,.03);
  border-color: var(--stroke);
}

/* Optional: compact on small screens */
@media (max-width: 520px){
  .wizard-nav .btn{
    width: 48px;
    height: 48px;
  }
}

/* review */
.review{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
}
.review-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.review-row:last-child{ border-bottom: 0; }
.review-row span{ opacity:.82; }
.review-row strong{ text-align:right; max-width: 70%; }

.fineprint{
  margin-top: 10px;
  opacity: .75;
  font-size: .92rem;
}

.btn{
  padding-right: 0;
}
/* honeypot */
.honey{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; }