/* ================================================================
   ZekerMobiel — Upsells (PDP + winkelwagen) & Verzekering & Service
   Add-on stylesheet. Reuses site tokens & classes; only adds the few
   extra rules the new blocks need. Namespaced with .zm-* to avoid
   collisions. Senior-friendly (>=16px), WCAG AA contrast.
   Feature-owner: Z5 (fanout 06-07).
   ================================================================ */

:root{
  --zm-line: var(--line, #e7e0d4);
  --zm-cream: #fbfaf6;
  --zm-cream-2: #fdfbf7;
  --zm-green: var(--green-800, #1c5a44);
  --zm-accent: var(--accent-500, #d9783c);
  --zm-ink: var(--ink, #1b2733);
  --zm-muted: var(--muted, #59626d);
}

/* ---- Shared: section heading spacing already from .section-heading ---- */

/* ---- Upsell card grid (PDP + checkout) --------------------------------
   We lean on the site's .product-card--mini / .product-visual so photos
   render on a white/warm vak, vak-vullend, exactly like the rest of the
   shop. Only the +knop styling and the "added" state are new.            */
.zm-upsell__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}
@media(max-width:1000px){ .zm-upsell__grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .zm-upsell__grid{ grid-template-columns:repeat(2,1fr); gap:12px; } }

.zm-upsell__card{ display:flex; flex-direction:column; }
.zm-upsell__card .product-card__foot{ margin-top:auto; }

/* + knop: duidelijk maar niet lomp; één knoppen-schaal (button--small) */
.zm-add{ white-space:nowrap; }
.zm-add.is-added{
  background:var(--zm-green) !important;
  border-color:var(--zm-green) !important;
  color:#fff !important;
}

/* ---- Checkout upsell block -------------------------------------------- */
.zm-co-upsell{
  border:1px solid var(--zm-line);
  border-radius:18px;
  background:var(--zm-cream);
  padding:22px 22px 24px;
  box-shadow:0 8px 28px rgba(60,40,15,.05);
}
.zm-co-upsell__head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 16px; }
.zm-co-upsell__head h2{ margin:0; font-size:20px; }
.zm-co-upsell__head p{ margin:0; color:var(--zm-muted); font-size:18px; }
.zm-co-upsell .product-card--mini{ background:#fff; }

/* ---- PDP: compacte verzekering-teaser onder de koopknop --------------- */
.zm-insure-teaser{
  margin-top:16px;
  border:1px solid var(--zm-line);
  border-radius:14px;
  background:linear-gradient(180deg,#f3f8f5, #fbfaf6);
  padding:14px 16px;
}
.zm-insure-teaser__top{ display:flex; align-items:center; gap:10px; }
.zm-insure-teaser__ic{
  flex:0 0 auto; width:34px; height:34px; border-radius:9px;
  display:grid; place-items:center; background:rgba(28,90,68,.12); color:var(--zm-green);
}
.zm-insure-teaser__ic [data-icon], .zm-insure-teaser__ic svg{ width:20px; height:20px; }
.zm-insure-teaser strong{ font-size:16px; line-height:1.25; color:var(--zm-ink); }
.zm-insure-teaser__tag{
  display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.02em;
  color:var(--zm-green); background:rgba(28,90,68,.10);
  padding:2px 8px; border-radius:999px; margin-left:2px; vertical-align:middle;
}
.zm-insure-teaser p{ margin:8px 0 10px; font-size:14.5px; color:var(--zm-muted); line-height:1.5; }
.zm-insure-teaser a.zm-insure-teaser__cta{ font-weight:800; color:var(--zm-green); }
.zm-insure-teaser a.zm-insure-teaser__cta:hover{ text-decoration:underline; }

/* ================================================================
   Verzekering & Service — uitgebreid aanbod-blok op verzekering.html
   ================================================================ */
.zm-pkg{
  border:1px solid var(--zm-line);
  border-radius:24px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 14px 44px rgba(28,90,68,.08);
}
.zm-pkg__grid{ display:grid; grid-template-columns:1.15fr .85fr; }
@media(max-width:900px){ .zm-pkg__grid{ grid-template-columns:1fr; } }

.zm-pkg__body{ padding:30px 32px; }
@media(max-width:560px){ .zm-pkg__body{ padding:22px 20px; } }
.zm-pkg__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  font-size:12.5px; color:var(--zm-green); margin:0 0 8px;
}
.zm-pkg__eyebrow [data-icon], .zm-pkg__eyebrow svg{ width:18px; height:18px; }
.zm-pkg__body h2{ margin:0 0 6px; font-size:27px; line-height:1.15; }
.zm-pkg__lead{ margin:0 0 18px; color:var(--zm-muted); font-size:16.5px; line-height:1.55; }

.zm-pkg__feats{ list-style:none; margin:0 0 6px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; }
@media(max-width:560px){ .zm-pkg__feats{ grid-template-columns:1fr; } }
.zm-pkg__feat{ display:flex; gap:11px; align-items:flex-start; }
.zm-pkg__feat .ic{
  flex:0 0 auto; width:30px; height:30px; border-radius:8px; margin-top:1px;
  display:grid; place-items:center; background:rgba(28,90,68,.10); color:var(--zm-green);
}
.zm-pkg__feat .ic [data-icon], .zm-pkg__feat .ic svg{ width:18px; height:18px; }
.zm-pkg__feat strong{ display:block; font-size:16px; color:var(--zm-ink); line-height:1.3; }
.zm-pkg__feat span{ font-size:14.5px; color:var(--zm-muted); line-height:1.45; }

.zm-pkg__meta{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 0; }
.zm-badge{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:800; font-size:14px; color:var(--zm-green);
  background:rgba(28,90,68,.10); border:1px solid rgba(28,90,68,.18);
  padding:7px 12px; border-radius:999px;
}
.zm-badge [data-icon], .zm-badge svg{ width:16px; height:16px; }

/* Aanvraag-kolom (formulier) */
.zm-pkg__aside{
  background:linear-gradient(180deg,#f3f8f5,#eef6f1);
  border-left:1px solid var(--zm-line);
  padding:30px 28px;
}
@media(max-width:900px){ .zm-pkg__aside{ border-left:0; border-top:1px solid var(--zm-line); } }
.zm-pkg__aside h3{ margin:0 0 4px; font-size:20px; }
.zm-pkg__aside .zm-note{ margin:0 0 16px; color:var(--zm-muted); font-size:14.5px; line-height:1.5; }

.zm-form{ display:block; }
.zm-field{ margin:0 0 13px; }
.zm-field label{ display:block; font-weight:700; font-size:14.5px; margin:0 0 5px; color:var(--zm-ink); }
.zm-field input, .zm-field select, .zm-field textarea{
  width:100%; box-sizing:border-box; min-height:50px;
  padding:12px 14px; font-size:16px; font-family:inherit;
  border:1.5px solid var(--zm-line); border-radius:10px; background:#fff; color:var(--zm-ink);
}
.zm-field textarea{ min-height:84px; resize:vertical; }
.zm-field input:focus, .zm-field select:focus, .zm-field textarea:focus{
  outline:none; border-color:var(--zm-accent); box-shadow:0 0 0 3px rgba(217,120,60,.18);
}
.zm-field input[aria-invalid="true"], .zm-field select[aria-invalid="true"]{
  border-color:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,.14);
}
.zm-field__err{ display:none; margin:5px 0 0; font-size:13.5px; font-weight:700; color:#9b1c1c; }
.zm-field.has-err .zm-field__err{ display:block; }
.zm-row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:420px){ .zm-row2{ grid-template-columns:1fr; } }

.zm-form__status{ margin:12px 0 0; padding:12px 14px; border-radius:10px; font-weight:700; font-size:15px; display:none; }
.zm-form__status.show{ display:block; }
.zm-form__status.ok{ background:#eef6f1; color:#1d5240; }
.zm-form__status.err{ background:#fdecec; color:#9b1c1c; }
.zm-form__hint{ margin:12px 0 0; font-size:13px; color:var(--zm-muted); line-height:1.5; text-align:center; }

/* Eerlijkheids-disclaimer onder het blok */
.zm-pkg-disclaimer{ margin:16px 0 0; }

/* success-panel na verzending */
.zm-form.is-sent .zm-form__fields{ display:none; }
.zm-sent-panel{ display:none; text-align:center; padding:8px 4px; }
.zm-form.is-sent .zm-sent-panel{ display:block; }
.zm-sent-panel .ic{
  width:52px; height:52px; border-radius:50%; margin:0 auto 12px;
  display:grid; place-items:center; background:rgba(28,90,68,.12); color:var(--zm-green);
}
.zm-sent-panel .ic [data-icon], .zm-sent-panel .ic svg{ width:30px; height:30px; }
.zm-sent-panel h4{ margin:0 0 6px; font-size:19px; }
.zm-sent-panel p{ margin:0; color:var(--zm-muted); font-size:15px; line-height:1.55; }