/* ==========================================================================
   GIFTED HANDS — QUOTE FORM MODAL
   Full-screen modal with 6-step wizard form
   ========================================================================== */

/* ─── Modal Overlay ─── */
.gq-modal-overlay {
  display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999;
  background:rgba(7,28,40,0.85); backdrop-filter:blur(8px);
  align-items:center; justify-content:center; padding:1rem;
}
.gq-modal-overlay.open { display:flex; animation:gqFadeIn .3s ease; }

@keyframes gqFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes gqSlideUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes gqPop { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:scale(1); } }

.gq-modal {
  background:white; border-radius:1.5rem; width:100%; max-width:820px;
  max-height:90vh; overflow-y:auto; position:relative;
  box-shadow:0 30px 60px rgba(0,0,0,.4); animation:gqSlideUp .4s cubic-bezier(.175,.885,.32,1.275);
  scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.1) transparent;
}
.gq-modal::-webkit-scrollbar { width:6px; }
.gq-modal::-webkit-scrollbar-thumb { background:rgba(0,0,0,.1); border-radius:3px; }

/* ─── Close ─── */
.gq-close {
  position:absolute; top:1rem; right:1rem; z-index:10;
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(0,0,0,.05); color:#4A5568; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.gq-close:hover { background:rgba(244,67,54,.1); color:#C62828; transform:rotate(90deg); }

/* ─── Header ─── */
.gq-header {
  text-align:center; padding:2.5rem 2.5rem 0;
}
.gq-header h2 {
  font-family:var(--font-heading); font-size:1.5rem; font-weight:800;
  color:#1B2A5E; margin-bottom:.5rem;
}
.gq-header h2 i { color:#D4A843; margin-right:.5rem; }
.gq-header p { color:#4A5568; font-size:.95rem; }

/* ─── Progress Bar ─── */
.gq-progress { padding:1.5rem 2.5rem .5rem; }
.gq-progress-bar { height:5px; background:rgba(0,0,0,.06); border-radius:99px; overflow:hidden; margin-bottom:1rem; }
.gq-progress-fill { height:100%; width:16.66%; background:linear-gradient(135deg,#D4A843,#0097A7); border-radius:99px; transition:width .5s cubic-bezier(.4,0,.2,1); }
.gq-progress-steps { display:flex; justify-content:space-between; }
.gq-pstep { display:flex; flex-direction:column; align-items:center; gap:.25rem; opacity:.35; transition:all .3s; }
.gq-pstep.active { opacity:1; }
.gq-pstep.done { opacity:.65; }
.gq-pnum {
  width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-weight:700; font-size:.8rem;
  background:#F4F7F9; color:#1B2A5E; transition:all .3s;
}
.gq-pstep.active .gq-pnum { background:#D4A843; color:white; box-shadow:0 0 0 5px rgba(212,168,67,.15); }
.gq-pstep.done .gq-pnum { background:#1B2A5E; color:white; }
.gq-plabel { font-size:.65rem; font-weight:600; color:#4A5568; }
.gq-pstep.active .gq-plabel { color:#1B2A5E; }

/* ─── Steps ─── */
.gq-step { display:none; padding:1.5rem 2.5rem; animation:gqSlideUp .4s ease; }
.gq-step.active { display:block; }
.gq-step h3 { font-family:var(--font-heading); font-size:1.25rem; font-weight:700; color:#1B2A5E; margin-bottom:1.25rem; }
.gq-step h3 i { color:#D4A843; margin-right:.5rem; }

/* ─── Error ─── */
.gq-error {
  display:none; text-align:center; margin-top:1rem; padding:.6rem 1rem;
  color:#C62828; font-weight:600; font-size:.85rem; border-radius:.75rem;
  background:rgba(244,67,54,.06); border:1px solid rgba(244,67,54,.15);
}
.gq-error.visible { display:block; animation:gqShake .4s ease; }
@keyframes gqShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* ─── Step 1: Service Cards ─── */
.gq-service-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.gq-service-card { cursor:pointer; }
.gq-service-card input { position:absolute; opacity:0; pointer-events:none; }
.gq-sc-inner {
  background:white; border:2px solid rgba(0,0,0,.06); border-radius:1.25rem;
  padding:1.75rem 1.5rem; text-align:center; height:100%;
  transition:all .3s cubic-bezier(.175,.885,.32,1.275); position:relative; overflow:hidden;
}
.gq-sc-inner::before { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(135deg,#D4A843,#0097A7); transform:scaleX(0); transition:transform .3s; }
.gq-service-card:hover .gq-sc-inner { transform:translateY(-3px); box-shadow:0 10px 20px rgba(27,42,94,.08); border-color:rgba(212,168,67,.2); }
.gq-service-card input:checked ~ .gq-sc-inner { border-color:#D4A843; box-shadow:0 0 0 3px rgba(212,168,67,.12),0 10px 20px rgba(27,42,94,.08); transform:translateY(-3px); }
.gq-service-card input:checked ~ .gq-sc-inner::before { transform:scaleX(1); }
.gq-sc-icon {
  width:55px; height:55px; border-radius:50%; margin:0 auto 1rem;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  background:rgba(212,168,67,.1); color:#D4A843; transition:all .3s;
}
.gq-sc-icon.accent { background:rgba(212,168,67,.1); color:#D4A843; }
.gq-service-card input:checked ~ .gq-sc-inner .gq-sc-icon { background:linear-gradient(135deg,#D4A843,#0097A7); color:white; transform:scale(1.1); }
.gq-sc-inner strong { display:block; font-family:var(--font-heading); font-size:1.05rem; margin-bottom:.35rem; color:#1B2A5E; }
.gq-sc-inner span { display:block; font-size:.82rem; color:#4A5568; margin-bottom:.5rem; }
.gq-tag { display:inline-block; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:.2rem .6rem; border-radius:99px; font-style:normal; background:rgba(212,168,67,.1); color:#D4A843; }
.gq-tag.premium { background:rgba(212,168,67,.1); color:#D4A843; }
.gq-tag.guarantee { background:rgba(27,42,94,.06); color:#1B2A5E; }

/* ─── End of Lease Panel ─── */
.gq-eol-panel {
  display:none; margin-top:1.5rem; border-radius:1rem; overflow:hidden;
  border:2px solid rgba(212,168,67,.2); animation:gqSlideUp .4s ease;
}
.gq-eol-panel.visible { display:block; }

.gq-eol-banner {
  display:flex; align-items:center; gap:.85rem;
  padding:1rem 1.25rem; background:linear-gradient(135deg,#1B2A5E,#0d3a52);
}
.gq-eol-icon {
  width:40px; height:40px; min-width:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(212,168,67,.15); color:#D4A843; font-size:1.1rem;
}
.gq-eol-info { flex:1; }
.gq-eol-info strong { display:block; font-size:.88rem; color:white; font-family:var(--font-heading); }
.gq-eol-info span { font-size:.78rem; color:rgba(255,255,255,.6); line-height:1.4; }

.gq-eol-expand {
  display:flex; align-items:center; gap:.4rem; padding:.5rem 1rem;
  background:rgba(212,168,67,.15); border:1px solid rgba(212,168,67,.3);
  border-radius:99px; color:#D4A843; font-size:.75rem; font-weight:700;
  cursor:pointer; white-space:nowrap; transition:all .2s;
  font-family:var(--font-heading);
}
.gq-eol-expand:hover { background:rgba(212,168,67,.25); }
.gq-eol-expand i { font-size:.65rem; transition:transform .3s; }
.gq-eol-expand.open i { transform:rotate(180deg); }

.gq-eol-checklist {
  max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.4,0,.2,1);
  background:#f8fafb;
}
.gq-eol-checklist.open { max-height:900px; }

.gq-eol-grid {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:0;
  padding:.75rem 1rem;
}
.gq-eol-group { padding:.5rem .75rem; }
.gq-eol-group h4 {
  font-family:var(--font-heading); font-size:.78rem; font-weight:800;
  color:#1B2A5E; margin:0 0 .4rem; display:flex; align-items:center; gap:.4rem;
  text-transform:uppercase; letter-spacing:.5px;
}
.gq-eol-group h4 i { color:#D4A843; font-size:.7rem; }
.gq-eol-group ul { list-style:none; margin:0; padding:0; }
.gq-eol-group ul li {
  position:relative; padding:.2rem 0 .2rem 1rem;
  font-size:.72rem; color:#4A5568; line-height:1.5;
}
.gq-eol-group ul li::before {
  content:'\2713'; position:absolute; left:0; top:.2rem;
  font-size:.65rem; font-weight:900; color:#D4A843;
}

/* ─── Step 2: Count Cards ─── */
.gq-count-row { display:flex; gap:.75rem; }
.gq-count { flex:1; cursor:pointer; position:relative; }
.gq-count input { position:absolute; opacity:0; pointer-events:none; }
.gq-count span {
  display:flex; align-items:center; justify-content:center; height:70px;
  background:white; border:2px solid rgba(0,0,0,.06); border-radius:1rem;
  font-family:var(--font-heading); font-size:1.5rem; font-weight:800; color:#1B2A5E;
  transition:all .3s cubic-bezier(.175,.885,.32,1.275);
}
.gq-count:hover span { transform:translateY(-3px); box-shadow:0 4px 8px rgba(0,0,0,.04); border-color:rgba(212,168,67,.3); }
.gq-count input:checked ~ span { background:#D4A843; color:white; border-color:#D4A843; transform:translateY(-3px); box-shadow:0 8px 16px rgba(212,168,67,.25); }

/* ─── Step 3: Add-ons ─── */
.gq-addons-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:.75rem; }
.gq-addon { cursor:pointer; position:relative; }
.gq-addon input { position:absolute; opacity:0; pointer-events:none; }
.gq-addon-inner {
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  background:white; border:2px solid rgba(0,0,0,.06); border-radius:1rem;
  padding:1.25rem .75rem; text-align:center; transition:all .25s; position:relative;
}
.gq-addon-inner::after {
  content:'\f058'; font-family:'Font Awesome 6 Free'; font-weight:900;
  position:absolute; top:8px; right:8px; font-size:.9rem; color:#D4A843;
  opacity:0; transform:scale(0); transition:all .25s;
}
.gq-addon:hover .gq-addon-inner { border-color:rgba(212,168,67,.3); transform:translateY(-2px); }
.gq-addon input:checked ~ .gq-addon-inner { border-color:#D4A843; background:rgba(212,168,67,.03); box-shadow:0 0 0 2px rgba(212,168,67,.1); }
.gq-addon input:checked ~ .gq-addon-inner::after { opacity:1; transform:scale(1); }
.gq-addon-inner i { font-size:1.5rem; color:#D4A843; }
.gq-addon-inner span { font-weight:600; font-size:.82rem; color:#1B2A5E; }

/* ─── Step 4: Extras ─── */
.gq-extra-row {
  display:flex; justify-content:space-between; align-items:center;
  background:white; padding:1.25rem 1.5rem; border-radius:1rem;
  box-shadow:0 2px 4px rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.04);
  margin-bottom:.75rem; transition:all .25s;
}
.gq-extra-row:hover { box-shadow:0 6px 12px rgba(0,0,0,.06); }
.gq-extra-label { display:flex; align-items:center; gap:1rem; flex:1; }
.gq-extra-label > i {
  width:42px; height:42px; min-width:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  background:rgba(212,168,67,.1); color:#D4A843;
}
.gq-extra-label strong { display:block; font-size:.95rem; color:#1B2A5E; }
.gq-extra-label small { font-size:.78rem; color:#4A5568; }

.gq-toggle-group { display:flex; gap:.4rem; }
.gq-toggle { cursor:pointer; position:relative; }
.gq-toggle input { position:absolute; opacity:0; pointer-events:none; }
.gq-toggle span {
  display:block; padding:.5rem 1.25rem; border-radius:99px; font-weight:600; font-size:.82rem;
  border:2px solid rgba(0,0,0,.08); background:white; color:#4A5568; transition:all .25s;
}
.gq-toggle:hover span { border-color:#D4A843; }
.gq-toggle input:checked ~ span { background:#D4A843; color:white; border-color:#D4A843; box-shadow:0 3px 8px rgba(212,168,67,.2); }

/* ─── Step 5: Schedule ─── */
.gq-sched-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.gq-field { margin-bottom:.75rem; }
.gq-field label { display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.9rem; color:#1B2A5E; margin-bottom:.4rem; font-family:var(--font-heading); }
.gq-field label i { color:#D4A843; }
.gq-input {
  width:100%; padding:.85rem 1rem; border:2px solid rgba(0,0,0,.08); border-radius:.75rem;
  font-family:var(--font-body); font-size:.95rem; background:white; color:#1A202C;
  transition:all .2s; appearance:none;
}
select.gq-input {
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right .85rem center; background-size:1.1em;
}
.gq-input:focus { outline:none; border-color:#D4A843; box-shadow:0 0 0 3px rgba(212,168,67,.1); }
.gq-input::placeholder { color:#A0AEC0; }
textarea.gq-input { resize:vertical; min-height:80px; }

.gq-flex-check { display:flex; cursor:pointer; margin-top:.5rem; }
.gq-flex-check input { position:absolute; opacity:0; pointer-events:none; }
.gq-flex-check > div {
  display:flex; align-items:center; gap:.75rem; width:100%;
  background:rgba(212,168,67,.04); border:2px solid rgba(212,168,67,.15);
  border-radius:1rem; padding:1rem 1.25rem; transition:all .25s;
}
.gq-flex-check > div > i { font-size:1.3rem; color:#D4A843; }
.gq-flex-check strong { display:block; font-size:.88rem; color:#1B2A5E; }
.gq-flex-check small { font-size:.78rem; color:#4A5568; }
.gq-flex-check input:checked ~ div { border-color:#D4A843; background:rgba(212,168,67,.08); box-shadow:0 0 0 2px rgba(212,168,67,.1); }

/* ─── Step 6: Contact ─── */
.gq-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

.gq-tos {
  display:flex; align-items:flex-start; gap:.6rem; cursor:pointer;
  font-size:.82rem; color:#4A5568; line-height:1.5; margin-top:.75rem;
  padding:1rem; border-radius:.75rem; background:#F4F7F9;
}
.gq-tos input { margin-top:2px; width:16px; height:16px; accent-color:#D4A843; flex-shrink:0; }
.gq-tos a { color:#D4A843; font-weight:600; text-decoration:underline; }

/* ─── Navigation ─── */
.gq-nav {
  display:flex; justify-content:space-between; align-items:center;
  padding:1.25rem 2.5rem 2rem; border-top:1px solid rgba(0,0,0,.05); margin-top:1rem;
}
.gq-btn {
  display:inline-flex; align-items:center; gap:.4rem; padding:.85rem 2rem;
  font-family:var(--font-heading); font-weight:700; border-radius:99px;
  cursor:pointer; font-size:.95rem; border:none; transition:all .3s;
}
.gq-btn-back { background:white; color:#1B2A5E; border:2px solid rgba(0,0,0,.08); }
.gq-btn-back:hover { border-color:#1B2A5E; }
.gq-btn-back.hidden { visibility:hidden; }
.gq-btn-next { background:linear-gradient(135deg,#D4A843,#0097A7); color:white; box-shadow:0 6px 16px rgba(212,168,67,.25); }
.gq-btn-next:hover { transform:translateY(-2px); box-shadow:0 10px 20px rgba(212,168,67,.35); }
.gq-btn-submit { display:none; background:#1B2A5E; color:white; box-shadow:0 6px 16px rgba(27,42,94,.25); }
.gq-btn-submit:hover { transform:translateY(-2px); box-shadow:0 10px 20px rgba(27,42,94,.35); }
.gq-btn-submit.visible { display:inline-flex; }
.gq-btn-next.hidden { display:none; }
.gq-btn-submit.loading { pointer-events:none; opacity:.7; }

/* ─── Success ─── */
.gq-success {
  display:none; padding: 1.5rem 3rem; text-align:center;
}
.gq-success.visible { display:block; animation:gqPop .5s cubic-bezier(.175,.885,.32,1.275); }
.gq-success-icon {
  width:80px; height:80px; border-radius:50%; margin:0 auto 1.5rem;
  background:rgba(212,168,67,.1); display:flex; align-items:center; justify-content:center;
}
.gq-success-icon i { font-size:2.5rem; color:#D4A843; }
.gq-success h2 { font-family:var(--font-heading); font-size:1.6rem; margin-bottom:.75rem; color:#1B2A5E; }
.gq-success p { color:#4A5568; font-size:.95rem; line-height:1.7; margin-bottom:2rem; max-width:420px; margin-left:auto; margin-right:auto; }
.gq-btn-primary { background:linear-gradient(135deg,#D4A843,#0097A7); color:white; box-shadow:0 6px 16px rgba(212,168,67,.25); }
.gq-btn-primary:hover { transform:translateY(-2px); }

/* ─── Responsive ─── */
@media(max-width:640px) {
  .gq-modal { max-height:95vh; border-radius:1rem; }
  .gq-header { padding:2rem 1.5rem 0; }
  .gq-header h2 { font-size:1.25rem; }
  .gq-progress, .gq-step, .gq-nav { padding-left:1.5rem; padding-right:1.5rem; }
  .gq-service-grid { grid-template-columns:1fr; }
  .gq-sc-inner { padding:1.25rem 1rem; }
  .gq-count-row { gap:.4rem; }
  .gq-count span { height:58px; font-size:1.2rem; }
  .gq-addons-grid { grid-template-columns:repeat(2,1fr); }
  .gq-sched-grid, .gq-row { grid-template-columns:1fr; }
  .gq-extra-row { flex-direction:column; align-items:flex-start; gap:.75rem; }
  .gq-nav { flex-wrap:wrap; gap:.75rem; }
  .gq-btn { width:100%; justify-content:center; }
  .gq-plabel { font-size:.55rem; }
  .gq-pnum { width:24px; height:24px; font-size:.7rem; }
  .gq-success { padding:3rem 1.5rem; }
  .gq-eol-grid { grid-template-columns:1fr; }
  .gq-eol-banner { flex-wrap:wrap; gap:.6rem; }
  .gq-eol-expand { width:100%; justify-content:center; margin-top:.25rem; }
}