/* ===== Power Flush Wizard – Quote Builder (scoped) ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

#pfw-quote{
  --blue:#2c85bc; --blue-dark:#1b6ca8; --navy:#0f3e63;
  --orange:#f2711c; --orange-dark:#e8462a; --red:#d81f26;
  --ink:#1f2d3a; --muted:#6b7d8c; --line:#dbe6ee; --line-soft:#eef3f7;
  --bg:#f4f8fb; --card:#ffffff; --ok:#2e9e5b;
  --radius:14px; --shadow:0 10px 30px rgba(15,62,99,.08);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); width:100%; max-width:100%; margin:0;
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
#pfw-quote *,#pfw-quote *::before,#pfw-quote *::after{box-sizing:border-box}
#pfw-quote h2,#pfw-quote h3{font-family:'Poppins',sans-serif;margin:0;line-height:1.2}
#pfw-quote svg{width:1em;height:1em;display:block}

/* Hero */
#pfw-quote .pfw-hero{
  background:linear-gradient(135deg,var(--blue) 0%,var(--navy) 100%);
  color:#fff;border-radius:var(--radius);padding:30px 32px;margin-bottom:22px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
#pfw-quote .pfw-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:200px;height:200px;
  background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%)}
#pfw-quote .pfw-hero h2{font-size:30.4px;letter-spacing:-.01em}
#pfw-quote .pfw-hero h2 strong{color:#ffd23f}
#pfw-quote .pfw-hero p{margin:8px 0 0;max-width:60ch;opacity:.92;font-size:15.7px}

/* Steps */
#pfw-quote .pfw-steps{display:flex;align-items:center;gap:8px;margin:0 4px 20px}
#pfw-quote .pfw-step{display:flex;align-items:center;gap:10px;opacity:.5;transition:.25s}
#pfw-quote .pfw-step.is-active,#pfw-quote .pfw-step.is-done{opacity:1}
#pfw-quote .pfw-step-num{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:#e4edf3;color:var(--muted);font-weight:700;font-size:15.2px;flex:none;transition:.25s}
#pfw-quote .pfw-step.is-active .pfw-step-num{background:var(--blue);color:#fff;box-shadow:0 0 0 4px rgba(44,133,188,.18)}
#pfw-quote .pfw-step.is-done .pfw-step-num{background:var(--ok);color:#fff}
#pfw-quote .pfw-step-label{font-weight:600;font-size:15.2px}
#pfw-quote .pfw-step-line{flex:1;height:3px;background:#e4edf3;border-radius:2px;overflow:hidden}
#pfw-quote .pfw-step-line i{display:block;height:100%;width:0;background:var(--blue);transition:.35s}
#pfw-quote.step2 .pfw-step-line i{width:100%}

#pfw-quote .pfw-required-note{font-size:13.6px;color:var(--muted);margin:0 4px 12px}
#pfw-quote .pfw-req{color:var(--red);font-weight:700}
#pfw-quote .pfw-muted{color:var(--muted);font-weight:400;font-size:.88em}
#pfw-quote .pfw-hp{position:absolute;left:-9999px;height:0;overflow:hidden}

/* Panels */
#pfw-quote .pfw-panel{display:none}
#pfw-quote .pfw-panel.is-active{display:block;animation:pfwFade .35s ease}
@keyframes pfwFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Cards */
#pfw-quote .pfw-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin-bottom:18px;box-shadow:var(--shadow)}
#pfw-quote .pfw-card-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;
  padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
#pfw-quote .pfw-card-head h3{font-size:17.9px;color:var(--navy)}
#pfw-quote .pfw-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;flex:none;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;font-size:20px}

/* Grid / fields */
#pfw-quote .pfw-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
#pfw-quote .pfw-col-2{grid-column:1/-1}
#pfw-quote .pfw-field{display:flex;flex-direction:column;gap:6px;min-width:0}
#pfw-quote .pfw-mt{margin-top:16px}
#pfw-quote .pfw-field label,#pfw-quote .pfw-stepper-label{font-weight:600;font-size:14.4px;color:#31424f}
#pfw-quote .pfw-field input,#pfw-quote .pfw-field select,#pfw-quote .pfw-field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;font:inherit;
  color:var(--ink);background:#fff;transition:.18s;appearance:none}
#pfw-quote .pfw-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7d8c' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;cursor:pointer}
#pfw-quote .pfw-field input:focus,#pfw-quote .pfw-field select:focus,#pfw-quote .pfw-field textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(44,133,188,.15)}
#pfw-quote .pfw-field input.pfw-invalid,#pfw-quote .pfw-field select.pfw-invalid{
  border-color:var(--red);box-shadow:0 0 0 3px rgba(216,31,38,.12)}
#pfw-quote .pfw-hint{font-size:13.1px;color:var(--muted);margin:2px 0 0}
#pfw-quote textarea{resize:vertical}

/* Steppers */
#pfw-quote .pfw-stepper-field{display:flex;flex-direction:column;gap:8px}
#pfw-quote .pfw-stepper{display:inline-flex;align-items:center;border:1.5px solid var(--line);
  border-radius:12px;overflow:hidden;width:fit-content;background:#fff}
#pfw-quote .pfw-stepper button{width:44px;height:46px;border:none;background:#f2f7fb;color:var(--blue);
  font-size:22.4px;font-weight:600;cursor:pointer;transition:.15s;line-height:1;display:grid;place-items:center}
#pfw-quote .pfw-stepper button:hover{background:var(--blue);color:#fff}
#pfw-quote .pfw-stepper button:disabled{opacity:.4;cursor:not-allowed;background:#f2f7fb;color:var(--muted)}
#pfw-quote .pfw-stepper input{width:56px;height:46px;border:none;text-align:center;font-weight:700;
  font-size:16.8px;color:var(--ink);-moz-appearance:textfield}
#pfw-quote .pfw-stepper input::-webkit-outer-spin-button,
#pfw-quote .pfw-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#pfw-quote .pfw-stepper input:focus{outline:none}

/* Checkboxes */
#pfw-quote .pfw-checkgrid{display:flex;flex-wrap:wrap;gap:10px}
#pfw-quote .pfw-check{display:flex;align-items:center;gap:11px;padding:12px 15px;border:1.5px solid var(--line);
  border-radius:11px;cursor:pointer;font-size:14.7px;font-weight:500;transition:.15s;background:#fff;user-select:none}
#pfw-quote .pfw-check:hover{border-color:var(--blue);background:#f7fbfd}
#pfw-quote .pfw-check input{position:absolute;opacity:0;width:0;height:0}
#pfw-quote .pfw-check-box{width:22px;height:22px;border:2px solid #c3d3de;border-radius:6px;flex:none;
  position:relative;transition:.15s}
#pfw-quote .pfw-check-box::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:.15s}
#pfw-quote .pfw-check input:checked~.pfw-check-box{background:var(--blue);border-color:var(--blue)}
#pfw-quote .pfw-check input:checked~.pfw-check-box::after{transform:rotate(45deg) scale(1)}
#pfw-quote .pfw-check input:focus-visible~.pfw-check-box{box-shadow:0 0 0 3px rgba(44,133,188,.25)}
#pfw-quote .pfw-check:has(input:checked){border-color:var(--blue);background:#f0f8fc}
#pfw-quote .pfw-check-txt em{font-style:normal;color:var(--blue);font-weight:700;margin-left:4px;font-size:.88em}

/* Notes */
#pfw-quote .pfw-note{display:flex;gap:11px;padding:13px 15px;border-radius:11px;font-size:13.8px;margin-top:12px;line-height:1.45}
#pfw-quote .pfw-note svg{font-size:20px;flex:none;margin-top:1px}
#pfw-quote .pfw-note-info{background:#eef6fb;color:#215d82;border:1px solid #cfe6f3}
#pfw-quote .pfw-conditional{display:none}
#pfw-quote .pfw-conditional.is-shown{display:flex;animation:pfwFade .25s ease}

/* Layout with sticky summary */
#pfw-quote .pfw-layout{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
#pfw-quote .pfw-summary{position:sticky;top:20px}
#pfw-quote .pfw-summary-inner{background:linear-gradient(160deg,#fff,#f5fafd);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
#pfw-quote .pfw-summary-head{background:linear-gradient(135deg,var(--navy),var(--blue-dark));color:#fff;
  font-family:'Poppins';font-weight:600;padding:14px 20px;font-size:16.3px}
#pfw-quote .pfw-total{padding:20px;text-align:center;border-bottom:1px solid var(--line-soft)}
#pfw-quote .pfw-total-pounds{font-family:'Poppins';font-weight:700;font-size:43.2px;color:var(--navy);
  display:block;line-height:1}
#pfw-quote .pfw-total-tag{display:inline-block;margin-top:6px;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--orange-dark);font-weight:700;background:#fff0e8;padding:3px 10px;border-radius:20px}
#pfw-quote .pfw-breakdown{list-style:none;margin:0;padding:14px 20px;font-size:13.8px;max-height:300px;overflow:auto}
#pfw-quote .pfw-breakdown li{display:flex;align-items:flex-start;gap:9px;padding:7px 0;
  border-bottom:1px dashed var(--line-soft);color:#31424f;font-weight:500}
#pfw-quote .pfw-breakdown li:last-child{border-bottom:none}
#pfw-quote .pfw-sel-tick{color:var(--ok);font-weight:700;flex:none;line-height:1.35}
#pfw-quote .pfw-breakdown-empty{color:var(--muted);font-style:italic;border:none!important}
#pfw-quote .pfw-estimate-cta{padding:16px 20px;border-top:1px solid var(--line-soft);background:#f7fbfd}
#pfw-quote .pfw-estimate-cta p{margin:12px 0 0;font-size:12.5px;color:#5a6b78;line-height:1.5}

/* Buttons / nav */
#pfw-quote .pfw-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}
#pfw-quote .pfw-btn{display:inline-flex;align-items:center;gap:9px;font-family:'Poppins';font-weight:600;
  font-size:16px;padding:14px 26px;border-radius:11px;border:none;cursor:pointer;transition:.18s;text-decoration:none}
#pfw-quote .pfw-btn svg{font-size:19px}
#pfw-quote .pfw-btn-primary{background:linear-gradient(135deg,var(--orange),var(--orange-dark));color:#fff;
  box-shadow:0 8px 20px rgba(232,70,42,.28)}
#pfw-quote .pfw-btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(232,70,42,.36)}
#pfw-quote .pfw-btn-primary:disabled{opacity:.7;cursor:wait;transform:none}
#pfw-quote .pfw-btn-ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
#pfw-quote .pfw-btn-ghost:hover{border-color:var(--blue);color:var(--blue)}

/* Upload */
#pfw-quote .pfw-upload{position:relative;border:2px dashed #c3d8e5;border-radius:12px;background:#f7fbfd;
  transition:.18s;cursor:pointer}
#pfw-quote .pfw-upload.is-drag{border-color:var(--blue);background:#eef7fc}
#pfw-quote .pfw-upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
#pfw-quote .pfw-upload-inner{display:flex;flex-direction:column;align-items:center;gap:5px;padding:24px;text-align:center;color:var(--muted)}
#pfw-quote .pfw-upload-inner svg{font-size:30px;color:var(--blue)}
#pfw-quote .pfw-upload-inner span{font-size:14.7px;color:#41525f}
#pfw-quote .pfw-upload-inner small{font-size:12.5px}
#pfw-quote .pfw-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
#pfw-quote .pfw-thumb{position:relative;width:78px;height:78px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
#pfw-quote .pfw-thumb img{width:100%;height:100%;object-fit:cover}
#pfw-quote .pfw-thumb button{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;
  border:none;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;font-size:12px;line-height:1;display:grid;place-items:center}

/* Spinner */
#pfw-quote .pfw-spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:pfwSpin .7s linear infinite}
@keyframes pfwSpin{to{transform:rotate(360deg)}}
#pfw-quote .pfw-submit-btn.is-loading .pfw-submit-label,#pfw-quote .pfw-submit-btn.is-loading .pfw-submit-ico{display:none}
#pfw-quote .pfw-btn-full{width:100%;justify-content:center}

/* Success */
#pfw-quote .pfw-success{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:44px 32px;text-align:center;animation:pfwFade .4s ease}
#pfw-quote .pfw-success-icon{width:72px;height:72px;border-radius:50%;background:var(--ok);color:#fff;
  display:grid;place-items:center;margin:0 auto 18px;font-size:38px}
#pfw-quote .pfw-success h3{font-size:24px;color:var(--navy);margin-bottom:10px}
#pfw-quote .pfw-success p{max-width:52ch;margin:0 auto 10px;color:#41525f}
#pfw-quote .pfw-success-total{font-size:18.4px}
#pfw-quote .pfw-success-total strong{color:var(--blue)}
#pfw-quote .pfw-success-call{margin-top:16px;font-weight:600}
#pfw-quote .pfw-success-call a{color:var(--orange-dark);text-decoration:none}

/* Form error banner */
#pfw-quote .pfw-error-banner{background:#fdecec;border:1px solid #f5c2c2;color:#a12626;padding:12px 16px;
  border-radius:10px;font-size:14.1px;margin-bottom:16px;display:none}
#pfw-quote .pfw-error-banner.is-shown{display:block}

/* Responsive */
@media(max-width:900px){
  #pfw-quote .pfw-layout{grid-template-columns:1fr}
  #pfw-quote .pfw-summary{position:static;order:-1}
}
@media(max-width:560px){
  #pfw-quote .pfw-hero{padding:24px}
  #pfw-quote .pfw-hero h2{font-size:24px}
  #pfw-quote .pfw-grid{grid-template-columns:1fr}
  #pfw-quote .pfw-card{padding:18px 16px}
  #pfw-quote .pfw-step-label{display:none}
  #pfw-quote .pfw-btn{padding:13px 18px;font-size:15.2px}
  #pfw-quote .pfw-nav{flex-direction:row}
}