/* =========================================================
   Vluchtcompensaties 12.0 – nieuwe huisstijl
   Navy primair, wit, felblauw voor accenten, oranje-geel voor CTA.
   Licht en luchtig, zachte vormen, vliegroute als eigen motief.
   ========================================================= */
:root{
  --b-navy:#05164C; --b-blue:#004DF5; --b-deep:#013BC1; --b-orange:#FFA618; --b-orange-h:#F29400;
  --b-lbg:#E4E9F3; --b-lg:#F1F3F6; --b-white:#FFFFFF; --b-black:#000000;
  --b-text:#05164C; --b-body:#3A4566; --b-line:#E4E9F3; --b-r:16px; --b-r-lg:28px;
  /* oude tokens overschrijven */
  --v2-navy:#05164C; --v2-bg:#F1F3F6; --v2-line:#E4E9F3; --v2-link:#004DF5; --v2-cta:#FFA618; --v2-cta-hover:#F29400; --v2-green:#004DF5; --v2-topbar:#E4E9F3;
  --cb-navy:#05164C; --cb-blue:#004DF5; --cb-yellow:#FFA618;
}
html body{color:var(--b-body);background:#fff;font-family:Inter,system-ui,sans-serif}
html body h1,html body h2,html body h3,html body h4{color:var(--b-navy)!important;letter-spacing:-.03em}
html body p{color:var(--b-body)}
html body a:not([class*=btn]):not([class*=button]):not([class*=cta]){color:var(--b-blue)}
html body a:not([class*=btn]):not([class*=button]):not([class*=cta]):hover{color:var(--b-deep)}

/* ---------- knoppen: één stijl ---------- */
html body .vc-btn,html body a.cb-btn,html body .cb-btn--yellow,html body [class*=btn-primary],html body .vc-flight-search-button,html body .vc-claim-panel-button,html body .vc-cta-band-button,html body .vc-cta-band a[class*=btn],html body .vc-hero a[class*=btn],html body .vc-faq-cta a,html body .vc-home-news-action a{
  background:var(--b-orange)!important;border:0!important;color:var(--b-navy)!important;border-radius:12px!important;font-weight:700!important;box-shadow:none!important;transition:background .15s}
html body .vc-btn:hover,html body a.cb-btn:hover,html body [class*=btn-primary]:hover,html body .vc-flight-search:hover .vc-flight-search-button,html body .vc-claim-panel-button:hover,html body .vc-cta-band-button:hover{background:var(--b-orange-h)!important}

/* ---------- header ---------- */
html body .site-header,html body header.cb-header,html body header[class*=vc-header]{background:#fff!important;border-bottom:1px solid var(--b-line)!important;box-shadow:none!important}
html body .cb-header-nav{background:#fff!important;border-top:1px solid var(--b-line)!important}
html body .vc-site-nav a,html body .cb-service-nav a{color:var(--b-navy)!important;font-weight:600}
html body .vc-site-nav a:hover,html body .vc-site-nav .current-menu-item>a{color:var(--b-blue)!important}
html body .vc-header-cta,html body .vc-mobile-primary-action,html body .site-header a[class*=btn],html body header [class*=cta],html body .cb-header__cta{
  background:var(--b-orange)!important;border:0!important;color:var(--b-navy)!important;border-radius:12px!important;font-weight:700!important}
html body .vc-header-cta:hover{background:var(--b-orange-h)!important}
html body .vc-language-trigger{border:1px solid var(--b-line)!important;border-radius:12px!important;color:var(--b-navy)!important;background:#fff!important}
html body [class*=topbar],html body [class*=announcement],html body .cb-notice{background:var(--b-lbg)!important;color:var(--b-navy)!important}

/* ---------- eyebrows ---------- */
html body .vc-eyebrow,html body .eyebrow{color:var(--b-blue)!important;font-size:13px!important;font-weight:800!important;letter-spacing:.12em!important;text-transform:uppercase}

/* ---------- hero: licht, gecentreerd, eigen vliegroute-motief ---------- */
html body .vc-hero{position:relative;overflow:hidden;background:var(--b-lg)!important;background-image:none!important;padding:96px 0 0!important;text-align:center}
html body .vc-hero::before{content:"";position:absolute;right:-140px;top:-160px;width:560px;height:560px;border-radius:50%;background:var(--b-lbg);z-index:0}
html body .vc-hero::after{content:"";position:absolute;left:-120px;bottom:-60px;width:380px;height:380px;border-radius:50%;border:2px dashed #c3cde3;z-index:0}
html body .vc-hero .vc-container{position:relative;z-index:1}
html body .vc-hero-grid{display:block!important}
html body .vc-hero-copy-wrap{max-width:820px;margin:0 auto!important;padding:0!important;background:none!important}
html body .vc-hero .vc-eyebrow{display:inline-block;background:#fff!important;color:var(--b-blue)!important;padding:8px 14px;border-radius:999px;border:1px solid var(--b-lbg);margin-bottom:22px}
html body .vc-hero h1{color:var(--b-navy)!important;font-size:clamp(36px,5.2vw,62px)!important;line-height:1.05!important;font-weight:800!important;margin:0 0 20px!important}
html body .vc-hero .vc-hero-copy,html body .vc-hero p{color:var(--b-body)!important;font-size:19px!important;line-height:1.6!important;max-width:660px;margin:0 auto 26px!important}
html body .vc-hero .vc-benefits{display:flex!important;flex-wrap:wrap;justify-content:center;gap:10px 26px!important;margin:0 0 56px!important;padding:0!important}
html body .vc-hero .vc-benefits li{color:var(--b-navy)!important;font-weight:600;display:flex;align-items:center;gap:8px;padding:0!important;background:none!important}
html body .vc-hero .vc-benefits li::before{display:none!important}
html body .vc-hero .vc-benefits .vc-check,html body .vc-hero .vc-benefits .vc-check .vc-icon{width:22px!important;height:22px!important;border-radius:50%!important;background:var(--b-blue)!important;color:#fff!important;display:inline-grid!important;place-items:center;border:0!important}
html body .vc-hero .vc-benefits .vc-check svg{width:13px!important;height:13px!important;stroke:#fff!important;color:#fff!important}
html body .vc-hero .vc-benefits .vc-check svg path{stroke:#fff!important;stroke-width:3.2!important}
/* vluchtcheck-kaart steekt half onder de hero uit */
html body .vc-hero .vc-flight-search{position:relative;display:grid!important;grid-template-columns:56px 1fr auto;align-items:center;gap:18px;max-width:980px;margin:0 auto -48px!important;padding:22px 22px 22px 26px!important;
  background:#fff!important;border:1px solid var(--b-line)!important;border-radius:var(--b-r-lg)!important;box-shadow:0 24px 48px -24px rgba(5,22,76,.28)!important;text-align:left;text-decoration:none}
html body .vc-hero .vc-flight-search-icon{width:56px;height:56px;border-radius:16px;background:var(--b-lbg)!important;color:var(--b-blue)!important;display:grid;place-items:center}
html body .vc-hero .vc-flight-search-icon svg{width:26px;height:26px;stroke:var(--b-blue)!important}
html body .vc-hero .vc-flight-search-text strong{display:block;color:var(--b-navy)!important;font-size:20px;font-weight:800}
html body .vc-hero .vc-flight-search-text small{display:block;color:var(--b-body)!important;font-size:15px;margin:2px 0 0!important;padding:0!important}
html body .vc-hero .vc-flight-search-button{padding:16px 24px!important;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
html body .vc-hero .vc-flight-search-button svg{stroke:var(--b-navy)!important;width:18px;height:18px}
html body .vc-hero + .vc-section{padding-top:112px!important}

/* ---------- secties & kaarten ---------- */
html body .vc-section{background:#fff!important}
html body .vc-section:nth-of-type(even),html body .vc-steps-section,html body .cb-grey,html body .vc-faq-section{background:var(--b-lg)!important}
html body .vc-card,html body .vc-problem-card,html body .vc-help-card,html body .vc-step,html body .vc-news-card,html body .blog-card,html body .vc-faq-item,html body .vc-airline-card,html body .vc-seo-topics a{
  background:#fff!important;border:1px solid var(--b-line)!important;border-radius:var(--b-r)!important;box-shadow:none!important}
html body .vc-problem-card:hover,html body .vc-help-card:hover,html body .blog-card:hover,html body .vc-airline-card:hover,html body .vc-news-card:hover{border-color:var(--b-blue)!important}
html body .vc-icon,html body .vc-problem-icon,html body [class*=vc-tone-]{background:var(--b-lbg)!important;color:var(--b-blue)!important;border-radius:14px!important}
html body .vc-problem-icon svg,html body .vc-icon svg{stroke:var(--b-blue)!important}
html body .vc-problem-link{color:var(--b-blue)!important}

/* ---------- vergelijking: blauw paneel vs licht paneel ---------- */
html body .vc-home .vc-compare-panel--primary,html body .vc-compare-primary{background:var(--b-blue)!important;border:0!important;border-radius:var(--b-r-lg)!important}
html body .vc-home .vc-compare-panel--primary *{color:#fff!important}
html body .vc-home .vc-compare-panel--primary .vc-compare-tag{background:rgba(255,255,255,.16)!important;color:#fff!important;border-radius:999px}
html body .vc-home .vc-compare-panel--primary li{border-color:rgba(255,255,255,.2)!important}
html body .vc-home .vc-compare-points--positive .vc-compare-mark{background:#fff!important;border:0!important}
html body .vc-home .vc-compare-points--positive .vc-compare-mark svg,html body .vc-home .vc-compare-points--positive .vc-compare-mark path{stroke:var(--b-blue)!important;color:var(--b-blue)!important}
html body .vc-home .vc-compare-points--positive .vc-compare-mark .vc-icon{background:transparent!important}
html body .vc-home .vc-compare-panel--muted{background:#fff!important;border:1px solid var(--b-line)!important;border-radius:var(--b-r-lg)!important}
html body .vc-home .vc-compare-points--negative .vc-compare-mark{background:var(--b-lg)!important;border:0!important}
html body .vc-home .vc-compare-points--negative .vc-compare-mark svg,html body .vc-home .vc-compare-points--negative .vc-compare-mark path{stroke:#6b7593!important}
html body .vc-home .vc-compare-points--negative .vc-compare-mark .vc-icon{background:transparent!important}

/* ---------- vluchtcheck-overzicht + bedragen ---------- */
html body .vc-claim-overview,html body .vc-claim-steps-panel{background:var(--b-navy)!important;background-image:none!important;border-radius:var(--b-r-lg)!important}
html body .vc-claim-steps-panel *{color:#fff!important}
html body .vc-claim-steps-panel .vc-eyebrow{color:var(--b-orange)!important}
html body .vc-claim-steps-panel .vc-about-number{background:var(--b-blue)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
html body .vc-claim-steps-panel .vc-claim-panel-button{color:var(--b-navy)!important}
html body .vc-compensation-panel{background:#fff!important;border:1px solid var(--b-line)!important;border-radius:var(--b-r-lg)!important}
html body .vc-comp-bar,html body .vc-compensation-row{background:var(--b-lbg)!important;color:var(--b-navy)!important}
html body .vc-comp-bar:last-child,html body .vc-compensation-row:last-child{background:var(--b-blue)!important}
html body .vc-compensation-row:last-child *{color:#fff!important}
html body .vc-compensation-row b{color:var(--b-blue)}

/* ---------- stappen ---------- */
html body .vc-step-number,html body .vc-step [class*=number]{background:var(--b-navy)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:0!important}
html body .vc-step h3{color:var(--b-navy)!important}

/* ---------- CTA-band: diepblauw met oranje knop en vliegboog ---------- */
html body .vc-cta-band{position:relative;overflow:hidden;background:var(--b-deep)!important;background-image:none!important;border-radius:var(--b-r-lg)!important}
html body .vc-cta-band::after{content:"";position:absolute;right:-80px;top:-120px;width:420px;height:420px;border-radius:50%;border:2px dashed rgba(255,255,255,.28);pointer-events:none}
html body .vc-cta-band h2,html body .vc-cta-band p,html body .vc-cta-band-copy *{color:#fff!important}
html body .vc-cta-band .vc-eyebrow{color:var(--b-orange)!important}
html body .vc-cta-band-icon,html body .vc-cta-band-icon .vc-icon{background:rgba(255,255,255,.14)!important;color:#fff!important}
html body .vc-cta-band-icon svg{stroke:#fff!important}
html body .vc-cta-band-button{position:relative;z-index:1}

/* ---------- FAQ ---------- */
html body .vc-faq-item summary,html body .vc-faq-item button{color:var(--b-navy)!important;font-weight:700}
html body .vc-faq-item[open]{border-color:var(--b-blue)!important}

/* ---------- blog-hero ---------- */
html body .vc-blog-hero{background:var(--b-lg)!important;background-image:none!important}
html body .vc-blog-hero h1{color:var(--b-navy)!important}
html body .vc-blog-hero p{color:var(--b-body)!important}
html body .vc-blog-hero .eyebrow,html body .vc-blog-hero .vc-eyebrow{color:var(--b-blue)!important}

/* ---------- footer ---------- */
html body .site-footer,html body .cb-footer,html body .vc-footer{background:var(--b-navy)!important;background-image:none!important}
html body .cb-footer *,html body .vc-footer *{color:rgba(255,255,255,.78)}
html body .cb-footer h2,html body .cb-footer h3,html body .cb-footer h4,html body .cb-footer strong{color:#fff!important}
html body .cb-footer a:not(.cb-btn){color:rgba(255,255,255,.78)!important}
html body .cb-footer a:not(.cb-btn):hover{color:#fff!important}
html body .cb-footer .cb-btn{color:var(--b-navy)!important}
html body .vc-footer-bottom{border-top:1px solid rgba(255,255,255,.14)!important}

/* ---------- focus ---------- */
html body :focus-visible{outline:3px solid var(--b-blue)!important;outline-offset:2px}

/* ---------- mobiel ---------- */
@media (max-width:760px){
  html body .vc-hero{padding:56px 0 0!important}
  html body .vc-hero::before{width:320px;height:320px;right:-140px;top:-120px}
  html body .vc-hero::after{display:none}
  html body .vc-hero .vc-hero-copy,html body .vc-hero p{font-size:17px!important}
  html body .vc-hero .vc-benefits{flex-direction:column;align-items:flex-start;max-width:280px;margin:0 auto 36px!important}
  html body .vc-hero .vc-flight-search{grid-template-columns:48px 1fr;padding:18px!important;border-radius:20px!important}
  html body .vc-hero .vc-flight-search-icon{width:48px;height:48px}
  html body .vc-hero .vc-flight-search-button{grid-column:1/-1;justify-content:center}
  html body .vc-cta-band::after{display:none}
}

/* ---------- 12.0 correcties: hogere specificiteit ---------- */
html body .vc-home .vc-hero{text-align:left}
html body .vc-home .vc-hero-grid{max-width:calc(50% - 24px)!important}
html body .vc-home .vc-hero-copy-wrap{margin:0!important;max-width:none}
html body .vc-home .vc-hero .vc-benefits{justify-content:flex-start}
html body .vc-home .vc-hero p,html body .vc-home .vc-hero .vc-hero-copy,html body .vc-home .vc-hero small{color:var(--b-body)!important;margin-left:0!important}
html body .vc-home .vc-hero li{color:var(--b-navy)!important}
html body .vc-home .vc-hero .vc-flight-search-icon{display:grid!important;order:0}
html body .vc-home .vc-hero .vc-flight-search-text{order:1;padding-left:0!important}
html body .vc-home .vc-hero .vc-flight-search-text strong{display:block!important}
html body .vc-home .vc-hero .vc-flight-search-button{order:2}
html body .vc-home .vc-hero .vc-flight-search{max-width:none;margin-left:0!important;margin-right:0!important}
html body .vc-home .vc-compare-grid--clean .vc-compare-panel--primary,html body .vc-home .vc-compare-panel--primary{background:var(--b-blue)!important;background-image:none!important;border:0!important}
html body .vc-home .vc-compare-panel--primary .vc-compare-tag,html body .vc-home .vc-compare-panel--primary .vc-compare-lead,html body .vc-home .vc-compare-panel--primary li span:not(.vc-compare-mark){color:rgba(255,255,255,.85)!important;opacity:1}
html body .vc-home .vc-compare-panel--muted{background:var(--b-lg)!important;border:0!important}
html body .vc-home .vc-compare-points--negative .vc-compare-mark{background:#fff!important}
html body .vc-home .vc-claim-steps-panel{background:var(--b-navy)!important}
@media (max-width:860px){
  html body .vc-home .vc-hero-grid{max-width:none!important}
}
html body .vc-home .vc-compare-panel--primary .vc-compare-tag,html body .vc-home .vc-compare-panel--primary .vc-compare-tag *{background:none!important;box-shadow:none!important;text-shadow:none!important}
html body .vc-home .vc-compensation-row:last-child,html body .vc-home .vc-compensation-row:last-child *{background-color:var(--b-blue)!important;color:#fff!important}
html body .vc-home .vc-compensation-row:last-child b{color:#fff!important}
@media (max-width:760px){html body .vc-home .vc-hero .vc-benefits{align-items:flex-start;max-width:none;margin:0 0 32px!important}}
