/* ════════════════════════════════════════════════════════════════════════
   ISELMAR ONE — gedeelde gastsite-componenten (Beleven-stijltaal)
   ════════════════════════════════════════════════════════════════════════
   Eén componentenset voor alle marketing-pagina's (Verblijven, Eten &
   drinken, Jachthaven, Events, Omgeving, Home), 1:1 afgeleid van de
   Beleven-pagina (site/activiteiten/index.html). Vervangt de per-pagina
   dialecten (.ot-*, .et-*, .jh-*, .ev-*, .og-*).

   Bouwstenen:
     .one-title / .one-intro          paginatitel + intro (App Store-stijl)
     .one-pills / .one-pill           anker-pills (spring naar sectie)
     .one-banner (+ --navy)           gradient info/CTA-banner
                                      (navy = primaire actie, blauw = info)
     .one-sec-row / .one-sec-h        sectiekop met accent-balkje + link
     .one-sec-sub / .one-hint         intro-regel + teller onder sectiekop
     .one-row / .one-tile             snap-carousel + fototegel 4:3
     .one-badge / .one-social         tegel-badges
     .one-card / .one-kv              witte info-kaart + key-value rijen
     .one-seg                         segmented control (glijdende pill)
     .one-btn (+ --ghost/--accent)    knoppen
     .one-actie                       contact/actie-kaart
     .one-step                        genummerde stappen
     .one-fields / .one-field         formulier veld-chips
     .one-modal / .one-car            detail-overlay + foto-carousel

   Verwacht: iselmar-v2.css geladen (tokens) + Inter via Google Fonts.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  --one-navy: var(--navy, #2F4157);
  --one-navy-light: var(--navy-light, #577C8E);
  /* Accent volgt het Beleven-blauw (--accent in iselmar-v2.css). Bewust
     NIET via --terracotta: dat oranje botste met de blauwe stijltaal. */
  --one-accent: var(--accent, #46677C);
  --one-muted: rgba(27, 42, 59, 0.55);
  --one-bg: #F3F0EA;
  --one-line: #E6D9CF;
  --one-tile-shadow: 0 1px 2px rgba(20,34,51,.06), 0 6px 14px rgba(20,34,51,.10);
  --one-card-shadow: 0 1px 2px rgba(47,65,87,.06), 0 2px 6px rgba(47,65,87,.05);
  /* Widget-tokens die de gedeelde widgets.css (IselmarCalendar/IselmarSelect)
     verwacht. Zonder definitie viel o.a. de popover-radius terug op 0 → scherpe
     hoeken. Hier gedefinieerd zodat álle one-page widget-popovers rond + met
     schaduw renderen, net als in de boekflow. */
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 2px 8px rgba(20,34,51,.08);
  --shadow-lg: 0 12px 32px rgba(20,34,51,.16);
}

body.one-page { background: var(--one-bg); }
/* Witte mobiele header — zelfde override als de Beleven-pagina. Dubbel
   gescoped (class + data-page) net als de avatar-regels hieronder: in de
   app-shell krijgt de body geen .one-page-class, waardoor het logo daar op
   46px bleef terwijl Beleven 40px toont (gebruikerswens: gelijk trekken). */
body.one-page .iv-mhead { background: var(--navy, #2F4157) !important; }
body.one-page .iv-mhead-logo img,
body[data-page="overnachten"] .iv-mhead-logo img,
body[data-page="eten"] .iv-mhead-logo img,
body[data-page="haven"] .iv-mhead-logo img,
body[data-page="evenementen"] .iv-mhead-logo img { height: 40px !important; }
/* Geen profiel-/avatar-knop rechtsboven op de vier one-pages (gebruikerswens
   jun 2026). Dubbel gescoped: body.one-page voor losse pagina's, data-page
   voor dezelfde views binnen de app-shell (die zet geen body-class).
   Uitzondering: de hamburger-menuknop ([data-mhead-menu]) hergebruikt dit
   slot sinds jul 2026 en moet wél zichtbaar blijven. */
body.one-page .iv-mhead-avatar:not([data-mhead-menu]),
body[data-page="overnachten"] .iv-mhead-avatar:not([data-mhead-menu]),
body[data-page="eten"] .iv-mhead-avatar:not([data-mhead-menu]),
body[data-page="haven"] .iv-mhead-avatar:not([data-mhead-menu]),
body[data-page="evenementen"] .iv-mhead-avatar:not([data-mhead-menu]) { display: none !important; }

/* Content-kolom: mobiel full-bleed met 20px tekst-marges, desktop centreren. */
.one-wrap { max-width: 1100px; margin: 0 auto; }

/* ── Paginatitel + intro ───────────────────────────────────────────────── */
.one-title {
  margin:var(--sp-6) var(--sp-5) var(--sp-3);
  font: 800 28px/1.12 'Inter', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.02em;
  color: var(--one-navy);
}
.one-intro {
  margin:0 var(--sp-5) var(--sp-4);
  font: 400 14.5px/1.5 'Inter', system-ui, sans-serif;
  color: var(--one-navy-light);
}
@media (min-width: 720px) {
  .one-title { margin:var(--sp-8) var(--sp-8) var(--sp-3); font-size: 36px; }
  .one-intro { margin:0 var(--sp-8) var(--sp-4); font-size: 15.5px; }
}

/* ── Pills ─────────────────────────────────────────────────────────────── */
.one-pills {
  display: flex; gap:var(--sp-2);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding:2px var(--sp-5) var(--sp-2);
}
.one-pills::-webkit-scrollbar { display: none; }
.one-pill {
  flex: 0 0 auto; border: 0; cursor: pointer;
  background: rgba(27,42,59,.06); color: var(--one-navy);
  border-radius: 999px; padding:var(--sp-3) var(--sp-4);
  font: 600 14px 'Inter', system-ui, sans-serif;
  display: inline-flex; align-items: center; gap:var(--sp-2); white-space: nowrap;
  text-decoration: none;
  transition: background .15s, color .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.one-pill:hover { background: rgba(27,42,59,.1); }
.one-pill:active { transform: scale(.97); }
.one-pill.is-active { background: var(--one-navy); color: #fff; }
.one-pill:focus-visible { outline: 2px solid var(--one-accent); outline-offset: 2px; }
@media (min-width: 720px) { .one-pills { padding-left:var(--sp-8); padding-right:var(--sp-8); } }

/* ── Gradient-banner ───────────────────────────────────────────────────── */
.one-banner {
  display: flex; align-items: center; gap:var(--sp-gap);
  margin:var(--sp-4) var(--sp-5); padding:var(--sp-4) var(--sp-gutter); border-radius: 18px;
  background: linear-gradient(135deg, #577C8E 0%, #577C8E 100%); color: #fff;
  box-shadow: 0 8px 22px -10px rgba(32,80,112,.55);
  text-decoration: none;
}
.one-banner--navy { background: linear-gradient(135deg, #3A5470 0%, #24364C 100%); box-shadow: 0 8px 22px -10px rgba(20,34,51,.6); }
.one-banner > svg { flex: 0 0 auto; width: 38px; height: 38px; stroke: #fff; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.one-banner-body { flex: 1; min-width: 0; }
.one-banner-titel { margin:0 0 var(--sp-1); font: 700 18px/1.18 'Inter', system-ui, sans-serif; letter-spacing: -0.015em; color: #fff; }
.one-banner-sub { margin: 0; font: 400 13px/1.45 'Inter', system-ui, sans-serif; color: rgba(255,255,255,.92); }
.one-banner-cta {
  flex: 0 0 auto; align-self: center; border: 0; cursor: pointer;
  background: #fff; color: var(--one-navy);
  border-radius: 999px; padding:var(--sp-2) var(--sp-4);
  font: 700 12.5px 'Inter', system-ui, sans-serif; white-space: nowrap;
  text-decoration: none;
}
.one-banner-cta:active { transform: scale(.97); }
@media (min-width: 720px) { .one-banner { margin:var(--sp-4) var(--sp-8); } }

/* ── Sectiekoppen ──────────────────────────────────────────────────────── */
.one-eyebrow {
  margin:var(--sp-5) var(--sp-5) 2px;
  font: 700 11px 'Inter', system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--one-muted);
}
.one-sec-row {
  display: flex; align-items: baseline; justify-content: space-between; gap:var(--sp-gap);
  padding:0 var(--sp-5); margin:0 0 var(--sp-3);
}
.one-sec-h {
  margin: 0; font: 700 19px/1.2 'Inter', system-ui, sans-serif;
  letter-spacing: -0.015em; color: var(--one-navy);
  display: flex; align-items: center; gap:var(--sp-3);
}
/* Accent-balkje vóór de sectiekop — zelfde patroon als "❙ Binnen" op Beleven. */
.one-sec-h::before {
  content: ''; flex: 0 0 auto; width: 4px; height: 17px;
  border-radius: 2px; background: var(--merk, #577C8E);
}
.one-sec-link {
  font: 600 13.5px 'Inter', system-ui, sans-serif;
  color: var(--one-accent); text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.one-sec-link:active { opacity: .6; }
/* Intro-regel direct onder een sectiekop. */
.one-sec-sub {
  margin:-2px var(--sp-5) var(--sp-3); padding-left:var(--sp-4);
  font: 400 14px/1.55 'Inter', system-ui, sans-serif; color: var(--one-navy-light);
}
/* Teller/hint-regel, zoals "8 activiteiten passen bij jouw keuze." op Beleven. */
.one-hint {
  margin:-2px var(--sp-5) var(--sp-4); text-align: center;
  font: 400 13px 'Inter', system-ui, sans-serif; color: var(--one-muted);
}
.one-hint b { color: var(--one-navy); font-weight: 700; }
@media (min-width: 720px) {
  .one-eyebrow { margin-left:var(--sp-8); margin-right:var(--sp-8); font-size: 12px; }
  .one-sec-row { padding:0 var(--sp-8); }
  .one-sec-h { font-size: 21px; }
  .one-sec-sub { margin-left:var(--sp-8); margin-right:var(--sp-8); font-size: 15px; }
  .one-hint { margin-left:var(--sp-8); margin-right:var(--sp-8); }
}

/* ── Carousel + fototegel ──────────────────────────────────────────────── */
.one-row {
  display: flex; gap:var(--sp-gap);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding:var(--sp-1) var(--sp-5) var(--sp-4);
  scroll-padding-inline-start: 20px;
  scrollbar-width: none;
}
.one-row::-webkit-scrollbar { display: none; }
.one-tile {
  flex: 0 0 72%; scroll-snap-align: start; scroll-snap-stop: always;
  aspect-ratio: 4/3; position: relative; overflow: hidden; border-radius: 12px;
  background-size: cover; background-position: center; background-color: var(--one-line);
  box-shadow: var(--one-tile-shadow);
  text-decoration: none; color: #fff; display: block;
  border: 0; padding: 0; text-align: left; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.one-tile:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(20,34,51,.05), 0 3px 8px rgba(20,34,51,.08); }
.one-tile--smal { flex-basis: 46%; aspect-ratio: 3/3.4; }
.one-tile--breed { flex-basis: 88%; }
.one-tile::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,34,51,0) 32%, rgba(20,34,51,.45) 68%, rgba(20,34,51,.86) 100%);
}
.one-tile--grad { background: linear-gradient(150deg, #577C8E 0%, #577C8E 70%, #2F4157 100%); display: flex; align-items: center; justify-content: center; }
.one-tile--grad > svg { width: 30%; max-width: 54px; height: auto; stroke: #fff; fill: none; stroke-width: 1.6; opacity: .92; transform: translateY(-12px); }
.one-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2; padding:var(--sp-1) var(--sp-2);
  font: 500 9px 'Inter', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  background: var(--merk, #577C8E); color: #fff;
}
.one-badge--light { background: #fff; color: var(--one-navy); }
.one-social {
  position: absolute; top: 10px; right: 10px; z-index: 2; padding:var(--sp-1) var(--sp-3);
  font: 700 10px 'Inter', system-ui, sans-serif; letter-spacing: .04em;
  background: rgba(255,255,255,.92); color: var(--one-navy); border-radius: 100px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(0,0,0,.10);
}
.one-social--top { background: var(--one-accent); color: #fff; }
.one-meta { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; }
.one-prijs {
  font: 700 11.5px 'Inter', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.92); text-shadow: 0 1px 3px rgba(0,0,0,.45);
  margin-bottom:var(--sp-1); line-height: 1.2;
}
.one-name { font: 700 18px/1.15 'Inter', system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.one-sub { margin-top:var(--sp-1); font: 400 12px/1.25 'Inter', system-ui, sans-serif; color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.one-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #34D17A; margin-right:var(--sp-2); }
/* Glass pijl-chip rechtsonder op klikbare tegels — zelfde affordance als de
   "Meer"-glass-knop op de Beleven-tegels (iv-act-cta-glass). Alleen plaatsen
   op tegels die echt iets openen (modal/link), niet op pure foto-tegels. */
.one-tile-go {
  position: absolute; bottom: 12px; right: 12px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  padding:var(--sp-2) var(--sp-3); border-radius: 999px;
  background: rgba(18,32,47,.18);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  color: #fff; border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 3px 12px rgba(0,0,0,.20);
}
.one-tile-go svg { display: block; width: 16px; height: 16px; }
/* Meta-tekst niet onder de chip laten doorlopen. */
.one-tile:has(.one-tile-go) .one-meta { right: 58px; }
@media (min-width: 720px) {
  .one-row { padding-left:var(--sp-8); padding-right:var(--sp-8); scroll-padding-inline-start: 32px; }
  .one-tile { flex-basis: calc((100% - 2*32px) / 2.6); }
  .one-tile--smal { flex-basis: calc((100% - 2*32px) / 3.4); }
}
@media (min-width: 1100px) {
  .one-row { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; gap:var(--sp-4); scroll-padding-inline-start: 0; }
  .one-row--vier { grid-template-columns: repeat(4, 1fr); }
  .one-tile, .one-tile--smal, .one-tile--breed { flex: initial; }
}

/* ── Info-kaart + kv-rijen ─────────────────────────────────────────────── */
.one-card {
  margin:var(--sp-2) var(--sp-5) var(--sp-4); background: #fff; border-radius: 14px; padding:var(--sp-4) var(--sp-gutter);
  box-shadow: var(--one-card-shadow);
}
.one-card-h { margin:0 0 var(--sp-3); font: 700 15px 'Inter', system-ui, sans-serif; color: var(--one-navy); }
.one-kv {
  display: flex; justify-content: space-between; gap:var(--sp-gap);
  padding:var(--sp-2) 0; border-bottom: 1px dashed rgba(27,42,59,.12);
  font: 400 13.5px 'Inter', system-ui, sans-serif; color: var(--one-navy);
}
.one-kv:last-child { border-bottom: 0; }
.one-kv span { color: var(--one-navy-light); }
.one-kv b { font-weight: 600; text-align: right; }
@media (min-width: 720px) { .one-card { margin-left:var(--sp-8); margin-right:var(--sp-8); } }

/* ── Segmented control ─────────────────────────────────────────────────── */
.one-seg {
  position: relative; display: flex;
  margin:var(--sp-1) var(--sp-5) var(--sp-4); background: rgba(72,160,203,.12); padding:var(--sp-1);
  border-radius: 100px; box-shadow: inset 0 1px 2px rgba(3,55,75,.08);
}
.one-seg button {
  position: relative; z-index: 1; flex: 1; border: 0; background: transparent;
  border-radius: 100px; padding:var(--sp-2) var(--sp-2);
  font: 600 13px 'Inter', system-ui, sans-serif; color: var(--one-muted); cursor: pointer;
  transition: color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.one-seg button.is-on { color: var(--one-navy); }
.one-seg-pill {
  position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 100px;
  background: #fff; box-shadow: 0 1px 4px rgba(3,55,75,.14);
  opacity: 0; will-change: transform;
  transition: transform .42s cubic-bezier(.34,1.37,.64,1), width .28s ease;
}
@media (min-width: 720px) { .one-seg { margin-left:var(--sp-8); margin-right:var(--sp-8); } }

/* ── Knoppen ───────────────────────────────────────────────────────────── */
.one-btn {
  display: flex; align-items: center; justify-content: center; gap:var(--sp-2);
  margin:var(--sp-1) var(--sp-5) var(--sp-4); padding:var(--sp-4); border: 0; border-radius: 12px;
  background: var(--one-navy); color: #fff;
  font: 700 14px 'Inter', system-ui, sans-serif; letter-spacing: .02em;
  width: calc(100% - 40px); cursor: pointer; text-decoration: none;
  transition: transform .1s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.one-btn:hover { background: #263548; }
.one-btn:active { transform: scale(.98); }
.one-btn:focus-visible { outline: 2px solid var(--one-accent); outline-offset: 2px; }
.one-btn--ghost { background: rgba(27,42,59,.06); color: var(--one-navy); }
.one-btn--ghost:hover { background: rgba(27,42,59,.1); }
.one-btn--accent { background: var(--one-accent); }
.one-btn--accent:hover { background: #3A5563; }
.one-btn--inline { display: inline-flex; width: auto; margin: 0; padding:var(--sp-3) var(--sp-5); }
@media (min-width: 720px) { .one-btn { margin-left:var(--sp-8); margin-right:var(--sp-8); width: calc(100% - 64px); } .one-btn--inline { width: auto; margin: 0; } }

/* ── Actie-kaart (contact) ─────────────────────────────────────────────── */
.one-actie {
  display: flex; gap:var(--sp-gap); align-items: flex-start;
  margin:var(--sp-2) var(--sp-5) var(--sp-4); background: #fff; border-radius: 14px; padding:var(--sp-4);
  box-shadow: var(--one-card-shadow);
}
.one-actie-ico {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, #577C8E, #577C8E);
  display: grid; place-items: center;
}
.one-actie-ico svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.one-actie-kick { font: 700 10px 'Inter', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--one-muted); margin-bottom: 2px; }
.one-actie-h { font: 700 15px 'Inter', system-ui, sans-serif; margin:0 0 var(--sp-1); color: var(--one-navy); }
.one-actie p { margin:0 0 var(--sp-3); font: 400 12.5px/1.5 'Inter', system-ui, sans-serif; color: var(--one-navy-light); }
.one-actie-btns { display: flex; gap:var(--sp-2); flex-wrap: wrap; }
.one-actie-btn {
  border: 0; border-radius: 999px; padding:var(--sp-2) var(--sp-4); cursor: pointer;
  font: 700 12px 'Inter', system-ui, sans-serif;
  background: var(--one-navy); color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap:var(--sp-2);
}
.one-actie-btn.gh { background: rgba(27,42,59,.06); color: var(--one-navy); }
.one-actie-btn:active { transform: scale(.97); }
@media (min-width: 720px) { .one-actie { margin-left:var(--sp-8); margin-right:var(--sp-8); } }

/* ── Stappen ───────────────────────────────────────────────────────────── */
.one-step { display: flex; gap:var(--sp-gap); margin:0 var(--sp-5) var(--sp-3); align-items: flex-start; }
.one-step-nr {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--one-navy); color: #fff;
  font: 700 12.5px/26px 'Inter', system-ui, sans-serif; text-align: center;
}
.one-step b { display: block; font: 700 13.5px 'Inter', system-ui, sans-serif; color: var(--one-navy); }
.one-step p { margin: 1px 0 0; font: 400 12.5px/1.5 'Inter', system-ui, sans-serif; color: var(--one-navy-light); }
@media (min-width: 720px) { .one-step { margin-left:var(--sp-8); margin-right:var(--sp-8); } }

/* ── Veld-chips (boek/offerte-balk) ───────────────────────────────────── */
.one-fields { display: flex; gap:var(--sp-2); margin:var(--sp-1) var(--sp-5) var(--sp-3); flex-wrap: wrap; }
.one-field { flex: 1; min-width: 0; background: #fff; border: 1.5px solid var(--one-line); border-radius: 12px; padding:var(--sp-2) var(--sp-3); }
.one-field > span { display: block; font: 700 9.5px 'Inter', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--one-muted); margin-bottom: 2px; }
/* Gedeelde widgets (IselmarCalendar/IselmarSelect) naadloos in de chip. */
.one-field .iselcal-trigger,
.one-field .iselsel-trigger { border: 0 !important; padding: 0 !important; min-width: 0; font: 600 13.5px 'Inter', system-ui, sans-serif !important; background: transparent !important; box-shadow: none !important; }
/* Nooit afbreken/wrappen binnen de smalle chip — netjes met ellipsis. */
.one-field .iselcal-value,
.one-field .iselsel-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (min-width: 720px) { .one-fields { margin-left:var(--sp-8); margin-right:var(--sp-8); } }

/* Overnachten: één range-datepicker (aankomst → vertrek) i.p.v. twee losse
   datumvelden. Mobiel: de range-chip pakt de volle breedte (ruimte voor
   "12 – 15 juni 2026"), gasten eronder. Desktop: naast elkaar. */
body[data-page="overnachten"] .one-fields { flex-direction: column; }
body[data-page="overnachten"] .one-field { flex: none; width: 100%; }
@media (min-width: 720px) {
  body[data-page="overnachten"] .one-fields { flex-direction: row; }
  body[data-page="overnachten"] .one-field--range { flex: 1.7; }
  body[data-page="overnachten"] .one-field:not(.one-field--range) { flex: 1; width: auto; }
}
/* Geen quick-filters (Vandaag/Deze maand/Dit jaar) in de hotel-range —
   een verblijf kiest gewoon van-tot, net als de beleven-datepicker. */
body[data-page="overnachten"] .one-field .iselcal-footer-range { display: none; }

/* ── Detail-overlay + carousel ─────────────────────────────────────────── */
.one-modal {
  position: fixed; inset: 0; z-index: 1000; display: none;
  background: rgba(20,34,51,.5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  align-items: flex-end; justify-content: center;
}
.one-modal[open] { display: flex; }
.one-modal-sheet {
  position: relative; width: 100%; max-width: 680px; max-height: 92dvh;
  background: var(--one-bg); border-radius: 22px 22px 0 0; overflow-y: auto;
  overscroll-behavior: contain;
  animation: one-sheet-in .32s cubic-bezier(.22,1,.36,1);
}
@keyframes one-sheet-in { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (min-width: 720px) {
  .one-modal { align-items: center; padding:var(--sp-6); }
  .one-modal-sheet { border-radius: 22px; }
}
.one-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--one-navy);
  backdrop-filter: blur(8px); display: grid; place-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.one-modal-close svg { width: 16px; height: 16px; }
.one-car { position: relative; }
.one-car-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  aspect-ratio: 4/3; max-height: 46dvh;
}
.one-car-track::-webkit-scrollbar { display: none; }
.one-car-slide { flex: 0 0 100%; scroll-snap-align: start; background-size: cover; background-position: center; }
.one-car-arrows { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding:0 var(--sp-3); pointer-events: none; }
.one-car-arrow {
  pointer-events: auto; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.9); color: var(--one-navy); display: grid; place-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.one-car-arrow[disabled] { opacity: .35; cursor: default; }
.one-car-arrow svg { width: 17px; height: 17px; }
.one-car-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap:var(--sp-2); }
.one-car-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55); }
.one-car-dot.is-active { background: #fff; }
.one-modal-info { padding:var(--sp-gutter) var(--sp-5) var(--sp-7); }
.one-modal-info .specs { font: 700 10.5px 'Inter', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--one-muted); }
.one-modal-info h2 { margin:var(--sp-2) 0 var(--sp-2); font: 800 22px/1.15 'Inter', system-ui, sans-serif; letter-spacing: -0.015em; color: var(--one-navy); }
.one-modal-info .desc { margin:0 0 var(--sp-4); font: 400 14px/1.6 'Inter', system-ui, sans-serif; color: var(--one-navy-light); }
.one-modal-info .label-h { font: 700 11px 'Inter', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--one-muted); margin:var(--sp-4) 0 var(--sp-2); }
.one-amenities { display: grid; grid-template-columns: 1fr 1fr; gap:var(--sp-2) var(--sp-gap); }
.one-amenities .a { display: flex; align-items: center; gap:var(--sp-2); font: 400 13px 'Inter', system-ui, sans-serif; color: var(--one-navy); }
.one-amenities .a svg { flex: 0 0 auto; width: 15px; height: 15px; stroke: var(--one-accent); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.one-modal-foot { display: flex; gap:var(--sp-3); margin-top:var(--sp-gutter); }
.one-modal-foot .one-btn { margin: 0; width: 100%; }

/* ── Hulpklassen ───────────────────────────────────────────────────────── */
.one-end { height: 28px; }
@media (min-width: 720px) { .one-end { height: 44px; } }

/* Reduced-motion-vangnet (motion-audit #13): iselmar-one.css had geen enkel
   rm-blok. Beweging weg, opacity blijft voor comprehensie. */
@media (prefers-reduced-motion: reduce) {
  .one-sheet, .one-tile, .one-row .one-tile { animation: none !important; }
  @keyframes one-sheet-in { from { opacity: .4; } to { opacity: 1; } }
}