/* Vakantie Internet Check — frontend (Fase 1). Zelfstandig; werkt op elke pagina. */
.vic{--vic-cyan:#1aa6ca;--vic-cyan-deep:#0d7390;--vic-orange:#f2a11e;--vic-orange-deep:#c97f0c;--vic-ink:#23201b;--vic-soft:#6b6459;--vic-paper:#fff;--vic-cream:#fbf6ec;--vic-hair:#ece4d5;
  max-width:900px;margin:0 auto;font-family:'Prompt',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--vic-ink)}
.vic *{box-sizing:border-box}
.vic-step{background:var(--vic-cream);border:1px solid var(--vic-hair);border-radius:18px;padding:24px}
.vic-kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--vic-cyan-deep);background:rgba(26,166,202,.1);padding:5px 11px;border-radius:999px}
.vic-h{font-size:clamp(22px,3.4vw,30px);font-weight:700;margin:12px 0 16px}
.vic-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.vic-select{flex:1 1 260px;min-width:200px;font-size:16px;font-weight:600;color:var(--vic-ink);background:var(--vic-paper);border:1px solid var(--vic-hair);border-radius:12px;padding:13px 14px;cursor:pointer}
.vic-btn{font-weight:700;font-size:15px;color:#3a2606;background:var(--vic-orange);border:none;border-radius:12px;padding:13px 22px;cursor:pointer;transition:background .2s,transform .15s}
.vic-btn:hover{background:var(--vic-orange-deep);color:#fff;transform:translateY(-1px)}
.vic-msg{font-size:15.5px;color:var(--vic-soft);margin:18px 4px}
.vic-msg a{color:var(--vic-cyan-deep);font-weight:600}

.vic-result{margin-top:26px}
.vic-h2{font-size:clamp(19px,3vw,24px);font-weight:700;color:var(--vic-orange-deep);margin:0 0 14px}
.vic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.vic-card{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--vic-paper);border:1px solid var(--vic-hair);border-radius:16px;padding:20px 16px;box-shadow:0 1px 3px rgba(35,32,27,.05),0 10px 26px -16px rgba(120,84,20,.18);transition:box-shadow .2s,transform .2s}
.vic-card:hover{transform:translateY(-3px);box-shadow:0 4px 12px -4px rgba(35,32,27,.08),0 22px 46px -24px rgba(120,84,20,.28)}
.vic-card-data{font-size:24px;font-weight:700;color:var(--vic-ink)}
.vic-card-days{font-size:13.5px;color:var(--vic-soft);margin-top:2px}
.vic-card-price{margin:12px 0 14px;font-size:18px;font-weight:700;color:var(--vic-cyan-deep)}
.vic-card-price del{color:var(--vic-soft);font-weight:400;font-size:14px}
.vic-card-price ins{text-decoration:none}
.vic-card-cta{margin-top:auto;display:inline-block;font-weight:700;font-size:14px;color:#3a2606;background:var(--vic-orange);border-radius:999px;padding:11px 18px;text-decoration:none;transition:background .2s,color .2s}
.vic-card-cta:hover{background:var(--vic-orange-deep);color:#fff}
.vic-note{margin-top:22px;background:#eef8fb;border:1px solid #cfe9f1;color:#0d5b71;border-radius:12px;padding:13px 16px;font-size:14px;line-height:1.5}
.vic-fase{margin-top:12px;font-size:13px;color:var(--vic-soft);font-style:italic}

/* Stap 2 + advies */
.vic-step2{margin-top:16px}
.vic-adv{margin-top:20px;border-radius:16px;padding:20px 22px;border:1px solid}
.vic-adv-h{font-size:18px;font-weight:700;margin-bottom:6px}
.vic-adv-b{font-size:15.5px;line-height:1.55}
.vic-adv-extra{font-size:13.5px;margin:10px 0 0;opacity:.9}
.vic-adv-uitz{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.62);border:1px dashed currentColor;font-size:14px;line-height:1.55}
.vic-adv-uitz-t{display:block;font-weight:700;margin-bottom:3px}
.vic-adv-lead{font-size:12.5px;margin:12px 0 0;opacity:.8}
.vic-adv-lead a{font-weight:600;color:inherit;text-decoration:underline}
.vic-adv--ok{background:#eefaf1;border-color:#bfe6cb;color:#155e34}
.vic-adv--ok .vic-adv-h{color:#1aa251}
.vic-adv--warn{background:#fff6e9;border-color:#f3d9a6;color:#7a4e00}
.vic-adv--warn .vic-adv-h{color:var(--vic-orange-deep)}
.vic-adv--info{background:#eef8fb;border-color:#cfe9f1;color:#0d5b71}
.vic-adv--info .vic-adv-h{color:var(--vic-cyan-deep)}
/* Aansprakelijkheidsvoorbehoud */
.vic-disc{margin-top:18px;background:#fbf9f4;border:1px solid var(--vic-hair);border-left:4px solid var(--vic-orange);border-radius:12px;padding:16px 20px}
.vic-disc-h{font-size:14px;font-weight:700;color:var(--vic-ink);margin-bottom:8px}
.vic-disc p{margin:0 0 9px;font-size:13px;line-height:1.6;color:var(--vic-soft)}
.vic-disc p:last-child{margin-bottom:0}
.vic-disc strong{color:var(--vic-ink)}


/* Landenpagina-blok: "werkt mijn bundel hier?" */
.vic-cp{--vic-cyan:#1aa6ca;--vic-cyan-deep:#0d7390;--vic-orange:#f2a11e;--vic-orange-deep:#c97f0c;--vic-ink:#23201b;--vic-soft:#6b6459;--vic-cream:#fbf6ec;--vic-hair:#ece4d5;
  margin:34px 0;padding:26px 28px;background:var(--vic-cream);border:1px solid var(--vic-hair);border-radius:18px;
  font-family:'Prompt',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--vic-ink)}
.vic-cp-h{font-size:clamp(20px,3vw,26px);font-weight:700;margin:0 0 12px;color:var(--vic-ink)}
.vic-cp-lead{margin:0;font-size:16.5px;line-height:1.6;color:var(--vic-ink)}
.vic-cp-lead strong{color:var(--vic-orange-deep)}
.vic-cp-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:18px}
.vic-cp-cols>div{background:#fff;border:1px solid var(--vic-hair);border-radius:12px;padding:13px 16px;font-size:14.5px;line-height:1.5}
.vic-cp-ja,.vic-cp-afh,.vic-cp-nee{display:block;font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin-bottom:5px;line-height:1.3}
.vic-cp-ja{color:#1aa251}
.vic-cp-afh{color:var(--vic-orange-deep)}
.vic-cp-nee{color:#c0392b}
.vic-cp-note{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--vic-soft)}
.vic-cp-meta{margin:18px 0 0;font-size:13.5px;color:var(--vic-soft)}
.vic-cp-meta a{color:var(--vic-cyan-deep);font-weight:700;text-decoration:none}
.vic-cp-meta a:hover{text-decoration:underline}
@media(max-width:520px){.vic-cp{padding:20px 18px}}

/* Toestelcheck */
.vic-device{margin-top:20px}
.vic-dev-res{font-size:15.5px;border-radius:12px;padding:13px 16px;margin:16px 0 0}
.vic-dev-res span{font-weight:400;font-size:13px;opacity:.85}
.vic-dev-ok{background:#eefaf1;border:1px solid #bfe6cb;color:#155e34}
.vic-dev-no{background:#fdeeee;border:1px solid #f3c6c6;color:#8a1f1f}
.vic-dev-unknown{background:#eef8fb;border:1px solid #cfe9f1;color:#0d5b71}
.vic-dev-hint{margin-top:14px;font-size:14px;color:var(--vic-soft);background:var(--vic-cream);border:1px solid var(--vic-hair);border-radius:12px;padding:12px 16px}
.vic-dev-hint strong{color:var(--vic-ink)}

@media(max-width:520px){.vic-form{flex-direction:column;align-items:stretch}.vic-btn{width:100%}.vic-select{width:100%}}

/* Blokken in een redactioneel artikel (shortcodes) */
.vic-inline{margin:26px 0}
.vic-inline .vic-h2{margin-bottom:14px}
.vic-inline-all{margin:16px 0 0;font-size:14.5px}
.vic-inline-all a{color:var(--vic-cyan-deep);font-weight:700;text-decoration:none}
.vic-inline-all a:hover{text-decoration:underline}

/* Compacte antwoordregel bovenaan een verkooppagina */
.vic-kort{--vic-cyan-deep:#0d7390;--vic-orange-deep:#c97f0c;--vic-ink:#23201b;--vic-cream:#fbf6ec;--vic-hair:#ece4d5;
  margin:18px 0 22px;padding:13px 18px;background:var(--vic-cream);border:1px solid var(--vic-hair);
  border-left:3px solid var(--vic-orange-deep);border-radius:10px;font-size:15.5px;line-height:1.55;
  font-family:'Prompt',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--vic-ink)}
.vic-kort-q{color:#6b6459}
.vic-kort strong{color:var(--vic-orange-deep)}
.vic-kort a{color:var(--vic-cyan-deep);font-weight:700;text-decoration:none;white-space:nowrap}
.vic-kort a:hover{text-decoration:underline}

/* ==========================================================================
   Opmaak voor redactionele bestemmingsartikelen.
   Staat hier en niet in de geplakte HTML: de blok-editor gooit <style> en
   custom classes eruit bij het plakken, waardoor het artikel kaal op de site
   belandt. Vanuit de plugin kan dat niet gebeuren.
   ========================================================================== */
.vi-kort{background:#fbf6ec;border:1px solid #ece4d5;border-left:4px solid #f2a11e;border-radius:12px;
  padding:22px 26px;margin:28px 0}
.vi-kort h2{margin-top:0;font-size:21px}
.vi-kort ul{margin:0;padding-left:20px}
.vi-kort li{margin-bottom:9px;line-height:1.55}

.vi-let-op{background:#fff6e9;border:1px solid #f3d9a6;border-radius:12px;padding:20px 24px;margin:28px 0}
.vi-let-op h3{margin-top:0;color:#c97f0c}
.vi-let-op p:last-child{margin-bottom:0}

.vi-cta{background:#eef8fb;border:1px solid #cfe9f1;border-radius:12px;padding:16px 20px;margin:26px 0;line-height:1.55}

/* Vergelijkingsschema: drie opties met hun voor- en nadeel.
   Bewust GEEN tabel. Een tabel met drie kolommen vol lopende tekst is op een
   telefoon onleesbaar, en "Optie" als kolomkop boven een hele zin leest raar.
   Als losse kaartjes werkt het op elk schermformaat, en het plus- en minteken
   maakt in een oogopslag duidelijk wat een voordeel is en wat niet. */
.vi-opties{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:24px 0;
  align-items:stretch}
/* WordPress zet zelf een marge van 24px boven elk blok behalve het eerste. In een
   grid vult die marge de rij mee op: kaart 2 en 3 werden daardoor 24px korter en
   begonnen 24px lager dan kaart 1. De onderlinge afstand regelen we met gap. */
.vi-opties > *{margin-block-start:0;margin-block-end:0;margin-top:0;margin-bottom:0}
.vi-optie{background:#fff;border:1px solid #ece4d5;border-radius:12px;padding:18px 20px;
  box-shadow:0 1px 3px rgba(35,32,27,.05),0 10px 26px -18px rgba(120,84,20,.2);
  display:flex;flex-direction:column}
.vi-optie h3{margin:0 0 10px;font-size:17px;color:#23201b}
.vi-optie p{margin:0 0 9px;font-size:14.8px;line-height:1.5;padding-left:22px;position:relative}
.vi-optie p:last-child{margin-bottom:0}
.vi-plus::before,.vi-min::before{position:absolute;left:0;top:0;font-weight:700;font-size:15px;line-height:1.5}
.vi-plus::before{content:"+";color:#1aa251}
.vi-min::before{content:"–";color:#c0392b}

/* De class kan op de <table> staan of op de <figure> eromheen, afhankelijk van
   hoe de editor het blok opslaat. Beide gevallen afdekken. */
.vi-tabel{margin:20px 0;font-size:15.5px}
.vi-tabel,.vi-tabel table{width:100%;border-collapse:collapse}
.vi-tabel th,.vi-tabel td{border:1px solid #ece4d5;padding:11px 14px;text-align:left;vertical-align:top}
.vi-tabel th{background:#fbf6ec;font-weight:700}

.vi-stappen li,.vi-mis li{margin-bottom:10px;line-height:1.55}
.vi-mis{padding-left:20px}

.vi-over{border-top:1px solid #ece4d5;margin-top:38px;padding-top:22px;font-size:14.5px;color:#6b6459}
.vi-over h2{font-size:18px}
.vi-bronnen,.vi-datum{font-size:13.5px}

/* Telefoon: een tabel van drie kolommen is op 375px onleesbaar. In plaats van
   horizontaal schuiven klappen de rijen uit tot losse blokjes, met de eerste
   cel als kopje. Dat leest als een lijst en niemand hoeft te vegen. */
@media(max-width:600px){
  .vi-kort,.vi-let-op{padding:18px 20px;margin:22px 0}
  .vi-cta{padding:14px 17px}
  .vi-tabel{font-size:15px}
  .vi-tabel,.vi-tabel table{border:0}
  .vi-tabel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vi-tabel tr{display:block;border:1px solid #ece4d5;border-radius:10px;margin-bottom:12px;overflow:hidden}
  .vi-tabel td{display:block;border:0;border-top:1px solid #f2ece0;padding:11px 15px}
  .vi-tabel td:first-child{border-top:0;background:#fbf6ec;font-weight:700}
  .vi-tabel td:first-child strong{font-weight:700}
}