/*
Theme Name: Taxi Voorne aan Zee V2
Theme URI: https://taxivoorneaanzee.nl
Author: Taxi Voorne aan Zee
Author URI: https://taxivoorneaanzee.nl
Description: Compact, zelfstandig en mobielvriendelijk WordPress-theme voor Taxi Voorne aan Zee.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taxivoorneaanzee-v2
Tags: taxi, transport, one-page, responsive
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
    --color-primary: #00D180;
    --color-primary-dark: #00B56F;
    --color-primary-soft: rgba(0, 209, 128, 0.10);
    /* Donker merkgroen voor tekst, links, functionele iconen en focus op lichte achtergronden
       (4,6:1 op wit; het heldere --color-primary haalt 2,0:1 en blijft accent-/vulkleur). */
    --color-primary-text: #00874A;
    --color-focus-ring: rgba(0, 135, 74, 0.18);
    --color-text: #232323;
    --color-text-muted: #5F6B73;
    --color-bg: #FFFFFF;
    --color-surface: #F7F9FA;
    --color-border: #E6EAEF;

    --radius: 18px;
    --radius-sm: 10px;
    --radius-pill: 999px;

    --shadow: 0 4px 24px rgba(0, 209, 128, 0.08);
    --shadow-hover: 0 8px 32px rgba(17, 17, 17, 0.13);

    --container-max: 1200px;
    --space-mobile: 16px;
    --space-section: 40px;
    --space-block: 1.25rem;
    --card-padding: 1.25rem;
    --header-height: 68px;

    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --line-height: 1.6;

    --transition: 0.2s ease;
}

/* ==========================================================================
   2. Reset / basis
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 8px);
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: var(--line-height);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 0.5em;
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-text);
}

h1 { font-size: 1.9rem; letter-spacing: -0.01em; }
h2 { font-size: 1.5rem; letter-spacing: -0.01em; }
h3 { font-size: 1.2rem; }

p {
    margin: 0 0 1em;
}

ul,
ol {
    margin: 0 0 1em;
    padding-left: 1.25em;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--color-primary-text);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover,
a:focus {
    color: var(--color-primary-text);
    text-decoration: underline;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    border: 0;
    background: none;
    padding: 0;
}

fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

legend {
    padding: 0;
}

address {
    font-style: normal;
}

/* Sitebrede toetsenbordfocus: donkergroene ring (4,6:1 op wit) met ruimte rond het element;
   velden tonen focus via rand + halo (zie .field__input:focus). */
:focus-visible {
    outline: 3px solid var(--color-primary-text);
    outline-offset: 2px;
}

.icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-mobile);
}

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1 0 auto;
}

.section {
    padding-block: var(--space-section);
}

.section--surface {
    background: var(--color-surface);
}

.section__header {
    max-width: 42rem;
    margin: 0 auto 1.75rem;
    text-align: center;
}

.section__title {
    margin-bottom: 0.4rem;
}

.section__lead {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

/* ==========================================================================
   4. Basiscomponenten
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 48px;
    padding: 0.7em 1.5em;
    border-radius: var(--radius-pill);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    text-decoration: none;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.btn:hover,
.btn:focus {
    text-decoration: none;
}

.btn[hidden] {
    display: none;
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Primaire CTA (owner-besluit 4E): helder logo-groen met de donkere tekstkleur (7,8:1; wit zou 2,0:1
   geven); hover één tint donkerder groen (5,9:1). De WhatsApp-knop deelt exact deze stijl; alleen
   icoon (currentColor), tekst en link verschillen. */
.btn--primary,
.btn--whatsapp {
    background: var(--color-primary);
    color: var(--color-text);
    box-shadow: 0 2px 8px rgba(17, 17, 17, 0.07);
}

.btn--primary:hover,
.btn--primary:focus,
.btn--whatsapp:hover,
.btn--whatsapp:focus {
    background: var(--color-primary-dark);
    color: var(--color-text);
    box-shadow: 0 6px 24px rgba(0, 209, 128, 0.18);
}

/* Uitgeschakelde primaire knop (bijv. "Rit aanvragen" vóór de afstandsberekening): neutraal grijs
   in plaats van een vervaagde groene CTA, zonder hover/schaduw; blijft qua vorm en plek onderdeel
   van de flow. Een knop die bezig is met verzenden (aria-busy) houdt zijn eigen stijl. */
.btn--primary:disabled:not([aria-busy="true"]),
.btn--primary:disabled:not([aria-busy="true"]):hover,
.btn--primary:disabled:not([aria-busy="true"]):focus {
    opacity: 1;
    background: var(--color-border);
    color: var(--color-text-muted);
    box-shadow: none;
}

.btn--secondary {
    background: var(--color-bg);
    color: var(--color-primary-text);
    border: 2px solid var(--color-primary);
}

.btn--secondary:hover,
.btn--secondary:focus {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
}

.btn--lg {
    min-height: 54px;
    font-size: 1.05rem;
    padding: 0.85em 1.9em;
}

.btn--block {
    width: 100%;
}

.card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Formulieren */

.field {
    margin-bottom: 0.9rem;
    min-width: 0;
}

.field__label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.92rem;
    font-weight: 600;
}

.field__input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.field__input:focus {
    outline: none;
    border-color: var(--color-primary-text);
    background: var(--color-bg);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.field__input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.8;
}

.field__textarea {
    min-height: 140px;
    resize: vertical;
}

.field--checkbox {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
}

.field--checkbox .field__label {
    margin: 0;
    cursor: pointer;
}

.field__checkbox {
    width: 22px;
    height: 22px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 1rem;
}

/* ==========================================================================
   5. Header en navigatie
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--color-bg);
    box-shadow: 0 1px 0 var(--color-border), 0 6px 20px rgba(17, 17, 17, 0.04);
}

.site-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--header-height);
}

.site-nav__brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.5rem 0;
}

.site-nav__logo {
    width: auto;
    height: 40px;
    max-width: min(220px, 55vw);
}

.site-nav__toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
}

.site-nav__toggle:hover {
    background: var(--color-primary-soft);
}

.site-nav__toggle-bar {
    display: block;
    width: 24px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--color-text);
    transition: transform var(--transition), opacity var(--transition);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(2) {
    opacity: 0;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}

.site-nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.5rem 0 1rem;
    list-style: none;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-hover);
}

.site-nav__menu.is-open {
    display: flex;
    flex-direction: column;
}

/* Mobiel: subtiele overlay over de pagina zolang het menu open is (klik erop sluit het menu via
   de "klik buiten"-afhandeling in main.js); header en menu liggen erboven (z-index 1000). */
body.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(26, 31, 29, 0.35);
}

.site-nav__item {
    margin: 0;
}

.site-nav__link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0.5rem var(--space-mobile);
    color: var(--color-text);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.site-nav__link:hover,
.site-nav__link:focus {
    color: var(--color-primary-text);
    background: var(--color-primary-soft);
    text-decoration: none;
}

/* Mobiel: de CTA staat in de DOM op zijn navigatiepositie (2e, zoals op desktop) maar wordt
   visueel als afsluitende primaire actie ná de gewone links getoond, gescheiden door een lijn. */
.site-nav__item--cta {
    order: 1;
    margin-top: 0.5rem;
    padding: 0.85rem var(--space-mobile) 0;
    border-top: 1px solid var(--color-border);
}

.site-nav__cta {
    width: 100%;
}

/* Taalkeuze (F3-correctie): alleen de vlag van de actieve taal als kleine knop; de andere publieke
   talen staan in een compacte lijst die pas na klik/tik opent (geen hover). Mobiel: laatste rij in
   het uitklapmenu (order), lijst in de flow onder de knop (niet zwevend); desktop (≥900px): eerste
   item vóór Home met een kleine popover. Bewust rustig: geen accentkleur, geen brede knop. */
.site-nav__item--lang {
    order: 2;
    margin-top: 0.75rem;
    padding: 0.75rem var(--space-mobile) 0;
    border-top: 1px solid var(--color-border);
}

.lang-switch {
    position: relative;
}

.lang-switch__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    transition: background var(--transition);
}

.lang-switch__toggle:hover,
.lang-switch__toggle:focus,
.lang-switch__toggle[aria-expanded="true"] {
    background: var(--color-primary-soft);
}

/* Vlag: 21×14 (3:2), licht afgerond, dunne rand zodat de witte NL-baan zich aftekent op de witte header. */
.lang-switch__flag {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 21px;
    height: 14px;
    border-radius: 2px;
    overflow: hidden;
}

.lang-switch__flag .lang-flag {
    display: block;
    width: 21px;
    height: 14px;
}

.lang-switch__flag::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(35, 35, 35, 0.14);
    pointer-events: none;
}

.lang-switch__caret {
    display: block;
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-right: 1.5px solid var(--color-text-muted);
    border-bottom: 1.5px solid var(--color-text-muted);
    transform: rotate(45deg);
    transition: transform var(--transition);
}

.lang-switch__toggle[aria-expanded="true"] .lang-switch__caret {
    margin-top: 3px;
    transform: rotate(-135deg);
}

.lang-switch__menu {
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
}

.lang-switch__menu[hidden] {
    display: none;
}

.lang-switch__item {
    margin: 0;
}

.lang-switch__link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 44px;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-weight: 500;
    transition: color var(--transition), background var(--transition);
}

.lang-switch__link:hover,
.lang-switch__link:focus {
    color: var(--color-primary-text);
    background: var(--color-primary-soft);
    text-decoration: none;
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hero {
    /* Openingssectie = eerste schermhoogte onder de sticky header (alle viewports).
       Padding valt binnen de hoogte (border-box); bij te weinig hoogte groeit de sectie gewoon mee. */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: calc(100vh - var(--header-height));
    padding-block: 2rem 1.75rem;
    background: linear-gradient(120deg, #f8fff8 0%, #eafff3 100%);
    border-bottom: 1px solid rgba(0, 209, 128, 0.12);
    text-align: center;
}

@supports (height: 100svh) {
    .hero {
        /* Mobiele browsers: kleinste viewporthoogte, zodat de vouw ook met zichtbare adresbalk klopt. */
        min-height: calc(100svh - var(--header-height));
    }
}

.hero__inner {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Logo t/m CTA gecentreerd; de iconenrij sluit de sectie onderaan af (auto-marges delen de vrije ruimte). */
.hero__logo {
    margin-top: auto;
}

.hero__logo {
    width: min(46vw, 170px);
    height: auto;
    margin-bottom: 1rem;
}

/* Langere SEO-titel (4S): twee evenwichtige regels op ≥ 640px, drie op smalle telefoons; iets kleiner dan de
   standaard h1 zodat de eerste fold (≥ 900px, zie 1366x768-meting) niet groeit. */
.hero__title {
    max-width: 34ch;
    margin-inline: auto;
    margin-bottom: 0.35rem;
    font-size: 1.7rem;
    line-height: 1.15;
    text-wrap: balance;
}

.hero__subtitle {
    margin-bottom: 0.6rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-primary-text);
}

.hero__intro {
    max-width: 38rem;
    margin-bottom: 1.25rem;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.hero__phone {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.hero__phone-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--color-text);
}

.hero__phone-link .icon {
    color: var(--color-primary-text);
}

.hero__phone-link:hover,
.hero__phone-link:focus {
    color: var(--color-primary-text);
    text-decoration: none;
}

.hero__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    max-width: 32rem;
}

.hero__actions .btn--lg {
    width: 100%;
}

.hero__quick {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin: auto 0 0;
    padding: 1.5rem 0 0;
    list-style: none;
}

.hero__quick-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-primary-text);
    box-shadow: 0 2px 8px rgba(17, 17, 17, 0.06);
    transition: transform var(--transition), box-shadow var(--transition);
}

.hero__quick-link:hover,
.hero__quick-link:focus {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    color: var(--color-primary-text);
}

/* ==========================================================================
   7. Afstand / ritaanvraag
   ========================================================================== */

.ride__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-block);
    align-items: start;
}

.ride__card {
    padding: var(--card-padding);
}

.ride-form__group {
    margin-bottom: 1.25rem;
}

.ride-form__group:last-of-type {
    margin-bottom: 0.75rem;
}

.ride-form__legend {
    margin-bottom: 0.85rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.ride-form__return {
    margin-top: 0.5rem;
}

.ride-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
}

.ride-result__label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
}

/* De afstand ("52,7 km") breekt nooit over twee regels; het label mag wel afbreken. */
.ride-result__value {
    flex: 0 0 auto;
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-primary-text);
}

.ride-form__note {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.ride__map-card {
    display: flex;
    flex-direction: column;
}

.route-map {
    position: relative;
    flex: 1 0 auto;
    min-height: 240px;
    max-width: 100%;
    overflow: hidden;
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.route-map--ready {
    border-style: solid;
}

.route-map__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.route-map__placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    background: rgba(247, 249, 250, 0.92);
}

.route-map__placeholder[hidden] {
    display: none;
}

.route-map__text {
    max-width: 24rem;
    margin: 0;
    font-size: 0.95rem;
}

.route-map__icon {
    opacity: 0.6;
}

.route-map--loading .route-map__icon {
    animation: tvz-pulse 1.2s ease-in-out infinite;
}

.route-map--fallback .route-map__icon {
    opacity: 0.35;
}

.route-map--fallback {
    min-height: 200px;
}

@keyframes tvz-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.85; }
}

.ride__disclaimer {
    margin: 0.85rem 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* ==========================================================================
   8. Diensten
   ========================================================================== */

.services__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-block);
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 1.75rem var(--card-padding);
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.service-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
}

.service-card__title {
    margin-bottom: 0.4rem;
    font-size: 1.1rem;
}

.service-card__text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.services__cta {
    max-width: 44rem;
    margin: 2rem auto 0;
    padding: 1.75rem var(--card-padding);
    text-align: center;
    background: linear-gradient(120deg, #f8fff8 0%, #eafff3 100%);
}

.services__cta-title {
    margin-bottom: 0.5rem;
}

.services__cta-text {
    margin-bottom: 1.25rem;
    color: var(--color-text-muted);
}

/* ==========================================================================
   9. Voertuigen
   ========================================================================== */

.vehicles__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-block);
    margin: 0;
    padding: 0;
    list-style: none;
}

.vehicle-card {
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

.vehicle-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.vehicle-card__media {
    aspect-ratio: 4 / 3;
    background: var(--color-surface);
}

.vehicle-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Staande foto (sedan, 3:4) in het liggende 4:3-kader: iets hoger uitsnijden zodat de hele auto
   (dak tot bumper) in beeld blijft in plaats van vooral motorkap en bestrating. */
.vehicle-card__media--portrait img {
    object-position: 50% 30%;
}

.vehicle-card__body {
    padding: var(--card-padding);
}

.vehicle-card__title {
    margin-bottom: 0.4rem;
    font-size: 1.25rem;
}

.vehicle-card__text {
    margin-bottom: 0.9rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.vehicle-card__features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.vehicle-card__features li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.vehicle-card__features .icon {
    color: var(--color-primary);
}

/* ==========================================================================
   10. Bedrijfsinformatie
   ========================================================================== */

.company__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    align-items: center;
}

.company__intro {
    text-align: center;
}

.company__intro .section__title {
    text-align: center;
}

.company__intro .section__lead {
    margin-bottom: 1rem;
}

.company__logo {
    width: 120px;
    height: auto;
    margin: 0 auto 0.75rem;
}

.company__card {
    padding: var(--card-padding);
}

.company__card-title {
    margin-bottom: 1rem;
}

.company__details {
    margin: 0 0 1.5rem;
}

.company__row {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border);
}

.company__row:last-child {
    border-bottom: 0;
}

.company__row dt {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.company__row dd {
    margin: 0.15rem 0 0;
    font-size: 1.05rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.company__muted {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

/* ==========================================================================
   11. Contact
   ========================================================================== */

.contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-block);
    align-items: stretch;
}

.contact__card {
    padding: var(--card-padding);
}

.contact__info {
    display: flex;
    flex-direction: column;
}

.contact__info .btn--whatsapp {
    margin-top: auto;
}

.contact__title {
    margin-bottom: 1rem;
    font-size: 1.15rem;
}

.contact__list {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.contact__item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
    min-width: 0;
}

.contact__item > div {
    min-width: 0;
}

.contact__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
}

.contact__label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.contact__value {
    display: inline-block;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

a.contact__value:hover,
a.contact__value:focus {
    color: var(--color-primary-text);
}

/* Bereikbaarheid: één duidelijk blok tussen de contactgegevens en de WhatsApp-knop. */
.contact__availability {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    list-style: none;
}

.contact__availability-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.contact__availability-item .icon {
    flex-shrink: 0;
    color: var(--color-primary-text);
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.site-footer {
    padding-block: 2.5rem 1rem;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-bottom: 1.5rem;
}

/* Mobiel: gecentreerd merkblok, daarna gescheiden groepen; navigatie (dubbelt met hoofdmenu) als laatste. */
.site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 1.25rem;
    text-align: center;
}

.site-footer__col {
    padding-block: 1.25rem;
    border-top: 1px solid var(--color-border);
}

.site-footer__grid > .site-footer__col:nth-child(2) { order: 4; }
.site-footer__grid > .site-footer__col:nth-child(3) { order: 2; }
.site-footer__grid > .site-footer__col:nth-child(4) { order: 3; }

.site-footer__logo {
    width: 110px;
    height: auto;
    margin-bottom: 0.85rem;
}

.site-footer__socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    transition: background var(--transition), color var(--transition);
}

.site-footer__social:hover,
.site-footer__social:focus {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
}

.site-footer__heading {
    margin-bottom: 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.site-footer__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-text);
    font-size: 0.95rem;
}

.site-footer__links a:hover,
.site-footer__links a:focus {
    color: var(--color-primary-text);
}

.site-footer__address {
    font-size: 0.95rem;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

.site-footer__address a {
    /* Mobiel: ~44px touch-target zonder de regelafstand zichtbaar te vergroten. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    margin-block: -0.35rem;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.site-footer__address a:hover,
.site-footer__address a:focus {
    color: var(--color-primary-text);
}

.site-footer__hours {
    margin-bottom: 0.85rem;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.site-footer__col .btn--primary {
    width: 100%;
}

.site-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.85rem;
    text-align: center;
    color: var(--color-text-muted);
}

.site-footer__copyright {
    margin: 0;
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--color-text-muted);
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    text-underline-offset: 3px;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus {
    color: var(--color-primary-text);
}

/* "Cookie-instellingen": knop met exact de opmaak van de juridische links. */
.site-footer__legal-button {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--color-text-muted);
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    text-underline-offset: 3px;
    cursor: pointer;
}

.site-footer__legal-button:hover,
.site-footer__legal-button:focus {
    color: var(--color-primary-text);
}

/* ==========================================================================
   13. Fallback-content (index.php)
   ========================================================================== */

.entry {
    max-width: 48rem;
    margin: 0 auto 2rem;
}

.entry__content {
    overflow-wrap: anywhere;
}

/* Juridische pagina's (page-privacy.php, page-voorwaarden.php) */

.legal {
    max-width: 44rem;
    margin: 0 auto;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.legal__header {
    margin-bottom: 2rem;
}

.legal__title {
    margin: 0 0 0.5rem;
}

.legal__meta {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.legal__lead {
    margin: 0;
    font-size: 1.05rem;
    color: var(--color-text-muted);
}

.legal__section {
    margin: 0 0 2.25rem;
}

.legal__section h2 {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    line-height: 1.3;
}

.legal__section p,
.legal__section ul {
    margin: 0 0 1rem;
}

.legal__section li {
    margin-bottom: 0.5rem;
}

.legal__section a {
    color: var(--color-primary-text);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.legal__facts {
    display: grid;
    gap: 0.5rem 1.25rem;
    margin: 0 0 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.legal__facts > div {
    display: grid;
    gap: 0.1rem 1rem;
}

.legal__facts dt {
    font-weight: 600;
}

.legal__facts dd {
    margin: 0;
}

.legal__address {
    font-style: normal;
    line-height: 1.6;
}

@media (min-width: 640px) {
    .legal__facts > div {
        grid-template-columns: 14rem minmax(0, 1fr);
    }
}

/* Privacy-informatieregel bij formulieren */

.form-privacy-note {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.form-privacy-note a {
    color: var(--color-primary-text);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* ==========================================================================
   14. Toegankelijkheid
   ========================================================================== */

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-mobile);
    z-index: 2000;
    padding: 0.75em 1em;
    background: var(--color-primary-text);
    color: #fff;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.skip-link:focus {
    top: 0;
    color: #fff;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   15. Responsive (mobile first: default < 640 < 900 < 1200)
   ========================================================================== */

@media (min-width: 640px) {
    :root {
        --space-mobile: 24px;
        --space-section: 56px;
        --space-block: 1.5rem;
        --card-padding: 1.75rem;
    }

    h1 { font-size: 2.4rem; }
    .hero__title { font-size: 2.4rem; }
    h2 { font-size: 1.8rem; }

    .section__header {
        margin-bottom: 2.25rem;
    }

    .section__lead {
        font-size: 1.05rem;
    }

    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero {
        padding-block: 2.5rem 2.25rem;
    }

    .hero__logo {
        width: 190px;
    }

    .hero__phone-link {
        font-size: 1.85rem;
    }

    .hero__actions .btn--lg {
        width: auto;
        min-width: 18rem;
        font-size: 1.15rem;
    }

    .site-footer {
        padding-block: 3rem 1.25rem;
    }

    .site-footer__grid {
        /* Merkrij over de volle breedte, daaronder navigatie / contact / bereikbaarheid naast elkaar
           (contact iets breder voor adres en e-mailadres). */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 2rem 1.5rem;
        margin-bottom: 2rem;
    }

    .site-footer__brand {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        padding-bottom: 0;
        text-align: left;
    }

    .site-footer__logo {
        margin-bottom: 0;
    }

    .site-footer__socials {
        justify-content: flex-start;
    }

    .site-footer__col {
        padding-block: 0;
        border-top: 0;
    }

    .site-footer__grid > .site-footer__col:nth-child(2) { order: 0; }
    .site-footer__grid > .site-footer__col:nth-child(3) { order: 0; }
    .site-footer__grid > .site-footer__col:nth-child(4) { order: 0; }

    .site-footer__links {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-footer__links a {
        min-height: 36px;
    }

    .site-footer__address a {
        display: inline;
        min-height: 0;
        margin-block: 0;
    }

    /* Smalle tabletkolom (vanaf 160px): CTA op kolombreedte, tekst op één regel. */
    .site-footer__col .btn--primary {
        padding-inline: 1em;
        white-space: nowrap;
    }

    .services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .company__row {
        display: grid;
        grid-template-columns: 130px minmax(0, 1fr);
        gap: 1rem;
        align-items: baseline;
    }

    .company__row dd {
        margin-top: 0;
    }

    .site-footer__bottom {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }

    .site-footer__legal {
        justify-content: flex-end;
    }
}

/* Voertuigkaarten naast elkaar zodra ze comfortabel passen (≥ ~340px per kaart); bij 640px zouden
   twee kaarten te smal worden, daarom een eigen grens tussen 640 en 900. */
@media (min-width: 720px) {
    .vehicles__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    :root {
        --space-mobile: 32px;
        --space-section: 72px;
        --card-padding: 2rem;
        --header-height: 76px;
    }

    body.nav-open::after {
        content: none;
    }

    h1 { font-size: 2.75rem; }
    .hero__title { font-size: 2.25rem; } /* 4S: langere titel, eerste fold blijft gelijk */
    h2 { font-size: 2rem; }

    .section__header {
        margin-bottom: 2.5rem;
    }

    .site-nav__logo {
        height: 48px;
    }

    .site-nav__toggle {
        display: none;
    }

    .site-nav__menu,
    .site-nav__menu.is-open {
        display: flex;
        position: static;
        align-items: center;
        gap: 0.25rem;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .site-nav__link {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        background: transparent;
    }

    .site-nav__link:hover,
    .site-nav__link:focus {
        background: transparent;
        border-bottom-color: var(--color-primary);
    }

    .site-nav__item--cta {
        order: 0;
        margin-top: 0;
        padding: 0 0 0 0.75rem;
        border-top: 0;
    }

    .site-nav__cta {
        width: auto;
    }

    /* Taalkeuze op desktop: klein icoon vóór Home, lijst als compacte popover onder de knop. */
    .site-nav__item--lang {
        order: 0;
        margin: 0 0.25rem 0 0;
        padding: 0;
        border-top: 0;
    }

    .lang-switch__toggle {
        gap: 0.25rem;
        min-width: 40px;
        min-height: 40px;
        padding: 0.375rem 0.5rem;
    }

    .lang-switch__menu {
        position: absolute;
        top: calc(100% + 0.25rem);
        left: 0;
        z-index: 10;
        min-width: 10.5rem;
        margin: 0;
        padding: 0.25rem;
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        box-shadow: 0 8px 24px rgba(17, 17, 17, 0.10);
    }

    .lang-switch__link {
        min-height: 40px;
        padding: 0.375rem 0.625rem;
        white-space: nowrap;
    }

    .hero__logo {
        width: 230px;
    }

    .hero__quick {
        padding-top: 2.5rem;
        gap: 1rem;
    }

    /* Iets grotere contacticonen op desktop/laptop (mobiel ongewijzigd). */
    .hero__quick-link {
        width: 58px;
        height: 58px;
    }

    .hero__quick-link .icon {
        width: 30px;
        height: 30px;
    }

    .hero__intro {
        font-size: 1.05rem;
    }

    .ride__grid {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        /* Beide kaarten even hoog: de kaartkolom vult de hoogte van het formulier (de kaart groeit
           mee via flex), zonder lege ruimte onder de kaartkaart. */
        align-items: stretch;
    }

    .route-map {
        min-height: 320px;
    }

    .route-map--fallback {
        min-height: 220px;
    }

    .company__grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 3rem;
        /* Introkolom en gegevenskaart beginnen op dezelfde bovenlijn. */
        align-items: start;
    }

    .company__intro,
    .company__intro .section__title {
        text-align: left;
    }

    .company__logo {
        margin-left: 0;
    }

    .contact__grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }

    /* De contactkaart is even hoog als het formulier; de vrije ruimte wordt verdeeld tussen
       gegevens, bereikbaarheidsblok en WhatsApp-knop in plaats van één gat boven de knop. */
    .contact__availability {
        margin-top: auto;
    }

    .site-footer {
        padding-block: 3.5rem 1.25rem;
    }

    .site-footer__grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
        gap: 2.5rem;
    }

    .site-footer__brand {
        grid-column: auto;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
    }

    .site-footer__logo {
        width: 120px;
        margin-bottom: 1rem;
    }

    .site-footer__col .btn--primary {
        width: auto;
        padding-inline: 1.5em;
    }
}

@media (min-width: 1200px) {
    .hero__logo {
        width: 250px;
    }

    :root {
        --space-mobile: 40px;
    }

    .site-nav__menu {
        gap: 0.75rem;
    }

    .services__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .site-footer__grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
        gap: 3rem;
    }
}

/* Lage laptopschermen (bijv. 1366x768): iets compacter zodat de openingssectie binnen de eerste schermhoogte past. */
@media (min-width: 900px) and (max-height: 800px) {
    .hero {
        padding-block: 1.75rem 1.75rem;
    }

    .hero__logo {
        width: 195px;
        margin-bottom: 0.75rem;
    }

    .hero__quick {
        padding-top: 1.5rem;
    }
}

/* ==========================================================================
   16. Afstand/ritaanvraag — meldingen, resultaat, validatie, dialoog
   ========================================================================== */

.ride-form__hint,
.field__hint {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.field__hint {
    margin: 0.35rem 0 0;
}

.ride-message {
    margin-bottom: 1.5rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: 0.95rem;
}

.ride-message--info {
    border-color: rgba(0, 209, 128, 0.35);
    background: var(--color-primary-soft);
}

.ride-message--error {
    border-color: rgba(220, 38, 38, 0.35);
    background: rgba(220, 38, 38, 0.06);
    color: #9F1D1D;
}

.ride-result {
    display: block;
}

.ride-result__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
}

/* Het hidden-attribuut (gezet door maps.js/booking.js) moet winnen van de expliciete display-regels
   van .ride-result, .ride-result__row, .ride-trip__meta-row (retourregel in de popupkop) en .field__input
   (origineel adresveld zodra de Google PlaceAutocompleteElement is gemonteerd). */
.ride-result[hidden],
.ride-result__row[hidden],
.ride-trip__meta-row[hidden],
.field__input[hidden] {
    display: none;
}

.ride-result__row--total {
    margin-top: 0.35rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(0, 209, 128, 0.35);
}

.ride-result__value--sub {
    font-size: 1.1rem;
}

.ride-result__note {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.ride-form button[aria-busy="true"] {
    opacity: 0.7;
    cursor: progress;
}

/* Validatie */

.field__error {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: #B91C1C;
}

.field__input[aria-invalid="true"],
.field--invalid .field__autocomplete {
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* Autocomplete-element (Google) in de plaats van het tekstveld */

.field__autocomplete {
    display: block;
    width: 100%;
    min-height: 48px;
    /* Het Google-element rendert standaard met color-scheme: light dark en volgt dan het OS-donkerthema
       (bijna zwarte velden). De site heeft geen donker thema: dwing het lichte schema af en geef het
       element dezelfde ondersteunde eigenschappen als .field__input (officieel: background-color,
       border, border-radius, color, color-scheme, font). */
    color-scheme: light;
    background-color: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 1rem;
    transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.field__autocomplete:focus-within {
    border-color: var(--color-primary-text);
    background-color: var(--color-bg);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.field__autocomplete::part(prediction-list) {
    color-scheme: light;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
}

/* Stap 2: "Rit aanvragen" (pas beschikbaar na het berekenen van de afstand) */

.ride-form__next {
    margin: 0 0 0.75rem;
}

.ride-form__next-hint {
    margin: 0.5rem 0 0;
    text-align: center;
}

.ride-form__next-hint[hidden] {
    display: none;
}

/* Ritaanvraag-popup (dialoog) — naar docs/design-reference/ritaanvraag-popup.html:
   compacte modal (452px), donkere ritkop, 3-stappenindicator, kaarten met steppers, inklapbare extra's,
   checkoverzicht en footerknoppen. Alle kleuren zijn gescoped op .ride-dialog (geen globale tokens gewijzigd). */

.ride-dialog {
    --ride-header: #212926;
    --ride-tint: #F2FAF5;
    --ride-line: #E2EDE7;
    --ride-line-soft: #EBF2EE;
    --ride-field: #DCE7E1;
    --ride-muted: #5C6E68; /* 5,1:1 op de tint (was #667873, 4,4:1) */
    --ride-green-dark: #00874A;
    --ride-green-solid: #00A85A;
    --ride-radius: 18px;
    --ride-pad-x: 26px;

    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    /* De <dialog> zelf scrollt nooit (het body-deel scrollt): een gefocuste, visueel verborgen paneeltitel
       krijgt in Chromium tijdelijk zijn tekstbreedte en zou anders horizontale scrollruimte geven. */
    overflow: hidden;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 0.95rem;
    box-shadow: 0 24px 60px -20px rgba(26, 31, 29, 0.3), 0 2px 6px rgba(26, 31, 29, 0.06);
}

.ride-dialog::backdrop {
    background: rgba(26, 31, 29, 0.45);
}

.ride-dialog--fallback {
    position: fixed;
    inset: 0;
    z-index: 3000;
}

.ride-dialog__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100dvh;
}

body.dialog-open {
    overflow: hidden;
}

/* Donkere ritkop */

.ride-dialog__header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px var(--space-mobile) 18px;
    background: var(--ride-header);
    color: #fff;
}

.ride-dialog__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.ride-dialog__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
}

/* De titel krijgt programmatisch focus bij openen (tabindex="-1"); geen focusring nodig. */
.ride-dialog__title:focus {
    outline: none;
}

.ride-dialog__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin: -8px -8px 0 0;
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.75);
}

.ride-dialog__close:hover,
.ride-dialog__close:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.ride-dialog__close:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 1px;
}

.ride-trip {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ride-trip__dots {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding-top: 2px;
}

.ride-trip__dot {
    width: 8px;
    height: 8px;
    border-radius: 99px;
}

.ride-trip__dot--open {
    border: 2.5px solid var(--color-primary);
}

.ride-trip__dot--full {
    background: var(--color-primary);
}

.ride-trip__line {
    width: 2px;
    height: 14px;
    background: rgba(255, 255, 255, 0.25);
}

.ride-trip__route,
.ride-trip__meta {
    margin: 0;
}

.ride-trip__route {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
}

.ride-trip__stop dd,
.ride-trip__meta-row dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.ride-trip__meta {
    flex: 0 1 auto;
    max-width: 46%;
    margin-left: auto;
    text-align: right;
    font-size: 0.78rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}

.ride-trip__meta-row {
    display: block;
}

/* Datum/tijd en retourmoment blijven op één regel; de afstandsregel mag afbreken. */
.ride-trip__meta-row:first-child,
.ride-trip__meta-row--return {
    white-space: nowrap;
}

.ride-trip__meta-row--return dt {
    display: inline;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.ride-trip__meta-row--return dt::after {
    content: ": ";
}

.ride-trip__meta-row--return dd {
    display: inline;
}

.ride-trip__meta-row[hidden] {
    display: none;
}

/* Stappenindicator */

.ride-steps {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 14px var(--space-mobile);
    border-bottom: 1px solid var(--ride-line-soft);
    list-style: none;
}

.ride-steps__item {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.ride-steps__item:first-child {
    flex: 0 0 auto;
}

/* Verbindingslijn vóór stap 2 en 3. */
.ride-steps__item + .ride-steps__item::before {
    content: "";
    flex: 1 1 8px;
    min-width: 8px;
    height: 1px;
    background: var(--ride-line);
}

.ride-steps__num {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--ride-field);
    border-radius: 99px;
    background: #fff;
    color: var(--ride-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.ride-steps__check {
    display: none;
}

.ride-steps__label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ride-muted);
    white-space: nowrap;
}

/* Zeer smalle telefoons: stappenbalk iets compacter zodat de drie labels met verbindingslijnen passen. */
@media (max-width: 379px) {
    .ride-steps {
        gap: 4px;
        padding-inline: 12px;
    }

    .ride-steps__item {
        gap: 5px;
    }

    .ride-steps__num {
        width: 20px;
        height: 20px;
    }

    .ride-steps__label {
        font-size: 0.68rem;
    }
}

.ride-steps__item.is-current .ride-steps__num,
.ride-steps__item.is-done .ride-steps__num {
    border-color: var(--ride-green-dark);
    background: var(--ride-green-dark);
    color: #fff;
}

.ride-steps__item.is-current .ride-steps__label,
.ride-steps__item.is-done .ride-steps__label {
    color: var(--ride-green-dark);
}

.ride-steps__item.is-current .ride-steps__label {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
}

/* Voltooide stap: vinkje in plaats van het cijfer (niet alleen kleur). */
.ride-steps__item.is-done .ride-steps__digit {
    display: none;
}

.ride-steps__item.is-done .ride-steps__check {
    display: block;
}

/* Body en panelen */

.ride-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Ruimte onder het laatste element (bijv. het toelichtingsveld bij "Iets anders"), zodat de
       onderrand niet tegen de footerlijn valt als het body-deel scrollt. */
    padding: 18px var(--space-mobile) 14px;
    -webkit-overflow-scrolling: touch;
}

.ride-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ride-panel[hidden],
.ride-dialog__form[hidden],
.ride-success[hidden],
.ride-extras[hidden],
.ride-extras-toggle[hidden],
.ride-extras__note[hidden] {
    display: none;
}

.ride-panel:focus {
    outline: none;
}

/* Kaarten */

.ride-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 12px;
    background: var(--ride-tint);
}

.ride-card--persons {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
}

.ride-card__title {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}

.ride-card__sub {
    margin-top: 1px;
    font-size: 0.78rem;
    color: var(--ride-muted);
}

.ride-card__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ride-muted);
}

.ride-card__hr {
    height: 1px;
    background: var(--ride-line);
}

.ride-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ride-card__plain {
    font-size: 0.9rem;
    color: var(--color-text);
    cursor: pointer;
}

/* Foutmelding onder een kaartrij (setError voegt .field__error toe aan de dichtstbijzijnde .field of parent). */
.ride-card .field__error,
.ride-dialog .ride-stepper .field__error {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.82rem;
}

.ride-card__row.field--invalid,
.ride-card--persons.field--invalid {
    flex-wrap: wrap;
}

/* Stepper: -/+ knoppen rond een number-input */

.ride-stepper {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(26, 31, 29, 0.08);
}

.ride-stepper__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--color-text);
    transition: background var(--transition);
}

.ride-stepper__btn:hover {
    background: #EAF8F0;
}

.ride-stepper__btn:focus-visible {
    outline: 3px solid var(--color-primary-text);
    outline-offset: -2px;
}

.ride-stepper__btn:disabled {
    color: #B7C5BF;
    background: transparent;
    cursor: default;
}

.ride-dialog .ride-stepper__value {
    display: block;
    width: 3.25em;
    min-height: 40px;
    margin: 0;
    padding: 0 0.15em;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font-size: 0.97rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--color-text);
    -moz-appearance: textfield;
    appearance: textfield;
}

.ride-stepper__value::-webkit-outer-spin-button,
.ride-stepper__value::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

.ride-dialog .ride-stepper__value:focus {
    outline: none;
    border-color: var(--color-primary-text);
    background: #fff;
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.ride-dialog .ride-stepper__value[aria-invalid="true"] {
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* Extra's */

.ride-extras-toggle {
    display: inline-flex;
    align-self: flex-start;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 4px 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ride-green-dark);
    text-align: left;
}

.ride-extras-toggle:hover {
    text-decoration: underline;
}

.ride-extras-toggle__plus {
    font-size: 1rem;
    line-height: 1;
}

.ride-extras-toggle__hint {
    font-weight: 500;
    color: var(--ride-muted);
}

.ride-extras {
    gap: 2px;
    padding: 12px 14px;
}

.ride-extras__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 4px;
}

.ride-extras__hide {
    min-height: 32px;
    padding: 0 4px;
    font-size: 0.78rem;
    color: var(--ride-muted);
}

.ride-extras__hide:hover,
.ride-extras__hide:focus-visible {
    color: var(--color-text);
    text-decoration: underline;
}

.ride-extras__note {
    margin: 4px 0 2px 31px;
}

.ride-dialog .ride-extras__note .field__textarea--short {
    min-height: 64px;
    padding: 10px 13px;
}

/* Vinkjes (extra's en akkoord): native checkbox visueel verborgen, eigen vinkvak dat de focus toont. */

.ride-dialog .ride-check-field {
    margin: 0;
}

.ride-check {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-height: 44px;
    padding: 7px 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--color-text);
    cursor: pointer;
}

.ride-check__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

.ride-check__box {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 0.1em;
    border: 1.5px solid #C6D4CD;
    border-radius: 6px;
    background: #fff;
    transition: background var(--transition), border-color var(--transition);
}

.ride-check__box::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    opacity: 0;
}

.ride-check__input:checked + .ride-check__box {
    border-color: var(--ride-green-solid);
    background: var(--ride-green-solid);
}

.ride-check__input:checked + .ride-check__box::after {
    opacity: 1;
}

.ride-check__input:focus-visible + .ride-check__box {
    outline: 3px solid var(--color-primary-text);
    outline-offset: 2px;
}

.ride-check__input[aria-invalid="true"] + .ride-check__box {
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.ride-check__text a {
    color: var(--ride-green-dark);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.ride-check-field .field__error {
    margin: 0 0 4px 31px;
}

/* Velden (stap 2) */

.ride-dialog .field {
    margin: 0;
}

.ride-dialog .field__label {
    margin-bottom: 6px;
    font-size: 0.82rem;
    font-weight: 600;
}

.ride-dialog .field__input {
    min-height: 44px;
    padding: 10px 13px;
    border: 1px solid var(--ride-field);
    border-radius: 10px;
    background: #fff;
    font-size: 0.92rem;
}

.ride-dialog .field__input:focus {
    border-color: var(--color-primary-text);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.ride-dialog .field__hint {
    margin-top: 6px;
    font-size: 0.75rem;
    line-height: 1.45;
}

.ride-dialog .field__error {
    margin-top: 5px;
    font-size: 0.82rem;
}

.ride-dialog .form-grid--contact {
    gap: 10px;
}

.ride-dialog .ride-legal {
    margin: 2px 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--ride-muted);
}

.ride-dialog .ride-legal a {
    color: var(--ride-green-dark);
}

/* Checkoverzicht (stap 3) */

.ride-check-summary {
    margin: 0;
    padding: 4px 16px;
    border-radius: 12px;
    background: var(--ride-tint);
}

.ride-check-summary__block {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ride-line);
}

.ride-check-summary__block:last-child {
    border-bottom: 0;
}

.ride-check-summary dt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ride-muted);
}

.ride-check-summary dd {
    margin: 0;
}

.ride-check-summary__value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

/* Vrije toelichting bij "Iets anders" in het checkoverzicht: herkenbaar als eigen regel met label. */
.ride-check-summary__value--note {
    font-weight: 500;
}

.ride-check-summary__key {
    font-weight: 600;
}

.ride-note {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--ride-muted);
}

.ride-consent {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px solid var(--ride-line-soft);
}

.ride-dialog .ride-terms {
    margin: 0;
}

/* Uitdrukkelijke toestemming bij rolstoel (alleen zichtbaar als de rolstoel is aangevinkt). */
.ride-dialog .ride-health-consent {
    margin: 0 0 4px;
}

.ride-health-consent[hidden] {
    display: none;
}

.ride-health-consent .field__hint {
    margin: 0.35rem 0 0 31px;
    font-size: 0.85rem;
}

/* Succesblok na verzending */

.ride-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 4px 8px;
    text-align: center;
}

.ride-success__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 99px;
    background: #E2F7EB;
    color: var(--ride-green-dark);
}

.ride-success__title {
    margin: 2px 0 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.ride-success__title:focus {
    outline: none;
}

.ride-success p {
    max-width: 340px;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--ride-muted);
}

.ride-success p strong {
    color: var(--color-text);
}

.ride-dialog .ride-message {
    margin: 12px 0 0;
    padding: 0.7rem 0.9rem;
    font-size: 0.85rem;
}

/* Footer */

.ride-dialog__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px var(--space-mobile);
    border-top: 1px solid var(--ride-line-soft);
    background: var(--color-bg);
}

.ride-dialog__footer .btn {
    min-height: 46px;
    font-size: 0.9rem;
}

.ride-dialog__footer .btn--secondary {
    flex: 0 0 auto;
    padding: 0.7em 1.25em;
    border: 1px solid var(--ride-field);
    color: var(--color-text);
    font-weight: 600;
}

.ride-dialog__footer .btn--secondary:hover,
.ride-dialog__footer .btn--secondary:focus-visible {
    border-color: var(--color-primary);
    background: var(--ride-tint);
    color: var(--color-text);
}

.ride-dialog__footer .btn--primary {
    flex: 1 1 auto;
    /* Zelfde primaire stijl als de overige CTA's (helder groen, donkere tekst) met het subtiele verloop
       van het ontwerp (#00D274 → #00B85F; tekst 7,8–6,0:1). */
    background: linear-gradient(180deg, #00D274 0%, #00B85F 100%);
    box-shadow: 0 6px 16px -8px rgba(0, 184, 95, 0.8);
}

.ride-dialog__footer .btn--primary:hover,
.ride-dialog__footer .btn--primary:focus-visible {
    background: linear-gradient(180deg, #00BE69 0%, #00A455 100%);
}

.ride-dialog__footer .btn[aria-busy="true"] {
    opacity: 0.7;
    cursor: progress;
}

@media (min-width: 640px) {
    .ride-dialog {
        width: min(452px, calc(100% - 2rem));
        max-width: min(452px, calc(100% - 2rem));
        /* fit-content in plaats van auto: een modaal dialoog krijgt inset-block: 0 van de browser en zou met
           height: auto altijd tot de max-height uitrekken (lege ruimte onder het succesblok). */
        height: fit-content;
        max-height: calc(100dvh - 2rem);
        margin: auto;
        border-radius: var(--ride-radius);
    }

    .ride-dialog--fallback {
        inset: 1rem auto auto 50%;
        transform: translateX(-50%);
    }

    .ride-dialog__inner {
        height: auto;
        max-height: calc(100dvh - 2rem);
    }

    .ride-dialog__header {
        padding: 20px var(--ride-pad-x) 22px;
        gap: 16px;
    }

    .ride-dialog__close {
        width: 36px;
        height: 36px;
        margin: -4px -6px 0 0;
    }

    .ride-steps {
        gap: 7px;
        padding: 15px 22px;
    }

    .ride-steps__label {
        font-size: 0.78rem;
    }

    .ride-dialog__body {
        padding: 20px var(--ride-pad-x) 14px;
    }

    .ride-dialog__footer {
        padding: 16px var(--ride-pad-x);
    }

    .ride-stepper__btn {
        width: 32px;
        height: 32px;
    }

    .ride-dialog .ride-stepper__value {
        min-height: 32px;
    }

    .ride-dialog .form-grid--contact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 12px;
    }

    .ride-dialog .form-grid--contact .field--name {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   17. Formulierverzending — Turnstile, honeypot, succes (ritaanvraag + contact)
   ========================================================================== */

.ride-form__hp,
.form-honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ride-turnstile,
.form-turnstile {
    /* Widget wordt met size: 'normal' gerenderd (300×65 px, officieel formaat); de wrapper volgt de widgetbreedte
       (links uitgelijnd) en wordt nooit breder dan het formulier. */
    width: fit-content;
    max-width: 100%;
    margin: 0.25rem 0 1rem;
    min-height: 0;
    overflow: hidden;
}

.ride-turnstile:empty,
.form-turnstile:empty {
    margin: 0;
}

.ride-dialog .ride-turnstile {
    margin: 4px 0 6px;
}

.ride-message--success {
    border-color: rgba(0, 209, 128, 0.5);
    background: var(--color-primary-soft);
    color: var(--color-text);
    font-weight: 500;
}

/* Lage laptopschermen (bijv. 1366x768): de ritaanvraag-popup iets compacter (na de popupregels hierboven, zodat deze winnen). */
@media (min-width: 900px) and (max-height: 800px) {
    .ride-dialog__header {
        padding-block: 14px 16px;
        gap: 12px;
    }

    .ride-steps {
        padding-block: 9px;
    }

    .ride-dialog__body {
        padding-block: 12px 10px;
    }

    .ride-dialog__footer {
        padding-block: 10px;
    }

    .ride-card {
        padding: 10px 14px;
    }

    .ride-check-summary__block {
        gap: 2px;
        padding-block: 6px;
    }

    .ride-panel {
        gap: 8px;
    }

    .ride-consent {
        gap: 4px;
    }

    .ride-dialog .ride-turnstile {
        margin: 2px 0;
    }
}

/* ==========================================================================
   14. Cookiemelding (Google Analytics, alleen na toestemming — consent.js)
   ========================================================================== */

.cookie-consent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1100;
    padding: 0 var(--space-mobile) max(var(--space-mobile), env(safe-area-inset-bottom));
}

.cookie-consent[hidden] {
    display: none;
}

.cookie-consent:focus {
    outline: none;
}

.cookie-consent__inner {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-width: 62rem;
    margin: 0 auto;
    padding: 1.1rem 1.25rem;
    border-radius: var(--radius);
    background: var(--color-text);
    color: #fff;
    box-shadow: 0 12px 40px rgba(17, 17, 17, 0.28);
}

.cookie-consent__title {
    margin: 0 0 0.35rem;
    font-weight: 700;
}

.cookie-consent__body {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.86);
}

.cookie-consent__body a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookie-consent__body a:hover,
.cookie-consent__body a:focus {
    color: var(--color-primary);
}

.cookie-consent__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

/* Beide knoppen bewust identiek: geen visuele voorkeur voor accepteren. */
.cookie-consent__btn {
    min-height: 48px;
    border: 2px solid #fff;
    background: #fff;
    color: var(--color-text);
}

.cookie-consent__btn:hover,
.cookie-consent__btn:focus {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text);
}

.cookie-consent__btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

@media (min-width: 640px) {
    .cookie-consent__actions {
        grid-template-columns: repeat(2, minmax(10rem, max-content));
        justify-content: end;
    }
}

@media (min-width: 900px) {
    .cookie-consent__inner {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
    }

    .cookie-consent__text {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cookie-consent__actions {
        flex: 0 0 auto;
    }
}