/* ============================================================
   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,.6);
  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);
  contain:layout paint;
}
.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-logo{ display:block; height:34px; width:auto; object-fit:contain; margin-bottom:14px; }
.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;
  contain:layout paint;
  -webkit-overflow-scrolling:touch;
}

.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; contain:layout paint; -webkit-overflow-scrolling:touch; }

.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); }

.quote-opt-sub{ display:block; font-weight:500; font-size:11.5px; opacity:.65; margin-top:3px; }

/* ---------- pickup location step ---------- */
.quote-loc-btn{
  width:100%; padding:14px; border-radius:12px; border:1.5px solid var(--cyan-deep);
  background:rgba(0,184,191,.08); color:var(--cyan-text); font-size:14px; font-weight:700;
  cursor:pointer; transition:background .2s var(--ease), transform .15s var(--ease);
}
.quote-loc-btn:hover{ background:rgba(0,184,191,.16); }
.quote-loc-btn:active{ transform:scale(.98); }
.quote-loc-btn:disabled{ opacity:.6; cursor:default; }

.quote-or{
  display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--gray-500); font-size:12px; font-weight:700;
}
.quote-or::before, .quote-or::after{ content:''; flex:1; height:1px; background:var(--line); }

.quote-check-btn{ width:100%; margin-bottom:14px; }

.quote-eligibility{
  font-size:13px; border-radius:12px; padding:0; margin:0 0 6px; line-height:1.5;
  transition:padding .2s var(--ease);
}
.quote-eligibility:not(:empty){ padding:12px 14px; }
.quote-eligibility.ok{ background:rgba(0,184,191,.1); color:var(--cyan-text); border:1.5px solid var(--cyan-deep); }
.quote-eligibility.no{ background:rgba(229,83,62,.08); color:#c0432e; border:1.5px solid rgba(229,83,62,.35); }

/* 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-logo{ height:28px; margin-bottom:12px; }
  .quote-body{ padding:16px 20px 4px; }
  .quote-nav{ padding:14px 20px 22px; }
}

/* ===== Full-page Book a Repair mode ===== */
.quote-overlay.is-fullpage {
  position: fixed;
  inset: 0;
  background: var(--bg, #f7f8fc);
  z-index: 10000;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
  pointer-events: auto;
}
.quote-overlay.is-fullpage .quote-modal {
  max-width: 560px;
  width: 100%;
  max-height: none;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  animation: quotePageIn .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes quotePageIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.quote-overlay.is-fullpage .quote-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.quote-overlay.is-fullpage .quote-close {
  top: 16px;
  right: 16px;
}
body.quote-fullpage-open {
  overflow: hidden;
}
body.quote-fullpage-open > header,
body.quote-fullpage-open > main,
body.quote-fullpage-open > footer,
body.quote-fullpage-open .floating-cta,
body.quote-fullpage-open .scroll-top {
  visibility: hidden !important;
  pointer-events: none !important;
}