/* ============================================================
   WSQUK WIZARD — wizard.css
   Loaded in plcHead on all /quote/ wizard steps.
   Master page already defines .container (max-width:1440px).
   Wizard uses .wiz-container (max-width:1140px) to avoid conflict.
   Master jQuery 2.1.1 is already available — no second jQuery load.
   ============================================================ */

/* ---- Layout ---- */
.wiz-body { background: #f0f4ff; min-height: 100vh; }

.wiz-container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ---- Progress bar (full-width, sits below master nav) ---- */
.wiz-progress-bar { background: #fff; border-bottom: 1px solid #DBEAFE; }
.wiz-progress-inner { height: 4px; }
.wiz-progress-fill { background: #1E40AF; transition: width .4s ease; height: 4px; border-radius: 0 2px 2px 0; }

/* ---- Step header band ---- */
.step-header { background: #fff; border-bottom: 1px solid #DBEAFE; padding: 20px 0; }
.step-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.step-pill { font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: #EFF6FF; color: #1E40AF; border: 1px solid #DBEAFE; border-radius: 99px; padding: 4px 10px; white-space: nowrap; }
.step-pill.success { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
.step-dots { display: flex; align-items: center; gap: 6px; }
.wiz-dot { width: 9px; height: 9px; border-radius: 50%; background: #DBEAFE; display: inline-block; transition: background .2s, transform .2s; }
.wiz-dot.done { background: #1E40AF; }
.wiz-dot.active { background: #E8740A; transform: scale(1.3); }
.wiz-dot.success-dot { background: #22c55e; }

/* ---- Main section ---- */
.wiz-main { padding: 40px 0 60px; }
.wiz-grid { display: grid; grid-template-columns: 1fr 480px; gap: 40px; align-items: start; }
@media (max-width: 900px) {
  .wiz-grid { grid-template-columns: 1fr; gap: 24px; }
  .wiz-left { order: 2; }
  .wiz-right { order: 1; }
}

/* ---- Left column panels ---- */
.wiz-left { display: flex; flex-direction: column; gap: 20px; }

.context-card { background: #fff; border-radius: 20px; border: 1.5px solid #DBEAFE; padding: 24px; }
.context-card h2 { font-family: 'DM Sans', sans-serif; font-size: 1.1rem; font-weight: 800; color: #0f172a; letter-spacing: -.015em; margin-bottom: 8px; line-height: 1.25; }
.context-card p { font-size: .85rem; color: #64748b; line-height: 1.68; margin-bottom: 0; }
.context-icon-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.context-icon { width: 36px; height: 36px; border-radius: 10px; background: #EFF6FF; border: 1.5px solid #DBEAFE; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.context-icon svg { width: 16px; height: 16px; }

/* Hardness visual panel */
.hardness-visual { background: linear-gradient(135deg, #1E40AF, #1e3a8a); border-radius: 20px; padding: 24px; color: #fff; }
.hv-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.55); margin-bottom: 4px; }
.hv-pc { font-size: .9rem; font-weight: 700; color: #fff; margin-bottom: 16px; }
.hv-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hv-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.hv-ppm { font-size: 2.4rem; font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.hv-ppm-unit { font-size: .8rem; font-weight: 500; color: rgba(255,255,255,.6); margin-top: 2px; }
.hv-badge { display: inline-block; border-radius: 99px; font-size: .8rem; font-weight: 700; padding: 4px 12px; border: 2px solid rgba(255,255,255,.25); }

/* Cart component */
.wiz-cart { background: #fff; border-radius: 20px; border: 1.5px solid #DBEAFE; overflow: hidden; }
.cart-title { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #94a3b8; padding: 12px 16px 8px; border-bottom: 1px solid #F1F5F9; margin: 0; }
.cart-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #F1F5F9; }
.cart-row:last-child { border-bottom: none; }
.cart-icon { width: 30px; height: 30px; border-radius: 8px; background: #EFF6FF; border: 1.5px solid #DBEAFE; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cart-icon svg { width: 13px; height: 13px; }
.cart-content { flex: 1; min-width: 0; }
.cart-lbl { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #94a3b8; line-height: 1; margin-bottom: 3px; }
.cart-val { font-size: .88rem; font-weight: 700; color: #0f172a; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.cart-check { width: 20px; height: 20px; background: #22c55e; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cart-check svg { width: 11px; height: 11px; }

/* Trust panel */
.trust-panel { background: #fff; border-radius: 20px; border: 1.5px solid #DBEAFE; padding: 20px; display: flex; gap: 0; }
.trust-panel-item { flex: 1; text-align: center; padding: 0 8px; }
.trust-panel-item + .trust-panel-item { border-left: 1px solid #F1F5F9; }
.tpi-val { font-size: 1.4rem; font-weight: 900; color: #1E40AF; line-height: 1; margin: 0; }
.tpi-val.amber { color: #E8740A; }
.tpi-lbl { font-size: .65rem; color: #94a3b8; margin-top: 3px; font-weight: 500; }

/* ---- Right column — Question card ---- */
.q-card { background: #fff; border-radius: 24px; box-shadow: 0 4px 6px rgba(30,64,175,.05), 0 20px 50px rgba(30,64,175,.11); padding: 32px; border: 1.5px solid #DBEAFE; }
.q-card h1 { font-family: 'DM Sans', sans-serif; font-size: clamp(1.55rem, 3vw, 1.9rem); font-weight: 900; color: #0f172a; letter-spacing: -.025em; line-height: 1.1; margin-bottom: 8px; }
.q-sub { font-size: .88rem; color: #64748b; line-height: 1.65; margin-bottom: 24px; }

/* ---- Inputs ---- */
.wiz-inp { font-family: 'DM Sans', sans-serif; width: 100%; border: 2px solid #DBEAFE; border-radius: 14px; padding: 15px 18px; font-size: 1rem; font-weight: 600; color: #0f172a; background: #fff; outline: none; transition: border-color .18s, box-shadow .18s; text-transform: uppercase; letter-spacing: .07em; box-sizing: border-box; }
.wiz-inp:focus { border-color: #1E40AF; box-shadow: 0 0 0 3px rgba(30,64,175,.1); }
.wiz-inp.err { border-color: #ef4444; }
.wiz-inp::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; color: #9CA3AF; }
.wiz-inp-plain { font-family: 'DM Sans', sans-serif; width: 100%; border: 2px solid #DBEAFE; border-radius: 13px; padding: 13px 15px; font-size: .9rem; font-weight: 500; color: #0f172a; background: #fff; outline: none; transition: border-color .18s, box-shadow .18s; box-sizing: border-box; }
.wiz-inp-plain:focus { border-color: #1E40AF; box-shadow: 0 0 0 3px rgba(30,64,175,.1); }
.wiz-inp-plain::placeholder { color: #9CA3AF; font-weight: 400; }

/* ---- Option buttons ---- */
.opt-grid-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin-bottom: 16px; }
.opt-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 16px; }
.opt-btn { font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: .95rem; padding: 14px 8px; border-radius: 14px; border: 2px solid #DBEAFE; background: #fff; color: #1e293b; cursor: pointer; transition: all .15s; text-align: center; line-height: 1.3; }
.opt-btn:hover { border-color: #1E40AF; background: #EFF6FF; color: #1E40AF; transform: translateY(-1px); }
.opt-btn.sel { border-color: #1E40AF; background: #EFF6FF; color: #1E40AF; box-shadow: 0 4px 10px rgba(30,64,175,.1); }

/* ---- CTA buttons ---- */
.btn-wiz-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: #E8740A; color: #fff; font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: .95rem; padding: 16px; border-radius: 16px; border: none; cursor: pointer; transition: background .18s, transform .12s, box-shadow .18s; box-shadow: 0 4px 14px rgba(232,116,10,.3); text-decoration: none; }
.btn-wiz-cta:hover { background: #c9630a; transform: translateY(-1px); color: #fff; text-decoration: none; }
.btn-wiz-cta:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-wiz-cta svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---- Gauge ---- */
.ndl-group { transform-origin: 150px 150px; transition: transform 1.1s cubic-bezier(.34,1.15,.64,1); }
.hard-label-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; }
.hard-label-row .hl { font-family: 'DM Sans', sans-serif; font-size: 1.5rem; font-weight: 900; }
.hard-label-row .hw { font-size: .95rem; color: #64748b; font-weight: 500; }
.gauge-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.gauge-header-left .gauge-label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #374151; }
.gauge-header-left .gauge-pc { font-size: .88rem; font-weight: 600; color: #1E40AF; margin-top: 2px; margin-bottom: 0; }
.change-pc-btn { font-size: .8rem; font-weight: 500; color: #1E40AF; text-decoration: underline; text-underline-offset: 2px; background: none; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; white-space: nowrap; }

/* ---- Countdown ---- */
.cd-row { margin-bottom: 16px; }
.cd-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cd-top span:first-child { font-size: .78rem; color: #64748b; font-weight: 500; }
.cd-top span:last-child { font-size: .78rem; font-weight: 700; color: #1E40AF; }
.cd-track { height: 6px; background: #F1F5F9; border-radius: 99px; overflow: hidden; }
.cd-fill { height: 100%; background: #1E40AF; border-radius: 99px; transition: width 1s linear; }

/* ---- Context message ---- */
.ctx-msg { border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; font-size: .88rem; line-height: 1.65; font-weight: 500; }

/* ---- Error / note / privacy ---- */
.wiz-err { font-size: .78rem; color: #ef4444; font-weight: 500; margin-bottom: 8px; display: none; }
.wiz-note { font-size: .73rem; text-align: center; color: #94a3b8; margin-top: 8px; }
.wiz-privacy { font-size: 11px; line-height: 1.5; color: #94a3b8; margin-top: 14px; }
.wiz-privacy a { color: #1E40AF; text-decoration: underline; }

/* ---- Success banner ---- */
.success-banner { background: #f0fdf4; border: 1.5px solid #bbf7d0; border-radius: 16px; padding: 14px 16px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.success-icon { width: 36px; height: 36px; border-radius: 10px; background: #22c55e; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.success-icon svg { width: 18px; height: 18px; }
.success-text p { margin: 0; }
.success-text p:first-child { font-size: .88rem; font-weight: 800; color: #14532d; line-height: 1.3; }
.success-text p:last-child { font-size: .75rem; color: #166534; margin-top: 2px; }

/* ---- Form grid ---- */
.wiz-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.wiz-form-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.wiz-form-row .wiz-inp-plain { width: 100%; }

/* ---- Trust row ---- */
.wiz-trust-row { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 20px; border-top: 1px solid #F1F5F9; }
.wiz-trust-item { display: flex; align-items: center; gap: 5px; font-size: .73rem; color: #94a3b8; }
.wiz-trust-item svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ---- Loader (step 4) ---- */
.loader-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 0; }
.loader-rings { position: relative; width: 84px; height: 84px; margin: 0 auto 28px; }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 4px solid #DBEAFE; }
.ring-1 { animation: wiz-ring-pulse 1.8s ease-in-out infinite; }
.ring-2 { animation: wiz-ring-pulse 1.8s ease-in-out .4s infinite; }
.loader-inner { position: absolute; inset: 8px; border-radius: 50%; background: #EFF6FF; display: flex; align-items: center; justify-content: center; }
.loader-inner svg { width: 26px; height: 26px; }
@keyframes wiz-ring-pulse { 0%,100%{transform:scale(.85);opacity:.35}50%{transform:scale(1);opacity:1} }
.wiz-checklist { text-align: left; display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; width: 100%; }
.cl-item { display: flex; align-items: center; gap: 12px; transition: opacity .4s; }
.cl-item.dim { opacity: .25; }
.cl-dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cl-dot.pending { background: #DBEAFE; }
.cl-dot.done { background: #22c55e; }
.cl-txt { font-size: .85rem; margin: 0; }
.cl-txt.muted { color: #94a3b8; }
.cl-txt.running { color: #1E40AF; font-weight: 600; }
.cl-txt.complete { color: #374151; font-weight: 500; }
.bounce-dots { display: flex; gap: 6px; }
.bounce-dot { width: 7px; height: 7px; border-radius: 50%; background: #1E40AF; }
.bounce-dot:nth-child(1){animation:wiz-bounce .9s ease-in-out infinite}
.bounce-dot:nth-child(2){animation:wiz-bounce .9s ease-in-out .15s infinite}
.bounce-dot:nth-child(3){animation:wiz-bounce .9s ease-in-out .3s infinite}
@keyframes wiz-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes wiz-spin{to{transform:rotate(360deg)}}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .q-card { padding: 24px 20px; }
  .wiz-main { padding: 24px 0 40px; }
  .wiz-form-row { grid-template-columns: 1fr; }
  .opt-grid-5 { gap: 7px; }
  .opt-btn { font-size: .85rem; padding: 12px 4px; }
}