#selection {
  margin-top: 4rem;
}



/* Kenyan Travel Agency – Complete CSS for REIZEN (merged base + reizen)
   Version: 1.0 (2025-10-22)
   This file consolidates: site header/nav, hero, cards/grid, buttons,
   selection (mandje), and map with pins. Safe to use standalone for the
   Reizen page. */

:root{
  --bg:#fbf7f1;
  --card:#ffffff;
  --ink:#2a2a2a;
  --muted:#6f6f6f;
  --accent:#b76e2d;
  --accent-2:#8f531f;
  --radius:14px;
  --shadow:0 12px 30px rgba(15,20,30,.10);
  --shadow-soft:0 6px 18px rgba(15,20,30,.06);
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box }
html, body { height:100% }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background: linear-gradient(180deg, #ECD192 0%, #FBE6BA 40%, #ECD192 100%);
}

.hidden{ display:none !important }
.center{ text-align:center }
.small{ font-size:13px; color:var(--muted) }

.site-header{
  background-color:#fbf7f1;
  padding:10px 16px;
  position:relative;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.site-header .logo{
  width:56px; height:56px;
  border-radius:10px;
  background:linear-gradient(135deg,#b76e2d,#e8b07a);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800;
  box-shadow:var(--shadow-soft);
}
.navbar{
  display:flex; gap:14px; align-items:center; flex:1 1 auto;
}
.navbar a{
  color:#473c2f; text-decoration:none; font-weight:600;
  padding:8px 10px; border-radius:10px;
}
.navbar a:hover{ background:#f3eadf }
.language-switch{ margin-left:auto; display:flex; gap:10px; align-items:center }
.language-switch img{ width:26px; height:18px; border-radius:3px; box-shadow:0 1px 2px rgba(0,0,0,.15) }

.btn{
  display:inline-block;
  background:var(--accent);
  color:#fff; text-decoration:none;
  padding:12px 18px; border-radius:12px; font-weight:700;
  box-shadow:var(--shadow-soft);
  border:0; cursor:pointer;
}
.btn:hover{ background:var(--accent-2) }
.btn.secondary{ background:#f4f0eb; color:#3a332b }
.btn.secondary:hover{ background:#e9e1d7 }

section.hero{
  position:relative;
  min-height:80vh;
  margin-top:0;
  padding-top:120px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fff;
  background:#2c1c10 url('../images/big5_hero_new.jpg?v=3') center/cover no-repeat;
}

section.hero::before{
  content:none;
}

section.hero .inner{ position:relative; z-index:1; padding:24px }
section.hero h1{ margin:0 0 10px; font-size:clamp(28px,5.8vw,54px); line-height:1.05; letter-spacing:.4px }
section.hero p{ margin:0 0 22px; font-size:clamp(16px,2.6vw,20px); opacity:.95 }

.section{ padding-top:20px;  padding:28px 22px }
.section h2{ margin:0 0 8px; font-size:24px }
.lead{ color:var(--muted) }

.grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}
.card, .trip-card{
  background:#fff; border: 1px solid #b89a72; border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.card img, .trip-card img{
  width:100%; height:170px; object-fit:cover; display:block;
}
.card-body, .trip-body{ padding:12px 14px }
.card-title, .trip-body h3{ font-weight:700; margin:0 0 8px; font-size:18px }
.card-meta, .trip-body p{ color:var(--muted); font-size:14px; margin:0 0 6px }
.price{ font-weight:700; color:var(--accent); margin:8px 0 }

#selection{
  margin:24px auto; max-width:1000px;
  background:#fff; border:1px solid #eee; border-radius:14px;
  box-shadow:var(--shadow-soft); padding:16px 18px;
}
#selection h2{ margin:0 0 10px; font-size:20px }
#selected-list{ list-style:none; margin:0; padding:0; }
#selected-list li{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; border-bottom:1px dashed #e6e2dd;
}
#selected-list li:last-child{ border-bottom:none }
#selection .total{ font-weight:800; margin:10px 0 }
#selection .btn.next{ float:right }

.cta-bottom {
  text-align: center;
  margin: 40px 0;
  display: flex;
  justify-content: center;
}

.btn {
  display: inline-block;
  background: #a32a12;
  color: #fff;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  transition: background 0.2s ease;
}

.btn:hover {
  background: #8f531f;
}

<style>
.avatar-photo, .avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 16px;
}
</style>

.footer{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:18px 22px; color:#5a5147; background:#f7efe4; font-size:14px;
}
.footer a{ color:#5a5147 }

@media (max-width: 960px){
  section.hero{ padding-top:100px; min-height:70vh }
}
@media (max-width: 720px){
  .site-header{ gap:10px }
  .navbar{ flex-wrap:wrap; row-gap:6px }
  section.hero{ padding-top:80px }
  .language-switch img{ width:22px; height:15px }
}
@media (max-width: 560px){
  .navbar{ flex-basis:100% }
  .trip-card img, .card img{ height:160px }
}

@media (max-width: 768px){
  .site-header{
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo flags"
      "nav  nav";
    gap:10px;
    padding:10px 16px;
  }
  .logo{ grid-area:logo; }
  .logo img{ width:96px; height:auto; display:block; }
  .language-switch{ grid-area:flags; justify-self:end; gap:8px; }
  .language-switch img{ width:22px; height:16px; }

  .navbar{
    grid-area:nav;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 12px;
    margin-top:6px;
  }
  .navbar a{
    font-size:14px;
    padding:8px 10px;
    line-height:1.1;
    border-radius:10px;
  }

  .hero{
    min-height:56vh;
    padding-top:80px;
  }
  .hero h1{ font-size: clamp(22px, 6vw, 34px); }
  .hero p{  font-size: clamp(14px, 3.6vw, 18px); }

  .grid, .destinations{
    grid-template-columns:1fr !important;
    gap:14px;
    padding:0 16px;
  }
  .trip-card img, .card img{ height:180px; object-fit:cover; }

  .map-wrap{ padding:12px 16px 24px; }
  .map{ border-radius:12px; }

  .btn{
    padding:12px 16px;
    font-size:15px;
    border-radius:12px;
  }

  .section{ padding-top:20px;  padding:20px 16px; }
  .footer{
    flex-direction:column;
    gap:6px;
    padding:16px;
    text-align:center;
  }

  img, video{ max-width:100%; height:auto; display:block; }
  body{ overflow-x:hidden; }
}

/* === Kortingsbox toegevoegd === */
.group-discount-box {
  background: #ffffff;
  border: 1px solid #d8c7a5;
  padding: 24px 26px;
  border-radius: 14px;
  margin: 40px auto;
  max-width: 900px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.group-discount-box h2 {
  margin-top: 0;
  font-size: 24px;
  color: #473c2f;
}

.discount-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
}

.discount-table th,
.discount-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #e5d9c4;
  text-align: left;
}

.discount-table th {
  background: #f7efe4;
  font-weight: 700;
  color: #473c2f;
}

.discount-table tr:last-child td {
  border-bottom: none;
}

/* === Vlag-fix blijft werken === */
.language-switch img {
    width: 28px !important;
    height: 20px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
}



.family-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  justify-items: center;
  margin-top: 24px;
}

.family-grid figure {
  text-align: center;
}

.family-grid img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  margin-bottom: 10px;
}

.family-grid figcaption {
  font-weight: 600;
  font-size: 15px;
  color: #473c2f;
}

/* Added by ChatGPT */
.form-wrapper,
form {
    max-width: 1000px;
    margin: 0 auto;
}

.form-grid.reisinformatie {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px;
    margin-bottom: 20px;
}

label, input, select, textarea {
    font-size: 16px;
    font-family: var(--font);
}

label {
    display: block;
    margin-bottom: 6px;
}
/* === DEFINITIEVE GRID HERSTELFIX === */
.grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.grid-3{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px){
  .grid-3{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px){
  .grid,
  .grid-3{
    grid-template-columns: 1fr;
  }
}

/* selectie mag NOOIT grid zijn */
#selection{
  display: block;
  margin-top: 4rem;
}
/* === VRAGENLIJST – KEUZEBLOKKEN (INCREMENTEEL) === */
#vragenlijst-form .form-grid > div > strong {
  display: block;
  margin-bottom: 8px;
}

#vragenlijst-form .form-grid > div {
  padding-top: 4px;
}
/* === VRAGENLIJST – KEUZES LEESBAARHEID (SAFE) === */
#vragenlijst-form .form-grid label {
  margin-bottom: 6px;
}

#vragenlijst-form .form-grid label input[type="checkbox"],
#vragenlijst-form .form-grid label input[type="radio"] {
  vertical-align: middle;
}
/* === VRAGENLIJST – EXTRA RUST TUSSEN STAPPEN (SAFE) === */
#vragenlijst-form h2 {
  margin-top: 48px;
}

#vragenlijst-form h2:first-of-type {
  margin-top: 0;
}
/* === VRAGENLIJST – LAYOUT: 3 KOLOMMEN (OVERRIDE SAFE) === */
#vragenlijst-form .form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 22px;
}
/* === VRAGENLIJST – ALLEEN INVULVELDEN WIT (SAFE) === */
#vragenlijst-form input[type="text"],
#vragenlijst-form input[type="email"],
#vragenlijst-form input[type="tel"],
#vragenlijst-form input[type="number"],
#vragenlijst-form input[type="date"],
#vragenlijst-form select,
#vragenlijst-form textarea {
  background: #fff;
}

/* containers/achtergrond expliciet niet wijzigen */
#vragenlijst-form,
#vragenlijst-form .form-grid,
#vragenlijst-form label {
  background: transparent;
}
/* === VRAGENLIJST – ZACHTE BORDERS (HUISSTIJL, SAFE) === */
#vragenlijst-form input[type="text"],
#vragenlijst-form input[type="email"],
#vragenlijst-form input[type="tel"],
#vragenlijst-form input[type="number"],
#vragenlijst-form input[type="date"],
#vragenlijst-form select,
#vragenlijst-form textarea {
  border: 1px solid #d8c7a5;   /* warm zandkleur */
  border-radius: 8px;
}

/* focus: accentkleur, rustig */
#vragenlijst-form input:focus,
#vragenlijst-form select:focus,
#vragenlijst-form textarea:focus {
  outline: none;
  border-color: #b76e2d;
  box-shadow: 0 0 0 2px rgba(183,110,45,0.15);
}
.form-grid {
  display: grid;
  gap: 16px;
}

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