/* Velour Detailing NL — premium navy / wit / helderblauw thema */
:root {
  --navy: #041831;
  --navy-2: #082a58;
  --blue: #0878e8;
  --blue-dark: #005fc9;
  --sky: #eaf5ff;
  --soft: #f5faff;
  --white: #ffffff;
  --ink: #0a1a33;
  --muted: #5f718c;
  --line: #d5e5f5;
  --shadow: 0 16px 36px rgba(4, 31, 68, .10);
}

* { box-sizing: border-box; }
html { background: var(--soft); }
body {
  margin: 0 !important;
  color: var(--ink) !important;
  background:
    radial-gradient(circle at 95% 0, rgba(13, 126, 239, .13), transparent 31rem),
    linear-gradient(180deg, #fff 0%, var(--soft) 55%, #fff 100%) !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

a { color: var(--blue-dark) !important; }
h1, h2, h3, h4 { color: var(--ink) !important; }
p { color: var(--muted) !important; }

/* Navigatie */
.top, header.top, .topbar, .site-header {
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 2px 16px rgba(4, 24, 49, .04) !important;
}
.brand, .logo, .brand a {
  color: var(--navy) !important;
  letter-spacing: 3px !important;
}
.brand span, .logo span { color: var(--blue) !important; }
.nav-links a, nav a, .nav-links button, nav button {
  color: var(--ink) !important;
}
.nav-links a:hover, nav a:hover, .nav-links .active, nav .active {
  color: var(--blue-dark) !important;
}

/* Donkerblauwe premium hero's */
.hero, .hero-simple, .page-hero, .contact-hero, .voorwaarden-hero {
  color: #fff !important;
  background:
    radial-gradient(circle at 82% 26%, rgba(27, 139, 255, .38), transparent 23rem),
    linear-gradient(116deg, #021126 0%, var(--navy) 45%, #075eb8 100%) !important;
}
.hero h1, .hero h2, .hero h3,
.hero-simple h1, .hero-simple h2, .hero-simple h3,
.page-hero h1, .page-hero h2, .page-hero h3,
.contact-hero h1, .contact-hero h2, .contact-hero h3,
.voorwaarden-hero h1, .voorwaarden-hero h2, .voorwaarden-hero h3 {
  color: #fff !important;
}
.hero p, .hero-simple p, .page-hero p, .contact-hero p, .voorwaarden-hero p {
  color: #d7eaff !important;
}
.eyebrow, .kicker {
  color: #76c4ff !important;
  letter-spacing: 2px !important;
}

/* Knoppen */
button, .button, .btn, .cta, .primary, input[type="submit"] {
  border-color: var(--blue) !important;
  background: linear-gradient(135deg, #0785ef, #0769d8) !important;
  color: #fff !important;
  box-shadow: 0 9px 20px rgba(0, 104, 215, .22) !important;
}
button:hover, .button:hover, .btn:hover, .cta:hover, .primary:hover, input[type="submit"]:hover {
  background: linear-gradient(135deg, #1695ff, #0861c4) !important;
}
.ghost, .secondary, .outline, .btn-outline {
  color: var(--blue-dark) !important;
  background: #fff !important;
  border: 1px solid #9fc9ef !important;
  box-shadow: none !important;
}

/* Witte kaarten op een lichtblauwe basis */
.card, .service-card, .info-card, .review-card, .contact-card,
.step-card, .form-card, .booking-card, .panel, .admin-card,
.pricing-card, .feature-card {
  color: var(--ink) !important;
  background: rgba(255,255,255,.98) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}
.card h1, .card h2, .card h3, .service-card h1, .service-card h2, .service-card h3,
.info-card h1, .info-card h2, .info-card h3, .panel h1, .panel h2, .panel h3 {
  color: var(--ink) !important;
}
.card p, .service-card p, .info-card p, .panel p { color: var(--muted) !important; }
.price, .service-price, .amount, .from-price { color: var(--blue-dark) !important; }

/* Boekingspagina */
.booking-shell, .booking-wrap, .booking-section, main.booking {
  background: transparent !important;
}
.choice, .service-choice, .date-card, .time-card, .slot, .field-card {
  color: var(--ink) !important;
  background: #fff !important;
  border-color: var(--line) !important;
}
.choice.selected, .service-choice.selected, .date-card.selected,
.time-card.selected, .slot.selected, .selected {
  color: var(--ink) !important;
  background: #eef7ff !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 2px rgba(8,120,232,.12) !important;
}
label { color: var(--ink) !important; }
input, select, textarea {
  color: var(--ink) !important;
  background: #fff !important;
  border: 1px solid #bfd7ef !important;
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(8,120,232,.16) !important;
  border-color: var(--blue) !important;
}

/* Secties, tabellen en beheer */
section { border-color: var(--line); }
.section-alt, .soft-section, .light-section { background: var(--sky) !important; }
table, .table-wrap {
  background: #fff !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
th { color: var(--navy) !important; background: #edf6ff !important; }
td { border-color: var(--line) !important; }
.status, .badge {
  color: var(--blue-dark) !important;
  background: #e8f4ff !important;
  border-color: #b7daf8 !important;
}

/* Galerij: behoud leesbare tekst op foto */
.gallery-item, .gallery-card, .result-card {
  background: var(--navy) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow) !important;
}
.gallery-item::after, .gallery-card::after, .result-card::after {
  background: linear-gradient(transparent 46%, rgba(1, 15, 35, .82)) !important;
}
.gallery-item strong, .gallery-card strong, .result-card strong,
.gallery-item span, .gallery-card span, .result-card span {
  color: #fff !important;
}

/* Footer */
footer, .footer {
  color: #d7eaff !important;
  background: linear-gradient(115deg, #021126, #072c5c) !important;
  border-top: 1px solid rgba(135, 197, 255, .22) !important;
}
footer *, .footer * { color: inherit !important; }

/* Kleine, nette WhatsApp-knop */
.whatsapp, .whatsapp-float, .wa-button {
  width: 52px !important;
  height: 52px !important;
  color: #fff !important;
  background: #20b765 !important;
  border: 2px solid #fff !important;
  box-shadow: 0 10px 24px rgba(8, 43, 34, .25) !important;
}

@media (max-width: 760px) {
  .top, header.top, .topbar { padding-left: 16px !important; padding-right: 16px !important; }
  .nav-links { gap: 12px !important; }
  .hero, .hero-simple, .page-hero { background-position: 70% center !important; }
  .card, .service-card, .info-card, .review-card, .contact-card { box-shadow: 0 10px 24px rgba(4, 31, 68, .08) !important; }
}

/* ===== Premium donkerblauw / wit / elektrisch-blauw thema =====
   Deze laag geldt alleen voor de openbare pagina's. Beheer en API blijven ongemoeid. */
:root {
  --premium-navy: #03152e;
  --premium-blue: #087cf0;
  --premium-blue-soft: #eaf5ff;
  --premium-line: rgba(11, 126, 241, .20);
}

body.page-home,
body.page-diensten,
body.page-contact,
body.page-over-ons,
body.page-resultaten,
body.page-voorwaarden,
body.page-boeken {
  background:
    radial-gradient(circle at 88% 18%, rgba(28, 138, 255, .10), transparent 27rem),
    #f4f9ff;
}

.top,
.topbar {
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid #dbe8f6 !important;
  box-shadow: 0 5px 24px rgba(2, 28, 61, .06);
  backdrop-filter: blur(14px);
}

.top .shell,
.shell.nav {
  min-height: 78px;
  max-width: 1280px;
}

.brand {
  color: #071833 !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
}

.brand span,
.brand strong {
  color: var(--premium-blue) !important;
}

.navlinks,
.nav-links {
  gap: 27px !important;
}

.navlinks a,
.nav-links a {
  color: #0a1933 !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
}

.navlinks a:hover,
.navlinks a.active,
.nav-links a:hover,
.nav-links a.active {
  color: var(--premium-blue) !important;
}

.navlinks .primary,
.nav-links .primary,
.top .primary {
  border-radius: 10px !important;
  background: linear-gradient(135deg, #087ff5, #0565d4) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(7, 117, 233, .22);
}

.hero {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  min-height: 405px;
  background: #041a37 !important;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.page-home .hero::before {
  background-image: linear-gradient(90deg, rgba(2, 16, 38, .98) 0%, rgba(2, 19, 48, .88) 39%, rgba(2, 17, 43, .22) 100%), url("assets/range-rover-detail.jpeg");
}

.page-diensten .hero::before {
  background-image: linear-gradient(90deg, rgba(2, 16, 38, .98) 0%, rgba(2, 19, 48, .82) 48%, rgba(2, 17, 43, .35) 100%), url("assets/vw-detail.jpeg");
}

.page-contact .hero::before {
  background-image: linear-gradient(90deg, rgba(2, 16, 38, .98) 0%, rgba(2, 19, 48, .82) 47%, rgba(2, 17, 43, .32) 100%), url("assets/audi-q2-detail.jpeg");
}

.page-over-ons .hero::before {
  background-image: linear-gradient(90deg, rgba(2, 16, 38, .98) 0%, rgba(2, 19, 48, .82) 47%, rgba(2, 17, 43, .28) 100%), url("assets/detail-in-actie.jpeg");
}

.page-resultaten .hero::before {
  background-image: linear-gradient(90deg, rgba(2, 16, 38, .98) 0%, rgba(2, 19, 48, .84) 46%, rgba(2, 17, 43, .28) 100%), url("assets/range-rover-exterieur.jpeg");
}

.page-voorwaarden .hero::before {
  background-image: linear-gradient(90deg, rgba(2, 16, 38, .98) 0%, rgba(2, 19, 48, .84) 46%, rgba(2, 17, 43, .28) 100%), url("assets/range-rover-cabine.jpeg");
}

.page-boeken .hero::before {
  background-image: linear-gradient(90deg, rgba(2, 16, 38, .98) 0%, rgba(2, 19, 48, .84) 46%, rgba(2, 17, 43, .28) 100%), url("assets/bmw-detail.jpeg");
}

.hero h1 {
  color: #fff !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(2.8rem, 5vw, 5.7rem) !important;
  font-weight: 500 !important;
  letter-spacing: -.055em !important;
  line-height: .98 !important;
  max-width: 760px;
}

.hero h1 span,
.hero h1 em {
  color: #168aff !important;
  font-style: normal;
}

.hero p,
.hero .lead {
  color: rgba(242, 248, 255, .90) !important;
  font-size: 18px;
  max-width: 590px;
}

.eyebrow,
.kicker {
  color: #51a5ff !important;
  letter-spacing: .20em !important;
  font-weight: 800 !important;
}

.hero .primary,
.primary,
.cta {
  background: linear-gradient(135deg, #0b88ff, #0568dc) !important;
  border: 1px solid rgba(112, 184, 255, .65) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 24px rgba(0, 110, 235, .24);
}

.hero .ghost,
.ghost {
  color: #fff !important;
  border: 1px solid rgba(213, 234, 255, .65) !important;
  border-radius: 10px !important;
  background: rgba(2, 17, 42, .35) !important;
}

.section,
section {
  position: relative;
}

.section h2,
section h2 {
  color: #071833;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -.035em;
}

.section-head p,
.section p,
section p {
  color: #586b88;
}

.card,
.service-card,
.contact-card,
.info-card,
.policy-card {
  border: 1px solid var(--premium-line) !important;
  box-shadow: 0 14px 34px rgba(4, 33, 72, .08);
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .96) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.card:hover,
.service-card:hover,
.contact-card:hover,
.info-card:hover {
  border-color: rgba(7, 124, 240, .52) !important;
  box-shadow: 0 22px 44px rgba(4, 33, 72, .15);
  transform: translateY(-4px);
}

.service-card h3,
.card h3,
.card h2 {
  color: #071833 !important;
}

.service-card .price,
.price,
.accent {
  color: #087cf0 !important;
}

.page-resultaten .gallery,
.gallery {
  gap: 22px !important;
}

.page-resultaten .gallery .card,
.gallery .card {
  overflow: hidden;
  min-height: 285px;
  background: #061a37 !important;
}

.page-resultaten .gallery .card::after,
.gallery .card::after {
  background: linear-gradient(0deg, rgba(1, 13, 31, .88), rgba(1, 13, 31, .02) 62%) !important;
}

.page-resultaten .gallery .card strong,
.gallery .card strong {
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

.booking,
.booking-section,
.booking-wrap,
.booking-shell {
  background: transparent !important;
}

.booking-page form,
.page-boeken form {
  border: 1px solid var(--premium-line);
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(4, 33, 72, .10);
  background: rgba(255, 255, 255, .98);
}

.booking-page input,
.booking-page select,
.booking-page textarea,
.page-boeken input,
.page-boeken select,
.page-boeken textarea {
  border-color: #c5dcf2 !important;
  background: #fbfdff !important;
}

.booking-page input:focus,
.booking-page select:focus,
.booking-page textarea:focus,
.page-boeken input:focus,
.page-boeken select:focus,
.page-boeken textarea:focus {
  border-color: #0980f0 !important;
  box-shadow: 0 0 0 4px rgba(9, 128, 240, .12) !important;
}

.choice.selected,
.service-option.selected,
.time-slot.selected,
.selected {
  border-color: #0a80ef !important;
  background: #edf7ff !important;
  box-shadow: inset 0 0 0 1px rgba(10, 128, 239, .18);
}

footer,
.footer {
  background:
    radial-gradient(circle at 80% 0%, rgba(23, 126, 239, .30), transparent 28rem),
    linear-gradient(120deg, #03142d, #082c5c) !important;
}

@media (max-width: 760px) {
  .top .shell,
  .shell.nav {
    min-height: 65px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .brand {
    font-size: 14px !important;
    letter-spacing: .08em !important;
  }

  .navlinks,
  .nav-links {
    width: 100%;
    order: 3;
    overflow-x: auto;
    gap: 18px !important;
    padding: 10px 0 2px;
    scrollbar-width: none;
  }

  .navlinks::-webkit-scrollbar,
  .nav-links::-webkit-scrollbar {
    display: none;
  }

  .navlinks a,
  .nav-links a {
    white-space: nowrap;
    font-size: 13px;
  }

  .navlinks .primary,
  .nav-links .primary {
    padding: 9px 12px !important;
  }

  .hero {
    min-height: 430px;
  }

  .hero::before {
    background-position: 68% center !important;
  }

  .hero h1 {
    font-size: clamp(2.75rem, 14vw, 4.1rem) !important;
    max-width: 330px;
  }

  .hero p,
  .hero .lead {
    font-size: 16px;
    max-width: 325px;
  }

  .section h2,
  section h2 {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .page-resultaten .gallery,
  .gallery {
    gap: 14px !important;
  }

  .page-resultaten .gallery .card,
  .gallery .card {
    min-height: 235px;
  }
}