/* Gedeelde stijl voor de publieke directe-boekingsschermen (boeken-zoeken,
   boeken-opties, boeken-overzicht) — bewust een eigen, iets rijkere laag
   bovenop de gewone portaalstijl (variables.css/components.css), omdat een
   gast hier zonder de rest van de app-chrome terechtkomt en dit de "etalage"
   is voor de eigenaar se eigen website. */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* Kleuren/radius hier bewust gelijk aan .airbnb-proef (partials/airbnb-theme.blade.php) —
   dat is Somebay's actuele huisstijl in de rest van het portaal (roos #ff3366 /
   oranjerood #ff3346, Baloo 2 voor koppen, Inter voor lopende tekst), niet de
   oudere --somebay-coral uit variables.css. Deze publieke boekingspagina's laden
   variables.css niet, dus een eigen bk-*-tokenset i.p.v. die var(--somebay-coral)
   te herbruiken (die zou hier op de oude, achterhaalde kleur uitkomen). */
:root {
  --bk-ink: #1c1a17;
  --bk-ink-soft: #6b675f;
  --bk-cream: #fffaf8;
  --bk-cream-deep: #ffe1e8;
  --bk-line: #efefef;
  --bk-coral: #ff3366;
  --bk-coral-dark: #ff3346;
  /* rgb-tripel van --bk-coral, voor rgba()-gloed-effecten hieronder — een
     accentkleur-override (zie partials/boeken-kleur.blade.php) zet deze 3
     samen, zodat ook die gloed-effecten mee opschuiven i.p.v. hardcoded
     roze te blijven. */
  --bk-coral-rgb: 255, 51, 102;
  --bk-green: #2f6b4f;
  --bk-green-tint: #eaf3ee;
  --bk-shadow: 0 1px 3px rgba(34, 34, 34, 0.09), 0 12px 28px -12px rgba(34, 34, 34, 0.16);
  --bk-shadow-lift: 0 4px 10px rgba(34, 34, 34, 0.08), 0 20px 40px -16px rgba(34, 34, 34, 0.22);
  --bk-radius: 26px;
}

.bk-body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bk-cream);
  min-height: 100vh;
  color: var(--bk-ink);
}

/* ---------- Hero ---------- */
.bk-hero {
  position: relative;
  max-width: 1240px;
  margin: 18px auto 0;
  padding: 0 clamp(20px, 4vw, 56px);
}

.bk-hero-vlak {
  position: relative;
  border-radius: var(--bk-radius);
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(135deg, #2b2622 0%, #443a30 100%);
  box-shadow: var(--bk-shadow);
}

.bk-hero-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bk-hero-vlak::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 17, 14, 0.78) 0%, rgba(20, 17, 14, 0.32) 48%, rgba(20, 17, 14, 0.05) 100%);
}

.bk-hero-tekst {
  position: relative;
  z-index: 1;
  padding: 28px clamp(20px, 3.6vw, 40px) 26px;
  color: #fff;
}

.bk-hero-stad {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.82;
  margin: 0 0 6px 0;
}

.bk-hero-naam {
  font-family: "Baloo 2", sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

/* ---------- Stappen: zwevende pil-kaart die licht over de hero heen valt ---------- */
.bk-stappen-wrap {
  max-width: 1240px;
  margin: 26px auto 0;
  padding: 0 clamp(20px, 4vw, 56px);
  position: relative;
  z-index: 2;
}
/* Op de zoek-pagina volgt de pil meteen op de foto-hero — dan mag ze er licht overheen vallen. */
.bk-stappen-wrap-hero { margin-top: -26px; }
.bk-stappen {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--bk-shadow-lift);
  padding: 14px clamp(18px, 3vw, 32px);
  /* Veiligheidsnet: bij een venstermaat waar de labels-modus nog net niet
     past (zie de media query hieronder) mag de balk nooit onzichtbaar
     kamers afsnijden — dan liever een horizontale scroll dan een stap die
     gewoon achter de rand verdwijnt. */
  overflow-x: auto;
  scrollbar-width: none;
}
.bk-stappen::-webkit-scrollbar { display: none; }
.bk-stap { display: flex; align-items: center; gap: 9px; color: var(--bk-ink-soft); flex-shrink: 0; text-decoration: none; }
.bk-stap-klikbaar { cursor: pointer; }
.bk-stap-klikbaar:hover .bk-stap-bol { border-color: var(--bk-coral-dark); background: var(--bk-coral-dark); color: #fff; }
.bk-stap-klikbaar:hover .bk-stap-label { color: var(--bk-coral-dark); }
.bk-stap-bol {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid var(--bk-line); display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: #fff; color: var(--bk-ink-soft);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.bk-stap-label { font-size: 13px; font-weight: 600; white-space: nowrap; }
.bk-stap-actief .bk-stap-bol {
  border-color: var(--bk-coral); background: var(--bk-coral); color: #fff;
  box-shadow: 0 0 0 5px rgba(var(--bk-coral-rgb), 0.16);
}
.bk-stap-actief .bk-stap-label { color: var(--bk-ink); }
.bk-stap-voltooid .bk-stap-bol { border-color: var(--bk-coral); background: #fff; color: var(--bk-coral); }
.bk-stap-voltooid .bk-stap-label { color: var(--bk-ink-soft); }
.bk-stap-lijn { flex: 1 1 auto; height: 3px; border-radius: 3px; background: var(--bk-line); margin: 0 12px; min-width: 14px; }
.bk-stap-lijn-voltooid { background: var(--bk-coral); }
/* 640px liet net niet genoeg ruimte over voor de langste label
   ("Contactgegevens") — tussen ~640-760px viel de laatste stap ("Bedankt")
   half buiten de pil. 760px geeft daar voldoende marge. */
@media (max-width: 760px) {
  .bk-stap-label { display: none; }
  .bk-stap-lijn { margin: 0 7px; }
  .bk-stappen { padding: 12px clamp(14px, 3vw, 24px); }
}

/* ---------- Hoofdkaart ---------- */
.bk-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px clamp(20px, 4vw, 56px) 64px;
}

.bk-kaart {
  background: #fff;
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius);
  box-shadow: var(--bk-shadow);
  padding: clamp(22px, 3.4vw, 38px);
}

.bk-titel {
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.3px;
  margin: 0 0 7px 0;
  color: var(--bk-ink);
}

.bk-subtitel {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--bk-ink-soft);
  margin: 0 0 28px 0;
}

/* ---------- Generieke info-/notice-vakken (gebruikt op opties & overzicht) ---------- */
.bk-infobox {
  border: 1px solid var(--bk-line);
  background: var(--bk-cream-deep);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 13.5px;
  color: var(--bk-ink-soft);
  line-height: 1.55;
}
.bk-infobox strong { color: var(--bk-ink); }
.bk-infobox ul { margin: 8px 0 0 0; padding-left: 18px; }
.bk-infobox li { margin-bottom: 4px; }

.bk-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--bk-green-tint); color: var(--bk-green);
}
.bk-badge-coral { background: rgba(var(--bk-coral-rgb), 0.12); color: var(--bk-coral-dark); }

/* ---------- Knoppen: zelfde roos-gradient als .airbnb-proef .btn-primary ---------- */
.bk-btn-primair {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 18px; border: none; border-radius: 18px;
  background: linear-gradient(135deg, var(--bk-coral-dark), var(--bk-coral) 70%);
  color: #fff; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: filter 0.15s ease, transform 0.1s ease;
}
.bk-btn-primair:hover:not(:disabled) { filter: brightness(1.04); }
.bk-btn-primair:active:not(:disabled) { transform: scale(0.99); }
.bk-btn-primair:disabled { background: #d9d4c8; color: #948e80; cursor: not-allowed; }

.bk-btn-secundair {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 18px; border: 1.5px solid var(--bk-line); border-radius: 18px;
  background: #fff; color: var(--bk-ink); font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: none;
}
.bk-btn-secundair:hover { border-color: var(--bk-coral); color: var(--bk-coral-dark); }

/* ---------- Stepper (aantal personen) ---------- */
.bk-stepper { display: inline-flex; align-items: center; gap: 18px; }
.bk-stepper-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--bk-line);
  background: #fff; font-size: 17px; font-weight: 600; color: var(--bk-ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.bk-stepper-btn:hover { border-color: var(--bk-coral); color: var(--bk-coral-dark); }
.bk-stepper-waarde { font-size: 17px; font-weight: 700; min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Voettekst: bewust klein en onderaan — de gast komt via de
   eigenaar se eigen site, dit mag niet aanvoelen als een merkbreuk. ---------- */
.bk-footer {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px) 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--bk-ink-soft);
  opacity: 0.75;
}
.bk-footer img { height: 14px; width: auto; opacity: 0.9; }
.bk-footer a { color: #ff3366; font-weight: 600; text-decoration: none; }
.bk-footer a:hover, .bk-footer a:focus-visible { text-decoration: underline; }