/* ============================================================
   GET A FREE QUOTE — button + modal
   Reuses the site's existing tokens (--cyan, --ink, --gray-*,
   --line, --radius, --ease*) defined in main.css.
   ============================================================ */

/* ---------- header trigger button ---------- */
.btn-quote{
  background:var(--cyan);
  color:#04262a;
  border:none;
  cursor:pointer;
  font-family:inherit;
}
.btn-quote:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 16px 34px -10px rgba(0,255,255,.55);
}
.btn-quote:active{ transform:translateY(-1px) scale(.98); transition-duration:.15s; }

/* ---------- overlay + modal shell ---------- */
.quote-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(10,14,17,.55);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility 0s linear .3s;
}
.quote-overlay.is-open{
  opacity:1; visibility:visible;
  transition:opacity .3s var(--ease), visibility 0s linear 0s;
}
.quote-modal{
  background:var(--white);
  border-radius:24px;
  width:100%; max-width:480px;
  max-height:88vh;
  display:flex; flex-direction:column;
  position:relative;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.45);
  transform:translateY(16px) scale(.98);
  transition:transform .35s var(--ease-spring);
}
.quote-overlay.is-open .quote-modal{ transform:translateY(0) scale(1); }

.quote-close{
  position:absolute; top:16px; right:16px;
  width:34px; height:34px; border-radius:50%;
  background:var(--gray-100); color:var(--gray-700);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease), transform .2s var(--ease);
  z-index:2;
}
.quote-close:hover{ background:var(--line); transform:rotate(90deg); }

.quote-head{ padding:28px 28px 6px; }
.quote-head h3{ font-size:19px; font-weight:800; color:var(--ink); margin:6px 0 0; line-height:1.3; }

.quote-progress{
  display:flex; gap:6px; padding:14px 28px 0;
}
.quote-progress span{
  flex:1; height:4px; border-radius:2px; background:var(--line);
  transition:background .25s var(--ease);
}
.quote-progress span.is-done{ background:var(--cyan-deep); }

.quote-body{
  padding:18px 28px 4px;
  overflow-y:auto;
  flex:1;
  min-height:220px;
}

.quote-step{ display:none; }
.quote-step.is-active{ display:block; animation:qfade .25s var(--ease); }
@keyframes qfade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

.quote-step-title{ font-size:16px; font-weight:800; color:var(--ink); margin:0 0 4px; }
.quote-step-sub{ font-size:13.5px; color:var(--gray-500); margin:0 0 16px; }

/* text fields — reuse the floating-label look used by the enquiry form */
.quote-field{ position:relative; margin-bottom:16px; }
.quote-field input, .quote-field textarea{
  width:100%; padding:15px 14px 13px; border-radius:12px;
  border:1.5px solid var(--line); font-size:14.5px; font-family:inherit;
  color:var(--ink); background:var(--white); outline:none;
  transition:border-color .2s var(--ease);
}
.quote-field textarea{ resize:vertical; min-height:96px; }
.quote-field input:focus, .quote-field textarea:focus{ border-color:var(--cyan-deep); }
.quote-field label{
  position:absolute; left:14px; top:14px; font-size:14.5px; color:var(--gray-500);
  pointer-events:none; transition:all .18s var(--ease); background:var(--white); padding:0 4px;
}
.quote-field input:focus + label,
.quote-field input:not(:placeholder-shown) + label,
.quote-field textarea:focus + label,
.quote-field textarea:not(:placeholder-shown) + label{
  top:-8px; left:10px; font-size:11.5px; color:var(--cyan-deep); font-weight:700;
}
.quote-required{ color:#e5533e; margin-left:2px; }
.quote-optional{ font-weight:500; color:var(--gray-500); }

.quote-error{
  font-size:12.5px; color:#e5533e; margin:-6px 0 12px; display:none;
}
.quote-error.show{ display:block; }

/* option grid (device type) + option list (brand / model) */
.quote-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.quote-list{ display:flex; flex-direction:column; gap:8px; max-height:280px; overflow-y:auto; padding-right:2px; }

.quote-opt{
  border:1.5px solid var(--line); border-radius:12px; padding:13px 14px;
  font-size:14px; font-weight:700; color:var(--ink); background:var(--white);
  cursor:pointer; text-align:center; user-select:none;
  transition:border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.quote-list .quote-opt{ text-align:left; }
.quote-opt:hover{ border-color:var(--cyan-deep); }
.quote-opt.is-selected{
  border-color:var(--cyan-deep); background:rgba(0,184,191,.1); color:var(--cyan-text);
}

.quote-custom{ margin-top:2px; display:none; }
.quote-custom.show{ display:block; }
.quote-custom input{
  width:100%; padding:13px 14px; border-radius:12px; border:1.5px solid var(--line);
  font-size:14px; font-family:inherit; outline:none;
}
.quote-custom input:focus{ border-color:var(--cyan-deep); }

/* review summary */
.quote-summary{
  border:1.5px solid var(--line); border-radius:14px; padding:6px 16px;
  background:var(--gray-100);
}
.quote-summary .qs-row{
  display:flex; justify-content:space-between; gap:12px;
  padding:10px 0; border-bottom:1px dashed var(--line); font-size:13.5px;
}
.quote-summary .qs-row:last-child{ border-bottom:none; }
.quote-summary .qs-label{ color:var(--gray-500); flex-shrink:0; }
.quote-summary .qs-value{ color:var(--ink); font-weight:700; text-align:right; }

/* footer nav */
.quote-nav{
  display:flex; gap:10px; padding:16px 28px 26px; border-top:1px solid var(--line);
}
.quote-nav .btn{ flex:1; }
#qteBack{ flex:0 0 auto; padding-left:22px; padding-right:22px; }
#qteBack[hidden]{ display:none; }

@media (max-width:520px){
  .quote-modal{ max-height:92vh; }
  .quote-head{ padding:24px 20px 4px; }
  .quote-body{ padding:16px 20px 4px; }
  .quote-nav{ padding:14px 20px 22px; }
}