/* Offerte-wizard styling — extends style.css */

.offerte-hero {
  background:
    linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(246,250,255,.86) 48%, rgba(255,255,255,.98) 100%),
    url('/assets/img/installaties/airco-binnenunit-zwart-deuren.jpg') center 38% / cover no-repeat,
    var(--c-bg);
  padding-block: var(--s-7) var(--s-6);
  text-align: center;
  border-bottom: 1px solid var(--c-line);
}
.offerte-hero h1 {
  font-family: var(--ff-display);
  font-size: var(--fs-hero);
  letter-spacing: 0; line-height: 1.05;
  color: var(--c-ink);
}
.offerte-hero h1 .hl { color: var(--c-red-2); }
.offerte-hero .lead { color: var(--c-ink-2); max-width: 64ch; margin: var(--s-3) auto 0; }

@media (max-width: 760px) {
  .offerte-nav {
    gap: var(--s-2);
    overflow: hidden;
  }
  .offerte-nav .brand {
    padding: 6px 8px;
    min-width: 0;
  }
  .offerte-nav .brand img {
    height: 28px;
    max-width: min(50vw, 170px);
  }
  .offerte-nav .btn-ghost {
    width: 48px;
    flex: 0 0 48px;
    padding: 0;
    font-size: 0;
  }
  .offerte-nav .btn-ghost::before {
    content: '←';
    font-size: 1.35rem;
    line-height: 1;
  }
}

/* Wizard layout */
.wizard { background: var(--c-bg); padding-block: var(--s-6) var(--s-9); }
.wizard-container {
  display: grid; grid-template-columns: 1fr; gap: var(--s-6);
}
@media (min-width: 980px) {
  .wizard-container { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-7); }
}

.wiz-form {
  background: var(--c-bg-3);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
}
.wiz-progress {
  display: flex; gap: 5px; margin-bottom: var(--s-3);
}
.wiz-progress span {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--c-line);
  transition: background var(--t-base);
}
.wiz-progress span.on { background: var(--c-red); }
.wiz-meta {
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: 0; color: var(--c-mute);
  font-weight: 700; margin-bottom: var(--s-5);
}

.wiz-step {
  animation: fadeUp .3s ease both;
}
.wiz-step h2 {
  font-family: var(--ff-display);
  font-size: 1.6rem; margin-bottom: var(--s-3);
}
.wiz-step > p { color: var(--c-ink-2); margin-bottom: var(--s-5); }

/* Radio grid (large tap targets) */
.wiz-radio-grid {
  display: grid; gap: var(--s-3);
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 720px) {
  .wiz-radio-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
.wiz-radio-grid label {
  cursor: pointer; position: relative;
  background: var(--c-bg-4);
  border: 1.5px solid var(--c-line-2);
  border-radius: var(--radius);
  padding: var(--s-4);
  transition: all var(--t-base);
  text-align: center;
}
.wiz-radio-grid label:hover { border-color: var(--c-red-line); }
.wiz-radio-grid label input { position: absolute; opacity: 0; pointer-events: none; }
.wiz-radio-grid label input:checked + span {
  color: var(--c-ink);
}
.wiz-radio-grid label:has(input:checked) {
  border-color: var(--c-red);
  background: var(--c-red-soft);
}
.wiz-radio-grid label span {
  display: flex; flex-direction: column; gap: 4px;
  font-weight: 600; color: var(--c-ink);
  min-height: 60px; align-items: center; justify-content: center;
}
.wiz-radio-grid label span strong {
  font-family: var(--ff-display);
  font-size: 1.6rem; font-weight: 800;
  color: var(--c-ink);
  line-height: 1;
}
.wiz-radio-grid label span small {
  font-size: var(--fs-xs); color: var(--c-mute);
  font-weight: 500;
  text-transform: uppercase; letter-spacing: 0;
}

/* Room cards (step 2) */
.rooms-grid {
  display: grid; gap: var(--s-3);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .rooms-grid { grid-template-columns: 1fr 1fr; }
}
.room-card {
  background: var(--c-bg-4);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.room-card-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--c-line);
  padding-bottom: var(--s-2); margin-bottom: var(--s-2);
}
.room-card-head strong {
  font-family: var(--ff-display);
  font-size: 1.05rem; color: var(--c-ink);
}
.room-remove {
  background: var(--c-bg-3);
  border: 1px solid var(--c-line); color: var(--c-ink);
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 18px; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.room-remove:hover { background: var(--c-red); border-color: var(--c-red); color: #fff; }

.room-card label, .wiz-form-grid label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: 0; color: var(--c-mute);
  font-weight: 700;
}
.room-card input, .room-card select,
.wiz-form-grid input, .wiz-form-grid select, .wiz-form-grid textarea {
  background: var(--c-bg-3);
  border: 1.5px solid var(--c-line-2);
  color: var(--c-ink);
  padding: .7em .8em;
  border-radius: var(--radius);
  font-size: .95rem;
  font-family: inherit;
}
.room-card input:focus, .room-card select:focus,
.wiz-form-grid input:focus, .wiz-form-grid select:focus, .wiz-form-grid textarea:focus {
  outline: none; border-color: var(--c-red);
  box-shadow: 0 0 0 3px rgba(21,115,209,.22);
}

.wiz-form-grid {
  display: grid; gap: var(--s-3);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .wiz-form-grid { grid-template-columns: 1fr 1fr; }
}
.wiz-form-grid .full-width { grid-column: 1 / -1; }

.wiz-note {
  background: var(--c-success-soft);
  border: 1px solid rgba(34,197,94,.35);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
  margin-top: var(--s-5);
}

/* Extras */
.wiz-extras { display: flex; flex-direction: column; gap: var(--s-3); }
.extra-row {
  display: grid; grid-template-columns: 24px 1fr auto; gap: var(--s-3);
  align-items: center;
  background: var(--c-bg-4);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  text-transform: none !important; letter-spacing: 0;
  font-weight: 400 !important; color: var(--c-ink-2) !important;
}
.extra-row:hover { border-color: var(--c-red-line); }
.extra-row input[type=checkbox] { accent-color: var(--c-red); width: 20px; height: 20px; }
.extra-label { display: flex; flex-direction: column; gap: 2px; }
.extra-label > strong { color: var(--c-ink); font-weight: 700; font-size: var(--fs-base); }
.extra-label small { color: var(--c-mute); font-size: var(--fs-xs); }
.extra-qty {
  width: 64px; text-align: center;
  background: var(--c-bg-3) !important; border: 1.5px solid var(--c-line-2);
  color: var(--c-ink); padding: 6px; border-radius: var(--radius);
}

/* Wizard navigation */
.wiz-nav {
  display: flex; justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}
#wiz-prev:disabled { opacity: .4; cursor: not-allowed; }
#wiz-next { min-width: 200px; }

/* Real-time summary card */
.wiz-summary {
  background: var(--c-bg-3);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  position: sticky; top: 80px;
  height: max-content;
}
.wiz-summary h3 {
  font-family: var(--ff-display);
  font-size: 1.1rem; margin-bottom: var(--s-3);
  color: var(--c-ink);
}
.sum-row {
  display: flex; justify-content: space-between;
  padding: 6px 0; font-size: var(--fs-sm);
  color: var(--c-ink-2);
}
.sum-row strong { color: var(--c-ink); }
.sum-row-sm { font-size: var(--fs-xs); padding: 4px 0; color: var(--c-ink-3); }
.sum-row-sm strong { font-size: var(--fs-xs); color: var(--c-ink-2); font-weight: 600; }
.sum-section {
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: 0; color: var(--c-mute);
  font-weight: 700; margin-top: var(--s-3); margin-bottom: var(--s-2);
}
.sum-discount { color: var(--c-success); }
.sum-discount strong { color: var(--c-success); }
.sum-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--s-2);
  padding: var(--s-3); border-radius: var(--radius);
  background: var(--g-logo);
}
.sum-total span { color: rgba(255,255,255,.85); font-size: var(--fs-sm); font-weight: 600; }
.sum-total strong {
  font-family: var(--ff-display);
  font-size: 1.6rem; font-weight: 900;
  color: var(--c-on-accent);
}
.sum-row-extra { color: var(--c-mute); font-style: italic; margin-top: var(--s-2); }
.wiz-summary hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--s-3) 0; }
.wiz-summary hr.hr-strong { border-top: 1px solid var(--c-line-2); }
.summary-disclaimer { color: var(--c-mute); font-size: var(--fs-xs); margin-top: var(--s-3); text-align: center; }

/* Quote detail (step 6) */
.quote-detail h3 {
  font-family: var(--ff-display);
  font-size: 1.6rem; margin-bottom: var(--s-4);
}
.quote-detail h4 {
  font-family: var(--ff-display);
  font-size: 1rem; margin-top: var(--s-5); margin-bottom: var(--s-2);
  color: var(--c-ink);
  text-transform: uppercase; letter-spacing: 0;
}
.quote-meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.quote-meta > div {
  background: var(--c-bg-4); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: var(--s-3);
  text-align: center;
}
.quote-meta .label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0; color: var(--c-mute); display: block; }
.quote-meta strong { font-family: var(--ff-display); font-size: 1.3rem; color: var(--c-ink); display: block; margin-top: 4px; }

.quote-rooms { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.quote-rooms li {
  background: var(--c-bg-4); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: var(--s-3);
}
.quote-rooms strong { color: var(--c-ink); }
.quote-unit { color: var(--c-mute); font-size: var(--fs-sm); }

.quote-table {
  width: 100%; border-collapse: collapse;
  margin-top: var(--s-3);
}
.quote-table td {
  padding: 10px 8px; border-bottom: 1px solid var(--c-line);
  color: var(--c-ink-2); font-size: var(--fs-sm);
}
.quote-table td.right { text-align: right; white-space: nowrap; color: var(--c-ink); }
.quote-table tr.subtotal td { font-weight: 600; padding-top: 14px; }
.quote-table tr.discount td { color: var(--c-success); }
.quote-table tr.total td {
  font-size: 1.1rem;
  border-top: 2px solid var(--c-red);
  padding: var(--s-3) 8px;
}
.quote-table tr.total td strong {
  font-family: var(--ff-display);
  font-size: 1.5rem; color: var(--c-ink);
}
.quote-table tr.recurring td { color: var(--c-mute); font-style: italic; border: 0; }
.quote-foot {
  margin-top: var(--s-4); color: var(--c-mute);
  font-size: var(--fs-xs); text-align: center;
}

/* === SCARCITY (step 7, alleen bij hete dagen) === */
.scarcity-step7 {
  background: linear-gradient(90deg, var(--c-red-dark) 0%, var(--c-red) 100%);
  color: var(--c-on-accent);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--s-5);
  font-weight: 600; font-size: var(--fs-sm);
  display: flex; gap: var(--s-3); align-items: center;
  border: 1px solid rgba(255,255,255,.15);
}
.scarcity-step7 .scarcity-flame { font-size: 22px; animation: pulse 1.6s ease-in-out infinite; }
.scarcity-step7 strong { color: var(--c-on-accent); }

/* === TRUST-stack op laatste stap (voor lead-form) === */
.trust-stack {
  background: linear-gradient(180deg, var(--c-red-soft) 0%, var(--c-bg-4) 100%);
  border: 1px solid var(--c-red-line);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-5);
}
.trust-stack-head {
  display: grid; gap: var(--s-5);
  grid-template-columns: 1fr;
  margin-bottom: var(--s-5);
}
@media (min-width: 600px) {
  .trust-stack-head { grid-template-columns: auto 1fr; align-items: center; }
}
.trust-rating { text-align: center; padding-right: var(--s-4); }
@media (min-width: 600px) {
  .trust-rating { border-right: 1px solid var(--c-line); }
}
.rating-num {
  font-family: var(--ff-display);
  font-size: 3rem; font-weight: 900;
  line-height: 1; color: var(--c-ink);
}
.rating-stars { color: #ffb800; font-size: 22px; letter-spacing: 0; margin: 4px 0; }
.rating-sub { color: var(--c-ink-2); font-size: var(--fs-sm); }
.rating-sub strong { color: var(--c-ink); font-weight: 700; }
.trust-bullets {
  display: flex; flex-direction: column; gap: 6px;
  color: var(--c-ink); font-size: var(--fs-sm); font-weight: 500;
}
.trust-quotes {
  display: grid; gap: var(--s-3);
  grid-template-columns: 1fr;
  margin-bottom: var(--s-4);
}
@media (min-width: 720px) {
  .trust-quotes { grid-template-columns: 1fr 1fr; }
}
.trust-quotes blockquote {
  background: var(--c-bg-3);
  border-left: 3px solid var(--c-red);
  margin: 0; padding: var(--s-3) var(--s-4);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.trust-quotes blockquote p {
  margin: 0 0 var(--s-2); color: var(--c-ink);
  font-size: var(--fs-sm); font-style: italic;
}
.trust-quotes blockquote cite {
  color: var(--c-mute); font-size: var(--fs-xs);
  font-style: normal; display: block;
}
.trust-gbp-link {
  display: inline-block;
  color: var(--c-ink); text-decoration: underline;
  font-size: var(--fs-sm); font-weight: 600;
}
.trust-gbp-link:hover { color: var(--c-red-2); }

/* Trust-promises — boven form fields */
.trust-promises {
  display: grid; gap: var(--s-3);
  grid-template-columns: 1fr;
  margin-bottom: var(--s-5);
  padding: var(--s-4);
  background: var(--c-bg-4); border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
@media (min-width: 760px) { .trust-promises { grid-template-columns: repeat(3, 1fr); } }
.promise {
  display: flex; gap: var(--s-3); align-items: flex-start;
}
.promise > span {
  font-size: 24px; line-height: 1; flex-shrink: 0;
  min-width: 32px;
}
.promise > div {
  font-size: var(--fs-xs); color: var(--c-ink-3);
  line-height: 1.4;
  display: flex; flex-direction: column;
}
.promise strong {
  color: var(--c-ink); font-weight: 700;
  font-size: var(--fs-sm); display: block;
  margin-bottom: 2px;
}

/* Success screen */
.wiz-success {
  background: var(--c-bg-3);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--s-8) var(--s-6);
  text-align: center;
}
.wiz-success .success-icon {
  display: inline-grid; place-items: center;
  width: 80px; height: 80px;
  background: var(--c-success-soft);
  border: 1px solid rgba(34,197,94,.35);
  border-radius: 50%;
  color: var(--c-success);
  font-size: 40px; font-weight: 800;
  margin-bottom: var(--s-4);
}
.wiz-success h2 { font-family: var(--ff-display); font-size: 1.8rem; }
.wiz-success p { color: var(--c-ink-2); }
.wiz-success .btn { margin-top: var(--s-3); }

/* btn-small variant */
.btn-small { padding: .7em 1.1em; font-size: var(--fs-sm); margin-top: var(--s-3); }

/* Mobile: hide summary sidebar (toon onderaan na wiz-form) */
@media (max-width: 979px) {
  .wiz-summary { position: static; }
  .wizard-container { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .wiz-form { padding: var(--s-4); }
  .wiz-step h2 { font-size: 1.3rem; }
  .wiz-radio-grid { grid-template-columns: 1fr 1fr; }
  .wiz-radio-grid label { padding: var(--s-3); }
  .wiz-radio-grid label span { min-height: 50px; }
  .wiz-radio-grid label span strong { font-size: 1.3rem; }
  .quote-meta { grid-template-columns: 1fr; }
  .extra-row { grid-template-columns: 20px 1fr; }
  .extra-row .extra-qty { grid-column: 1 / -1; max-width: 100px; }
  .wiz-nav .btn { flex: 1; }
}