/**
 * Vetkanaal Reinigers – Theme component CSS
 * Design system: blue (#0A1E3D–#1E4D99), red (#E8420A), Plus Jakarta Sans + Inter.
 * All section widgets use these classes. Styles are overridable per-widget via Elementor.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Force full-width everywhere + remove ALL Elementor default spacing ── */
/* NOTE: NEVER set overflow-x: hidden on html/body — it breaks position:sticky. */
/* We use overflow-x: clip on body only (clip is sticky-safe, hidden is not). */
html, body { width: 100%; max-width: 100%; margin: 0; padding: 0; overflow-x: clip; overflow-y: visible; }
body { transform: none !important; }
.vr-site-wrapper { width: 100%; max-width: 100%; margin: 0; padding: 0; overflow: visible; position: static; }
.vr-main, .vr-full-width-main { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
#primary, #content, .site-content, .entry-content { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }

/* ── ZERO OUT all Elementor default spacing/padding/margins ── */
/* Elementor adds default 15px padding to columns and margins to widgets — remove all */
.elementor { margin: 0 !important; padding: 0 !important; }
.elementor-section { margin: 0 !important; padding: 0 !important; max-width: 100% !important; width: 100% !important; }
.elementor-section-wrap { margin: 0 !important; padding: 0 !important; max-width: 100% !important; width: 100% !important; }
.elementor-inner { margin: 0 !important; padding: 0 !important; max-width: 100% !important; width: 100% !important; }
.elementor-container { margin: 0 !important; padding: 0 !important; max-width: 100% !important; width: 100% !important; }
.elementor-row { margin: 0 !important; padding: 0 !important; max-width: 100% !important; width: 100% !important; }
.elementor-column { margin: 0 !important; padding: 0 !important; }
.elementor-col-100 { padding: 0 !important; margin: 0 !important; }
.elementor-widget-wrap { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
.elementor-widget { margin: 0 !important; padding: 0 !important; max-width: 100% !important; }
.elementor-widget-container { margin: 0 !important; padding: 0 !important; max-width: 100% !important; }

/* Remove Elementor boxed layout constraints */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: 100% !important; width: 100% !important; }

/* WordPress content width */
.wp-block, .alignwide, .alignfull { max-width: 100% !important; }

:root {
  --blue-900: #0A1E3D;
  --blue-800: #0F2D5C;
  --blue-700: #163A73;
  --blue-600: #1E4D99;
  --blue-100: #E8EFFE;
  --blue-50:  #F0F4FF;
  --red:      #E8420A;
  --red-dark: #C03208;
  --red-light:#FFF0EB;
  --gray-900: #111827;
  --gray-700: #374151;
  --gray-500: #6B7280;
  --gray-300: #D1D5DB;
  --gray-100: #F5F7FA;
  --white:    #FFFFFF;
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Inter', sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.07);
  --shadow-md: 0 4px 20px rgba(0,0,0,.09);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.13);
  --max-w: 1140px;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--white); color: var(--gray-900); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }

/* ── Utilities ── */
.vr-container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.vr-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  padding: 14px 26px; border-radius: var(--radius-md);
  border: 2px solid transparent; cursor: pointer; transition: all .18s ease;
  white-space: nowrap;
}
.vr-btn-primary   { background: var(--red); color: var(--white); border-color: var(--red); }
.vr-btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(232,66,10,.3); }
.vr-btn-outline-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,.4); }
.vr-btn-outline-white:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); }
.vr-btn-outline-blue { background: transparent; color: var(--blue-800); border-color: var(--blue-800); }
.vr-btn-outline-blue:hover { background: var(--blue-50); }
.vr-btn-dark { background: var(--blue-800); color: var(--white); border-color: var(--blue-800); }
.vr-btn-dark:hover { background: var(--blue-700); border-color: var(--blue-700); }

.vr-eyebrow {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--red);
  margin-bottom: 12px; display: block;
}
.vr-section-title {
  font-family: var(--font-display); font-size: 34px; font-weight: 800;
  color: var(--gray-900); line-height: 1.15; margin-bottom: 16px;
}
.vr-section-lead { font-size: 17px; color: var(--gray-500); line-height: 1.7; max-width: 560px; }

/* ── Section helpers ── */
.vr-section { padding: 88px 0; }
.vr-section-alt { background: var(--gray-100); }
.vr-section-dark { background: var(--blue-800); }
.vr-section-dark .vr-section-title { color: var(--white); }
.vr-section-dark .vr-section-lead { color: rgba(255,255,255,.65); }
.vr-section-dark .vr-eyebrow { color: var(--red); }

/* ── Top bar ── */
/* Topbar scrolls naturally with the page. Only .vr-header is sticky.
   We intentionally do NOT wrap topbar/urgency/header into a sticky unit —
   the urgency bar lives in the page content (different Elementor template)
   and moving DOM nodes across templates broke layout (white space, re-ordering). */
.vr-topbar {
  background: var(--blue-900);
  padding: 10px 0;
  font-size: 13px;
  font-family: var(--font-display);
  font-weight: 600;
  color: rgba(255,255,255,.75);
  position: relative;
  z-index: 999997;
}
.vr-topbar .vr-container {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
}
.vr-topbar a { color: var(--white); }
.vr-topbar-items { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.vr-topbar-item { display: flex; align-items: center; gap: 6px; }
.vr-topbar-item svg { stroke: var(--red); flex-shrink: 0; }
.vr-topbar-phone {
  display: flex; align-items: center; gap: 8px;
  background: var(--red); color: var(--white);
  padding: 6px 14px; border-radius: 99px;
  font-weight: 700; font-size: 13px;
}
.vr-topbar-phone svg { stroke: var(--white); }
/* Urgency bar — scrolls naturally with the page (not sticky). */
.vr-urgency { position: relative; z-index: 999997; }

/* ── Header / Nav ── */
/* Sticky header — CSS position:sticky is the sole mechanism.
   Ancestors must NOT have overflow/transform/filter (handled below).
   No JS fallback to position:fixed — it caused permanent white-space on scroll back. */
.vr-header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-300);
  position: sticky;
  top: 0;
  z-index: 999999 !important;
  box-shadow: var(--shadow-sm);
  width: 100%;
}
/* Visual change when scrolled */
.vr-header.is-scrolled { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
/* Mobile nav drawer — below header */
.vr-nav.is-open { z-index: 999990 !important; }
/* Dropdown submenu — high z-index so it shows above all sections */
.vr-nav-item { position: relative !important; z-index: auto; }
.vr-dropdown { z-index: 999992 !important; }
.vr-dropdown-inner { z-index: 999993 !important; }
/* Only neutralize overflow/transform on the header's wrapping section (not ALL sections).
   Do NOT force position:static on all Elementor sections — that breaks dropdown stacking. */
.elementor-widget-vr_header_nav,
.elementor-widget-vr_header_nav .elementor-widget-container,
.elementor-section-wrap > .elementor-section:has(.vr-header),
.elementor-section:has(.vr-header) .elementor-container,
.elementor-section:has(.vr-header) .elementor-row,
.elementor-section:has(.vr-header) .elementor-column,
.elementor-section:has(.vr-header) .elementor-widget-wrap {
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}
/* body/html: overflow-x: clip (sticky-safe), no transform */
html, body { overflow-x: clip !important; overflow-y: visible !important; }
body { transform: none !important; }
.vr-site-wrapper { overflow: visible !important; transform: none !important; }
/* ── Voorna label SVG colors — explicit, not currentColor ── */
/* (kept for backwards compat — main rules now live in the Voor/Na section) */
.vr-header .vr-container {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; gap: 32px;
}
.vr-logo {
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
  color: var(--blue-800); display: flex; align-items: center; gap: 10px;
}
.vr-logo-mark {
  width: 36px; height: 36px;
  background: var(--blue-800); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.vr-logo-mark svg { stroke: var(--white); }
.vr-nav { display: flex; align-items: center; gap: 4px; }
.vr-nav a {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--gray-700); padding: 8px 14px; border-radius: var(--radius-md);
  transition: all .15s;
}
.vr-nav a:hover { color: var(--blue-800); background: var(--blue-50); }
.vr-nav-cta {
  background: var(--blue-800); color: var(--white) !important;
  padding: 10px 20px !important; border-radius: var(--radius-md);
}
.vr-nav-cta:hover { background: var(--blue-700) !important; }

/* Dropdown */
.vr-nav-item { position: relative; }
.vr-nav-item > a { display: flex; align-items: center; gap: 5px; }
.vr-nav-item > a svg { transition: transform .2s; }
.vr-nav-item:hover > a svg,
.vr-nav-item.is-open > a svg { transform: rotate(180deg); }
/* Invisible padding bridge so hovering from the link to the dropdown doesn't break.
   Generous 16px bridge makes it much easier to keep the submenu open while
   moving the mouse from the trigger link down to the submenu items. */
.vr-nav-item::after {
  content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 16px;
}
.vr-dropdown {
  position: absolute; top: 100%; left: 0; padding-top: 16px;
  z-index: 200;
}
.vr-dropdown-inner {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 260px;
  padding: 8px;
  opacity: 0; pointer-events: none;
  transform: translateY(-6px);
  /* Slower open/close transition + visibility timing so the submenu
     doesn't snap shut the instant the cursor leaves the trigger. */
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 200;
  visibility: hidden;
}
/* Open state: triggered by either pure CSS :hover OR JS-added .is-open class
   (the JS adds a delayed close so quick mouse excursions don't close it). */
.vr-nav-item:hover .vr-dropdown-inner,
.vr-nav-item.is-open .vr-dropdown-inner {
  opacity: 1; pointer-events: all; transform: translateY(0);
  visibility: visible;
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
.vr-dropdown a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-md);
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--gray-700); transition: all .13s;
}
.vr-dropdown a:hover { background: var(--blue-50); color: var(--blue-800); }
.vr-dropdown-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--blue-50); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.vr-dropdown-icon svg { stroke: var(--blue-800); }
.vr-dropdown a:hover .vr-dropdown-icon { background: var(--blue-100); }

/* Mobile toggle */
.vr-nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: 8px; width: 40px; height: 40px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  position: relative; z-index: 200;
}
.vr-nav-toggle span { display: block; width: 24px; height: 2px; background: var(--blue-800); transition: transform .25s ease, opacity .25s ease; }
.vr-nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vr-nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.vr-nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Urgency bar ── */
.vr-urgency {
  background: var(--red);
  padding: 12px 0; text-align: center;
}
.vr-urgency .vr-container {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--white);
  flex-wrap: wrap;
}
.vr-urgency svg { stroke: var(--white); flex-shrink: 0; }
.vr-urgency a { color: var(--white); text-decoration: underline; }

/* ── Hero ── */
.vr-hero {
  background: var(--blue-800);
  padding: 80px 0 0;
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}
.vr-hero::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--red);
}
.vr-hero-grid {
  display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: center;
}
.vr-hero-content { padding-bottom: 80px; }
/* Remove default Elementor widget bottom margin so trustbar sits flush */
.elementor-widget-vr_hero { margin-bottom: 0 !important; }
.elementor-widget-vr_trust_bar { margin-bottom: 0 !important; }
.vr-hero-title {
  font-family: var(--font-display); font-size: 52px; font-weight: 800;
  color: var(--white); line-height: 1.08; margin-bottom: 20px;
}
.vr-hero-title span { color: var(--red); }
.vr-hero-lead { font-size: 17px; color: rgba(255,255,255,.72); line-height: 1.7; margin-bottom: 32px; max-width: 480px; }
.vr-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 40px; }
.vr-hero-trust { display: flex; gap: 24px; flex-wrap: wrap; }
.vr-hero-trust-item {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.7);
}
.vr-hero-trust-item svg { stroke: var(--red); flex-shrink: 0; }

/* Hero form card */
.vr-hero-card {
  background: var(--white);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 36px 32px 0;
  box-shadow: var(--shadow-lg);
  align-self: flex-end;
  position: relative;
  z-index: 2;
}
.vr-hero-card-title {
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
  color: var(--gray-900); margin-bottom: 4px;
}
.vr-hero-card-sub { font-size: 13px; color: var(--gray-500); margin-bottom: 24px; }
.vr-rating-inline {
  display: flex; align-items: center; gap: 8px;
  background: var(--gray-100); padding: 8px 12px; border-radius: var(--radius-md);
  margin-bottom: 20px;
}
.vr-stars { display: flex; gap: 2px; }
.vr-star { color: #F59E0B; font-size: 15px; }
.vr-rating-text { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--gray-900); }
.vr-rating-sub  { font-size: 12px; color: var(--gray-500); }

/* ── Forms (native, replaces Contact Form 7) ── */
.vr-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vr-field { margin: 0; }
.vr-field-label {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 5px;
}
.vr-field-req { color: var(--red); }
.vr-field input, .vr-field select, .vr-field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--gray-900);
  background: var(--white);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
.vr-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.vr-field input:focus, .vr-field select:focus, .vr-field textarea:focus {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(30, 77, 153, .12);
}
.vr-field input[aria-invalid="true"],
.vr-field textarea[aria-invalid="true"],
.vr-field select[aria-invalid="true"] {
  border-color: var(--red);
  background: rgba(232, 66, 10, .04);
}
.vr-field textarea { resize: vertical; min-height: 80px; }

/* Submit button */
.vr-form-submit {
  position: relative;
  width: 100%;
  font-size: 16px;
  padding: 15px;
  justify-content: center;
  border-radius: var(--radius-md);
  margin-top: 4px;
  cursor: pointer;
}
.vr-form-submit[disabled] { opacity: .7; cursor: wait; }
.vr-form-submit-spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: var(--white);
  border-radius: 50%;
  margin-left: 8px;
  animation: vr-spin .7s linear infinite;
}
.vr-form-submit[disabled] .vr-form-submit-spinner { display: inline-block; }
@keyframes vr-spin { to { transform: rotate(360deg); } }

.vr-form-note {
  font-size: 12px;
  color: var(--gray-500);
  text-align: center;
  margin-top: 4px;
}

/* Success / error / validation messages */
.vr-form-message {
  display: none;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  margin-top: 8px;
}
.vr-form-message[hidden] { display: none !important; }
.vr-form-message:not([hidden]) { display: block; }
.vr-form-message-success {
  background: rgba(46, 125, 50, .08);
  border: 1px solid #2e7d32;
  color: #2e7d32;
}
.vr-form-message-error {
  background: rgba(232, 66, 10, .08);
  border: 1px solid var(--red);
  color: var(--red);
}
.vr-form-message-validation {
  background: rgba(232, 66, 10, .08);
  border: 1px solid var(--red);
  color: var(--red);
}
/* When a success message is showing, hide the form fields + submit */
.vr-form.is-success .vr-field,
.vr-form.is-success .vr-form-submit,
.vr-form.is-success .vr-form-note,
.vr-form.is-success .vr-form-message-validation,
.vr-form.is-error .vr-form-message-success { display: none !important; }

/* Legacy field rules kept for backward compat with older markup */
.vr-field label { display: block; font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--gray-700); margin-bottom: 5px; }
.vr-form-submit { width: 100%; font-size: 16px; padding: 15px; justify-content: center; border-radius: var(--radius-md); margin-bottom: 12px; }

/* ── Trust bar ── */
.vr-trustbar {
  background: var(--blue-900);
  padding: 18px 0;
}
.vr-trustbar .vr-container {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
}
.vr-trust-item {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.85);
}
.vr-trust-item svg { stroke: var(--red); flex-shrink: 0; }

/* MOBILE: trust bar → 1 item per row (vertical list) */
@media (max-width: 768px) {
  .vr-trustbar .vr-container {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }
  .vr-trust-item {
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 6px 4px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  .vr-trustbar { padding: 16px 0 !important; }
}
@media (max-width: 480px) {
  .vr-trust-item { font-size: 12px !important; gap: 8px !important; }
  .vr-trustbar .vr-container { gap: 8px !important; }
}

/* ── Diensten cards ── */
.vr-diensten-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
/* Diensten page: 2 columns when featured card present.
   !important is required here because Elementor injects an inline
   `.elementor-{page} .elementor-{element} .vr-diensten-grid { grid-template-columns: repeat(3,1fr) }`
   rule (from the widget's "columns" control) that has higher specificity
   and would otherwise win, producing a 3+1 layout instead of 2x2. */
.vr-diensten-grid:has(.vr-dienst-featured) { grid-template-columns: repeat(2, 1fr) !important; }
.vr-dienst-card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.vr-dienst-card:hover { border-color: var(--blue-600); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.vr-dienst-card.is-featured { border-color: var(--blue-600); border-width: 2px; }
.vr-dienst-card.is-highlight { border-color: var(--blue-600); border-width: 2px; background: var(--blue-50); }
.vr-dienst-icon {
  width: 48px; height: 48px;
  background: var(--blue-50); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.vr-dienst-icon.is-highlight { background: var(--blue-100); }
.vr-dienst-icon svg { stroke: var(--blue-800); }
.vr-dienst-card h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin-bottom: 10px; color: var(--gray-900); }
.vr-dienst-card p  { font-size: 14px; color: var(--gray-500); line-height: 1.65; margin-bottom: 16px; flex: 1; }
.vr-dienst-link {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  color: var(--blue-800); display: inline-flex; align-items: center; gap: 4px; margin-top: auto;
}
.vr-dienst-link:hover { color: var(--red); }
.vr-dienst-checklist { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.vr-dienst-checklist li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-700); }
.vr-dienst-checklist li svg { stroke: var(--blue-800); flex-shrink: 0; }

/* Featured service (diensten page) */
.vr-dienst-featured {
  background: var(--blue-800);
  border-radius: var(--radius-xl);
  padding: 36px;
  position: relative; overflow: hidden;
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: center;
  color: var(--white);
}
.vr-dienst-featured::before { content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--red); }
.vr-dienst-featured-badge { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; display: block; }
.vr-dienst-featured h3 { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--white); line-height: 1.15; margin-bottom: 12px; }
.vr-dienst-featured > div:first-child p { font-size: 15px; color: rgba(255,255,255,.7); line-height: 1.7; margin-bottom: 24px; }
.vr-dienst-featured-list { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 24px; }
.vr-dienst-featured-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.75); }
.vr-dienst-featured-list li svg { stroke: var(--red); flex-shrink: 0; }
.vr-dienst-featured-visual { background: rgba(255,255,255,.07); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; min-height: 220px; position: relative; overflow: hidden; }
.vr-dienst-featured-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.vr-dienst-featured-visual > svg { stroke: rgba(255,255,255,.2); }
.vr-floating-trust {
  position: absolute; bottom: -20px; left: -24px;
  background: var(--white); border-radius: var(--radius-lg);
  padding: 14px 18px; box-shadow: 0 8px 32px rgba(0,0,0,.18);
  display: flex; align-items: center; gap: 14px; max-width: 300px; z-index: 2;
}
.vr-floating-trust .num { font-family: var(--font-display); font-size: 36px; font-weight: 800; color: var(--blue-800); line-height: 1; flex-shrink: 0; }
.vr-floating-trust .vr-stars { display: flex; gap: 2px; margin-bottom: 4px; }
.vr-floating-trust .sub { font-size: 11px; color: var(--gray-500); line-height: 1.4; }
@media (max-width: 960px) {
  .vr-dienst-featured { grid-template-columns: 1fr; }
  .vr-diensten-grid:has(.vr-dienst-featured) { grid-template-columns: 1fr; }
}

/* ── Verplicht / insurance section ── */
.vr-verplicht-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.vr-verplicht-list { list-style: none; margin: 24px 0 32px; display: flex; flex-direction: column; gap: 12px; }
.vr-verplicht-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15px; color: var(--gray-700);
}
.vr-check-icon {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px;
  background: var(--blue-100); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.vr-check-icon svg { stroke: var(--blue-800); }
.vr-verplicht-visual {
  background: var(--blue-50);
  border-radius: var(--radius-xl);
  padding: 40px;
  display: flex; flex-direction: column; gap: 16px;
}
.vr-stat-block {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-300);
}
.vr-stat-block .num {
  font-family: var(--font-display); font-size: 40px; font-weight: 800;
  color: var(--blue-800); line-height: 1;
}
.vr-stat-block .num span { color: var(--red); }
.vr-stat-block .label { font-size: 14px; color: var(--gray-500); margin-top: 4px; }
.vr-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vr-stat-block.is-dark { background: var(--blue-800); border-color: transparent; }
.vr-stat-block.is-dark .vr-stat-dark-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.vr-stat-block.is-dark .vr-stat-dark-sub { font-size: 13px; color: rgba(255,255,255,.6); }

/* ── Insurance section intro paragraph (VR_Widget_Insurance_Section) ── */
.vr-verplicht-intro { font-size: 15px; color: var(--gray-500); line-height: 1.7; margin-bottom: 8px; }

/* ── Hero inspection form (VR_Widget_Hero) ── */
.vr-inspection-form { display: flex; flex-direction: column; }

/* ── Stappen ── */
.vr-stappen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 48px; position: relative; }
.vr-stappen-grid::before {
  content: '';
  position: absolute; top: 32px; left: calc(33.33% + 20px); right: calc(33.33% + 20px);
  height: 2px; background: var(--gray-300); pointer-events: none;
}
.vr-step-card { padding: 0 24px; text-align: center; }
.vr-step-num-wrap {
  width: 64px; height: 64px; margin: 0 auto 20px;
  background: var(--blue-800); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 24px; font-weight: 800;
  color: var(--white); position: relative; z-index: 1;
}
.vr-step-card:first-child .vr-step-num-wrap { background: var(--red); }
.vr-step-card h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.vr-step-card p  { font-size: 14px; color: var(--gray-500); line-height: 1.65; }

/* ── Werkwijze stappen (service detail) ── */
.vr-stap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.vr-stap-card {
  background: var(--white); border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg); padding: 24px; text-align: center;
}
.vr-stap-num {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--blue-800); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  margin: 0 auto 14px;
}
.vr-stap-card:first-child .vr-stap-num { background: var(--red); }
.vr-stap-card h4 { font-family: var(--font-display); font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.vr-stap-card p { font-size: 13px; color: var(--gray-500); line-height: 1.6; }

/* ── Voor / Na ── */
.vr-voorna-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.vr-voorna-card {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--gray-300);
  background: var(--white);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.vr-voorna-label {
  padding: 12px 20px;
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.vr-voorna-voor .vr-voorna-label { background: var(--red-light); color: var(--red-dark); }
.vr-voorna-na  .vr-voorna-label { background: var(--blue-100); color: var(--blue-800); }
.vr-voorna-voor .vr-voorna-label svg { stroke: var(--red-dark); flex-shrink: 0; }
.vr-voorna-na  .vr-voorna-label svg { stroke: var(--blue-800); flex-shrink: 0; }
.vr-voorna-img {
  height: 260px; background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--gray-500);
  overflow: hidden;
}
.vr-voorna-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vr-voorna-text { padding: 16px 20px; font-size: 13px; color: var(--gray-500); line-height: 1.6; }

/* ── FAQ ── */
.vr-faq-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 48px; }
.vr-faq-list { margin-top: 0; display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.vr-faq-item {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.vr-faq-q {
  width: 100%; padding: 20px 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--gray-900);
}
.vr-faq-q svg { stroke: var(--gray-500); flex-shrink: 0; transition: transform .2s; }
.vr-faq-item.open .vr-faq-q svg { transform: rotate(45deg); stroke: var(--blue-800); }
.vr-faq-a { display: none; padding: 0 24px 20px; font-size: 14px; color: var(--gray-500); line-height: 1.7; }
.vr-faq-item.open .vr-faq-a { display: block; }

/* ── CTA sectie ── */
.vr-cta-box {
  background: var(--blue-800);
  border-radius: var(--radius-xl);
  padding: 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.vr-cta-box::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--red);
}
.vr-cta-box h2 {
  font-family: var(--font-display); font-size: 36px; font-weight: 800;
  color: var(--white); margin-bottom: 12px;
}
.vr-cta-box p { font-size: 16px; color: rgba(255,255,255,.65); margin-bottom: 32px; }
.vr-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Page hero (inner pages) ── */
.vr-page-hero {
  background: var(--blue-800);
  padding: 72px 0;
  position: relative;
  overflow: hidden;
}
.vr-page-hero::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--red);
}
.vr-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.5); margin-bottom: 16px; font-family: var(--font-display); }
.vr-breadcrumb a { color: rgba(255,255,255,.5); }
.vr-breadcrumb a:hover { color: var(--white); }
.vr-page-hero-title { font-family: var(--font-display); font-size: 44px; font-weight: 800; color: var(--white); line-height: 1.1; margin-bottom: 16px; }
.vr-page-hero-title span { color: var(--red); }
.vr-page-hero-lead { font-size: 16px; color: rgba(255,255,255,.7); line-height: 1.75; margin-bottom: 28px; }
.vr-page-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Page hero with sidebar form */
.vr-page-hero-grid { display: grid; grid-template-columns: 1fr 360px; gap: 64px; align-items: center; }
.vr-sidebar-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-lg);
}
.vr-sidebar-card-title { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--gray-900); margin-bottom: 4px; }
.vr-sidebar-card-sub { font-size: 13px; color: var(--gray-500); margin-bottom: 20px; }

/* ── Content layout (service detail) ── */
.vr-content-layout { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; }
.vr-content-layout h2.vr-section-title { font-size: 28px; }
.vr-content-layout p { font-size: 15px; color: var(--gray-700); line-height: 1.75; margin-bottom: 16px; }
/* Sticky sidebar inside content-layout (same as news-detail-sidebar) */
.vr-content-sidebar {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: start;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
.vr-highlight-box {
  background: var(--blue-50); border-left: 4px solid var(--blue-800);
  border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 20px 24px; margin: 28px 0;
}
.vr-highlight-box p { font-size: 15px; color: var(--gray-700); line-height: 1.7; }
.vr-check-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 16px 0 24px; }
.vr-check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--gray-700); }

/* ── Voordelen grid ── */
.vr-voordelen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; }
.vr-voordeel-card { background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius-lg); padding: 22px; }
.vr-voordeel-icon { width: 40px; height: 40px; background: var(--blue-50); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.vr-voordeel-icon svg { stroke: var(--blue-800); }
.vr-voordeel-card h4 { font-family: var(--font-display); font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.vr-voordeel-card p { font-size: 13px; color: var(--gray-500); line-height: 1.6; }

/* ── Content sidebar ── */
.vr-quick-links { background: var(--gray-100); border-radius: var(--radius-lg); padding: 20px; }
.vr-quick-links h4 { font-family: var(--font-display); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); margin-bottom: 12px; }
.vr-quick-links a { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--gray-700); padding: 8px 0; border-bottom: 1px solid var(--gray-300); transition: color .13s; }
.vr-quick-links a:last-child { border-bottom: none; }
.vr-quick-links a svg { stroke: var(--gray-400); flex-shrink: 0; }
.vr-quick-links a:hover { color: var(--blue-800); }
/* Sidebar spoed block (dark blue) */
.vr-sidebar-spoed { background: var(--blue-800); border-radius: var(--radius-lg); padding: 24px; }
.vr-sidebar-spoed .vr-sidebar-label { font-family: var(--font-display); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--red); margin-bottom: 8px; }
.vr-sidebar-spoed .vr-sidebar-phone { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--white); margin-bottom: 4px; }
.vr-sidebar-spoed .vr-sidebar-phone a { color: var(--white); }
.vr-sidebar-spoed .vr-sidebar-sub { font-size: 13px; color: rgba(255,255,255,.5); }
/* Sidebar price block (gray) */
.vr-sidebar-price { background: var(--gray-100); border-radius: var(--radius-lg); padding: 20px; }
.vr-sidebar-price .vr-sidebar-label { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--gray-700); margin-bottom: 4px; }
.vr-sidebar-price .price-value { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--blue-800); }
.vr-sidebar-price .price-suffix { font-size: 14px; font-weight: 600; color: var(--gray-500); }
.vr-sidebar-price .vr-sidebar-sub { font-size: 13px; color: var(--gray-500); margin-top: 4px; }

/* ── Comparison table ── */
/* Default (desktop) styling */
.vr-vergelijk-table-wrap { width: 100%; }
.vr-vergelijk-table { width: 100%; border-collapse: collapse; margin-top: 40px; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.vr-vergelijk-table th { background: var(--blue-800); color: var(--white); font-family: var(--font-display); font-size: 13px; font-weight: 700; padding: 14px 20px; text-align: left; }
.vr-vergelijk-table th:first-child { border-radius: var(--radius-md) 0 0 0; }
.vr-vergelijk-table th:last-child { border-radius: 0 var(--radius-md) 0 0; }
.vr-vergelijk-table td { padding: 13px 20px; font-size: 14px; color: var(--gray-700); border-bottom: 1px solid var(--gray-300); }
.vr-vergelijk-table tr:last-child td { border-bottom: none; }
.vr-vergelijk-table tr:nth-child(even) td { background: var(--gray-100); }
.vr-vergelijk-table .check { color: var(--blue-800); font-size: 18px; }
.vr-vergelijk-table .dienst-name { font-family: var(--font-display); font-weight: 700; color: var(--gray-900); }
.vr-vergelijk-table .dienst-name:hover { color: var(--red); }

/* MOBILE: Convert table to card layout (no horizontal scroll!) */
/* Inspired by incisigorta.com pattern — uses data-label attributes. */
@media (max-width: 768px) {
  .vr-vergelijk-table-wrap { overflow: visible; }
  .vr-vergelijk-table, .vr-vergelijk-table thead, .vr-vergelijk-table tbody,
  .vr-vergelijk-table th, .vr-vergelijk-table td, .vr-vergelijk-table tr {
    display: block; width: 100% !important;
  }
  /* Hide table header on mobile (we'll use data-label instead) */
  .vr-vergelijk-table thead { display: none; }
  .vr-vergelijk-table tr {
    margin-bottom: 16px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    padding: 0;
  }
  .vr-vergelijk-table tr:nth-child(even) td { background: transparent; }
  .vr-vergelijk-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-300);
    font-size: 13px;
    line-height: 1.5;
    text-align: right;
  }
  .vr-vergelijk-table td:last-child { border-bottom: none; }
  /* First column (dienst name) — full width header inside card */
  .vr-vergelijk-table td.first-column,
  .vr-vergelijk-table td:first-child {
    background: var(--blue-800);
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    padding: 14px 16px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
    text-align: left;
    justify-content: flex-start;
  }
  .vr-vergelijk-table td.first-column .dienst-name,
  .vr-vergelijk-table td:first-child .dienst-name { color: var(--white) !important; }
  /* Add label before each cell content using data-label attribute */
  .vr-vergelijk-table td:not(:first-child)::before {
    content: attr(data-label);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
    text-align: left;
    max-width: 40%;
  }
}
@media (max-width: 480px) {
  .vr-vergelijk-table td { padding: 10px 12px; font-size: 12px; gap: 10px; }
  .vr-vergelijk-table td:first-child { padding: 12px; font-size: 14px; }
  .vr-vergelijk-table td:not(:first-child)::before { font-size: 11px; }
}

/* ── News grid ── */
.vr-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.vr-news-card { background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius-lg); overflow: hidden; transition: all .2s; }
.vr-news-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.vr-news-img { height: 180px; background: var(--blue-50); display: flex; align-items: center; justify-content: center; }
.vr-news-img img { width: 100%; height: 100%; object-fit: cover; }
.vr-news-img svg { stroke: var(--blue-200, #c7d7f8); width: 48px; height: 48px; }
.vr-news-img.alt { background: var(--red-light); }
.vr-news-img.alt svg { stroke: var(--red); }
.vr-news-body { padding: 20px; }
.vr-news-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.vr-news-cat { font-family: var(--font-display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--red); background: var(--red-light); padding: 3px 8px; border-radius: 99px; }
.vr-news-card h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin-bottom: 8px; line-height: 1.3; }
.vr-news-card p { font-size: 13px; color: var(--gray-500); line-height: 1.65; margin-bottom: 14px; }

/* News detail */
.vr-article-meta { display: flex; align-items: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.vr-article-meta > span { font-size: 13px; color: rgba(255,255,255,.6); }
.vr-news-detail-layout .vr-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.5); margin-bottom: 16px; font-family: var(--font-display); }
.vr-news-detail-layout .vr-breadcrumb a { color: rgba(255,255,255,.5); }
.vr-news-detail-layout .vr-breadcrumb a:hover { color: var(--white); }
.vr-article-title { font-family: var(--font-display); font-size: 36px; font-weight: 800; color: var(--white); line-height: 1.1; margin-bottom: 16px; }
.vr-news-cat { display: inline-block; margin-bottom: 16px; }
.vr-article-featured { height: 360px; background: var(--blue-50); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin-bottom: 40px; }
.vr-article-featured svg { stroke: #c7d7f8; width: 72px; height: 72px; }
.vr-article-content { font-size: 15px; line-height: 1.8; color: var(--gray-700); }
.vr-article-content p { font-size: 15px; color: var(--gray-700); line-height: 1.8; margin-bottom: 16px; }
.vr-article-content h2 { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--gray-900); margin: 32px 0 12px; }
.vr-article-content h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--gray-900); margin: 28px 0 12px; }
.vr-article-content ul { margin: 12px 0 20px 20px; }
.vr-article-content ul li { font-size: 15px; color: var(--gray-700); line-height: 1.7; margin-bottom: 6px; }

/* ── Contact section ── */
.vr-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.vr-contact-info-item { display: flex; gap: 16px; align-items: flex-start; }
.vr-contact-info-icon { width: 44px; height: 44px; background: var(--blue-50); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vr-contact-info-icon svg { stroke: var(--blue-800); }
.vr-contact-info-item h4 { font-family: var(--font-display); font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.vr-contact-info-item p { font-size: 14px; color: var(--gray-500); }
.vr-contact-info-item a { color: var(--blue-800); font-weight: 600; }

/* ── About section ── */
.vr-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.vr-about-img { border-radius: var(--radius-xl); overflow: hidden; height: 460px; }
.vr-about-img img { width: 100%; height: 100%; object-fit: cover; }
.vr-about-points { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.vr-about-point { display: flex; gap: 14px; align-items: flex-start; }
.vr-about-point .vr-check-icon { width: 28px; height: 28px; }
.vr-about-point h4 { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--gray-900); margin-bottom: 3px; }
.vr-about-point p { font-size: 13px; color: var(--gray-500); }

/* ── Footer ── */
.vr-footer { background: var(--blue-900); padding: 64px 0 0; }
.vr-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.vr-footer-logo {
  font-family: var(--font-display); font-size: 18px; font-weight: 800;
  color: var(--white); margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
}
.vr-footer-logo-mark {
  width: 32px; height: 32px; background: var(--red);
  border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
}
.vr-footer-logo-mark svg { stroke: var(--white); }
.vr-footer-desc { font-size: 14px; color: rgba(255,255,255,.5); line-height: 1.7; margin-bottom: 20px; max-width: 280px; }
.vr-footer-contact { display: flex; flex-direction: column; gap: 8px; }
.vr-footer-contact-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.6); }
.vr-footer-contact-item svg { stroke: var(--red); flex-shrink: 0; }
.vr-footer-contact-item a { color: var(--white); font-weight: 600; }
.vr-footer-col h4 {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  color: var(--white); margin-bottom: 16px; text-transform: uppercase; letter-spacing: .06em;
}
.vr-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.vr-footer-col ul a { font-size: 14px; color: rgba(255,255,255,.5); transition: color .15s; }
.vr-footer-col ul a:hover { color: var(--white); }
.vr-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 48px; padding: 20px 0;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 13px; color: rgba(255,255,255,.35);
}
.vr-footer-emergency {
  margin-top: 24px; background: rgba(255,255,255,.06);
  border-radius: var(--radius-md); padding: 16px;
}
.vr-footer-emergency .label { font-family: var(--font-display); font-size: 12px; font-weight: 700; color: rgba(255,255,255,.5); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .06em; }
.vr-footer-emergency .phone { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--white); }
.vr-footer-emergency .sub { font-size: 12px; color: rgba(255,255,255,.4); margin-top: 2px; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .vr-content-layout { grid-template-columns: 1fr; }
  .vr-content-sidebar { position: static; }
  .vr-page-hero-grid { grid-template-columns: 1fr; }
  .vr-dienst-featured { grid-template-columns: 1fr; }
  .vr-contact-grid { grid-template-columns: 1fr; }
  .vr-about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .vr-hero-grid { grid-template-columns: 1fr; }
  .vr-hero-card { border-radius: var(--radius-xl); margin-top: 48px; padding-bottom: 32px; }
  .vr-hero-title { font-size: 38px; }
  /* Diensten grid: 2 kolon (tablet) — !important Elementor inline CSS'i geçersiz kılar */
  .vr-diensten-grid,
  .vr-diensten-grid:not(:has(.vr-dienst-featured)),
  .vr-diensten-grid:has(.vr-dienst-featured) { grid-template-columns: repeat(2, 1fr) !important; }
  /* FAQ grid: 1 kolon (tablet) */
  .vr-faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .vr-verplicht-grid { grid-template-columns: 1fr; }
  .vr-footer-grid { grid-template-columns: 1fr 1fr; }
  .vr-cta-box { padding: 40px 28px; }
  .vr-cta-box h2 { font-size: 26px; }
  .vr-news-grid { grid-template-columns: 1fr 1fr; }
  .vr-page-hero-title { font-size: 32px; }
  /* Mobile menu toggle button visible */
  .vr-nav-toggle { display: flex; }
  /* Mobile nav: drawer overlay below header */
  .vr-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: 64px; left: 0; right: 0; bottom: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-300);
    box-shadow: var(--shadow-lg);
    padding: 16px;
    z-index: 998;
    overflow-y: auto;
    max-height: calc(100vh - 64px);
  }
  .vr-nav.is-open { display: flex; z-index: 999998 !important; }
  /* When mobile nav drawer is open, hide the urgency bar and topbar so they
     don't bleed through the drawer (they live in different DOM subtrees so
     z-index alone can't reliably cover them — the urgency bar's z-index:999997
     would otherwise sit above the drawer and intercept clicks). */
  body.vr-nav-open .vr-urgency,
  body.vr-nav-open .vr-topbar { display: none !important; }
  .vr-nav a { padding: 14px 12px; border-radius: var(--radius-md); font-size: 15px; }
  .vr-nav .vr-nav-item > a { justify-content: space-between; }
  /* Hide the hover-only dropdown behaviour on mobile; use JS-toggled instead */
  .vr-nav-item::after { content: none !important; }
  .vr-nav-item:hover .vr-dropdown-inner { opacity: 0; pointer-events: none; transform: translateY(-6px); }
  .vr-nav-item.is-open .vr-dropdown-inner {
    opacity: 1; pointer-events: all; transform: translateY(0);
    position: static; box-shadow: none; border: 1px solid var(--gray-300); margin: 4px 0 8px 8px; min-width: 0;
  }
  .vr-nav.is-open .vr-dropdown { position: static; padding-top: 0; }
  /* Header is sticky at top:0 on all viewports; mobile header height = 64px.
     NOTE: Do NOT use !important on position/top here — the JS sticky-header
     script needs to override them with inline position:fixed when scrolled.
     z-index !important is OK because JS sets it via inline style. */
  .vr-header { position: sticky; top: 0; z-index: 9999 !important; }
  .vr-header .vr-container { gap: 16px; height: 64px; }
  .vr-logo { font-size: 17px; }
  .vr-logo-mark { width: 32px; height: 32px; }
  /* Topbar items: hide all but keep phone visible */
  .vr-topbar-items { gap: 12px; }
  .vr-topbar-item { font-size: 12px; }
  /* Footer CTA buttons stack */
  .vr-cta-actions { flex-direction: column; align-items: stretch; }
  .vr-cta-actions .vr-btn { width: 100%; justify-content: center; }
  /* Hero actions stack */
  .vr-hero-actions { flex-direction: column; align-items: stretch; }
  .vr-hero-actions .vr-btn { width: 100%; justify-content: center; }
  .vr-hero-trust { gap: 12px; }
}
@media (max-width: 640px) {
  .vr-section { padding: 56px 0; }
  /* Diensten grid: 1 kolon (mobiel) — !important Elementor inline CSS'i geçersiz kılar */
  .vr-diensten-grid,
  .vr-diensten-grid:not(:has(.vr-dienst-featured)),
  .vr-diensten-grid:has(.vr-dienst-featured) { grid-template-columns: 1fr !important; }
  .vr-stappen-grid { grid-template-columns: 1fr; gap: 32px; }
  .vr-stappen-grid::before { display: none; }
  .vr-voorna-grid { grid-template-columns: 1fr; }
  .vr-hero-title { font-size: 30px; }
  .vr-section-title { font-size: 26px; }
  .vr-footer-grid { grid-template-columns: 1fr; }
  .vr-topbar { display: none; }
  .vr-stat-row { grid-template-columns: 1fr; }
  .vr-voordelen-grid { grid-template-columns: 1fr; }
  .vr-news-grid { grid-template-columns: 1fr; }
  .vr-stap-grid { grid-template-columns: 1fr; }
  .vr-content-sidebar { flex-direction: column; }
  .vr-insp-layout { grid-template-columns: 1fr !important; }
  .vr-insp-grid-2 { grid-template-columns: 1fr !important; }
  .vr-cta-box { padding: 32px 20px; }
  .vr-cta-box h2 { font-size: 24px; }
  .vr-page-hero { padding: 48px 0; }
  .vr-page-hero-title { font-size: 28px; }
  .vr-hero { padding: 56px 0 0; }
  .vr-hero-content { padding-bottom: 56px; }
  .vr-hero-card { padding: 24px 20px 0; }
  .vr-hero-trust { flex-direction: column; align-items: flex-start; gap: 10px; }
  .vr-container { padding: 0 16px; }
  .vr-footer { padding: 48px 0 0; }
  .vr-footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
  .vr-news-detail-layout { grid-template-columns: 1fr; }
  .vr-news-detail-sidebar { position: static; }
  .vr-related-list { grid-template-columns: 1fr; }
  .vr-team-grid { grid-template-columns: 1fr; }
  .vr-waarden-grid { grid-template-columns: 1fr; }
  .vr-testimonials { grid-template-columns: 1fr; }
  .vr-lp-stats { grid-template-columns: 1fr 1fr; }
  .vr-stappen-grid { gap: 24px; }
  .vr-step-card { padding: 0 8px; }
  .vr-step-num-wrap { width: 56px; height: 56px; font-size: 22px; }
  /* Hide nav entirely on very small screens; rely on toggle */
  .vr-nav { top: 64px; max-height: calc(100vh - 64px); }
  /* Stack form grid-2 fields on mobile */
  .vr-insp-grid-2 { grid-template-columns: 1fr !important; }
  /* Stack contact-grid */
  .vr-contact-grid { grid-template-columns: 1fr; }
  /* About grid: stack */
  .vr-about-grid { grid-template-columns: 1fr; gap: 32px; }
  .vr-about-img { height: 280px; }
  /* Card padding tighter on mobile */
  .vr-dienst-card { padding: 20px; }
  /* Featured card: single column on mobile */
  .vr-dienst-featured { padding: 24px; }
  /* Comparison table on mobile: card layout (handled by dedicated @media block) */
}

/* ── Inspection form page (LP layout) ── */
.vr-inspection-section { padding: 0; background: var(--white); }
.vr-inspection-section .vr-insp-hero { margin-bottom: 0; padding: 64px 0; }
.vr-insp-layout { display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: start; }
.vr-insp-card { background: var(--white); border-radius: var(--radius-xl); padding: 36px; box-shadow: var(--shadow-lg); }
.vr-insp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vr-insp-full { grid-column: 1 / -1; }
.vr-insp-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 96px; }
.vr-insp-trust { background: var(--gray-100); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.vr-insp-trust .vr-trust-item { color: var(--gray-700); }
.vr-insp-trust .vr-trust-item svg { stroke: var(--red); }
.vr-insp-phone { background: var(--blue-800); border-radius: var(--radius-lg); padding: 24px; }
.vr-insp-phone-label { font-family: var(--font-display); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--red); margin-bottom: 8px; }
.vr-insp-phone-num { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--white); }
.vr-insp-phone .sub { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 4px; }
.vr-form-success { display: none; background: var(--blue-50); border: 1px solid var(--blue-600); border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px; color: var(--blue-800); font-weight: 600; }

/* ── News detail ── */
.vr-news-detail-section { padding: 56px 0 80px; }
.vr-news-detail-wrap { max-width: 760px; margin: 0 auto; }
.vr-news-detail-wrap .vr-breadcrumb { color: var(--gray-500); margin-bottom: 24px; }
.vr-news-detail-wrap .vr-breadcrumb a { color: var(--blue-800); }
.vr-news-detail-wrap .vr-breadcrumb a:hover { color: var(--red); }
.vr-article-title { font-family: var(--font-display); font-size: 38px; font-weight: 800; color: var(--gray-900); line-height: 1.15; margin-bottom: 16px; }
.vr-article-featured { width: 100%; height: 400px; object-fit: cover; border-radius: var(--radius-lg); margin: 24px 0 32px; }
.vr-related { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--gray-300); }
.vr-related-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--gray-900); margin-bottom: 16px; }
.vr-related-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vr-related-list a { display: block; padding: 16px; background: var(--gray-100); border-radius: var(--radius-md); font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--gray-700); transition: all .15s; }
.vr-related-list a:hover { background: var(--blue-50); color: var(--blue-800); }
@media (max-width: 768px) {
  .vr-related-list { grid-template-columns: 1fr; }
  .vr-news-detail-layout { grid-template-columns: 1fr; }
  .vr-news-detail-sidebar { position: static; }
  .vr-team-grid { grid-template-columns: 1fr 1fr; }
  .vr-waarden-grid { grid-template-columns: 1fr; }
  .vr-testimonials { grid-template-columns: 1fr; }
  .vr-lp-stats { grid-template-columns: 1fr 1fr; }
  .vr-lp-trust-grid { grid-template-columns: 1fr; }
  .vr-news-featured { grid-template-columns: 1fr; }
  .vr-content-layout { grid-template-columns: 1fr; }
  .vr-content-sidebar { position: static; }
  .vr-page-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .vr-insp-layout { grid-template-columns: 1fr; }
  .vr-contact-grid { grid-template-columns: 1fr; }
  .vr-about-grid { grid-template-columns: 1fr; }
  .vr-voordelen-grid { grid-template-columns: 1fr 1fr; }
  /* Tablet breakpoint'te diensten grid 2 kolon (güvenlik ağı) */
  .vr-diensten-grid,
  .vr-diensten-grid:not(:has(.vr-dienst-featured)),
  .vr-diensten-grid:has(.vr-dienst-featured) { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Verplicht intro + dark stat helpers ── */
.vr-verplicht-intro { font-size: 15px; color: var(--gray-500); line-height: 1.7; margin-bottom: 8px; }
.vr-stat-block.is-dark .vr-stat-dark-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.vr-stat-block.is-dark .vr-stat-dark-sub { font-size: 13px; color: rgba(255,255,255,.6); }

/* ── WordPress core alignment ── */
.alignleft { float: left; margin-right: 1.5em; }
.alignright { float: right; margin-left: 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--gray-500); text-align: center; margin-top: 8px; }
.screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal; }

/* ── Elementor full-width section support ── */
/* Elementor full-width layout makes sections span 100% width. */
/* The inner .vr-container controls the content width (1140px). */
.elementor-section.elementor-section-stretched > .elementor-container,
.elementor-section.elementor-section-full_width > .elementor-container { max-width: 100% !important; width: 100% !important; }
/* Remove default Elementor column padding for our widgets */
.elementor-section .elementor-column.elementor-col-100 > .elementor-widget-wrap { padding: 0 !important; }
/* Ensure our vr-container is the width controller inside sections */
.vr-section .vr-container,
.vr-hf-template .vr-container,
.elementor-widget[class*="elementor-widget-vr_"] .vr-container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
/* Prevent horizontal scroll — applied to body only, not html (sticky positioning safety) */
body { overflow-x: hidden; }
/* Elementor full-width page layout — remove any remaining max-width on content */
.elementor-page-layout-elementor_full_width .elementor-section-wrap,
.elementor-page-layout-elementor_full_width .elementor { max-width: 100% !important; width: 100% !important; }
/* HFE header/footer — same treatment */
.vr-hf-template .elementor-section.elementor-section-stretched > .elementor-container,
.vr-hf-template .elementor-section.elementor-section-full_width > .elementor-container { max-width: 100% !important; width: 100% !important; }

/* ── Contact Form 7 styling ── */
.wpcf7-form { display: flex; flex-direction: column; gap: 14px; }
.wpcf7-form label { display: block; font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--gray-700); margin-bottom: 5px; }
.wpcf7-form .wpcf7-form-control-wrap { display: block; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%; padding: 11px 14px;
  border: 2px solid var(--gray-300); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 14px; color: var(--gray-900);
  background: var(--white); outline: none; transition: border-color .15s;
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus { border-color: var(--blue-600); }
.wpcf7-form textarea { resize: vertical; min-height: 80px; }
.wpcf7-form .wpcf7-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  padding: 15px 26px; border-radius: var(--radius-md);
  border: 2px solid var(--red); background: var(--red); color: var(--white);
  cursor: pointer; transition: all .18s ease; width: 100%;
}
.wpcf7-form .wpcf7-submit:hover { background: var(--red-dark); border-color: var(--red-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(232,66,10,.3); }
.wpcf7-response-output { font-size: 13px; padding: 12px 16px; border-radius: var(--radius-md); margin-top: 12px; }
.wpcf7-mail-sent-ok { background: #d4edda; border-color: #c3e6cb; color: #155724; }
.wpcf7-validation-errors { background: #f8d7da; border-color: #f5c6cb; color: #721c24; }
.wpcf7-not-valid-tip { color: var(--red-dark); font-size: 12px; margin-top: 4px; }

/* ── Over Ons: Waarden grid ── */
.vr-waarden-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 32px; }
.vr-waarde-card { background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius-lg); padding: 28px; display: flex; gap: 16px; align-items: flex-start; }
.vr-waarde-num { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--blue-100); line-height: 1; flex-shrink: 0; width: 40px; }
.vr-waarde-card h4 { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.vr-waarde-card p { font-size: 14px; color: var(--gray-500); line-height: 1.6; }

/* ── Over Ons: Team grid ── */
.vr-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.vr-team-card { background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius-lg); overflow: hidden; }
.vr-team-avatar { height: 200px; background: var(--blue-50); display: flex; align-items: center; justify-content: center; }
.vr-team-avatar svg { stroke: var(--blue-200, #c7d7f8); width: 64px; height: 64px; }
.vr-team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vr-team-info { padding: 20px; }
.vr-team-info h4 { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.vr-team-info span { font-size: 13px; color: var(--red); font-weight: 600; font-family: var(--font-display); }
.vr-team-info p { font-size: 13px; color: var(--gray-500); margin-top: 8px; line-height: 1.6; }

/* ── Over Ons: Stats inline ── */
.vr-stats-inline { display: flex; gap: 32px; flex-wrap: wrap; }
.vr-stats-inline > div .num { font-family: var(--font-display); font-size: 36px; font-weight: 800; color: var(--blue-800); }
.vr-stats-inline > div .num span { color: var(--red); }
.vr-stats-inline > div .label { font-size: 13px; color: var(--gray-500); }

/* ── Over Ons: Intro image placeholder ── */
.vr-about-intro-img { background: var(--blue-50); border-radius: var(--radius-xl); padding: 48px; display: flex; align-items: center; justify-content: center; min-height: 320px; }
.vr-about-intro-img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-xl); }
.vr-about-intro-img-placeholder { text-align: center; }
.vr-about-intro-img-placeholder svg { stroke: #c7d7f8; width: 80px; height: 80px; }
.vr-about-intro-img-placeholder .label { font-size: 13px; color: var(--gray-500); margin-top: 12px; }

/* ── Nieuws: Category filter ── */
.vr-news-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.vr-news-filter { padding: 8px 16px; border-radius: 99px; border: 1px solid var(--gray-300); background: var(--white); font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--gray-700); cursor: pointer; transition: all .15s; text-decoration: none; display: inline-block; }
.vr-news-filter:hover, .vr-news-filter.is-active { background: var(--blue-800); color: var(--white); border-color: var(--blue-800); }

/* ── Nieuws: Featured article ── */
.vr-news-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 32px; }
.vr-news-featured-img { background: var(--blue-50); min-height: 280px; display: flex; align-items: center; justify-content: center; }
.vr-news-featured-img img { width: 100%; height: 100%; object-fit: cover; }
.vr-news-featured-body { padding: 32px; display: flex; flex-direction: column; justify-content: center; }
.vr-news-featured-body h3 { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--gray-900); margin: 8px 0 12px; line-height: 1.2; }
.vr-news-featured-body p { font-size: 14px; color: var(--gray-500); line-height: 1.6; margin-bottom: 16px; }

/* ── Nieuws detail: sidebar CTA ── */
.vr-news-detail-layout { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start; }
/* Sidebar is sticky but must NOT scroll internally — full content visible.
   Removed max-height + overflow-y:auto (they caused an inner scrollbar).
   position:sticky still applies so the sidebar follows the page on scroll. */
.vr-news-detail-sidebar { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 20px; }
.vr-news-sidebar-cta { background: var(--blue-800); border-radius: var(--radius-lg); padding: 28px; color: var(--white); }
.vr-news-sidebar-cta h4 { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--white); margin-bottom: 8px; }
.vr-news-sidebar-cta p { font-size: 14px; color: rgba(255,255,255,.7); margin-bottom: 16px; line-height: 1.6; }

/* ── Inspectie: Inline steps ── */
.vr-steps-inline { display: flex; flex-direction: column; gap: 20px; margin: 32px 0; }
.vr-step-inline { display: flex; gap: 16px; align-items: flex-start; }
.vr-step-inline-num { width: 36px; height: 36px; background: var(--blue-800); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--white); flex-shrink: 0; }
.vr-step-inline:first-child .vr-step-inline-num { background: var(--red); }
.vr-step-inline-text h4 { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 3px; }
.vr-step-inline-text p { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.6; }

/* ── Inspectie: LP Hero ── */
.vr-lp-hero { background: var(--blue-800); padding: 64px 0; position: relative; overflow: hidden; }
.vr-lp-hero-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--red); }
.vr-lp-hero-content { color: var(--white); }
.vr-lp-hero-eyebrow { color: rgba(255,255,255,.5) !important; }
.vr-lp-hero-title { font-family: var(--font-display); font-size: 44px; font-weight: 800; color: var(--white); line-height: 1.1; margin-bottom: 16px; }
.vr-lp-hero-lead { font-size: 16px; color: rgba(255,255,255,.7); line-height: 1.75; margin-bottom: 8px; max-width: 480px; }
.vr-lp-rating-inline { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08); padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: 24px; }
.vr-lp-rating-num { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--white); }
.vr-lp-rating-sub { font-size: 13px; color: rgba(255,255,255,.5); }
.vr-insp-no-cf7 { padding: 20px; background: var(--gray-100); border-radius: var(--radius-md); text-align: center; color: var(--gray-500); font-size: 13px; }

/* ── Inspectie: Trust grid ── */
.vr-lp-trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }
.vr-lp-trust-item { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); background: rgba(255,255,255,.06); padding: 12px 14px; border-radius: var(--radius-md); }
.vr-lp-trust-item svg { stroke: var(--red); flex-shrink: 0; color: var(--red); }

/* ── Inspectie: Testimonials ── */
.vr-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.vr-testimonial-card { background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius-lg); padding: 24px; }
.vr-testimonial-stars { display: flex; gap: 2px; margin-bottom: 12px; }
.vr-testimonial-stars .vr-star { color: #F59E0B; font-size: 16px; }
.vr-testimonial-quote { font-size: 14px; color: var(--gray-700); line-height: 1.6; margin-bottom: 16px; font-style: italic; }
.vr-testimonial-author { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--gray-900); }
.vr-testimonial-location { font-size: 12px; color: var(--gray-500); }

/* ── Inspectie: LP form card ── */
.vr-lp-form-card { background: var(--white); border-radius: var(--radius-xl); padding: 32px; box-shadow: var(--shadow-lg); }
.vr-lp-form-title { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--gray-900); margin-bottom: 4px; }
.vr-lp-form-sub { font-size: 13px; color: var(--gray-500); margin-bottom: 20px; }

/* ── Inspectie: LP stats ── */
.vr-lp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.vr-lp-stat-card { background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius-lg); padding: 20px; text-align: center; }
.vr-lp-stat-card .num { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--blue-800); }
.vr-lp-stat-card .num span { color: var(--red); }
.vr-lp-stat-card .label { font-size: 12px; color: var(--gray-500); margin-top: 4px; }

@media (max-width: 768px) {
  .vr-waarden-grid, .vr-team-grid, .vr-news-featured, .vr-news-detail-layout, .vr-lp-trust-grid, .vr-testimonials, .vr-lp-stats { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────── */
/* GENERIC MOBILE TABLE PATTERN — card layout (no scroll)        */
/* Apply .vr-mobile-table to any <table> + data-label attributes  */
/* on <td> elements. On desktop, normal table. On mobile (≤768), */
/* each row becomes a card with label:value pairs.                */
/* Inspired by incisigorta.com pattern.                          */
/* ───────────────────────────────────────────────────────────── */
.vr-mobile-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.vr-mobile-table th { background: var(--blue-800); color: var(--white); font-family: var(--font-display); font-size: 13px; font-weight: 700; padding: 14px 20px; text-align: left; }
.vr-mobile-table td { padding: 13px 20px; font-size: 14px; color: var(--gray-700); border-bottom: 1px solid var(--gray-300); }
.vr-mobile-table tr:last-child td { border-bottom: none; }
.vr-mobile-table tr:nth-child(even) td { background: var(--gray-100); }

@media (max-width: 768px) {
  .vr-mobile-table,
  .vr-mobile-table thead,
  .vr-mobile-table tbody,
  .vr-mobile-table th,
  .vr-mobile-table td,
  .vr-mobile-table tr {
    display: block; width: 100% !important;
  }
  .vr-mobile-table thead { display: none; }
  .vr-mobile-table tr {
    margin-bottom: 16px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-sm);
  }
  .vr-mobile-table tr:nth-child(even) td { background: transparent; }
  .vr-mobile-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-300);
    font-size: 13px;
    line-height: 1.5;
    text-align: right;
  }
  .vr-mobile-table td:last-child { border-bottom: none; }
  .vr-mobile-table td:first-child,
  .vr-mobile-table td.first-column {
    background: var(--blue-800);
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    padding: 14px 16px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
    text-align: left;
    justify-content: flex-start;
  }
  .vr-mobile-table td:not(:first-child)::before {
    content: attr(data-label);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
    text-align: left;
    max-width: 45%;
  }
  .vr-mobile-table td:not(:first-child):not([data-label])::before,
  .vr-mobile-table td:not(:first-child)[data-label=""]::before {
    content: '✓';
    color: var(--blue-800);
    font-weight: 800;
  }
}
@media (max-width: 480px) {
  .vr-mobile-table td { padding: 10px 12px; font-size: 12px; gap: 10px; }
  .vr-mobile-table td:first-child,
  .vr-mobile-table td.first-column { padding: 12px; font-size: 14px; }
  .vr-mobile-table td:not(:first-child)::before { font-size: 11px; }
}

/* ───────────────────────────────────────────────────────────── */
/* COMPREHENSIVE RESPONSIVE OVERRIDES — all pages, all widgets   */
/* These rules use !important to override any Elementor inline   */
/* CSS that might be set without responsive defaults.            */
/* ───────────────────────────────────────────────────────────── */

/* TABLET (≤960px): 2-column where applicable, 1-column for narrow grids */
@media (max-width: 960px) {
  /* Force 2-column grids on tablet — overrides Elementor inline 3-col */
  .vr-diensten-grid,
  .vr-diensten-grid:not(:has(.vr-dienst-featured)),
  .vr-diensten-grid:has(.vr-dienst-featured) { grid-template-columns: repeat(2, 1fr) !important; }
  .vr-news-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .vr-voordelen-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .vr-team-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .vr-waarden-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .vr-lp-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .vr-lp-trust-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .vr-testimonials { grid-template-columns: repeat(1, 1fr) !important; }
  /* Sticky sidebars become static */
  .vr-content-sidebar, .vr-news-detail-sidebar, .vr-insp-sidebar { position: static !important; }
  /* Two-column layouts collapse to 1 column */
  .vr-content-layout, .vr-page-hero-grid, .vr-insp-layout, .vr-contact-grid,
  .vr-about-grid, .vr-news-detail-layout, .vr-news-featured { grid-template-columns: 1fr !important; }
  .vr-verplicht-grid { grid-template-columns: 1fr !important; }
  .vr-hero-grid { grid-template-columns: 1fr !important; }
  .vr-voorna-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .vr-stat-row { grid-template-columns: repeat(2, 1fr) !important; }
  /* Mobile nav toggle visible */
  .vr-nav-toggle { display: flex !important; }
  .vr-nav { display: none; }
  .vr-nav.is-open { display: flex; }
  /* Section padding slightly reduced on tablet */
  .vr-section { padding: 72px 0 !important; }
  .vr-section-alt { padding: 72px 0 !important; }
  /* Hero title slightly smaller on tablet */
  .vr-hero-title { font-size: 42px !important; }
  .vr-page-hero-title { font-size: 36px !important; }
  .vr-section-title { font-size: 30px !important; }
  /* CTA box slightly tighter */
  .vr-cta-box { padding: 48px 32px !important; }
  /* Footer grid 2 columns */
  .vr-footer-grid { grid-template-columns: 1fr 1fr !important; }
}

/* MOBILE (≤640px): everything 1-column */
@media (max-width: 640px) {
  /* All grids → 1 column */
  .vr-diensten-grid,
  .vr-diensten-grid:not(:has(.vr-dienst-featured)),
  .vr-diensten-grid:has(.vr-dienst-featured),
  .vr-news-grid,
  .vr-voordelen-grid,
  .vr-stappen-grid,
  .vr-stap-grid,
  .vr-voorna-grid,
  .vr-verplicht-grid,
  .vr-stat-row,
  .vr-footer-grid,
  .vr-team-grid,
  .vr-waarden-grid,
  .vr-testimonials,
  .vr-lp-stats,
  .vr-lp-trust-grid,
  .vr-news-featured,
  .vr-news-detail-layout,
  .vr-related-list,
  .vr-content-layout,
  .vr-page-hero-grid,
  .vr-insp-layout,
  .vr-insp-grid-2,
  .vr-contact-grid,
  .vr-about-grid,
  .vr-hero-grid,
  .vr-faq-grid { grid-template-columns: 1fr !important; }
  /* Section padding tighter */
  .vr-section { padding: 56px 0 !important; }
  .vr-section-alt { padding: 56px 0 !important; }
  /* Hero adjustments */
  .vr-hero { padding: 48px 0 0 !important; }
  .vr-hero-content { padding-bottom: 48px !important; }
  .vr-hero-title { font-size: 30px !important; line-height: 1.15 !important; }
  .vr-hero-lead { font-size: 15px !important; }
  .vr-hero-card { padding: 24px 20px 0 !important; border-radius: var(--radius-lg) !important; }
  /* Page hero adjustments */
  .vr-page-hero { padding: 48px 0 !important; }
  .vr-page-hero-title { font-size: 28px !important; line-height: 1.2 !important; }
  .vr-page-hero-lead { font-size: 15px !important; }
  /* Section title/lead */
  .vr-section-title { font-size: 26px !important; line-height: 1.2 !important; }
  .vr-section-lead { font-size: 15px !important; }
  /* Container padding tighter */
  .vr-container { padding: 0 16px !important; }
  /* CTA box tighter */
  .vr-cta-box { padding: 32px 20px !important; }
  .vr-cta-box h2 { font-size: 24px !important; }
  .vr-cta-actions { flex-direction: column !important; align-items: stretch !important; }
  .vr-cta-actions .vr-btn { width: 100% !important; justify-content: center !important; }
  /* Hero actions stack */
  .vr-hero-actions { flex-direction: column !important; align-items: stretch !important; }
  .vr-hero-actions .vr-btn { width: 100% !important; justify-content: center !important; }
  .vr-page-hero-actions { flex-direction: column !important; align-items: stretch !important; }
  .vr-page-hero-actions .vr-btn { width: 100% !important; justify-content: center !important; }
  /* Hero trust items stack */
  .vr-hero-trust { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  /* Footer */
  .vr-footer { padding: 48px 0 0 !important; }
  .vr-footer-bottom { flex-direction: column !important; text-align: center !important; gap: 8px !important; }
  /* Topbar hidden on mobile */
  .vr-topbar { display: none !important; }
  /* Cards tighter padding */
  .vr-dienst-card { padding: 20px !important; }
  .vr-dienst-featured { padding: 24px !important; }
  .vr-voordeel-card { padding: 18px !important; }
  .vr-team-info { padding: 16px !important; }
  .vr-waarde-card { padding: 20px !important; }
  .vr-testimonial-card { padding: 18px !important; }
  .vr-lp-stat-card { padding: 16px !important; }
  .vr-lp-form-card { padding: 20px !important; }
  .vr-sidebar-card { padding: 20px !important; }
  .vr-insp-card { padding: 24px !important; }
  .vr-news-featured-body { padding: 24px !important; }
  /* Image heights smaller on mobile */
  .vr-voorna-img { height: 200px !important; }
  .vr-about-img { height: 240px !important; }
  .vr-team-avatar { height: 180px !important; }
  .vr-article-featured { height: 240px !important; }
  .vr-news-img { height: 160px !important; }
  /* Mobile nav positioning */
  .vr-nav { top: 64px !important; max-height: calc(100vh - 64px) !important; }
  .vr-header .vr-container { height: 64px !important; gap: 12px !important; }
  .vr-logo { font-size: 16px !important; }
  .vr-logo-mark { width: 30px !important; height: 30px !important; }
  /* Stappen grid gap */
  .vr-stappen-grid { gap: 24px !important; }
  .vr-step-card { padding: 0 8px !important; }
  .vr-step-num-wrap { width: 56px !important; height: 56px !important; font-size: 22px !important; margin-bottom: 16px !important; }
  /* Comparison table on mobile: card layout (handled by dedicated @media block) */
  /* News detail sidebar static */
  .vr-news-detail-sidebar { position: static !important; }
  /* Trust bar: 1 item per row on mobile (handled by dedicated @media 768px block) */
  /* Stats inline */
  .vr-stats-inline { gap: 20px !important; flex-wrap: wrap !important; }
  .vr-stats-inline > div .num { font-size: 28px !important; }
  /* LP hero */
  .vr-lp-hero { padding: 48px 0 !important; }
  /* Inspection form fields stack */
  .vr-insp-grid-2 { grid-template-columns: 1fr !important; }
  /* Article content typography */
  .vr-article-content h2 { font-size: 20px !important; margin-top: 24px !important; }
  .vr-article-content h3 { font-size: 18px !important; margin-top: 20px !important; }
  .vr-article-content p, .vr-article-content li { font-size: 14px !important; }
  /* === ADDITIONAL MOBILE OPTIMIZATIONS (all widgets) === */
  /* Urgency bar — smaller padding, allow wrap */
  .vr-urgency { padding: 10px 0 !important; }
  .vr-urgency .vr-container { gap: 8px !important; font-size: 13px !important; flex-wrap: wrap !important; }
  /* Breadcrumb — smaller font */
  .vr-breadcrumb { font-size: 12px !important; gap: 4px !important; margin-bottom: 12px !important; flex-wrap: wrap !important; }
  /* News filters — wrap, no scroll */
  .vr-news-filters { gap: 6px !important; margin-bottom: 24px !important; }
  .vr-news-filter { padding: 6px 12px !important; font-size: 12px !important; }
  /* News meta — smaller */
  .vr-news-meta { gap: 6px !important; margin-bottom: 8px !important; }
  .vr-news-cat { font-size: 10px !important; padding: 2px 6px !important; }
  .vr-news-card h3 { font-size: 15px !important; }
  .vr-news-card p { font-size: 12px !important; }
  /* Article meta — wrap */
  .vr-article-meta { gap: 10px !important; flex-wrap: wrap !important; }
  .vr-article-meta > span { font-size: 12px !important; }
  /* Dienst checklist — smaller font */
  .vr-dienst-checklist { gap: 5px !important; margin-bottom: 16px !important; }
  .vr-dienst-checklist li { font-size: 12px !important; gap: 6px !important; }
  .vr-dienst-card h3 { font-size: 15px !important; }
  .vr-dienst-card p { font-size: 13px !important; }
  .vr-dienst-link { font-size: 12px !important; }
  /* Dienst featured — image height */
  .vr-dienst-featured-visual { min-height: 180px !important; }
  .vr-dienst-featured h3 { font-size: 22px !important; }
  .vr-dienst-featured-list li { font-size: 12px !important; }
  .vr-dienst-featured-badge { font-size: 10px !important; }
  /* Verplicht list — smaller */
  .vr-verplicht-list { gap: 10px !important; margin: 18px 0 24px !important; }
  .vr-verplicht-list li { font-size: 14px !important; gap: 10px !important; }
  .vr-verplicht-visual { padding: 24px !important; gap: 12px !important; }
  /* Stat block — smaller */
  .vr-stat-block { padding: 18px !important; }
  .vr-stat-block .num { font-size: 32px !important; }
  .vr-stat-block .label { font-size: 12px !important; }
  /* Step cards — smaller */
  .vr-step-card h3 { font-size: 16px !important; margin-bottom: 8px !important; }
  .vr-step-card p { font-size: 13px !important; }
  .vr-stap-card h4 { font-size: 14px !important; }
  .vr-stap-card p { font-size: 12px !important; }
  /* Voor/Na — smaller text */
  .vr-voorna-label { padding: 10px 16px !important; font-size: 12px !important; }
  .vr-voorna-text { padding: 14px 16px !important; font-size: 12px !important; }
  /* FAQ — smaller */
  .vr-faq-q { padding: 16px 18px !important; font-size: 14px !important; gap: 12px !important; }
  .vr-faq-a { padding: 0 18px 16px !important; font-size: 13px !important; }
  /* Highlight box — smaller padding */
  .vr-highlight-box { padding: 16px 18px !important; margin: 20px 0 !important; }
  .vr-highlight-box p { font-size: 14px !important; }
  /* Check list — smaller */
  .vr-check-list { gap: 10px !important; margin: 14px 0 20px !important; }
  .vr-check-list li { font-size: 14px !important; gap: 8px !important; }
  /* Voordelen cards — smaller */
  .vr-voordeel-card h4 { font-size: 14px !important; }
  .vr-voordeel-card p { font-size: 12px !important; }
  .vr-voordeel-icon { width: 36px !important; height: 36px !important; margin-bottom: 10px !important; }
  /* Contact info — smaller */
  .vr-contact-info-item { gap: 12px !important; }
  .vr-contact-info-icon { width: 40px !important; height: 40px !important; }
  .vr-contact-info-item h4 { font-size: 13px !important; }
  .vr-contact-info-item p, .vr-contact-info-item a { font-size: 13px !important; }
  /* Footer — smaller */
  .vr-footer-col { padding: 0 !important; }
  .vr-footer-col h4 { font-size: 12px !important; margin-bottom: 12px !important; }
  .vr-footer-col ul a { font-size: 13px !important; }
  .vr-footer-logo { font-size: 16px !important; margin-bottom: 12px !important; }
  .vr-footer-desc { font-size: 13px !important; margin-bottom: 14px !important; }
  .vr-footer-contact-item { font-size: 12px !important; gap: 6px !important; }
  .vr-footer-emergency { padding: 14px !important; margin-top: 16px !important; }
  .vr-footer-emergency .phone { font-size: 16px !important; }
  /* Sidebar cards — smaller padding */
  .vr-sidebar-card { padding: 18px !important; }
  .vr-sidebar-card-title { font-size: 15px !important; }
  .vr-sidebar-card-sub { font-size: 12px !important; margin-bottom: 14px !important; }
  .vr-sidebar-spoed { padding: 18px !important; }
  .vr-sidebar-spoed .vr-sidebar-phone { font-size: 18px !important; }
  .vr-sidebar-price { padding: 16px !important; }
  .vr-sidebar-price .price-value { font-size: 24px !important; }
  /* Quick links — smaller */
  .vr-quick-links { padding: 16px !important; }
  .vr-quick-links h4 { font-size: 12px !important; margin-bottom: 10px !important; }
  .vr-quick-links a { font-size: 13px !important; padding: 7px 0 !important; }
  /* News sidebar CTA — smaller */
  .vr-news-sidebar-cta { padding: 20px !important; }
  .vr-news-sidebar-cta h4 { font-size: 16px !important; }
  .vr-news-sidebar-cta p { font-size: 13px !important; }
  /* News featured — smaller */
  .vr-news-featured-img { min-height: 200px !important; }
  .vr-news-featured-body h3 { font-size: 18px !important; }
  .vr-news-featured-body p { font-size: 13px !important; }
  /* Team cards — smaller */
  .vr-team-info h4 { font-size: 14px !important; }
  .vr-team-info span { font-size: 12px !important; }
  .vr-team-info p { font-size: 12px !important; }
  /* Waarden cards — smaller */
  .vr-waarde-card { padding: 18px !important; gap: 12px !important; }
  .vr-waarde-num { font-size: 22px !important; width: 32px !important; }
  .vr-waarde-card h4 { font-size: 14px !important; }
  .vr-waarde-card p { font-size: 12px !important; }
  /* LP step inline — smaller */
  .vr-step-inline { gap: 12px !important; }
  .vr-step-inline-num { width: 32px !important; height: 32px !important; font-size: 14px !important; }
  .vr-step-inline-text h4 { font-size: 14px !important; }
  .vr-step-inline-text p { font-size: 12px !important; }
  /* LP trust item — smaller */
  .vr-lp-trust-item { padding: 10px 12px !important; font-size: 12px !important; gap: 8px !important; }
  /* LP stat card — smaller */
  .vr-lp-stat-card .num { font-size: 22px !important; }
  .vr-lp-stat-card .label { font-size: 11px !important; }
  /* LP form card — smaller */
  .vr-lp-form-title { font-size: 17px !important; }
  .vr-lp-form-sub { font-size: 12px !important; margin-bottom: 14px !important; }
  /* Testimonial — smaller */
  .vr-testimonial-card { padding: 16px !important; }
  .vr-testimonial-quote { font-size: 13px !important; }
  .vr-testimonial-author { font-size: 12px !important; }
  /* Form fields — smaller */
  .vr-field { margin-bottom: 12px !important; }
  .vr-field label { font-size: 11px !important; margin-bottom: 4px !important; }
  .vr-field input, .vr-field select, .vr-field textarea { padding: 10px 12px !important; font-size: 13px !important; }
  .vr-form-submit { font-size: 14px !important; padding: 13px !important; }
  .vr-form-note { font-size: 11px !important; padding-bottom: 24px !important; }
  /* Hero card rating inline — smaller */
  .vr-rating-inline { padding: 6px 10px !important; margin-bottom: 14px !important; }
  .vr-rating-text { font-size: 12px !important; }
  .vr-rating-sub { font-size: 11px !important; }
  .vr-hero-card-title { font-size: 17px !important; }
  .vr-hero-card-sub { font-size: 12px !important; margin-bottom: 16px !important; }
  /* About section — smaller */
  .vr-about-point { gap: 12px !important; }
  .vr-about-point h4 { font-size: 14px !important; }
  .vr-about-point p { font-size: 12px !important; }
  .vr-about-intro-img { padding: 24px !important; min-height: 220px !important; }
  .vr-about-content h2 { font-size: 22px !important; }
  /* Inspection form intro */
  .vr-insp-card { padding: 20px !important; }
  /* Floating trust (featured card) — hide on mobile to avoid overflow */
  .vr-floating-trust { position: static !important; max-width: 100% !important; margin-top: 16px !important; bottom: auto !important; left: auto !important; }
  /* Service intro / subheading */
  .vr-service-intro p, .vr-content-layout p { font-size: 14px !important; line-height: 1.7 !important; margin-bottom: 14px !important; }
  .vr-subheading { font-size: 18px !important; }
  /* Verplicht intro */
  .vr-verplicht-intro { font-size: 14px !important; }
  /* Insurance section stat dark */
  .vr-stat-block.is-dark .vr-stat-dark-title { font-size: 13px !important; }
  .vr-stat-block.is-dark .vr-stat-dark-sub { font-size: 12px !important; }
}

/* VERY SMALL MOBILE (≤400px): even tighter */
@media (max-width: 400px) {
  .vr-container { padding: 0 12px !important; }
  .vr-section { padding: 40px 0 !important; }
  .vr-hero-title { font-size: 26px !important; }
  .vr-section-title { font-size: 22px !important; }
  .vr-page-hero-title { font-size: 24px !important; }
  .vr-cta-box { padding: 24px 16px !important; }
  .vr-cta-box h2 { font-size: 20px !important; }
  .vr-dienst-card { padding: 16px !important; }
  .vr-lp-form-card { padding: 16px !important; }
  .vr-hero-card { padding: 20px 16px 0 !important; }
  .vr-btn { font-size: 14px !important; padding: 12px 20px !important; }
}

/* Elementor editor preview: hide mobile toggle (desktop view in editor) */
.elementor-editor-active .vr-nav-toggle { display: none !important; }
.elementor-editor-active .vr-nav { display: flex !important; }
/* But on mobile preview mode in Elementor, allow toggle to show */
.elementor-editor-active .elementor-device-mobile .vr-nav { display: none; }
.elementor-editor-active .elementor-device-mobile .vr-nav-toggle { display: flex !important; }
.elementor-editor-active .elementor-device-tablet .vr-nav { display: none; }
.elementor-editor-active .elementor-device-tablet .vr-nav-toggle { display: flex !important; }

/* ── Inline-style-free widget rules (Task 13) ──
   These rules replace harmful inline styles (color/font/background/border)
   that were previously hardcoded in widget render() methods. Moving them
   into CSS classes lets Elementor typography/color controls override them. */

/* Breadcrumb current item (news-detail) */
.vr-breadcrumb-current { color: rgba(255,255,255,.8); }

/* Meta dot separator (news-detail) */
.vr-meta-dot { width: 4px; height: 4px; background: rgba(255,255,255,.3); border-radius: 50%; display: inline-block; }

/* Article title in news-detail hero (slightly smaller than page hero) */
.vr-page-hero-title--article { font-size: 36px; }

/* News sidebar CTA eyebrow label + phone (news-detail) */
.vr-news-sidebar-cta .vr-sidebar-label { color: var(--red); }
.vr-news-sidebar-cta-phone { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: rgba(255,255,255,.7); }

/* Related-articles box + items (news-detail) */
.vr-related-box { background: var(--gray-100); }
.vr-related-icon { background: var(--white); border: 1px solid var(--gray-300); }
.vr-related-card-title { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--gray-900); }

/* "Terug naar alle artikelen" back link (news-detail) */
.vr-news-back-link { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--blue-800); border: 1px solid var(--gray-300); }
.vr-news-back-link:hover { color: var(--blue-900); border-color: var(--blue-600); }

/* News grid image fallback text (news-grid) */
.vr-news-img-text { font-size: 13px; color: #6B7280; }

/* Featured-service rating badge (services-grid) */
.vr-dienst-rating-badge { background: var(--white); }
.vr-dienst-rating-num { font-family: var(--font-display); font-size: 36px; font-weight: 800; color: var(--blue-800); }
.vr-dienst-rating-sub { font-size: 11px; color: var(--gray-500); }

/* Highlighted service card + icon (services-grid) */
.vr-dienst-card.is-highlight { border-color: var(--blue-600); border-width: 2px; }
.vr-dienst-icon.is-highlight { background: var(--red-light); }

/* Contact Form 7 fallback notice (hero + contact-section) */
.vr-cf7-notice { background: var(--gray-100); color: var(--gray-500); font-size: 13px; }

/* Subheading base style (service-detail) - mobile override already exists at 18px */
.vr-subheading { font-family: var(--font-display); font-size: 20px; font-weight: 700; }