/* ============================================================
   CheapEnergy.eu — Vergelijkingsflow
   ============================================================ */

.flow-wrap{padding:108px 0 80px;background:var(--off);min-height:100vh}

/* Stappen-indicator */
.steps-bar{display:flex;align-items:center;justify-content:center;gap:0;margin:0 auto 44px;max-width:760px;flex-wrap:wrap}
.steps-bar .s{display:flex;align-items:center;gap:11px;color:var(--muted2);font-size:13.5px;font-weight:600;font-family:var(--font-head)}
.steps-bar .s .num{width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;transition:.2s}
.steps-bar .s.active{color:var(--dark)}
.steps-bar .s.active .num{background:var(--teal);border-color:var(--teal);color:#04140c}
.steps-bar .s.done .num{background:var(--dark);border-color:var(--dark);color:#fff}
.steps-bar .bar{width:40px;height:2px;background:var(--border);margin:0 10px}
.steps-bar .bar.done{background:var(--teal)}

.flow-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);max-width:860px;margin:0 auto;padding:42px 46px}
.flow-card h2{font-family:var(--font-head);font-size:26px;font-weight:800;color:var(--dark);letter-spacing:-.6px;margin-bottom:6px}
.flow-card .intro{font-size:15px;color:var(--muted);margin-bottom:32px}

/* Form */
.field{margin-bottom:22px}
.field > label{display:block;font-family:var(--font-head);font-size:13.5px;font-weight:600;color:var(--dark);margin-bottom:8px}
.field .hint{font-size:12.5px;color:var(--muted2);font-weight:400;margin-left:6px}
.field input[type=text],.field input[type=number],.field input[type=email],.field input[type=tel],.field input[type=date],.field select,.field textarea{
  width:100%;padding:13px 15px;border-radius:11px;border:1.5px solid var(--border);
  background:#fff;font-family:var(--font-body);font-size:15px;color:var(--text);transition:border-color .15s, box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(34,196,148,.14)}
.field-grid{display:grid;gap:18px}
.field-grid.cols-2{grid-template-columns:1fr 1fr}
.field-grid.cols-3{grid-template-columns:1fr 1fr 1fr}
.input-unit{position:relative}
.input-unit .unit{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted2);font-size:14px;font-weight:600;pointer-events:none}

/* Energiesoort keuze-tegels */
.tile-group{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:8px}
.tile{position:relative;cursor:pointer;display:block}
.tile input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.tile .box{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px solid var(--border);border-radius:13px;padding:22px 14px;text-align:center;transition:.18s;background:#fff;min-height:108px}
.tile .box .ti{display:flex;justify-content:center;align-items:center;margin-bottom:10px;color:var(--muted2)}
.tile .box .tl{font-family:var(--font-head);font-weight:600;font-size:14.5px;color:var(--dark);line-height:1.25}
.tile input:checked + .box{border-color:var(--teal);background:rgba(34,196,148,.07);box-shadow:0 0 0 3px rgba(34,196,148,.12)}
.tile input:checked + .box .ti{color:var(--teal-dark)}

/* Toggle (Ja/Nee + switch) */
.toggle-group{display:flex;gap:10px}
.toggle-opt{position:relative;cursor:pointer}
.toggle-opt input{position:absolute;opacity:0}
.toggle-opt span{display:inline-flex;align-items:center;gap:8px;padding:11px 26px;border-radius:11px;border:1.5px solid var(--border);font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--muted);transition:.15s}
.toggle-opt input:checked + span{background:var(--teal);border-color:var(--teal);color:#04140c}

.switch{display:inline-flex;align-items:center;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{flex-shrink:0;width:52px;height:28px;border-radius:999px;background:var(--border);position:relative;transition:.2s;display:inline-block}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s}
.switch input:checked + .track{background:var(--teal)}
.switch input:checked + .track::after{transform:translateX(24px)}

/* Conditioneel tonen */
.cond{display:none}
.cond.show{display:block}

/* Acties onderaan stap */
.flow-actions{display:flex;justify-content:space-between;align-items:center;margin-top:36px;gap:14px}
.flow-actions .back{color:var(--muted);font-weight:600;font-size:14px;font-family:var(--font-head);background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.flow-actions .back:hover{color:var(--dark)}

/* ---------- Aanbod-kaarten ---------- */
.offers-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;max-width:1100px;margin:0 auto 28px}
.offers-head .addr{background:#fff;border:1px solid var(--border);border-radius:11px;padding:12px 20px;font-size:14px;color:var(--dark);font-weight:600}
.offers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:22px;max-width:1100px;margin:0 auto}
.offer{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px 24px;display:flex;flex-direction:column;transition:.2s;position:relative}
.offer:hover{box-shadow:var(--shadow);border-color:rgba(34,196,148,.4);transform:translateY(-3px)}
.offer.best{border-color:var(--teal);box-shadow:0 0 0 3px rgba(34,196,148,.16)}
.offer .badge{position:absolute;top:-11px;left:24px;background:var(--teal);color:#04140c;font-family:var(--font-head);font-weight:700;font-size:11px;letter-spacing:.5px;padding:5px 13px;border-radius:999px}
.offer .sup{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--teal-dark);margin-bottom:10px}
.offer h3{font-family:var(--font-head);font-size:17px;font-weight:700;color:var(--dark);line-height:1.3;margin-bottom:4px;min-height:44px}
.offer .term{font-size:13px;color:var(--muted2);margin-bottom:18px}
.offer .price{font-family:var(--font-head);font-size:30px;font-weight:800;color:var(--dark);letter-spacing:-1px;line-height:1}
.offer .price small{font-size:14px;font-weight:500;color:var(--muted2)}
.offer .price-incl{font-size:13px;color:var(--muted2);margin:6px 0 18px}
.offer .actions{margin-top:auto;display:flex;flex-direction:column;gap:9px}
.offer .specbtn{background:none;border:none;color:var(--teal-dark);font-size:13.5px;font-weight:600;font-family:var(--font-head);cursor:pointer;text-align:center}
.offer .specbtn:hover{text-decoration:underline}

.empty-offers{max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:44px;text-align:center}
.empty-offers h3{font-family:var(--font-head);color:var(--dark);margin-bottom:10px}
.empty-offers p{color:var(--muted)}

/* ---------- Kostenspecificatie modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(10,28,18,.55);backdrop-filter:blur(3px);z-index:2000;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:var(--radius-lg);max-width:880px;width:100%;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.modal-head{padding:30px 36px 0}
.modal-head .kicker{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2)}
.modal-head h3{font-family:var(--font-head);font-size:24px;font-weight:800;color:var(--dark);margin-top:4px}
.modal-close{position:absolute;top:22px;right:24px;background:var(--off);border:none;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:18px;color:var(--muted);line-height:1}
.modal-close:hover{background:var(--border)}
.spec-cols{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding:26px 36px}
.spec-col h4{font-family:var(--font-head);font-size:18px;font-weight:700;color:var(--teal-dark);margin-bottom:16px}
.spec-sub{font-family:var(--font-head);font-size:13px;font-weight:700;color:var(--dark);margin:16px 0 8px}
.spec-line{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;padding:6px 0;border-bottom:1px dashed var(--border)}
.spec-line .l{color:var(--text)}
.spec-line .d{display:block;font-size:11.5px;color:var(--muted2);margin-top:2px}
.spec-line .a{color:var(--text);font-weight:600;white-space:nowrap}
.spec-total{display:flex;justify-content:space-between;font-family:var(--font-head);font-weight:700;color:var(--dark);font-size:14.5px;padding-top:12px;margin-top:6px}
.spec-foot{background:var(--off);padding:24px 36px}
.spec-foot .big{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.spec-foot .big .lbl{font-family:var(--font-head);font-size:18px;font-weight:700;color:var(--teal-dark)}
.spec-foot .big .val{font-family:var(--font-head);font-size:24px;font-weight:800;color:var(--dark)}
.spec-foot .row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted);padding:4px 0}
.spec-foot .row b{color:var(--dark)}

@media(max-width:760px){
  .spec-cols{grid-template-columns:1fr;gap:24px}
  .flow-card{padding:30px 22px}
  .field-grid.cols-2,.field-grid.cols-3{grid-template-columns:1fr}
  .tile-group{grid-template-columns:1fr}
}

/* ---------- Checkout / overzicht ---------- */
.checkout-grid{display:grid;grid-template-columns:1fr 340px;gap:28px;max-width:1100px;margin:0 auto;align-items:start}
.summary{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px;position:sticky;top:96px}
.summary h3{font-family:var(--font-head);font-size:17px;font-weight:700;color:var(--dark);margin-bottom:16px}
.summary .so{padding-bottom:16px;border-bottom:1px solid var(--border);margin-bottom:16px}
.summary .so .n{font-weight:600;color:var(--dark);font-size:14.5px}
.summary .so .t{font-size:13px;color:var(--muted2);margin-top:2px}
.summary .line{display:flex;justify-content:space-between;font-size:14px;padding:6px 0;color:var(--muted)}
.summary .line.total{font-family:var(--font-head);font-weight:700;color:var(--dark);font-size:16px;border-top:1px solid var(--border);padding-top:12px;margin-top:6px}
.summary .specbtn{background:none;border:none;color:var(--teal-dark);font-size:13.5px;font-weight:600;cursor:pointer;font-family:var(--font-head);padding:0;margin-top:6px}
.notice{background:rgba(34,196,148,.08);border:1px solid rgba(34,196,148,.3);border-radius:11px;padding:14px 16px;font-size:13px;color:var(--dark2);margin-top:18px;line-height:1.55}
.fieldset-title{font-family:var(--font-head);font-size:15px;font-weight:700;color:var(--dark);margin:26px 0 16px;padding-bottom:8px;border-bottom:2px solid var(--teal);display:inline-block}

.alert{border-radius:11px;padding:14px 16px;font-size:14px;margin-bottom:20px}
.alert-error{background:#fff0f0;border:1px solid #ffc9c9;color:#a01818}
.alert-ok{background:rgba(34,196,148,.1);border:1px solid rgba(34,196,148,.4);color:#0d3320}

@media(max-width:880px){
  .checkout-grid{grid-template-columns:1fr}
  .summary{position:static}
}