/* offerte-look.css — gedeelde visuele blok-stijlen voor de offerte.
   Gebruikt door zowel klant.html (read-only) als offerte.html (WYSIWYG-bewerker),
   zodat de bewerk-canvas en de klantpagina gegarandeerd identiek ogen (geen drift).
   Vereist de huisstijl-tokens uit :root (--navy/--oranje/--lijn/--tekst/--muted),
   die in elke pagina zelf gedefinieerd staan. Bevat GEEN topbar/print/bewerk-stijlen. */

.wrap{ max-width:780px; margin:22px auto; padding:0 16px; }

/* Hero — in MvA-huisstijl: strak navy blok (geen leeg fotogat) */
.hero{ border-radius:14px; overflow:hidden; background:var(--navy); position:relative; }
.hero-foto{ height:210px; background:#27396b; background-size:cover; background-position:center; }
.hero-titel{ padding:26px 28px 22px; position:relative; }
.hero-titel .merk{ color:var(--oranje); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }
.hero-titel .hero-logo{ display:block; height:34px; width:auto; margin-bottom:14px; }
.hero-titel h1{ color:#fff; font-size:27px; font-weight:700; line-height:1.18; margin:7px 0 8px; letter-spacing:-.01em; }
.hero-titel .adres{ color:#C7CEDE; font-size:15px; }

.kaart{ background:#fff; border:1px solid var(--lijn); border-radius:13px; padding:18px 20px; margin-top:14px; }

/* Makelaar */
.mak{ display:flex; gap:14px; align-items:center; }
.mak .avatar{ width:62px; height:62px; border-radius:50%; flex:none; background:#DfE3EC; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; color:#7C879C; font-weight:700; font-size:20px; }
.mak .naam{ font-weight:700; color:var(--navy); font-size:15px; }
.mak .intro{ color:#444; font-size:13.5px; line-height:1.5; margin-top:2px; }
.mak .contact{ color:var(--muted); font-size:12.5px; margin-top:4px; }

/* Stats */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.stat{ background:#fff; border:1px solid var(--lijn); border-radius:11px; padding:14px; text-align:center; }
.stat .n{ color:var(--oranje); font-size:21px; font-weight:700; }
.stat .l{ color:var(--muted); font-size:12px; margin-top:2px; }

/* Brief */
.brief h2{ color:var(--navy); font-size:16px; font-weight:700; margin:20px 0 6px; }
.brief h2:first-child{ margin-top:0; }
.brief p{ margin:0 0 12px; }
.usp{ margin:6px 0 12px; padding:0; list-style:none; }
.usp li{ position:relative; padding-left:20px; margin-bottom:4px; }
.usp li::before{ content:"✓"; position:absolute; left:0; color:var(--oranje); font-weight:700; }
.groet{ margin-top:18px; }
.groet b{ font-weight:500; }
/* Bijkomende kosten (aankoop) — onderdeel van de brief, ook zichtbaar voor de klant */
.infokosten{ background:#F8FAFD; border:1px solid var(--lijn); border-radius:11px; padding:14px 16px; margin-top:10px; font-size:13.5px; }
.infokosten .t{ font-weight:700; color:var(--navy); margin-bottom:6px; }
.infokosten ul{ margin:0; padding-left:18px; } .infokosten li{ margin-bottom:3px; }
/* Courtage-uitkomst (rekenvoorbeeld) zoals de klant die ziet */
.rekenbox{ background:#F8FAFD; border:1px solid var(--lijn); border-radius:11px; padding:12px 16px; margin:4px 0 12px; }
.rekenbox .rb-titel{ font-weight:700; color:var(--navy); font-size:13px; margin-bottom:6px; }
.rekenbox .rb-rij{ display:flex; justify-content:space-between; gap:14px; padding:4px 0; border-bottom:1px dashed var(--lijn); font-size:13.5px; }
.rekenbox .rb-rij:last-child{ border-bottom:0; }
.rekenbox .rb-rij b{ color:var(--navy); }

/* Promoplan tegels */
.blokkop{ color:var(--navy); font-weight:700; font-size:16px; margin:2px 0 10px; }
.tegels{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.tegel{ background:#fff; border:1px solid var(--lijn); border-radius:11px; padding:14px; display:flex; gap:10px; align-items:flex-start; }
.tegel .ic{ color:var(--oranje); font-size:20px; line-height:1; flex:none; width:22px; text-align:center; }
.tegel .t{ font-weight:500; color:var(--navy); font-size:13.5px; }
.tegel .s{ color:var(--muted); font-size:12.5px; }
a.tegel-link{ text-decoration:none; position:relative; transition:border-color .15s, box-shadow .15s; }
a.tegel-link:hover{ border-color:var(--oranje); box-shadow:0 2px 10px rgba(232,80,10,.10); }
.tegel-ext{ position:absolute; top:10px; right:10px; color:var(--muted); font-size:13px; }
a.tegel-link:hover .tegel-ext{ color:var(--oranje); }
.meer-links{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:12px; }
.brochure-link{ display:inline-flex; align-items:center; gap:7px; color:var(--oranje); font-weight:500; font-size:13.5px; text-decoration:none; }
.brochure-link:hover{ text-decoration:underline; }
.profiel-link{ display:inline-flex; align-items:center; gap:5px; margin-top:8px; color:var(--oranje); font-weight:500; font-size:12.5px; text-decoration:none; }
.profiel-link:hover{ text-decoration:underline; }

/* Review */
.review{ background:#FFF6F1; border:1px solid #F3C7B3; border-radius:13px; padding:16px 20px; margin-top:14px; }
.review .sterren{ color:var(--oranje); letter-spacing:.08em; font-size:15px; }
.review .q{ font-style:italic; font-size:14.5px; margin:6px 0 4px; }
.review .b{ color:var(--muted); font-size:12.5px; }

/* Pakketkaarten — verkoop-bijlage (bewerker) én aankoop-tiers Brons/Zilver/Goud (in de
   brief, reizen mee in briefHtml). Gedeeld zodat de klantpagina identiek rendert. */
.pakketten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:10px; align-items:stretch; margin:6px 0 12px; }
.pkg{ border:1.5px solid var(--lijn); border-radius:11px; padding:14px; position:relative; display:flex; flex-direction:column; background:#fff; }
.pkg.sel{ border-color:var(--oranje); background:#FFF6F1; }
.pkg .nm{ font-weight:700; color:var(--navy); font-size:14px; }
.pkg .sub{ font-size:12px; color:var(--oranje); font-weight:600; margin-top:1px; }
.pkg .oms{ font-size:12.5px; color:var(--muted); line-height:1.5; margin-top:6px; flex:1; }
.pkg .badge{ position:absolute; top:-9px; right:10px; background:var(--oranje); color:#fff; font-size:10.5px; padding:2px 8px; border-radius:6px; white-space:nowrap; }
.pkg .prijsrij{ display:flex; align-items:center; gap:4px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--lijn); }
.pkg .prijsrij .e, .pkg .prijsrij .tarief{ color:var(--navy); font-weight:700; font-size:13px; }

/* Kosten */
.kosten-rij{ display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px dashed var(--lijn); }
.kosten-rij .nm{ font-weight:500; color:var(--navy); }
.kosten-rij .oms{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.kosten-rij .pr{ color:var(--navy); font-weight:700; white-space:nowrap; }
.kosten-rij.gekozen{ background:#FFF6F1; border-radius:8px; padding:11px 12px; border-bottom:0; }
.kosten-tag{ display:inline-block; background:var(--oranje); color:#fff; font-size:10.5px; padding:1px 7px; border-radius:5px; margin-left:8px; vertical-align:middle; }
.totaal{ display:flex; justify-content:space-between; align-items:center; padding:14px 0 2px; margin-top:8px; border-top:2px solid var(--navy); font-weight:700; color:var(--navy); font-size:16px; }
.kop2{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:2px solid var(--navy); padding-bottom:8px; margin-bottom:12px; }
.kop2 .t{ color:var(--navy); font-size:16px; font-weight:700; }
.kop2 .a{ font-size:13px; color:var(--muted); }

/* Actie */
.actie{ text-align:center; }
.actie h3{ color:var(--navy); margin:0 0 6px; font-size:18px; }
.actie p{ color:var(--muted); margin:0 0 18px; font-size:14px; }
.knoppen{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn{ background:var(--oranje); color:#fff; border:0; border-radius:10px; padding:13px 24px; font:inherit; font-weight:600; font-size:15px; cursor:pointer; }
.btn.licht{ background:#fff; color:var(--navy); border:1.5px solid var(--lijn); }
.btn.licht:hover{ border-color:var(--oranje); }
.btn[disabled]{ opacity:.55; cursor:default; }

/* Eigen beeld in de brief (door de makelaar toegevoegd; reist mee in de snapshot).
   Grootte via een class op .beeld (klein/middel/volledig); kleiner dan vol = gecentreerd. */
.beeld{ position:relative; margin:16px 0; text-align:center; }
.beeld img{ display:block; height:auto; border-radius:11px; margin:0 auto; max-width:100%; }
.beeld.size-klein img{ width:40%; }
.beeld.size-middel img{ width:70%; }
.beeld.size-vol img{ width:100%; }
.beeld figcaption{ font-size:12.5px; color:var(--muted); margin-top:7px; text-align:center; }