/* ============================================================
   HaarlemCabTaxi — Luxe redesign laag (juni 2026)
   Reskin via CSS-variabelen + verfijningen. Raakt geen HTML/JS.
   Geladen NA style.css zodat deze regels overschrijven.
   ============================================================ */

:root{
  /* Diepere, rijkere groentinten */
  --green-dark:  #0A2A20;
  --green-mid:   #13503C;
  --green-light: #1C6549;
  --green-accent:#2E8B63;
  /* Champagne-goud */
  --gold:        #C8A14B;
  --gold-soft:   #E3C885;
  /* Warm ivoor i.p.v. hard wit/grijs */
  --gray-light:  #F7F3EA;
  --gray-mid:    #ECE4D4;
  --gray-text:   #586259;
  /* Zachtere, diepere schaduwen */
  --shadow-sm: 0 4px 18px rgba(10,42,32,.08);
  --shadow-md: 0 14px 50px rgba(10,42,32,.14);
  --shadow-lg: 0 24px 70px rgba(10,42,32,.20);
  --radius:    14px;
  --radius-lg: 22px;
  /* Body-font wordt Inter */
  --font-main: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* Serif-koppen voor de luxe uitstraling */
h1, h2, h3, h4,
.section-title, .hero-title, .booking-card-title,
.local-content h2, .local-content h3,
.cta-section h2, .why-card h3, .service-card h3, .step-card h3,
.faq-question, .reviewer-name + *, .rating-big strong{
  font-family: var(--font-display);
  letter-spacing: -.01em;
}
.section-title{ font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight:600; }
.section-subtitle{ font-size:1.08rem; }

/* ---------- HERO ---------- */
.hero{
  background:
    linear-gradient(120deg, rgba(10,42,32,.95) 0%, rgba(10,42,32,.62) 60%, rgba(10,42,32,.45) 100%),
    url("../img/home-hero.webp") center/cover no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 78% 28%, rgba(200,161,75,.16), transparent 55%);
}
.hero-title{ font-size: clamp(2.4rem, 4.6vw, 3.7rem); font-weight:600; }
.hero-title span{ color: var(--gold-soft); }
.hero-badge{ border-color: rgba(200,161,75,.55); }
.hero-stat strong{ color: var(--gold-soft); font-family:var(--font-display); }
.schiphol-cta-card{ border-color: rgba(200,161,75,.5); }
.schiphol-cta-card:hover{ background: rgba(200,161,75,.16); }

/* ---------- KNOPPEN ---------- */
.btn{ letter-spacing:.01em; }
.btn-primary{
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: var(--green-dark);
  box-shadow: 0 8px 24px rgba(200,161,75,.32);
}
.btn-primary:hover{
  background: linear-gradient(135deg, var(--gold), #b58e3d);
  color: var(--green-dark);
  box-shadow: 0 12px 30px rgba(200,161,75,.42);
}
.btn-phone{ border-width:1.5px; }

/* ---------- HEADER ---------- */
.site-header{ box-shadow: 0 2px 24px rgba(10,42,32,.18); border-bottom:1px solid rgba(200,161,75,.18); }
.nav-links a:hover, .nav-links a.active{ color: var(--gold-soft); }
.nav-dropdown{ border-top:2px solid var(--gold); }

/* ---------- KAARTEN op lichte secties (diensten, steden, reviews) ---------- */
.service-card, .city-card, .review-card{
  border-radius: var(--radius-lg);
  border:1px solid var(--gray-mid);
  background:#fff;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
.service-card{ position:relative; overflow:hidden; }
.service-card::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transform:scaleX(0);transform-origin:left;transition:transform .4s;
}
.service-card:hover::before{ transform:scaleX(1); }
.service-card:hover, .city-card:hover, .review-card:hover, .step-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
/* why-card staat op DONKERE sectie: transparant houden + witte tekst */
.why-card{ border-radius: var(--radius-lg); }
.why-card:hover{ transform: translateY(-6px); box-shadow: 0 10px 34px rgba(0,0,0,.25); border-color: rgba(200,161,75,.4); }
.service-link, .city-link{ color: var(--green-mid); font-weight:600; }
.service-link:hover, .city-link:hover{ color: var(--gold); }
.city-price{ color: var(--green-dark); font-weight:700; }

/* Iconen subtiel in goud-tint kader */
.why-icon, .service-icon, .step-icon{ color: var(--green-mid); }

/* ---------- STAPPEN ---------- */
.step-number{
  background: transparent;
  border:1.5px solid var(--gold);
  color: var(--gold);
}

/* ---------- TARIEVEN-TABEL ---------- */
.pricing-table thead th{ background: var(--green-dark); }
.pricing-table .price-td{ color: var(--green-dark); font-weight:700; }
.pricing-table-wrap{ border-radius: var(--radius-lg); border:1px solid var(--gray-mid); box-shadow: var(--shadow-sm); }

/* ---------- REVIEWS ---------- */
.stars{ color: var(--gold); }
.reviewer-avatar{ background: linear-gradient(135deg, var(--green-light), var(--green-dark)); color: var(--gold-soft); }
.rating-big strong{ color: var(--green-dark); }

/* ---------- FAQ ---------- */
.faq-question{ font-family:var(--font-display); }
.faq-icon{ color: var(--gold); }
.faq-item{ border-radius:14px; }

/* ---------- USP-STRIP ---------- */
.usp-icon{ color: var(--gold); }

/* ---------- CTA ---------- */
.cta-section{ background: linear-gradient(120deg, var(--green-mid), var(--green-dark)); }
.cta-section h2 span{ color: var(--gold-soft); }

/* ---------- FOOTER ---------- */
.site-footer{ background: var(--green-dark); }
.site-footer h4{ color:#fff; letter-spacing:.05em; }
.site-footer a:hover{ color: var(--gold-soft); }

/* ---------- LOKALE SECTIE FOTO'S ---------- */
.local-photo{ border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

/* ---------- HEADER netjes uitlijnen (geen overlap / afbreken) ---------- */
.nav-inner{ flex-wrap:nowrap; gap:18px; height:74px; }
.nav-links{ gap:22px; }
.nav-links a, .nav-dropdown-toggle{ white-space:nowrap; font-size:.92rem; }
.nav-phone{ flex-wrap:nowrap; white-space:nowrap; gap:12px; }
.nav-phone-num{ font-size:.95rem; }
.nav-phone .btn-primary{ padding:10px 20px; font-size:.9rem; }
.lang-switcher{ flex-shrink:0; }
@media (max-width:1180px){
  .nav-phone-num{ display:none; }       /* bij krappe breedte: nummer weg, knop blijft */
}

/* ---------- Goud "eyebrow"-lijn boven gecentreerde sectiekoppen ---------- */
.text-center .section-title::before{
  content:"";display:block;width:46px;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  margin:0 auto 20px;border-radius:2px;
}
.why-us .section-title::before{ background:var(--gold); }

/* ---------- Iets meer adem in de secties ---------- */
.services-section, .how-it-works, .cities-section,
.pricing-section, .reviews-section, .faq-section{ padding-top:92px; padding-bottom:92px; }
.section-subtitle{ margin-bottom:52px; }

/* ---------- Knop "bekijk alles" onder steden ---------- */
.cities-more{ margin-top:44px; text-align:center; }

/* ---------- Eén foto in de lokale sectie ---------- */
.local-photos-single{ display:block !important; }
.local-photos-single .local-photo{
  width:100%; height:540px; object-fit:cover;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
}
@media (max-width:900px){ .local-photos-single .local-photo{ height:340px; } }

/* ---------- LICHTE (ivoor) header zoals de preview ---------- */
.site-header{
  background: rgba(247,243,234,.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 2px 20px rgba(10,42,32,.08);
  border-bottom: 1px solid rgba(200,161,75,.28);
}
.site-header.scrolled{ background: rgba(247,243,234,.96); }
.nav-links a, .nav-dropdown-toggle{ color: var(--green-dark); }
.nav-links a:hover, .nav-links a.active,
.nav-dropdown-toggle:hover, .nav-dropdown-toggle.active{ color: var(--green-mid); }
.nav-links a::after{ background: var(--gold); }
.nav-phone-num{ color: var(--green-dark); }
.hamburger span{ background: var(--green-dark); }
.lang-switcher{ border-color: rgba(10,42,32,.22); }
.lang-btn{ color: rgba(10,42,32,.6); }
.lang-btn:hover{ color: var(--green-dark); background: rgba(10,42,32,.06); }
.lang-btn.lang-active{ background: var(--green-dark); color:#fff; }
.logo span{ color: var(--gold); }

/* ---------- HERO balans + smallere, luxere booking-card ---------- */
.hero-inner{ grid-template-columns: 1fr 1.2fr; gap:48px; }
.hero-sub-extra{ font-size:.86rem; color:rgba(255,255,255,.72); margin-top:-6px; }
.booking-card{
  max-width: 600px;
  margin-left: auto;
  padding: 26px 30px 28px;
  border-radius: 20px;
  border: 1px solid rgba(200,161,75,.18);
  box-shadow: 0 26px 70px rgba(10,42,32,.28);
}
.booking-card-title{ font-size:1.28rem; margin-bottom:18px; }
.booking-card .form-group{ margin-bottom:13px; }
.booking-card .form-group label{ font-size:.72rem; letter-spacing:.08em; }
.booking-card .form-group input,
.booking-card .form-group select{ padding:11px 14px; border-width:1.5px; border-radius:12px; font-size:.92rem; }
.booking-card .route-section{ gap:0; }

/* ---------- Hero primaire knop goud (Direct Boeken / Book Now), NL + EN ---------- */
.btn-whatsapp.btn-direct-boeken,
.hero-cta-btns .btn-whatsapp{
  background:linear-gradient(135deg,var(--gold-soft),var(--gold)) !important;
  color:var(--green-dark) !important;
  box-shadow:0 8px 24px rgba(200,161,75,.30);
}
.btn-whatsapp.btn-direct-boeken:hover,
.hero-cta-btns .btn-whatsapp:hover{
  background:linear-gradient(135deg,var(--gold),#b58e3d) !important;
  color:var(--green-dark) !important;
}

/* Form-tekens terug, maar zwart-wit (grijswaarde) */
.booking-card .ico{
  display:inline-block; font-style:normal;
  filter:grayscale(1); opacity:.55; margin-right:2px;
}

/* ---------- Rustiger, uitgelijnd boekingsformulier (alleen opmaak) ---------- */
.booking-card .options-section{ gap:16px; }
/* Bagage: label boven, Ja/Nee even breed naast elkaar (niet meer ongelijk) */
.booking-card .bagage-row{ display:block; }
.booking-card .bagage-label{ display:block; margin-bottom:10px; }
.booking-card .bagage-options{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.booking-card .bagage-radio{ justify-content:center; text-align:center; padding:12px 8px; margin:0; }
/* Route herordenen: From en To onder elkaar, 'add stop'/wissel eronder */
.booking-card .route-section{ display:flex; flex-direction:column; }
.booking-card .route-section > :nth-child(1){ order:1; }  /* From */
.booking-card .route-section > :nth-child(2){ order:4; }  /* add stop + swap -> onder To */
.booking-card .route-section > :nth-child(3){ order:2; }  /* tussenstop-veld (indien zichtbaar) */
.booking-card .route-section > :nth-child(4){ order:3; }  /* To */
.booking-card .route-section > :nth-child(5){ order:5; }  /* bagage-row */
.booking-card .route-section > :nth-child(6){ order:6; }  /* bagage-detail */
.booking-card .route-between-row{ align-items:center; gap:8px; justify-content:flex-end; margin-top:2px; }
.booking-card .btn-tussenstop{ font-size:.82rem; white-space:nowrap; padding:7px 10px; }
.booking-card .auto-type-select{ gap:8px; }
.booking-card .counter-row{ justify-content:space-between; }
/* Uniforme, zakelijke labels */
.booking-card .form-group label,
.booking-card .bagage-label,
.booking-card .betaal-label{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.09em;
  font-weight:700; color:var(--green-dark);
}
/* Kleine decoratieve icoontjes weg voor een strakke look */
.booking-card .betaal-icon,
.booking-card .bagage-item-icon{ display:none; }
.booking-card .betaal-optie{ border-radius:12px; }
.booking-card .booking-card-title{ font-size:1.3rem; }
.booking-card .route-section{ padding:6px 14px; border:1px solid var(--gray-mid); border-radius:16px; background:#fdfcf8; }
.booking-card .bagage-row{ margin-top:4px; }
.booking-card .auto-type-option{ border-width:1.5px; border-radius:12px; background:#fff; padding:11px 10px; }
.booking-card .auto-type-option.active{ border-color:var(--green-mid); background:rgba(46,139,99,.08); color:var(--green-dark); }
.booking-card .auto-type-option.active .auto-sub{ color:var(--green-mid); }
.booking-card .timing-toggle{ background:var(--gray-light); border-radius:12px; }
.booking-card .timing-btn{ border-radius:10px; }
.booking-card .timing-btn.active{ background:var(--green-dark); }
.booking-card .nu-meteen-badge{ border-radius:12px; background:rgba(46,139,99,.07); border-color:rgba(46,139,99,.28); color:var(--green-dark); }
.booking-card .counter-row{ border-radius:12px; }
.booking-card .bagage-radio{ border-radius:10px; }
.booking-card .form-group label{ color:var(--green-dark); }

/* ---------- Stappen-sectie op donkergroen (zoals preview) ---------- */
.how-it-works{ background: var(--green-dark); }
.how-it-works .section-title{ color:#fff; }
.how-it-works .section-subtitle{ color: rgba(255,255,255,.72); }
.how-it-works .section-title::before{ background: var(--gold); }
.step-card{ background:transparent; border:none; box-shadow:none; padding:0 18px; }
.step-card:hover{ transform:none; box-shadow:none; }
.step-card h3{ color:#fff; }
.step-card p{ color: rgba(255,255,255,.72); }
.step-number{ background:transparent; border:1.5px solid var(--gold); color:var(--gold); }

/* ===== SUBPAGINA HERO net als de homepage (foto + overlay + serif + goud) ===== */
.page-hero{
  position:relative;
  padding-top:130px;
  background:
    linear-gradient(120deg, rgba(10,42,32,.95) 0%, rgba(10,42,32,.6) 58%, rgba(10,42,32,.42) 100%),
    url("../img/taxi-haarlem-schiphol-airport.jpg") center/cover no-repeat;
}
.page-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 82% 24%, rgba(200,161,75,.16), transparent 55%);
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2rem,3.8vw,3rem); line-height:1.12;
}
.page-hero h1 span{ color:var(--gold-soft); }
.page-hero p{ font-size:1.02rem; color:rgba(255,255,255,.85); }
.page-breadcrumb a{ color:var(--gold-soft); }
.info-badge{ border-color:rgba(200,161,75,.42); background:rgba(255,255,255,.10); }

/* ===== Subpagina-content rustiger & luxer ===== */
.local-content{ padding:84px 0; }
.content-article h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.45rem,2.4vw,2rem); color:var(--green-dark);
  margin-top:14px; margin-bottom:12px;
}
.content-article p, .content-article li{ color:var(--gray-text); line-height:1.75; }
.content-article ul li{ margin-bottom:9px; }
.sidebar-card{
  background:#fff; border:1px solid var(--gray-mid);
  border-radius:18px; box-shadow:var(--shadow-sm);
}
.sidebar-card h3{ font-family:var(--font-display); font-weight:600; }
.price-list-mini .car-price{ color:var(--green-dark); font-weight:700; }
.other-cities .section-title{ font-family:var(--font-display); }
.other-city-card{ border-radius:16px; border:1px solid var(--gray-mid); transition:.3s; }
.other-city-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }

/* ===== Vinkjeslijst met goud accent ===== */
.check-list{ list-style:none; padding:0; margin:18px 0 8px; }
.check-list li{ position:relative; padding-left:26px; margin-bottom:9px; color:var(--gray-text); }
.check-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--gold); font-weight:700; }

/* ===== Twee-koloms info-kaarten (i.p.v. tweede grote foto) ===== */
.info-cols{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:10px 0 14px; }
.info-card{ background:#fff; border:1px solid var(--gray-mid); border-radius:18px; padding:26px 28px; box-shadow:var(--shadow-sm); }
.info-card h2{ margin-top:0 !important; font-size:1.25rem !important; }
.info-card .local-list{ list-style:none; margin:0 !important; padding:0; }
.info-card .local-list li{ position:relative; padding-left:24px; margin-bottom:10px; }
.info-card .local-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--gold); font-weight:700; }
@media (max-width:760px){ .info-cols{ grid-template-columns:1fr; } }

/* ===== Content callout (toppagina's) ===== */
.content-callout{
  background:linear-gradient(135deg, var(--green-mid), var(--green-dark));
  color:#fff; border-radius:16px; padding:22px 26px; margin:28px 0;
  display:flex; gap:16px; align-items:flex-start;
}
.content-callout .cc-ico{ font-size:1.7rem; color:var(--gold-soft); line-height:1; flex-shrink:0; }
.content-callout strong{ color:var(--gold-soft); }
.content-callout p{ margin:0 !important; color:rgba(255,255,255,.92) !important; }

/* ===== BLOG — luxe, breder, meer ademruimte ===== */
.blog-article{ max-width:1080px !important; }
.blog-article h1{
  font-family:var(--font-display) !important; font-weight:600 !important;
  font-size:clamp(2rem,4vw,2.8rem) !important; line-height:1.16 !important; color:var(--green-dark) !important;
}
.blog-article h2{
  font-family:var(--font-display) !important; font-weight:600 !important;
  font-size:clamp(1.4rem,2.5vw,1.95rem) !important; color:var(--green-dark) !important; margin-top:40px !important;
}
.blog-article h2::before{
  content:""; display:block; width:44px; height:2px; margin-bottom:14px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
}
.blog-article h3{ font-family:var(--font-display) !important; font-weight:600 !important; }
.blog-article p{ font-size:1.05rem; }
.blog-article > p:first-of-type{ font-size:1.18rem; line-height:1.7; color:var(--green-dark); }
.blog-article .hero-img{ border-radius:18px !important; box-shadow:var(--shadow-md); height:420px !important; }
.blog-article .blog-tldr{
  background:linear-gradient(135deg,#FBF8F1,#F4EFE2) !important;
  border-left:4px solid var(--gold) !important; border-radius:14px !important;
  padding:22px 26px !important; margin:24px 0 40px !important; box-shadow:var(--shadow-sm);
}
.blog-article .blog-tldr strong{ color:var(--green-dark) !important; letter-spacing:.08em; }
.blog-article .blog-tldr p{ color:var(--green-dark) !important; }
.blog-callout{
  background:var(--green-dark); color:#fff; border-radius:16px; padding:24px 28px; margin:30px 0;
}
.blog-callout strong{ color:var(--gold-soft); }
.blog-callout a{ color:var(--gold-soft); font-weight:600; }

/* Selectie-kleur */
::selection{ background: var(--gold-soft); color: var(--green-dark); }