/* ============================================================
   DS Components – Global CSS
   Alle design system component classes buiten @layer zodat
   Tailwind's purge ze niet verwijdert.
   Tokens komen uit tailwind.css (src/tokens/).
   ============================================================ */

/* ================================================================
   GLOBAL: Font Rendering
   Antialiased text rendering voor consistente weergave met DS.
   ================================================================ */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ================================================================
   LAYOUT — optionele smalle formulierkolom
   Token: --ds-form-content-max (src/tokens/spacing.css → tailwind.css :root)
   ================================================================ */

/* margin-right: auto = kolom links uitlijnen in de beschikbare ruimte (geen horizontale centrering). */
.ds-form-layout-constrained {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--ds-form-content-max, 640px);
  margin-left: 0;
  margin-right: auto;
  min-width: 0;
}

/* Op tablet/mobiel (< 1024px): formulier vult de volledige beschikbare breedte —
   geen smalle kolom, want de topbar-acties (bel-icoon) staan al aan de rechterrand. */
@media (max-width: 1023px) {
  .ds-form-layout-constrained {
    max-width: 100%;
  }
}

.ds-form-layout-constrained.ds-form-layout--full {
  max-width: none;
}

/* ================================================================
   BUTTONS
   ================================================================ */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;       /* Gelijk aan ds-input / ds-search: altijd op één lijn */
  padding: 0 1.75rem; /* Alleen horizontale padding; hoogte via height */
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-button, 'Fira Sans', sans-serif);
  font-size: var(--font-body);
  font-weight: 700;
  letter-spacing: var(--font-button-tracking, 0.01em);
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
  box-shadow: none;
  outline: none;
  transition:
    background-color 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),
    border-color 0.2s,
    color 0.2s,
    opacity 0.2s,
    transform 0.12s ease;
}
.ds-btn:focus, .ds-btn:focus-visible { box-shadow: none; outline: none; }

/* Variants */
.ds-btn-primary {
  background: var(--accent-papaya, #ff5a1f);
  color: white;
  border-color: var(--accent-papaya, #ff5a1f);
}
.ds-btn-primary:hover {
  background: var(--accent-papaya-hover, #e64812);
  border-color: var(--accent-papaya-hover, #e64812);
}

.ds-btn-black {
  background: var(--btn-primary-black, var(--gray-900));
  color: white;
  border-color: var(--btn-primary-black, var(--gray-900));
}
.ds-btn-black:hover {
  background: var(--btn-primary-black-hover, #333333);
  border-color: var(--btn-primary-black-hover, #333333);
}

.ds-btn-lime {
  background: var(--btn-lime);
  color: var(--btn-lime-text);
  border-color: var(--btn-lime);
}
.ds-btn-lime:hover {
  background: var(--btn-lime-hover, #80e142);
  border-color: var(--btn-lime-hover, #80e142);
}

/* Secondary actieknop — /design-system#buttons (Light Green) */
.ds-btn-light-green {
  background: var(--btn-light-green);
  color: var(--primary-dark);
  border-color: var(--btn-light-green);
}
.ds-btn-light-green:hover {
  background: var(--btn-light-green-hover);
  border-color: var(--btn-light-green-hover);
}

.ds-btn-gray {
  background: var(--gray-100, var(--gray-100));
  color: var(--brand-black, var(--gray-900));
  border-color: var(--gray-100, var(--gray-100));
}
.ds-btn-gray:hover {
  background: var(--gray-200, var(--gray-200));
  border-color: var(--gray-200, var(--gray-200));
}

.ds-btn-outline {
  background: transparent;
  border-color: var(--border-crisp, var(--gray-300));
  color: var(--brand-black, var(--gray-900));
}
.ds-btn-outline:hover {
  border-color: var(--border-primary, var(--gray-900));
}

.ds-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--brand-black, var(--gray-900));
}
.ds-btn-ghost:hover { background: var(--gray-100, var(--gray-100)); }

.ds-btn-destructive {
  background: var(--stoplicht-rood, #CB272F);
  color: white;
  border-color: var(--stoplicht-rood, #CB272F);
}
.ds-btn-destructive:hover { background: var(--stoplicht-rood-hover, #AD2128); border-color: var(--stoplicht-rood-hover, #AD2128); }

/* Shape modifiers */
.ds-btn-rect { border-radius: var(--radius-md, 8px); }
.ds-btn-pill { border-radius: var(--radius-pill, 999px); }

/* Size modifiers — alle 3 met dezelfde padding/hoogte-verhouding (~0.58):
   L (base)        48px  pad 28px (1.75rem)  gap 8px  font body 15px
   M (.ds-btn-md)  40px  pad 24px (1.5rem)   gap 8px  font xs   13px
   S (.ds-btn-sm)  32px  pad 16px (1rem)     gap 6px  font cap  12px */
.ds-btn-sm { height: 32px; min-height: 32px; padding: 0 1rem;   font-size: var(--font-caption); gap: 6px; }
.ds-btn-md { height: 40px; min-height: 40px; padding: 0 1.5rem; font-size: var(--font-xs);     gap: 8px; }
.ds-btn-lg { height: 48px; min-height: 48px; padding: 0 1.75rem; font-size: var(--font-body);  gap: 8px; }

/* Disabled */
.ds-btn:disabled, .ds-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Smart save — idle = DS grijs + gedempte tekst; actief = lime + --btn-lime-text */
.ds-btn.ds-btn-smart-save {
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    opacity 0.25s ease;
}
.ds-btn.ds-btn-lime.ds-btn-smart-save.is-smart-idle,
.ds-btn.ds-btn-lime.ds-btn-smart-save.is-smart-idle:disabled,
.ds-btn.ds-btn-lime.ds-btn-smart-save.is-smart-idle[disabled] {
  opacity: 1;
  background: var(--btn-gray);
  border-color: var(--btn-gray);
  color: var(--gray-500);
  cursor: not-allowed;
  pointer-events: none;
}
.ds-btn.ds-btn-lime.ds-btn-smart-save.is-smart-idle .btn-label,
.ds-btn.ds-btn-lime.ds-btn-smart-save.is-smart-idle .btn-ellipsis {
  color: var(--gray-500);
}
.ds-btn.ds-btn-lime.ds-btn-smart-save.is-smart-idle:disabled:hover,
.ds-btn.ds-btn-lime.ds-btn-smart-save.is-smart-idle[disabled]:hover {
  background: var(--btn-gray);
  border-color: var(--btn-gray);
  color: var(--gray-500);
}
@media (prefers-reduced-motion: reduce) {
  .ds-btn.ds-btn-smart-save {
    transition: none;
  }
}

/* ── Icon-only op kleine schermen (≤639px) ──
   Op mobiel: pill-knop wordt ronde 48×48 icon-knop, tekst verborgen.
   Gebruik: class="ds-btn ds-btn-black ds-btn-icon-sm"
   Met aria-label op de button en .btn-text span in de HTML.
   44×44px minimum touch target (conform responsive.mdc §6). */
@media (max-width: 1023px) {
  .ds-btn-icon-sm {
    width: 48px;
    min-width: 48px;
    padding: 0;
    border-radius: 50%;
  }
  .ds-btn-icon-sm .btn-text {
    display: none;
  }
}


/* ================================================================
   CHIPS (filter / toggle)
   Default: outline. Actief: zwart of lime (--primary). Groot (40px) of klein (.ds-chip-sm, 32px).
   ================================================================ */
.ds-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--border-crisp, var(--gray-300));
  background: transparent;
  color: var(--gray-600, var(--brand-black));
  font-family: var(--font-button, inherit);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),
    border-color 0.2s,
    color 0.2s;
  outline: none;
  box-shadow: none;
}
.ds-chip:hover {
  border-color: var(--gray-400);
  background: var(--gray-50);
  color: var(--gray-900, var(--brand-black));
}
.ds-chip:focus,
.ds-chip:focus-visible {
  box-shadow: none;
  outline: none;
}

/* Actief: gevuld met zwart */
.ds-chip.active,
.ds-chip--active,
.ds-chip[aria-pressed="true"] {
  background: var(--btn-black);
  border-color: var(--btn-black);
  color: var(--btn-black-text);
}
.ds-chip.active:hover,
.ds-chip--active:hover,
.ds-chip[aria-pressed="true"]:hover {
  background: var(--btn-black-hover);
  border-color: var(--btn-black-hover);
  color: var(--btn-black-text);
}

/* Primary variant: actief = lime. Niet actief: zachte hover (grijze tint). */
.ds-chip.ds-chip--primary.active,
.ds-chip.ds-chip--primary.ds-chip--active,
.ds-chip.ds-chip--primary[aria-pressed="true"] {
  background: var(--btn-lime);
  border-color: var(--btn-lime);
  color: var(--btn-lime-text);
}
.ds-chip.ds-chip--primary.active:hover,
.ds-chip.ds-chip--primary.ds-chip--active:hover,
.ds-chip.ds-chip--primary[aria-pressed="true"]:hover {
  background: var(--btn-lime-hover);
  border-color: var(--btn-lime-hover);
  color: var(--btn-lime-text);
}

/* Choice variant: single-select. Selected = primary-dark bg, lime tekst. Niet selected = primary-dark border. */
.ds-chip.ds-chip--choice {
  border-color: var(--primary-dark);
  color: var(--primary-dark);
}
.ds-chip.ds-chip--choice:hover {
  border-color: var(--primary-dark);
  color: var(--primary-dark);
  background: #1633000D; /* primary-dark 5% — subtiele tint */
}
.ds-chip.ds-chip--choice.active,
.ds-chip.ds-chip--choice.ds-chip--active,
.ds-chip.ds-chip--choice[aria-pressed="true"] {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--primary-lime);
}
.ds-chip.ds-chip--choice.active:hover,
.ds-chip.ds-chip--choice.ds-chip--active:hover,
.ds-chip.ds-chip--choice[aria-pressed="true"]:hover {
  background: var(--primary-dark-hover);
  border-color: var(--primary-dark-hover);
  color: var(--primary-lime);
}

/* Klein: 32px voor filterpanelen */
.ds-chip-sm {
  height: 32px;
  padding: 0 12px;
  font-size: 0.75rem;
  gap: 4px;
}


/* ================================================================
   BADGES
   ================================================================ */

/* Platform Badges (solid, brand kleuren) */
.ds-platform-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-md, 8px);
  font-family: var(--font-body-family, 'Fira Sans', sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.ds-platform-badge--airbnb   { background: var(--platform-airbnb, #FF5A5F); color: #fff; }
.ds-platform-badge--booking  { background: var(--platform-booking, #0C3B7C); color: #fff; }
.ds-platform-badge--vrbo     { background: #0e214b; color: #318eee; font-style: italic; }
.ds-platform-badge--expedia  { background: var(--platform-expedia, #fbdb33); color: #000; }
.ds-platform-badge--agoda    { background: var(--platform-agoda, #A33288); color: #fff; }
.ds-booking-com              { color: #00bafc; }


/* ================================================================
   MODALS
   ================================================================ */

.ds-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ds-modal-overlay.visible {
  opacity: 1;
}

body.ds-modal-open {
  overflow: hidden;
}

.ds-modal {
  background: var(--card, #ffffff);
  border-radius: var(--radius-3xl, 28px);
  padding: 32px;
  box-shadow: var(--shadow-xl, 0 24px 72px rgba(15, 23, 42, 0.18));
  width: 100%;
  max-width: 540px;
  position: relative;
  animation: ds-modal-in 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Structured modal with header/body/footer */
.ds-modal:has(.ds-modal-body) {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 48px);
}

.ds-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 32px 24px;
  border-bottom: none;
  flex-shrink: 0;
  gap: 16px;
}

.ds-modal-title {
  font-family: var(--font-heading, 'Fira Sans', sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: var(--foreground, var(--gray-900));
  line-height: 1.3;
}

/* Override margin when title is inside header */
.ds-modal-header .ds-modal-title {
  margin: 0;
}

/* Sluitknop — zelfde 40px cirkel + fade als .ds-topbar-back / .ds-modal-back (gray-100 → gray-200).
   Terugknop (.ds-modal-back): op mobiel slide-modals chevron zonder rondje, alleen kleur +
   translateX op icoon (zie @media <640px). */
.ds-modal-close:not(.ds-btn) {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: none;
  border-radius: 50%;
  background: none;
  background-color: var(--ds-icon-round-btn-bg, var(--gray-100, var(--gray-100)));
  color: var(--primary-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  overflow: visible;
  transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}
.ds-modal-close:not(.ds-btn):hover {
  background-color: var(--ds-icon-round-btn-bg-hover, var(--gray-200, var(--gray-200)));
  color: var(--primary-dark);
}
.ds-modal-close:not(.ds-btn):focus-visible {
  outline: 2px solid var(--primary-dark);
  outline-offset: 2px;
}
.ds-modal-close:not(.ds-btn) svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  display: block;
  flex-shrink: 0;
}
.ds-modal-close:not(.ds-btn) svg,
.ds-modal-close:not(.ds-btn) svg * {
  transition: none;
}

.ds-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-200, var(--gray-200)) transparent;
}
.ds-modal-body::-webkit-scrollbar { width: 6px; }
.ds-modal-body::-webkit-scrollbar-track { background: transparent; }
.ds-modal-body::-webkit-scrollbar-thumb {
  background: var(--gray-200, var(--gray-200));
  border-radius: 99px;
}

.ds-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}
.ds-modal-footer .ds-btn {
  min-width: 136px;
}
/* Footer in structured modal */
.ds-modal:has(.ds-modal-body) .ds-modal-footer {
  padding: 20px 32px 28px;
  border-top: 1px solid var(--gray-100, var(--gray-100));
  margin-top: 0;
  flex-shrink: 0;
}

/* Stap-indicator boven footer-knoppen (mobiele slide-modals); kleuren = greyscale DS */
.ds-modal-footer-progress {
  display: none;
}
.ds-modal-footer-progress-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--gray-300, var(--gray-300));
  flex-shrink: 0;
  transform: scale(0.88);
  opacity: 0.52;
  transform-origin: center;
  transition:
    transform 0.42s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.32s ease,
    background-color 0.32s ease;
}
.ds-modal-footer-progress-dot[aria-current='step'] {
  background-color: var(--gray-700, var(--gray-700));
  transform: scale(1);
  opacity: 1;
  animation: ds-modal-progress-dot-pop 0.52s cubic-bezier(0.34, 1.12, 0.64, 1) both;
}

/* Multi-step modal: subtiele inkom na stapwissel (iOS Settings-achtig; zie modal-step-transition.js) */
@media (prefers-reduced-motion: no-preference) {
  .ds-modal-step-enter--forward {
    animation: ds-modal-step-enter-forward 0.28s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  }
  .ds-modal-step-enter--back {
    animation: ds-modal-step-enter-back 0.28s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  }
}

@keyframes ds-modal-step-enter-forward {
  from {
    opacity: 0.88;
    transform: translate3d(1rem, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ds-modal-step-enter-back {
  from {
    opacity: 0.88;
    transform: translate3d(-1rem, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-modal-footer-progress-dot {
    transform: none;
    opacity: 0.6;
    transition: background-color 0.2s ease, opacity 0.2s ease;
  }
  .ds-modal-footer-progress-dot[aria-current='step'] {
    animation: none;
    opacity: 1;
  }
}

/* Subtiele “settle” bij actieve stap (nieuwe stip in DOM = animatie opnieuw) */
@keyframes ds-modal-progress-dot-pop {
  0% {
    transform: scale(0.72);
    opacity: 0.55;
  }
  48% {
    transform: scale(1.07);
    opacity: 1;
  }
  78% {
    transform: scale(0.97);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes ds-modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Location picker modal (#location-picker-modal) — lp-* ──
   Houd in sync met src/components/modals.css; app laadt modals hier via ds-components.css. */
.lp-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-section-label {
  font-family: var(--font-heading, "Fira Sans", sans-serif);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-400, var(--gray-400));
  padding: 0 4px;
  margin: 0;
}
.lp-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-lg, 12px);
  font-family: var(--font-sans, "Fira Sans", system-ui, sans-serif);
  font-size: 15px;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.12s ease;
  box-sizing: border-box;
}
/* Locaties: gray-800; ruimtes: gray-600 — geen gewichtsverschil bij selectie */
.lp-item--property {
  color: var(--gray-800, var(--gray-800));
  font-weight: 500;
}
.lp-item--property .lp-item__icon {
  color: var(--gray-800, var(--gray-800));
}
.lp-item--unit {
  color: var(--gray-600, var(--gray-600));
  font-weight: 400;
}
.lp-item--unit .lp-item__icon {
  color: var(--gray-600, var(--gray-600));
}
.lp-item:hover {
  background: var(--gray-100, var(--gray-100));
}
.lp-item__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.lp-item__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-item__check {
  display: none;
  align-items: center;
  flex-shrink: 0;
}
.lp-item--active {
  background: var(--gray-100, var(--gray-100));
}
.lp-item--active.lp-item--property .lp-item__icon,
.lp-item--active.lp-item--property .lp-item__check {
  color: var(--gray-800, var(--gray-800));
}
.lp-item--active.lp-item--unit .lp-item__icon,
.lp-item--active.lp-item--unit .lp-item__check {
  color: var(--gray-700, var(--gray-700));
}
.lp-item--active .lp-item__check {
  display: flex;
}

/* ── Confirm modal (bevestigingsdialoog voor verwijderacties, à la Wise) ──
   Gebruik: .ds-modal.ds-modal-confirm (ZONDER header/body/footer structuur)
   Structuur: .ds-modal-close (abs) + .ds-modal-confirm-title + .ds-modal-confirm-msg + .ds-modal-confirm-actions
*/
.ds-modal-confirm {
  max-width: 400px;
  padding: 32px;
  position: relative;
}
.ds-modal-confirm .ds-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
}
.ds-modal-confirm-title {
  font-family: var(--font-heading, "Fira Sans", sans-serif);
  font-size: var(--font-h3, 1.1rem);
  font-weight: 700;
  color: var(--foreground, var(--gray-900));
  /* Titel → body: 24px (8px-grid ×3), zelfde ritme als sectietitel → content */
  margin: 0 0 24px;
  padding-right: 48px; /* 40px sluitknop + adem */
  line-height: 1.3;
}
.ds-modal-confirm-msg {
  font-family: var(--font-sans, "Fira Sans", system-ui, sans-serif);
  font-size: var(--font-small, 0.875rem);
  font-weight: var(--weight-normal, 400);
  color: var(--gray-500, var(--gray-500));
  line-height: var(--leading-normal, 1.55);
  margin: 0 0 24px;
}
.ds-modal-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ds-modal-confirm-actions .ds-btn {
  width: 100%;
  justify-content: center;
}

#ds-confirm-overlay {
  z-index: 9500;
}

/* ================================================================
   MOBILE SLIDE-RIGHT MODAL
   Gebruik: voeg .ds-modal-overlay--mobile-slide toe aan .ds-modal-overlay
   + voeg .ds-modal-back button toe links van de title in .ds-modal-header

   Gedrag (< 640px): fullscreen witte modal schuift van rechts naar links.
   Onderliggende pagina (.main-content) verschuift via JS naar links met
   klassen .ds-page-push-ready + .ds-page-push-active.
   Desktop (≥ 640px): ongewijzigd fade+scale gedrag.
   ================================================================ */

/* Terugknop — 40px hit area; basis gray-100+cirkel is fallback (knop is op desktop verborgen).
   Op mobiel (<640px) slide-modals: geen rondje — transparant, gray-500 chevron, hover alleen
   tekstkleur + translateX op icoon (mobile-modal.mdc). .ds-topbar-back blijft cirkel+pijl. */
.ds-modal-back {
  display: none;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: none;
  border-radius: 50%;
  background: none;
  background-color: var(--ds-icon-round-btn-bg, var(--gray-100, var(--gray-100)));
  color: var(--primary-dark);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  overflow: visible;
  transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}
.ds-modal-back:hover {
  background-color: var(--ds-icon-round-btn-bg-hover, var(--gray-200, var(--gray-200)));
}
.ds-modal-back:focus-visible {
  outline: 2px solid var(--primary-dark);
  outline-offset: 2px;
}
.ds-modal-back svg,
.ds-modal-back i {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
  stroke: currentColor;
}
.ds-modal-back svg,
.ds-modal-back svg * {
  transition: none;
}

/* ================================================================
   FORM-ELEMENTEN FONT — altijd --font-input (los van body font)
   Zorgt dat .ds-textarea, .ds-search en native form-elementen
   dezelfde font-family gebruiken als .ds-input en .ds-select,
   ook als ze geen eigen font-family declaratie hebben.
   ================================================================ */
.ds-textarea,
.ds-search,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
  font-family: var(--font-input, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
}

/* ================================================================
   iOS ANTI-ZOOM — GLOBALE FONT-SIZE FIX
   iOS Safari zoomt automatisch in op elk form-element met font-size < 16px.
   Deze regel geldt voor ALLE invoervelden in de app op mobiel, inclusief
   edit-modals, zoekbalken en toekomstige formulieren.
   De modal-specifieke override (--mobile-slide) is redundant maar blijft
   staan als documentatie en voor specificity-zekerheid.
   ================================================================ */
@media (max-width: 1023px) {
  .ds-input,
  .ds-select,
  .ds-textarea,
  .ds-search,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    font-size: 16px;
  }
}

/* ================================================================
   Pagina-push klassen op <body>
   Elke toekomstige mobile-slide modal hoeft alleen
   body.ds-page-push-ready / body.ds-page-push-active te zetten.

   .ds-page-wrap is de verplichte wrapper in elk topbar-template:
     <div class="ds-page-wrap">
       [topbar.php incl. ds-bottombar-wrap]
       <div class="main-content">...</div>
     </div>
     [modals BUITEN de wrapper, als siblings]

   De wrapper schaalt als één unit → geen naad (seam) tussen topbar en content.
   .ds-bottombar-wrap is position:fixed binnen de wrapper; zodra de wrapper
   transform krijgt, is fixed relatief aan de wrapper → beweegt mee. ✓
   Na de animatie (classes verwijderd) gaat fixed terug naar viewport-relatief. ✓

   Modals (.ds-modal-overlay) staan buiten de wrapper → bewegen niet mee. ✓
   ================================================================ */
@media (max-width: 1023px) {
  body.ds-page-push-ready .ds-page-wrap {
    transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    /* Witte achtergrond zodat transparante topbar-gebieden (bijv. messages-page)
       niet de sage-groene body doorlaten. Buiten de afgeronde hoeken van de wrapper
       blijft de body-achtergrond (sage) wél zichtbaar → kaarteffect intact. */
    background: var(--card, #ffffff);
    /* overflow:hidden hier gezet (vóór de animatie) i.p.v. in ds-page-push-active:
       Safari heeft een bug waarbij het gelijktijdig toepassen van overflow:hidden én een
       CSS transform-transition de animatie onderbreekt. Door overflow:hidden al in
       ds-page-push-ready te zetten, is de stacking context al aangemaakt vóór de
       transform start — Safari registreert de transition dan wél correct. */
    overflow: hidden;
  }

  /* Wrapper schaalt als één kaart → topbar + content + bottombar bewegen uniform.
     border-radius + overflow:hidden creëert de afgeronde kaarthoeken op alle vier de hoeken. */
  body.ds-page-push-active .ds-page-wrap {
    transform: translateX(-30%) scale(0.97);
    opacity: 0.85;
    border-radius: 24px;
  }

  /* ── Achtergrond onder de wegschuivende pagina: vult de gap (scale) met kaartkleur i.p.v. body ──
     .ds-page-push-bg is een vaste div onder .ds-page-wrap; alleen zichtbaar tijdens page-push. */
  .ds-page-push-bg {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--card, #ffffff);
    z-index: 8997;
    pointer-events: none;
  }
  body.ds-page-push-ready .ds-page-push-bg {
    display: block;
  }
  body.ds-page-push-ready .ds-page-wrap {
    position: relative;
    z-index: 8998;
  }

  /* ── Dim-overlay: Airbnb-stijl schaduwvlak over de wegschuivende pagina ──
     body::before is een CSS-only overlay: position: fixed, z-index 8999 (boven pagina,
     onder modal op z-index 9000). Faded in samen met de page-push animatie zodat
     het visueel lijkt alsof de modal echt OVER de pagina schuift.
     pointer-events: auto bij active voorkomt per ongeluk tikken op de pagina.
     Werkt automatisch voor ALLE modals die ds-page-push-ready/active gebruiken. */
  body.ds-page-push-ready::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 8999;
    pointer-events: none;
    transition: background 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body.ds-page-push-active::before {
    background: rgba(0, 0, 0, 0.20);
    pointer-events: auto;
  }

  /* ── Bottombar pointer-events uitschakelen tijdens page-push ─────────────────
     De tab bar is niet bedienbaar terwijl een modal open is. pointer-events: none
     voorkomt per ongeluk tikken op de achtergrond.
     De tab bar beweegt automatisch mee met .ds-page-wrap via will-change:transform
     containing block. mobile-modal-slide.js past enkel correctionY toe om de
     beginpositie correct te zetten. ─────────────────────────────────────────── */
  body.ds-page-push-ready .ds-bottombar-wrap {
    pointer-events: none;
  }

  /* Host-boekingen: .ds-bottombar-wrap hangt op <body> (topbar.js). Zonder deze laag
     blijft z-index 4000 onder .ds-page-wrap (8998) → tabbalk “verdwijnt” bij card-open. */
  body.ds-page-push-ready .ds-bottombar-wrap.ds-bottombar-wrap--body-anchored {
    z-index: 8998;
    /* Zelfde eenvoudige transform-transitie als .ds-page-wrap (geen opacity: tab blijft leesbaar);
       mobile-modal-slide.js zet transformOrigin vóór ds-page-push-active. */
    transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  /* Onderste hoeken van de “kaart”: zelfde 24px als body.ds-page-push-active .ds-page-wrap */
  body.ds-page-push-active .ds-bottombar-wrap.ds-bottombar-wrap--body-anchored {
    transform: translateX(-30%) scale(0.97);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    overflow: hidden;
  }

  /* Host boekingen: maand-subbar op <body> (topbar.js) —zelfde PUSH + opacity als .ds-page-wrap.
     Zonder opacity mee te laten faden oogt de balk “los” of te fel t.o.v. de kaart. */
  body.ds-page-push-ready .hb-bookings-subbar.hb-bookings-subbar--body-anchored {
    pointer-events: none;
    transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
  }

  body.ds-page-push-active .hb-bookings-subbar.hb-bookings-subbar--body-anchored {
    transform: translateX(-30%) scale(0.97);
    opacity: 0.85;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    overflow: hidden;
  }

  /* ── Scroll-lock: voorkomt dat de onderliggende pagina doorscrolt terwijl een
     mobile-slide modal open is. Op iOS kan scroll-chaining (ook "scroll passthrough"
     of "elastic scroll") ervoor zorgen dat de body mee scrollt zodra het scroll-einde
     van het modal-panel bereikt is. Gevolg: onderliggende content (bijv. een lange
     kalender) verschijnt aan de onderkant van het scherm.

     Oplossing (drie lagen, belt-and-suspenders):
     1. body.ds-page-push-ready: overflow hidden → geen body-scroll via CSS
     2. .ds-modal overflow-y: scroll + overscroll-behavior: contain → iOS scroll-chain
        eindigt bij het modal-panel, niet bij de body
     3. mobile-modal-slide.js: html.overflow = hidden → blokkeert ook iOS elastic scroll
        op document-niveau (via JS, zie open()/close())
     ──────────────────────────────────────────────────────────────────────────────── */
  body.ds-page-push-ready {
    overflow: hidden;
    /* Voorkomt iOS "rubber band" scroll op het body-niveau */
    overscroll-behavior: none;
  }

  .ds-modal-overlay--mobile-slide .ds-modal {
    /* Scroll-chaining eindigt hier: overscroll propagateert NIET naar de body */
    overscroll-behavior: contain;
  }
}

/* ── Centraal dim overlay (desktop ≥ 640px) ──────────────────────────────────
   Gedeeld door alle desktop modals die DimOverlay.show() / .hide() aanroepen.
   Beheerd door js/core/dim-overlay.js.

   Waarom een apart element i.p.v. background op de modal-wrapper?
   Safari heeft een GPU-compositing bug: een element met overflow-y + background
   + transition wordt dubbel geschilderd als de content van grootte verandert.
   Door het dim-element los te houden van de scroll-container verdwijnt de bug.
   ──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  #ds-dim-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 8999;
    background: rgba(12, 16, 27, 0);
    pointer-events: none;
    transition: background 0.2s ease;
    cursor: default;
  }
  #ds-dim-overlay.ds-dim-overlay--ready {
    display: block;
  }
  #ds-dim-overlay.ds-dim-overlay--active {
    background: rgba(12, 16, 27, 0.36);
    pointer-events: auto;
  }
}

/* Mobile-only stijlen */
@media (max-width: 1023px) {
  /* Overlay: geen dimmed background — .ds-modal regelt de animatie */
  .ds-modal-overlay--mobile-slide {
    position: static;      /* niet fixed — Safari telt fixed overlays mee voor DI tinting */
    inset: auto;
    background: transparent;
    backdrop-filter: none;
    padding: 0;
    opacity: 1;            /* altijd zichtbaar; slide-animatie zit op .ds-modal */
    transition: none;
    pointer-events: none;  /* blokkeert interactie totdat .visible is gezet */
    z-index: auto;
  }
  .ds-modal-overlay--mobile-slide.visible {
    pointer-events: auto;
  }

  /* Modal: fullscreen, slideert van rechts naar links */
  .ds-modal-overlay--mobile-slide .ds-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    border-radius: 0;
    box-shadow: none;
    max-width: 100%;
    /* max-height: none is verplicht — de globale regel .ds-modal:has(.ds-modal-body)
       zet max-height: calc(100dvh - 48px) voor alle gestructureerde modals (desktop
       floating modal met overlay-padding). Op mobiel in fullscreen mode (position:fixed
       + inset:0) pinnt de modal al aan alle vier viewportzijden; max-height zou een
       48px gat onderaan veroorzaken. Explicit none overschrijft de globale regel. */
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: none;                   /* override ds-modal-in keyframe */
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }
  .ds-modal-overlay--mobile-slide.visible .ds-modal {
    transform: translateX(0);
  }

  /* Verberg X-sluitknop, toon terugknop (alleen <640px; desktop alleen sluitknop) */
  .ds-modal-overlay--mobile-slide .ds-modal-close { display: none; }

  /* Mobiele modal-terug: chevron, geen cirkel — border-radius 0 overschrijft basis 50% */
  .ds-modal-overlay--mobile-slide .ds-modal-back,
  .ds-card-overlay-modal .ds-booking-header-back.ds-modal-back {
    display: flex;
    margin-left: -14px;
    border-radius: 0;
    background-color: transparent;
    color: var(--gray-500, var(--gray-500));
    transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .ds-modal-overlay--mobile-slide .ds-modal-back:hover,
  .ds-modal-overlay--mobile-slide .ds-modal-back:focus-visible,
  .ds-card-overlay-modal .ds-booking-header-back.ds-modal-back:hover,
  .ds-card-overlay-modal .ds-booking-header-back.ds-modal-back:focus-visible {
    background-color: transparent;
    color: var(--brand-black, #0e0f0c);
  }
  .ds-modal-overlay--mobile-slide .ds-modal-back svg,
  .ds-card-overlay-modal .ds-booking-header-back.ds-modal-back svg {
    width: 24px;
    height: 24px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .ds-modal-overlay--mobile-slide .ds-modal-back svg *,
  .ds-card-overlay-modal .ds-booking-header-back.ds-modal-back svg * {
    transition: none;
  }
  .ds-modal-overlay--mobile-slide .ds-modal-back:hover svg,
  .ds-modal-overlay--mobile-slide .ds-modal-back:focus-visible svg,
  .ds-card-overlay-modal .ds-booking-header-back.ds-modal-back:hover svg,
  .ds-card-overlay-modal .ds-booking-header-back.ds-modal-back:focus-visible svg {
    transform: translateX(-3px);
  }

  /* Padding: header, body, footer worden 24px horizontaal (= mobiele card padding per
     spacing-and-cards.mdc). Dit geeft concentric corners: left spacing = top spacing = 24px.
     padding-top includeert safe-area-inset-top zodat header-content niet onder de
     Dynamic Island / notch valt (vereist viewport-fit=cover in de viewport meta-tag). */
  .ds-modal-overlay--mobile-slide .ds-modal-header {
    padding: calc(24px + env(safe-area-inset-top, 0px)) 24px 20px;
    flex-shrink: 0;
  }
  /*
   * Korte content: min-height 100dvh + column-flex; .ds-modal-body krijgt flex-grow → lege ruimte
   * onder de velden, footer blijft visueel onderaan het scherm.
   * Lange content: modal wordt hoger dan viewport; één scroll op .ds-modal (header + body + footer
   * gaan samen omhoog) — géén aparte scroll alleen in de body met vaste header/footer.
   * Footer-padding: 16px boven knoppen, 24px links/rechts/onder + safe-area (8px-grid).
   */
  .ds-modal-overlay--mobile-slide .ds-modal:has(.ds-modal-body) {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ds-modal-overlay--mobile-slide .ds-modal-body {
    padding: 24px 24px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
  }
  .ds-modal-overlay--mobile-slide .ds-modal:has(.ds-modal-body) .ds-modal-footer {
    padding: 16px 24px calc(24px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
    margin-top: 0;
    border-top: none;
    /* 12px tussen knoppen onderling; 24px stippen→knop via padding op .ds-modal-footer-progress */
    gap: 12px;
  }

  /* Knoppen op mobiel: volle breedte gestapeld; primaire actie visueel boven secundaire (desktop-row DOM blijft) */
  .ds-modal-overlay--mobile-slide .ds-modal-footer {
    flex-direction: column;
  }
  .ds-modal-overlay--mobile-slide .ds-modal-footer .ds-btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  /* Stap-indicator (optioneel); puntjes zelf: globale .ds-modal-footer-progress-dot */
  .ds-modal-overlay--mobile-slide .ds-modal-footer-progress:not([hidden]) {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    flex-shrink: 0;
    margin: 0;
    /* 12px padding + 12px footergap = 24px (3×8) tot eerste knop; knoppen blijven 12px uit elkaar */
    padding: 0 0 12px;
    box-sizing: border-box;
    order: 0;
  }

  .ds-modal-overlay--mobile-slide
    .ds-modal-footer:not(.profile-appearance-modal-footer)
    > .ds-btn.ds-btn-lime,
  .ds-modal-overlay--mobile-slide
    .ds-modal-footer:not(.profile-appearance-modal-footer)
    > .ds-btn.ds-btn-primary,
  .ds-modal-overlay--mobile-slide
    .ds-modal-footer:not(.profile-appearance-modal-footer)
    > .ds-btn.ds-btn-black,
  .ds-modal-overlay--mobile-slide
    .ds-modal-footer:not(.profile-appearance-modal-footer)
    > .ds-btn.ds-btn-destructive {
    order: 1;
  }
  .ds-modal-overlay--mobile-slide
    .ds-modal-footer:not(.profile-appearance-modal-footer)
    > .ds-btn.ds-btn-outline,
  .ds-modal-overlay--mobile-slide
    .ds-modal-footer:not(.profile-appearance-modal-footer)
    > .ds-btn.ds-btn-gray,
  .ds-modal-overlay--mobile-slide
    .ds-modal-footer:not(.profile-appearance-modal-footer)
    > .ds-btn.ds-btn-ghost {
    order: 2;
  }

  /* iOS anti-zoom: font-size < 16px triggert automatisch inzoomen bij focus.
     Forceer 16px op alle form-elementen binnen de mobile-slide modal. */
  .ds-modal-overlay--mobile-slide .ds-input,
  .ds-modal-overlay--mobile-slide .ds-select,
  .ds-modal-overlay--mobile-slide .ds-textarea,
  .ds-modal-overlay--mobile-slide select,
  .ds-modal-overlay--mobile-slide input,
  .ds-modal-overlay--mobile-slide textarea {
    font-size: 16px;
  }

}

/* ================================================================
   SPLIT MODAL — twee-kolom desktop layout
   Gebruik: voeg .ds-modal-split toe aan .ds-modal
   Breakpoint: 768px (Tailwind md) — uniform voor alle pagina's

   .ds-modal.ds-modal-split = specificiteit 0,2,0 om :has-regel
   te overtreffen (die flex-direction: column/max-height zet).
   ================================================================ */

/* Base (mobile-first: gestapeld) */
.ds-modal.ds-modal-split {
  max-width: 1100px;
  flex-direction: column;
}

/* Sidebar (identity panel) */
.ds-modal-split .ds-modal-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 28px 24px;
  border-bottom: 1px solid var(--gray-100, var(--gray-100));
  flex-shrink: 0;
  background: var(--gray-50, var(--gray-50));
}

/* Sidebar footer: wrapper voor destructieve actie */
.ds-modal-split .ds-modal-sidebar-footer {
  width: 100%;
  padding-top: 16px;
}

/* Content area (form + footer) */
.ds-modal-split .ds-modal-content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

/* Body binnen content area */
.ds-modal-split .ds-modal-body {
  padding: 28px 32px;
}

/* Footer binnen content area */
.ds-modal-split .ds-modal-footer {
  padding: 16px 32px 24px;
}

/* Desktop layout (≥ 768px) */
@media (min-width: 768px) {
  /* Specificiteit 0,2,0 wint van :has-regel (ook 0,2,0) door source-order */
  .ds-modal.ds-modal-split {
    flex-direction: row;
    /* Breder dan hoog: meer horizontale ruimte, minder scrollen */
    height: min(720px, calc(100dvh - 48px));
    max-height: min(720px, calc(100dvh - 48px));
    max-width: 1100px;
  }

  /* Sidebar: vaste breedte, volledige hoogte, rechter border */
  .ds-modal-split .ds-modal-sidebar {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    padding: 36px 28px 28px;
    border-bottom: none;
    border-right: 1px solid var(--gray-100, var(--gray-100));
    overflow-y: auto;
    scrollbar-width: none;
  }
  .ds-modal-split .ds-modal-sidebar::-webkit-scrollbar {
    display: none;
  }

  /* Sidebar footer: duwt destructieve actie naar de bodem */
  .ds-modal-split .ds-modal-sidebar-footer {
    margin-top: auto;
    padding-top: 24px;
  }

  /* Close button: alleen positionering — visuele stijl via base .ds-modal-close */
  .ds-modal-split .ds-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
  }

  /* Body: compacte padding, ruimte boven voor sluitknop */
  .ds-modal-split .ds-modal-body {
    padding: 32px 40px;
    padding-top: 52px;
  }

  /* Footer: padding matcht body horizontaal */
  .ds-modal-split .ds-modal-footer {
    padding: 16px 40px 24px;
  }
}


/* ================================================================
   FORMS
   ================================================================ */

.ds-label {
  display: block;
  font-family: var(--font-heading, 'Fira Sans', sans-serif);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--foreground, var(--gray-900));
}

/* Sync met src/components/forms.css — focus-ring: inset spread (naar binnen), zelfde kleur als border */
.ds-input {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  min-height: 48px;
  border: 2px solid var(--border-crisp, var(--gray-300));
  border-radius: var(--radius-input, 12px);
  padding: 13px 17px;
  background-color: var(--input, #ffffff);
  color: var(--gray-600);
  font-family: var(--font-input, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: var(--font-body, 14px);
  --ds-field-surface: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --ds-field-ring: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 0 var(--brand-black, var(--gray-900));
  transition:
    border-color var(--ds-field-surface),
    background-color var(--ds-field-surface),
    box-shadow var(--ds-field-ring);
}
.ds-input::placeholder,
.ds-textarea::placeholder {
  color: var(--ds-input-placeholder, var(--gray-400, var(--gray-400)));
}
.ds-input:hover {
  border-color: var(--brand-black, var(--gray-900));
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06)), inset 0 0 0 0 var(--brand-black, var(--gray-900));
}
.ds-input:focus,
.ds-input:focus-visible {
  outline: none;
  border-color: var(--brand-black, var(--gray-900));
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 0.75px var(--brand-black, var(--gray-900));
}

/* Textarea: zelfde oppervlak / hover / focus als .ds-input (inset ring, shadow-sm hover) */
.ds-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 120px;
  border: 2px solid var(--border-crisp, var(--gray-300));
  border-radius: var(--radius-input, 12px);
  padding: 13px 17px;
  background-color: var(--input, #ffffff);
  color: var(--gray-600);
  font-family: var(--font-input, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: var(--font-body, 14px);
  resize: vertical;
  --ds-field-surface: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --ds-field-ring: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 0 var(--brand-black, var(--gray-900));
  transition:
    border-color var(--ds-field-surface),
    background-color var(--ds-field-surface),
    box-shadow var(--ds-field-ring);
}
.ds-textarea:hover {
  border-color: var(--brand-black, var(--gray-900));
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06)), inset 0 0 0 0 var(--brand-black, var(--gray-900));
}
.ds-textarea:focus,
.ds-textarea:focus-visible {
  outline: none;
  border-color: var(--brand-black, var(--gray-900));
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 0.75px var(--brand-black, var(--gray-900));
}

/* Validatie: border + feedback onder veld (tokens: --sent-red, --validation-feedback-*) */
.ds-input.error,
.ds-textarea.error,
.ds-select.error {
  border-color: var(--sent-red, #CB272F) !important;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 0 var(--sent-red, #CB272F) !important;
}
.ds-input.error:hover,
.ds-input.error:focus,
.ds-input.error:focus-visible,
.ds-textarea.error:hover,
.ds-textarea.error:focus,
.ds-textarea.error:focus-visible,
.ds-select.error:hover,
.ds-select.error:focus,
.ds-select.error:focus-visible {
  border-color: var(--sent-red, #CB272F) !important;
}
.ds-input.error:focus,
.ds-input.error:focus-visible,
.ds-textarea.error:focus,
.ds-textarea.error:focus-visible,
.ds-select.error:focus,
.ds-select.error:focus-visible {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 0.75px var(--sent-red, #CB272F) !important;
}
.ds-input.error:hover:not(:focus):not(:focus-visible),
.ds-textarea.error:hover:not(:focus):not(:focus-visible),
.ds-select.error:hover:not(:focus):not(:focus-visible) {
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06)), inset 0 0 0 0 var(--sent-red, #CB272F) !important;
}

/* Validatiebalk: radius = inputs; padding gelijk (8px) voor concentrische hoek;
   icoon verticaal gecentreerd in de band van de eerste tekstregel (1lh / fallback 1.45em). */
.ds-field-feedback,
.ds-field-error {
  --ds-field-feedback-pad: 8px;
  --ds-field-feedback-gap: 6px;
  --ds-field-feedback-icon-size: 18px;
  display: none;
  margin-top: 8px;
  padding: var(--ds-field-feedback-pad);
  border-radius: var(--radius-input, 12px);
  box-sizing: border-box;
  width: 100%;
  font-family: var(--font-input, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  align-items: flex-start;
  gap: var(--ds-field-feedback-gap);
}
.ds-field-feedback:has(> .ds-field-feedback__text:not(:empty)),
.ds-field-error:has(> .ds-field-feedback__text:not(:empty)) {
  display: flex;
}
/* Legacy markup: tekst rechtstreeks in host (zonder wrapper) */
.ds-field-feedback:not(:has(> .ds-field-feedback__text)):not(:empty),
.ds-field-error:not(:has(> .ds-field-feedback__text)):not(:empty) {
  display: flex;
}
.ds-field-feedback__text {
  flex: 1 1 auto;
  min-width: 0;
}
.ds-field-feedback::before,
.ds-field-error::before {
  content: '';
  flex: 0 0 var(--ds-field-feedback-icon-size);
  width: var(--ds-field-feedback-icon-size);
  /* Hoogte = één regeltekst; 18px-icoon gecentreerd in die band = midden eerste regel */
  height: calc(1.45 * 1em);
  height: 1lh;
  background-repeat: no-repeat;
  background-size: var(--ds-field-feedback-icon-size) var(--ds-field-feedback-icon-size);
  background-position: center center;
}

.ds-field-feedback--error,
.ds-field-error {
  background: var(--validation-feedback-error-bg, #fbeaea);
  color: var(--sent-red, #CB272F);
}
.ds-field-feedback--error::before,
.ds-field-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23CB272F'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ds-field-feedback--success {
  background: var(--validation-feedback-success-bg, #e2f6d5);
  color: var(--sent-green, #054D28);
}
.ds-field-feedback--success::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23054D28'/%3E%3Cpath d='M8 12l2.5 2.5L16 9' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}
.ds-field-feedback--warning {
  background: var(--validation-feedback-warning-bg, #fff7d7);
  color: var(--validation-feedback-warning-fg, #4a3b1c);
}
/* Cirkel = var(--sent-yellow) #ffd11a; uitroepteken = warning-fg */
.ds-field-feedback--warning::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23ffd11a'/%3E%3Cpath d='M12 7v5M12 16h.01' stroke='%234a3b1c' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ds-field-feedback--info {
  background: var(--validation-feedback-info-bg, var(--gray-100, var(--gray-100)));
  color: var(--validation-feedback-info-fg, var(--gray-600, var(--gray-600)));
}
/* Zelfde patroon als error/success/warning: gevulde cirkel + contrast-teken; cirkel = gray-600 (var(--gray-600)) */
.ds-field-feedback--info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%234D524C'/%3E%3Cpath d='M12 16v-4M12 8h.01' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Audit log — entity type badges (theme tokens) */
.ds-log-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-sm, 6px);
  font-family: var(--font-body-family, 'Inter', sans-serif);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-log-badge--booking { background: var(--pop-sky); color: #172554; }
.ds-log-badge--user { background: var(--pop-mint); color: #022c22; }
.ds-log-badge--property { background: var(--pop-gold); color: #451a03; }
.ds-log-badge--unit { background: var(--sec-peach); color: var(--sec-brown); }
.ds-log-badge--messaging,
.ds-log-badge--conversation { background: var(--pop-purple); color: #3b0764; }
.ds-log-badge--account { background: color-mix(in srgb, var(--pop-sky) 55%, var(--surface-white)); color: #1e40af; }
.ds-log-badge--platform { background: var(--sec-lilac); color: var(--sec-purple); }
.ds-log-badge--theme_settings { background: color-mix(in srgb, var(--pop-purple) 45%, var(--surface-white)); color: #6b21a8; }
.ds-log-badge--neutral { background: var(--gray-200); color: var(--gray-700); }

/* Airwolf compact chip — inset 4px rond cirkel; pad-inline-end 6px na label */
.ds-aw-status-chip,
.ds-booking-status-pill {
  --ds-booking-status-pill-inset: 4px;
  --ds-booking-status-pill-pad-inline-end: 6px;
  --ds-booking-status-pill-gap: 4px;
  --ds-booking-status-pill-icon: 14px;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-booking-status-pill-gap);
  padding-block: var(--ds-booking-status-pill-inset);
  padding-inline-start: var(--ds-booking-status-pill-inset);
  padding-inline-end: var(--ds-booking-status-pill-pad-inline-end);
  border-radius: var(--radius-pill, 999px);
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-input, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}
.ds-aw-status-chip__text,
.ds-booking-status-pill__text {
  flex: 0 1 auto;
  min-width: 0;
}
.ds-aw-status-chip::before,
.ds-booking-status-pill::before {
  content: '';
  flex: 0 0 var(--ds-booking-status-pill-icon);
  width: var(--ds-booking-status-pill-icon);
  height: var(--ds-booking-status-pill-icon);
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: var(--ds-booking-status-pill-icon) var(--ds-booking-status-pill-icon);
  background-position: center center;
}
.ds-aw-status-chip.ds-aw-status-chip--active,
.ds-booking-status-pill.ds-booking-status-pill--active {
  background: var(--validation-feedback-success-bg, #e2f6d5);
  color: var(--sent-green, #054d28);
}
.ds-aw-status-chip.ds-aw-status-chip--active::before,
.ds-booking-status-pill.ds-booking-status-pill--active::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23054D28'/%3E%3Cpath d='M8 12l2.5 2.5L16 9' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

.ds-aw-status-chip.ds-aw-status-chip--active-in-use,
.ds-booking-status-pill.ds-booking-status-pill--active-in-use {
  background: var(--validation-feedback-success-bg, #e2f6d5);
  color: var(--sent-green, #054d28);
}
.ds-aw-status-chip.ds-aw-status-chip--active-in-use::before,
.ds-booking-status-pill.ds-booking-status-pill--active-in-use::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2211%22%20fill%3D%22%23054D28%22%2F%3E%3Cg%20transform%3D%22translate(12%2012)%20scale(0.5)%20translate(-12%20-12)%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%224.400%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2211%22%20x%3D%223%22%20y%3D%2211%22%20rx%3D%222%22%20ry%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.ds-aw-status-chip.ds-aw-status-chip--cancelled,
.ds-booking-status-pill.ds-booking-status-pill--cancelled {
  background: var(--validation-feedback-error-bg, #fbeaea);
  color: var(--sent-red, #cb272f);
}
.ds-aw-status-chip.ds-aw-status-chip--cancelled::before,
.ds-booking-status-pill.ds-booking-status-pill--cancelled::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23CB272F'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ds-aw-status-chip.ds-aw-status-chip--conflict,
.ds-booking-status-pill.ds-booking-status-pill--conflict {
  background: var(--validation-feedback-warning-bg, #fff7d7);
  color: var(--validation-feedback-warning-fg, #4a3b1c);
}
.ds-aw-status-chip.ds-aw-status-chip--conflict::before,
.ds-booking-status-pill.ds-booking-status-pill--conflict::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23ffd11a'/%3E%3Cpath d='M12 7v5M12 16h.01' stroke='%234a3b1c' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ds-aw-status-chip.ds-aw-status-chip--pending,
.ds-booking-status-pill.ds-booking-status-pill--pending {
  background: var(--validation-feedback-warning-bg, #fff7d7);
  color: var(--validation-feedback-warning-fg, #4a3b1c);
}
.ds-aw-status-chip.ds-aw-status-chip--pending::before,
.ds-booking-status-pill.ds-booking-status-pill--pending::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2211%22%20fill%3D%22%23FFD11A%22%2F%3E%3Cpolyline%20points%3D%2212%208%2012%2012%2015.5%2013.875%22%20fill%3D%22none%22%20stroke%3D%22%234a3b1c%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
.ds-aw-status-chip.ds-aw-status-chip--trial,
.ds-booking-status-pill.ds-booking-status-pill--trial {
  background: var(--sec-lilac, #ffd7ef);
  color: var(--sec-purple, #320707);
}
.ds-aw-status-chip.ds-aw-status-chip--trial::before,
.ds-booking-status-pill.ds-booking-status-pill--trial::before {
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20transform%3D%22translate(0%200.5668)%20translate(12%2012)%20scale(1.1%201.15668)%20translate(-12%20-12)%22%3E%3Cpolygon%20fill%3D%22%23320707%22%20points%3D%2212%202%2015.09%208.26%2022%209.27%2017%2014.14%2018.18%2021.02%2012%2017.77%205.82%2021.02%207%2014.14%202%209.27%208.91%208.26%2012%202%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.ds-aw-status-chip.ds-aw-status-chip--neutral,
.ds-booking-status-pill.ds-booking-status-pill--neutral {
  background: var(--gray-100, #f2f5f1);
  color: var(--content-primary);
}
.ds-aw-status-chip.ds-aw-status-chip--neutral::before,
.ds-booking-status-pill.ds-booking-status-pill--neutral::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2211%22%20fill%3D%22%23788076%22%2F%3E%3Cpath%20d%3D%22M8%2012h8%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

.ds-aw-status-chip.ds-aw-status-chip--available,
.ds-booking-status-pill.ds-booking-status-pill--available {
  background: var(--gray-100, #f2f5f1);
  color: var(--gray-600, #545952);
}
.ds-aw-status-chip.ds-aw-status-chip--available::before,
.ds-booking-status-pill.ds-booking-status-pill--available::before {
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5%2012h14%22%20stroke%3D%22%23545952%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12%205v14%22%20stroke%3D%22%23545952%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

.ds-select {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  min-height: 48px;
  border: 2px solid var(--border-crisp, var(--gray-300));
  border-radius: var(--radius-input, 12px);
  /* Geen verticale padding: bij 48px − 4px border blijft 44px binnenhoogte; 13+13px padding
     gaf slechts 18px voor de regel → native <select> tekst stond visueel te hoog. */
  padding: 0 17px;
  line-height: 44px;
  background-color: var(--input, #ffffff);
  color: var(--gray-600);
  font-family: var(--font-input, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 14px;
  font-weight: 500;
  appearance: none;
  --ds-field-surface: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --ds-field-ring: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 0 var(--brand-black);
  transition:
    border-color var(--ds-field-surface),
    background-color var(--ds-field-surface),
    box-shadow var(--ds-field-ring);
}
.ds-select:hover {
  border-color: var(--brand-black);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06)), inset 0 0 0 0 var(--brand-black);
}
.ds-select:focus,
.ds-select:focus-visible {
  outline: none;
  border-color: var(--brand-black);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 0.75px var(--brand-black);
}

/* Input wrapper with icon */
.ds-input-wrapper {
  position: relative;
  width: 100%;
}
.ds-input-wrapper .ds-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--gray-400, var(--gray-400));
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ds-input-wrapper .ds-input-icon svg {
  width: 17px;
  height: 17px;
  display: block;
}
.ds-input.has-icon {
  padding-left: 44px;
}

/* Select wrapper with chevron */
.ds-select-wrapper {
  position: relative;
  width: 100%;
}
.ds-select-wrapper .ds-select {
  padding-right: 44px;
}
.ds-select-wrapper .ds-select-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--gray-400, var(--gray-400));
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ds-select-wrapper .ds-select-icon svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* Form row */
.ds-form-row {
  margin-bottom: 24px;
}
.ds-form-row:last-child {
  margin-bottom: 0;
}

/* Form hint */
.ds-form-hint {
  display: block;
  font-family: var(--font-body-family, 'Fira Sans', sans-serif);
  font-size: 12px;
  color: var(--gray-400, var(--gray-400));
  margin-top: 6px;
  line-height: 1.4;
}

/* Section label */
.ds-form-section-label {
  display: block;
  font-family: var(--font-heading, 'Fira Sans', sans-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-black, var(--gray-900));
  margin-bottom: 14px;
}

/* ── Radio (zelfde als src/components/forms.css; hier zodat purge/build geen gap laat) ── */
.ds-radio-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.ds-radio-wrapper input[type="radio"] {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
}
.ds-custom-radio {
  height: 22px;
  width: 22px;
  flex-shrink: 0;
  background: #fff;
  border: 2px solid var(--border-crisp, var(--gray-300));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
  box-sizing: border-box;
}
.ds-custom-radio::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary-lime, #9fe870);
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.ds-radio-wrapper:hover input ~ .ds-custom-radio {
  border-color: var(--brand-black, var(--gray-900));
}
.ds-radio-wrapper input:checked ~ .ds-custom-radio {
  border-color: var(--primary-lime, #9fe870);
}
.ds-radio-wrapper input:checked ~ .ds-custom-radio::after {
  transform: scale(1);
}
.ds-radio-wrapper.ds-radio-black .ds-custom-radio::after {
  background: var(--btn-primary-black, var(--gray-900));
}
.ds-radio-black:hover input ~ .ds-custom-radio {
  border-color: var(--btn-primary-black, var(--gray-900));
}
.ds-radio-black input:checked ~ .ds-custom-radio {
  border-color: var(--btn-primary-black, var(--gray-900));
}
.ds-radio-black input:checked ~ .ds-custom-radio::after {
  background: var(--btn-primary-black, var(--gray-900));
  transform: scale(1);
}


/* ================================================================
   TOGGLE SWITCH
   ================================================================ */

.ds-toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
}
.ds-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.ds-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--gray-300);
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border-radius: 999px;
}
.ds-toggle-slider::before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: white;
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.ds-toggle-switch input:checked + .ds-toggle-slider {
  background: var(--accent-papaya);
}
.ds-toggle-switch input:checked + .ds-toggle-slider::before {
  transform: translateX(20px);
}
/* Voorkeuren/meldingen (.ds-toggle-black): primary-dark — bron: src/components/forms.css */
.ds-toggle-black input:checked + .ds-toggle-slider {
  background: var(--primary-dark);
}

/* Toggle row layout */
.ds-toggle-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ds-toggle-row .ds-toggle-label {
  font-family: var(--font-body-family, 'Fira Sans', sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--foreground, var(--gray-900));
  cursor: pointer;
  user-select: none;
  line-height: 1.4;
}

/* Toggles group */
.ds-toggles-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


/* ================================================================
   CARDS
   ================================================================ */

.ds-card {
  background: var(--card, #ffffff);
  border-radius: var(--radius-3xl, 28px);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.06));
  overflow: hidden;
}
.ds-card-header {
  padding: 24px 24px 0;
}
.ds-card-body {
  padding: 24px;
}
.ds-card-footer {
  padding: 0 24px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.ds-card-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md, 8px);
  color: var(--gray-400);
  transition: background 0.2s, color 0.2s;
}
.ds-card-close:hover {
  background: var(--gray-100);
  color: var(--foreground);
}


/* ================================================================
   ALERTS & NOTIFICATIONS
   ================================================================ */

.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-lg, 12px);
  font-family: var(--font-body-family, 'Inter', sans-serif);
  font-size: 14px;
  line-height: 1.5;
}
.ds-alert-icon {
  flex-shrink: 0;
  margin-top: 1px;
}
.ds-alert-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds-alert-text {
  margin: 0;
}
.ds-alert-link {
  display: inline-block;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: inherit;
}
.ds-alert-link:hover {
  opacity: 0.75;
}
.ds-alert-warning {
  background: var(--validation-feedback-warning-bg, #fff7d7);
  color: var(--validation-feedback-warning-fg, #4a3b1c);
}
.ds-alert-error {
  background: var(--validation-feedback-error-bg, #fbeaea);
  color: var(--sent-red, #CB272F);
}
.ds-alert-info {
  background: var(--validation-feedback-info-bg, var(--grey-100));
  color: var(--validation-feedback-info-fg, var(--grey-600));
}

/* ── Notice panels (informatieve berichten met icoon-cirkel, à la Wise) ──
   Gebruik: .ds-notice + .ds-notice--info / --warning / --tip
   Structuur: icoon + .ds-notice-text (één <p>; nieuwe regel in tekst = <br>, geen tweede <p> — flex-row zou die naast elkaar zetten).
   Icoon: data-lucide — achtergrondcirkel IS de cirkel; SVG-buitencirkel verborgen.
   Icoon-kleuren volgen de Toast DS: info=primary-dark, warning=sent-yellow
*/
.ds-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-lg, 12px);
}
.ds-notice-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* flex-start + line-height laat icoon tegen de line-box top zitten; ~halve leading
     t.o.v. 13px/1.55 ≈ 4px om optisch met cap-height van de eerste regel uit te lijnen */
  margin-top: 4px;
}
.ds-notice-icon svg {
  /* Groter dan 16px: de i moet opvallen; cirkel blijft 24px. */
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
  stroke-width: 2.75;
}
/* De .ds-notice-icon achtergrondcirkel IS de visuele cirkel.
   De buitenste SVG-cirkel van Lucide-iconen (bijv. info, alert-circle)
   is dan dubbel en wordt verborgen. */
.ds-notice-icon svg circle:first-child {
  display: none;
}
.ds-notice-text {
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}
/* -- info: gray-600 (neutraler/lighter dan primary-dark; icon #fff) -- */
.ds-notice--info                    { background: var(--gray-50, var(--gray-50)); }
.ds-notice--info .ds-notice-icon    { background: var(--primary-dark, #163300); color: #fff; }
.ds-notice--info .ds-notice-text    { color: var(--gray-700, var(--gray-700)); }
/* -- warning: sent-yellow (identiek aan ds-toast-icon-warning) -- */
.ds-notice--warning                 { background: var(--tint-gold, #FFFBEB); }
.ds-notice--warning .ds-notice-icon { background: var(--sent-yellow, #FFD11A); color: var(--gray-900, var(--gray-900)); }
.ds-notice--warning .ds-notice-text { color: var(--gray-700, var(--gray-700)); }
/* -- tip: neutral gray -- */
.ds-notice--tip                     { background: var(--tint-gray, var(--gray-100)); }
.ds-notice--tip .ds-notice-icon     { background: var(--gray-400, var(--gray-400)); color: #fff; }
.ds-notice--tip .ds-notice-text     { color: var(--gray-700, var(--gray-700)); }


/* ================================================================
   AVATARS
   ================================================================ */

/* ── DS Avatar: enige bron van waarheid ──
   Gebruik ALTIJD .ds-avatar als basisklasse. Zie avatar-system.mdc voor de volledige docs.
   Lettergrootte is altijd 40% van de avatargrootte — nooit hardcoded. */
.ds-avatar {
  --ds-avatar-size: 40px;
  width: var(--ds-avatar-size);
  height: var(--ds-avatar-size);
  min-width: var(--ds-avatar-size);
  min-height: var(--ds-avatar-size);
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, 'Fira Sans', sans-serif) !important;
  font-size: calc(var(--ds-avatar-size) * 0.4) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0;
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
  position: relative;
}

/* ── Sizes ── */
.ds-avatar-xs  { --ds-avatar-size: 28px; }
.ds-avatar-sm  { --ds-avatar-size: 32px; }
/* default: 40px */
.ds-avatar-md  { --ds-avatar-size: 42px; }
.ds-avatar-xl  { --ds-avatar-size: 48px; }
.ds-avatar-lg  { --ds-avatar-size: 60px; }

/* ── Profielfoto-variant ── */
.ds-avatar-photo {
  background: transparent;
  color: transparent;
}
.ds-avatar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ── Identity Colors (16 design system — DB via head.php :root) ── */
.ds-avatar-id-pink    { background: var(--cleaner-color-1);  color: var(--cleaner-text-color-1);  }
.ds-avatar-id-green   { background: var(--cleaner-color-2);  color: var(--cleaner-text-color-2);  }
.ds-avatar-id-yellow  { background: var(--cleaner-color-3);  color: var(--cleaner-text-color-3);  }
.ds-avatar-id-mint    { background: var(--cleaner-color-4);  color: var(--cleaner-text-color-4);  }
.ds-avatar-id-sky     { background: var(--cleaner-color-5);  color: var(--cleaner-text-color-5);  }
.ds-avatar-id-peach   { background: var(--cleaner-color-6);  color: var(--cleaner-text-color-6);  }
.ds-avatar-id-corn    { background: var(--cleaner-color-7);  color: var(--cleaner-text-color-7);  }
.ds-avatar-id-purple  { background: var(--cleaner-color-8);  color: var(--cleaner-text-color-8);  }
.ds-avatar-id-coral   { background: var(--cleaner-color-9);  color: var(--cleaner-text-color-9);  }
.ds-avatar-id-aqua    { background: var(--cleaner-color-10); color: var(--cleaner-text-color-10); }
.ds-avatar-id-sage    { background: var(--cleaner-color-11); color: var(--cleaner-text-color-11); }
.ds-avatar-id-mauve   { background: var(--cleaner-color-12); color: var(--cleaner-text-color-12); }
.ds-avatar-id-sand    { background: var(--cleaner-color-13); color: var(--cleaner-text-color-13); }
.ds-avatar-id-steel   { background: var(--cleaner-color-14); color: var(--cleaner-text-color-14); }
.ds-avatar-id-apricot { background: var(--cleaner-color-15); color: var(--cleaner-text-color-15); }
.ds-avatar-id-moss    { background: var(--cleaner-color-16); color: var(--cleaner-text-color-16); }

/* ── data-color kleuren (messages / users systeem via head.php variabelen) ── */
.ds-avatar[data-color="1"]  { background: var(--cleaner-color-1);  color: var(--cleaner-text-color-1);  }
.ds-avatar[data-color="2"]  { background: var(--cleaner-color-2);  color: var(--cleaner-text-color-2);  }
.ds-avatar[data-color="3"]  { background: var(--cleaner-color-3);  color: var(--cleaner-text-color-3);  }
.ds-avatar[data-color="4"]  { background: var(--cleaner-color-4);  color: var(--cleaner-text-color-4);  }
.ds-avatar[data-color="5"]  { background: var(--cleaner-color-5);  color: var(--cleaner-text-color-5);  }
.ds-avatar[data-color="6"]  { background: var(--cleaner-color-6);  color: var(--cleaner-text-color-6);  }
.ds-avatar[data-color="7"]  { background: var(--cleaner-color-7);  color: var(--cleaner-text-color-7);  }
.ds-avatar[data-color="8"]  { background: var(--cleaner-color-8);  color: var(--cleaner-text-color-8);  }
.ds-avatar[data-color="9"]  { background: var(--cleaner-color-9);  color: var(--cleaner-text-color-9);  }
.ds-avatar[data-color="10"] { background: var(--cleaner-color-10); color: var(--cleaner-text-color-10); }
.ds-avatar[data-color="11"] { background: var(--cleaner-color-11); color: var(--cleaner-text-color-11); }
.ds-avatar[data-color="12"] { background: var(--cleaner-color-12); color: var(--cleaner-text-color-12); }
.ds-avatar[data-color="13"] { background: var(--cleaner-color-13); color: var(--cleaner-text-color-13); }
.ds-avatar[data-color="14"] { background: var(--cleaner-color-14); color: var(--cleaner-text-color-14); }
.ds-avatar[data-color="15"] { background: var(--cleaner-color-15); color: var(--cleaner-text-color-15); }
.ds-avatar[data-color="16"] { background: var(--cleaner-color-16); color: var(--cleaner-text-color-16); }

/* ── Overlapping Stack ── */
.ds-avatar-stack {
  display: flex;
  align-items: center;
}
.ds-avatar-stack .ds-avatar {
  margin-left: -10px;
  border: 3px solid #fff;
}
.ds-avatar-stack .ds-avatar:first-child {
  margin-left: 0;
  z-index: 10;
}


/* ================================================================
   SKELETONS / LOADERS
   Canoniek shimmer patroon — één keyframe voor de hele app.

   GEBRUIK OVERAL:
     background: var(--gray-100);
     position: relative; overflow: hidden; isolation: isolate;
     ::after { ... transform: translateX(-100%); animation: ds-skel-wave 1.6s linear infinite; }

   Wave: -100% → 300% = 4× elementbreedte, naadloze loop.
   ================================================================ */

@keyframes ds-skel-wave {
  100% { transform: translateX(300%); }
}

.ds-skeleton {
  background: var(--gray-100, var(--gray-100));
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.ds-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent          0%,
    rgba(0, 0, 0, 0.06) 50%,
    transparent         100%
  );
  transform: translateX(-100%);
  animation: ds-skel-wave 1.6s linear infinite;
}

/* ================================================================
   TOAST (global window.Toast)
   Altijd onderaan; mobiel met offset voor bottom bar.
   Bron: src/components/notifications.css (ook hier voor zekere laadvolgorde).
   ================================================================ */

.ds-toast-container {
  position: fixed;
  top: auto;
  right: 32px;
  left: auto;
  transform: none;
  bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  width: 420px;
  max-width: calc(100vw - 64px);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

@media (max-width: 1023px) {
  .ds-toast-container {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  }
  body.ds-page-push-active .ds-toast-container {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

.ds-toast-item {
  pointer-events: auto;
  position: relative;
  width: 100%;
  min-width: 280px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  overflow: hidden;
  background: var(--base-dark, #121511);
  border: none;
  border-radius: 16px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.22),
    0 12px 28px -6px rgba(0, 0, 0, 0.32);
  --ti: 0;
  transform-origin: center bottom;
  transform: translateY(calc(var(--ti) * -10px)) scale(calc(1 - var(--ti) * 0.05));
  opacity: calc(1 - var(--ti) * 0.15);
  z-index: calc(100 - var(--ti));
  transition:
    transform 0.45s cubic-bezier(0.21, 1.02, 0.73, 1),
    opacity   0.45s cubic-bezier(0.21, 1.02, 0.73, 1),
    box-shadow 0.3s ease;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

.ds-toast-item:hover {
  box-shadow:
    0 4px 8px -1px rgba(0, 0, 0, 0.28),
    0 14px 32px -6px rgba(0, 0, 0, 0.38);
}

.ds-toast-item.ds-toast-clickable { cursor: pointer; }

.ds-toast-icon-wrap {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.ds-toast-icon-wrap svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.ds-toast-icon-info    { background: var(--gray-600); color: #ffffff; }
.ds-toast-icon-success { background: var(--sent-green); color: #ffffff; }
.ds-toast-icon-error   { background: var(--sent-red); color: #ffffff; }
.ds-toast-icon-warning { background: var(--sent-yellow); color: var(--gray-900); }
/* !-icoon: punt onderaan maakt optisch zwaar — licht omhoog voor centrering */
.ds-toast-icon-warning svg { transform: translateY(-1px); }

.ds-toast-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  margin-top: 1px;
}
.ds-toast-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gray-700, var(--gray-700));
  color: var(--gray-200, var(--gray-200));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-heading, 'Fira Sans', sans-serif);
  overflow: hidden;
  flex-shrink: 0;
}
.ds-toast-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-toast-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--sent-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-button, 'Fira Sans', sans-serif);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--base-dark, #121511);
}

.ds-toast-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 0;
  justify-content: center;
  overflow: hidden;
}
.ds-toast-body.ds-toast-body-centered { align-self: center; }
.ds-toast-title {
  font-family: var(--font-heading, 'Fira Sans', sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-50, var(--gray-50));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-toast-message {
  font-family: var(--font-sans, 'Fira Sans', sans-serif);
  font-size: 13px;
  line-height: 1.4;
  color: var(--gray-300, var(--gray-300));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ds-toast-message.ds-toast-message--preview {
  display: block;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ds-toast-message a {
  color: var(--gray-200, var(--gray-200));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ds-toast-close {
  flex: 0 0 auto;
  width: 32px;
  min-width: 32px;
  height: 32px;
  align-self: flex-start;
  margin-top: 3px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-300, var(--gray-300));
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  margin: 0;
  padding: 0;
}
.ds-toast-close:hover {
  background: var(--gray-700, var(--gray-700));
  color: var(--gray-50, var(--gray-50));
}

@keyframes ds-toast-enter {
  0%   { opacity: 0; transform: translateY(64px) scale(0.92); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.01); }
  80%  { transform: translateY(2px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ds-toast-leave {
  0%   { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(110%) scale(0.95); }
}
.ds-toast-item.ds-toast-entering {
  animation: ds-toast-enter 0.5s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
}
.ds-toast-item.ds-toast-leaving {
  animation: ds-toast-leave 0.35s cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}
.ds-toast-item.ds-toast-dragging {
  transition: none !important;
  cursor: grabbing;
}

/* ================================================================
   MOBILE BOTTOM BAR (.ds-bottombar)
   Full-width iOS-style tab bar onderin het scherm voor mobiel + tablet.
   Actief op viewports < 1024px.

   Structuur:
     .ds-bottombar-wrap  — fixed wrapper: full-width, bottom: 0
     .ds-bottombar       — de zichtbare balk: witte achtergrond, flex row

   Redesign v3: van donkere zwevende pill naar witte iOS tab bar.
   ================================================================ */

/* ── Fixed wrapper ─────────────────────────────────────────────
   Full-width, flush aan de onderkant. Auto-hide via .is-hidden.
   ──────────────────────────────────────────────────────────── */
.ds-bottombar-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4000;
}

/* Verberg op desktop (≥ 1024px) */
@media (min-width: 1024px) {
  .ds-bottombar-wrap {
    display: none;
  }
}

/* ── De tab bar ───────────────────────────────────────────────
   Full-width witte iOS-style tab bar, geen floating pill.
   Padding-bottom absorbeert de safe-area (iPhone home indicator).
   ──────────────────────────────────────────────────────────── */
.ds-bottombar {
  display: flex;
  align-items: stretch;
  background: var(--surface-white, #FFFFFF);
  border-top: 1px solid var(--gray-100, #F2F5F1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  width: 100%;
}

/* ── Nav items ────────────────────────────────────────────────
   Gelijk verdeeld, touch target ≥ 44px.
   ──────────────────────────────────────────────────────────── */
.ds-bottombar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 4px 12px;

  font-family: var(--font-inter, "Inter", -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 11px;
  line-height: normal; /* Reset inheritance; voorkomt dat bijv. flatpickr html{line-height:1.5} doorlekt */
  font-weight: 400;
  color: var(--content-tertiary, #6A6C6A);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background: none;
  border: none;
  outline: none;
  user-select: none;
}

/* stroke-width op outline-iconen (Lucide-stijl) */
.ds-bottombar-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
}

.ds-bottombar-item .ds-bottombar-icon--outline {
  stroke-width: 1.75;
}

/* Eén outline-icoon per tab; filled varianten niet meer tonen */
.ds-bottombar-item:not(.ds-bottombar-item--profile) > .ds-bottombar-icon-wrap {
  position: relative;
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.ds-bottombar-item .ds-bottombar-icon--outline {
  position: static;
}

.ds-bottombar-item .ds-bottombar-icon--filled {
  display: none !important;
}

/* Actief: primaire tekstkleur + semibold label */
.ds-bottombar-item.active {
  color: var(--content-primary, var(--primary-dark, #163300));
  font-weight: 600;
}

/* Actief profiel-tab: subtiele ring op avatar */
.ds-bottombar-item--profile.active .ds-bottombar-avatar {
  box-shadow: 0 0 0 2px var(--content-primary, var(--primary-dark, #163300));
}

/* ── Profile avatar — 24px cirkel ────────────────────────────
   Toont profielfoto (img) of initialen (tekst + achtergrondkleur).
   ──────────────────────────────────────────────────────────── */
.ds-bottombar-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-inter, "Inter", -apple-system, BlinkMacSystemFont, sans-serif);
  letter-spacing: -0.3px;
  line-height: 1;
}

.ds-bottombar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Icon-wrap: ankerpunt voor de badge ───────────────────────
   Position relative zodat de badge rechtsbovenop het icon hangt.
   ──────────────────────────────────────────────────────────── */
.ds-bottombar-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

/* ── Berichten badge — iOS-stijl ──────────────────────────────
   Witte border-ring zodat de badge visueel losstaat van de
   witte nav-achtergrond (ring is transparant zichtbaar over inhoud).
   ──────────────────────────────────────────────────────────── */
.ds-bottombar-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 17px;
  height: 17px;
  background: var(--sent-red, #CB272F);
  color: #fff;
  font-family: var(--font-inter, "Inter", -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.2px;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--surface-white, #FFFFFF);
  line-height: 1;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

.ds-bottombar-badge.is-visible {
  display: flex;
}

.ds-bottombar-badge.is-hidden {
  display: none !important;
}

/* ================================================================
   CALENDAR LIST CARD — ds-calendar-list-card
   Compacte card voor mobiele kalenderlijstweergave.
   Vervangt de tabel op schermen < 640px in bookings.php.
   1:1 match met DS (Design System-pagina + src/components).
   ================================================================ */

.ds-calendar-list-card {
  --ds-cal-radius: 32px;
  --ds-cal-pad: 24px;
  background: var(--surface-white);
  border-radius: var(--ds-cal-radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.ds-calendar-list-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.ds-calendar-list-card:active {
  transform: none;
}

/* Zone 1: Boeking */
.ds-cal-booking-zone {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--ds-cal-pad);
  gap: 12px;
}

/* Platform badge: kleiner in card context */
.ds-calendar-list-card .ds-platform-badge {
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: 6px;
  letter-spacing: 0;
}

/* Datum vierkantjes */
.ds-cal-stay-dates {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ds-calendar-list-card .ds-date-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  background: var(--gray-100, var(--gray-100));
  border: none;
  border-radius: 12px;
  font-family: var(--font-body-family);
}
.ds-calendar-list-card .ds-date-box .ds-date-day {
  position: absolute;
  left: 50%;
  top: calc(50% - 3px - 0.625rem);
  transform: translate(-50%, -100%);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  color: var(--gray-400, var(--gray-400));
}
.ds-calendar-list-card .ds-date-box .ds-date-num {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.1875rem;
  font-weight: 900;
  line-height: 1;
  color: var(--foreground);
  -webkit-text-stroke: 0.3px currentColor;
  paint-order: stroke fill;
}
.ds-calendar-list-card .ds-date-box .ds-date-month {
  position: absolute;
  left: 50%;
  top: calc(50% + 10px);
  transform: translate(-50%, 0);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  color: var(--gray-400, var(--gray-400));
}
.ds-calendar-list-card .ds-date-arrow {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--foreground);
}
.ds-calendar-list-card .ds-date-arrow svg {
  display: block;
}

/* Rechts: platform badge + nachten */
.ds-cal-booking-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.ds-cal-meta-nights {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--gray-400, var(--gray-400));
}

/* Zone 2: Schoonmaak */
.ds-cal-cleaning-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--ds-cal-pad) var(--ds-cal-pad);
  border-top: 1px solid var(--gray-100, var(--gray-100));
  background: var(--surface-white);
  gap: 16px;
}

/* Cleaner info */
.ds-cal-cleaner-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ds-cal-cleaning-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds-cal-cleaner-name {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-cal-cleaner-name--empty {
  color: var(--gray-500, var(--gray-500));
}
.ds-cal-cleaner-time {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  color: var(--gray-400, var(--gray-400));
}
.ds-cal-cleaner-time-date {
  font-weight: 500;
}
.ds-cal-cleaner-time-clock {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  margin-right: 3px;
  color: var(--gray-400, var(--gray-400));
  flex-shrink: 0;
  position: relative;
  top: -0.5px;
}
.ds-cal-cleaner-time-clock svg {
  width: 10px;
  height: 10px;
  stroke-width: 2;
  display: block;
}

/* Leeg avatar (niet toegewezen) */
.ds-cal-avatar-empty {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px dashed var(--gray-300, var(--gray-300));
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  flex-shrink: 0;
}
.ds-cal-avatar-empty-icon {
  width: 16px;
  height: 16px;
  color: var(--gray-400, var(--gray-400));
}

/* Kosten rechts */
.ds-cal-cost {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  color: var(--foreground);
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Responsive: kleinste schermen */
@media (max-width: 375px) {
  .ds-calendar-list-card .ds-date-box {
    width: 48px;
    height: 48px;
    border-radius: 10px;
  }
  .ds-calendar-list-card .ds-date-box .ds-date-num {
    font-size: 1rem;
  }
  .ds-calendar-list-card .ds-date-box .ds-date-day {
    font-size: 0.5625rem;
    top: calc(50% - 3px - 0.5625rem);
  }
  .ds-calendar-list-card .ds-date-box .ds-date-month {
    font-size: 0.5625rem;
    top: calc(50% + 9px);
  }
  .ds-cal-stay-dates {
    gap: 8px;
  }
}

/* ================================================================
   BOOKING CARD (DS Redesign)
   1:1 implementatie van het DS design (referentie: /design-system + src/components)
   ================================================================ */

/* ── Outer card ── */
.ds-booking-card.card {
  --ds-booking-radius: 32px;
  --ds-booking-side-pad: 28px;
  --ds-booking-concentric-pad: 20px;
  border-radius: var(--ds-booking-radius);
  padding: var(--ds-booking-side-pad) !important;
  padding-bottom: var(--ds-booking-concentric-pad) !important;
  overflow: visible;
  transform: none !important;
  transition: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ds-booking-card.card:hover {
  transform: none !important;
}

/* ── Card header: flex column — sluitknop boven titel op mobiel ── */
.ds-booking-card .card-header.ds-booking-card-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0 !important;
  border-bottom: none !important;
  margin-bottom: 28px;
  background: transparent !important;
  box-shadow: none !important;
}

/* Mobiele sluitknop: standaard verborgen, zichtbaar op mobiel via card-overlay.css */
.ds-booking-card .ds-booking-header-close-mobile {
  display: none;
}

/* Titel row: back (mobiel) + titelblok + desktop sluitknop — flex-start zodat titel en sluitknop
   boven uitlijnen (zonder subtitel voorkomt verticale centrering van het titelblok in de 40px knop-rij). */
.ds-booking-card .ds-booking-header-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}
@media (max-width: 1023px) {
  .ds-booking-card .ds-booking-header-title-row {
    align-items: center;
  }
}
.ds-booking-card .ds-booking-header-title-block {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Titel → subtitel: strak caption-ritme (vóór badges werd dit o.a. met .ds-booking-header-text-stack ~2px gedaan; 4px = dichtstbij token op schaal onder 8px) */
  gap: 4px;
}
/* Legacy selectors — geen effect meer maar behouden voor backward compat */
.ds-booking-card .ds-booking-header-title-inner {
  min-width: 0;
  width: 100%;
}
.ds-booking-card .ds-booking-header-title-inner .ds-booking-header-title {
  min-width: 0;
  margin: 0;
}
/* “Nieuw” naast titel Geboekt — lime-chip (--primary-lime); markeerpunt + layout via .ds-field-feedback (geen ::before-) */
/* Legacy selector — geen effect meer maar behouden */
.ds-booking-card .ds-booking-header-text-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
  width: 100%;
}
.ds-booking-card .ds-booking-header-title {
  font-size: 1.5rem;
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--content-primary);
  margin: 0;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: -0.025em;
}

/* Subtitel: alleen ruimtenaam — boekingsnummer in Geboekt-pill (.ds-booking-id-stamp). */
.ds-booking-card .ds-booking-header-subtitle {
  margin: 0 !important;
  max-width: 100%;
  font-family: var(--font-body-family);
  font-size: var(--font-small, 0.875rem);
  color: var(--content-secondary);
  line-height: 1.3;
  font-weight: 500;
  padding-left: 0;
  word-break: break-word;
}

/* Legacy: oude losse #id onder de titel (indien nog ergens in markup) */
.ds-booking-card .ds-booking-id {
  font-family: var(--font-body-family);
  font-size: var(--font-small, 0.875rem);
  color: var(--content-secondary);
  line-height: 1.3;
  font-weight: 500;
  padding-left: 0;
  margin-left: 0;
  margin-top: 0;
}

/* Boekingsnummer in Geboekt-pill: standaard tekst rechts gelijk aan rest; hover = chip + kopiëren */
.ds-booking-card .ds-booking-id-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  margin: 0;
  padding: 4px 0;
  border: none;
  border-radius: var(--radius-sm, 6px);
  background-color: transparent;
  cursor: pointer;
  font-family: var(--font-body-family);
  font-size: var(--font-caption);
  font-weight: 600;
  color: var(--content-secondary);
  line-height: 1.2;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    gap 0.2s cubic-bezier(0.33, 1, 0.68, 1),
    padding 0.2s cubic-bezier(0.33, 1, 0.68, 1);
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}
.ds-booking-card .ds-booking-id-stamp:hover:not(.is-copied),
.ds-booking-card .ds-booking-id-stamp:focus-visible:not(.is-copied) {
  gap: 4px;
  padding: 4px;
  background-color: color-mix(in srgb, var(--content-primary) 6%, transparent);
  color: var(--content-primary);
  outline: none;
}
.ds-booking-card .ds-booking-id-stamp:focus-visible:not(.is-copied) {
  box-shadow: 0 0 0 2px var(--gray-200);
}
.ds-booking-card .ds-booking-id-stamp.is-copied {
  gap: 4px;
  padding: 4px;
  background-color: var(--btn-lime);
  color: var(--btn-lime-text);
}
.ds-booking-card .ds-booking-id-stamp__text {
  white-space: nowrap;
}
.ds-booking-card .ds-booking-id-stamp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 0;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    width 0.2s cubic-bezier(0.33, 1, 0.68, 1),
    min-width 0.2s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.2s ease;
  color: currentColor;
}
.ds-booking-card .ds-booking-id-stamp__icon svg {
  display: block;
}
.ds-booking-card .ds-booking-id-stamp:hover:not(.is-copied) .ds-booking-id-stamp__icon,
.ds-booking-card .ds-booking-id-stamp:focus-visible:not(.is-copied) .ds-booking-id-stamp__icon,
.ds-booking-card .ds-booking-id-stamp.is-copied .ds-booking-id-stamp__icon {
  width: 12px;
  min-width: 12px;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .ds-booking-card .ds-booking-id-stamp,
  .ds-booking-card .ds-booking-id-stamp__icon {
    transition: none;
  }
}

/* Geboekt — “Nieuw”: primaire lime-chip (var(--primary-lime)); tekst + vink = var(--btn-lime-text) / primary-dark (#163300) */
/* ── Morph-animatie: grijs vinkje-cirkel → lime Nieuw-badge ──────────────── */
@keyframes ds-geboekt-new-morph {
  0%, 22% {
    min-width: 16px;
    max-width: 16px;
    padding-left: 3px;
    padding-right: 3px;
    gap: 0;
    background: var(--gray-200, var(--gray-200));
    color: var(--content-primary, var(--foreground, var(--gray-900)));
    border-radius: 8px;
  }
  75%, 100% {
    min-width: 0;
    max-width: 64px;
    padding-left: 3px;
    padding-right: 6px;
    gap: 2px;
    background: var(--primary-lime, #9fe870);
    color: var(--btn-lime-text, #163300);
    border-radius: 999px;
  }
}
@keyframes ds-geboekt-new-text-in {
  0%, 38% {
    max-width: 0;
    opacity: 0;
  }
  80%, 100% {
    max-width: 40px;
    opacity: 1;
  }
}

.ds-booking-card .ds-geboekt-new.ds-field-feedback.ds-field-feedback--success {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  margin-top: 0;
  box-sizing: border-box;
  flex: 0 0 auto;
  flex-shrink: 0;
  align-self: center;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
  padding: 0 6px 0 3px;
  border-radius: var(--radius-pill, 999px);
  background: var(--primary-lime);
  color: var(--btn-lime-text, var(--primary-dark));
  overflow: hidden;
  animation: ds-geboekt-new-morph 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
}
.ds-booking-card .ds-geboekt-new.ds-field-feedback.ds-field-feedback--success::before {
  content: none !important;
  display: none !important;
}
.ds-booking-card .ds-geboekt-new__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}
.ds-booking-card .ds-geboekt-new__mark svg {
  display: block;
  width: 10px;
  height: 10px;
}
.ds-booking-card .ds-geboekt-new .ds-field-feedback__text {
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  animation: ds-geboekt-new-text-in 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
}
@media (prefers-reduced-motion: reduce) {
  .ds-booking-card .ds-geboekt-new.ds-field-feedback.ds-field-feedback--success,
  .ds-booking-card .ds-geboekt-new .ds-field-feedback__text {
    animation: none;
  }
}

/* Desktop sluitknop: standaard DS close button styling */
.ds-booking-card .ds-booking-header-close-desktop {
  flex-shrink: 0;
}

/* ── Platform row ── */
.ds-booking-card .ds-booking-card-platform-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 12px 0.2rem 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* ── Pill-stack (timeline) ── */
.ds-booking-card .ds-booking-timeline-wrap {
  overflow: visible;
  contain: none;
}
.ds-booking-card .pill-stack.ds-booking-card-stack {
  padding-top: 6px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  gap: 0;
}
.ds-booking-card .pill-row {
  --row-pad: 16px;
  --pill-main-padding: 20px;
  --pill-icon-half: calc(var(--pill-icon-size, 38px) / 2);
  --title-font: var(--font-h4, 1rem);
  --title-height: calc(var(--title-font) * 1.2);
  align-items: flex-start;
  gap: 6px;
  padding-top: var(--row-pad);
  padding-bottom: var(--row-pad);
}
/* Geen lijn onder laatste pill; bij stale-waarschuwing is die geen :last-of-type meer (sibling div eronder) */
/* Anchor = sibling ná schoonmaak-pill → :last-of-type triggert niet op die pill; :has(anchor) verbergt lijn zodra er ruimte voor stale-feedback onder de pill is. */
.ds-booking-card .pill-row:last-of-type::after,
.ds-booking-card .pill-stack.ds-booking-card-stack:has(.ds-schoonmaak-stale-feedback-anchor) .pill-row.ds-schoonmaak-pill-row-animate::after {
  display: none !important;
}
.ds-booking-card .pill-row .pill-icon {
  align-self: flex-start;
  margin-top: calc(var(--pill-main-padding) + (var(--title-height) / 2) - var(--pill-icon-half));
  margin-right: 6px;
  flex-shrink: 0;
}
.ds-booking-card .pill-main {
  background: var(--gray-100, var(--gray-100));
  border-radius: 24px;
  padding: var(--pill-main-padding);
  flex: 1;
  min-width: 0;
}
.ds-booking-card .pill-label {
  font-family: var(--font-heading);
  font-size: var(--font-h4, 1rem);
  font-weight: var(--font-heading-weight, 700);
  color: var(--content-primary);
}

/* ── ds-step-done (vinkje) ── */
.ds-step-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gray-200, var(--gray-200));
  color: var(--foreground);
  flex-shrink: 0;
}
.ds-step-done svg,
.ds-step-done i {
  width: 10px;
  height: 10px;
  stroke-width: 3;
}
.pill-label .ds-step-done {
  margin-left: 6px;
  vertical-align: middle;
}
/* Booking card: hoog contrast op --gray-200 (content hierarchy) */
.ds-booking-card .ds-step-done:not(.ds-step-done--cancelled) {
  color: var(--content-primary);
}

/* ── Geboekt pill ── */
.ds-booking-card .ds-pill-main-geboekt {
  display: flex;
  align-items: center;
}
.ds-booking-card .ds-pill-main-geboekt .pill-label {
  margin: 0;
  line-height: 1.2;
}
.ds-booking-card .ds-geboekt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
/* ── Geannuleerd pill (zelfde structuur als Geboekt; form error tokens) ── */
.ds-booking-card .ds-pill-main-geannuleerd {
  display: flex;
  align-items: center;
  background: var(--form-error-bg);
}
.ds-booking-card .ds-pill-main-geannuleerd .pill-label {
  margin: 0;
  line-height: 1.2;
  color: var(--form-error);
}
/* Zelfde idee als Geboekt (gray-100 pill → gray-200 vinkcirkel): één subtiele stap donkerder dan form-error-bg */
.ds-booking-card .ds-pill-main-geannuleerd .ds-step-done.ds-step-done--cancelled {
  background: color-mix(in srgb, var(--form-error-bg) 90%, var(--form-error) 10%);
  color: var(--form-error);
  box-shadow: none;
}
.ds-booking-card .ds-geannuleerd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.ds-booking-card .ds-geannuleerd-date.ds-nights-badge {
  flex-shrink: 0;
  align-self: center;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--form-error);
}
/* Geannuleerd: Verblijf — icoon als Schoonmaak (uitvoering is-disabled): lichte cirkel + grijs bed-icoon, geen zwarte vul */
/* Geen opacity op .pill-icon: dat maakt de witte timeline-ring (box-shadow) doorschijnend → ghost-lijn */
.ds-booking-card.is-cancelled .pill-row.ds-pill-row-after-cancel:not(.ds-schoonmaak-pill-row-animate) .pill-icon.checkin {
  background-color: var(--pill-icon-bg-disabled, var(--gray-200));
}
.ds-booking-card.is-cancelled .pill-row.ds-pill-row-after-cancel:not(.ds-schoonmaak-pill-row-animate) .pill-icon.checkin svg {
  stroke: var(--pill-icon-stroke-disabled, var(--gray-400));
  color: var(--pill-icon-stroke-disabled, var(--gray-400));
}
.ds-booking-card.is-cancelled .pill-row.ds-pill-row-after-cancel:not(.ds-schoonmaak-pill-row-animate) .ds-verblijf-left {
  opacity: 0.52;
}
/* Schoonmaak: alleen pill-content gedimd — niet .pill-row of .pill-icon (timeline-lijn + ring blijven intact) */
.ds-booking-card.is-cancelled .pill-row.ds-pill-row-after-cancel.ds-schoonmaak-pill-row-animate .pill-main {
  opacity: 0.52;
}

/* ── Verblijf pill ── */
.ds-booking-card .ds-pill-main-verblijf {
  padding: 20px;
}
.ds-booking-card .ds-verblijf-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.ds-booking-card .ds-pill-main-verblijf .pill-label {
  margin: 0;
  flex-shrink: 0;
  line-height: 1.2;
}
.ds-booking-card .ds-verblijf-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Subtitel meta in bubble: --content-tertiary (visueel ondersteunend, niet primaire info) */
.ds-booking-card .ds-verblijf-left .ds-nights-badge,
.ds-booking-card .ds-geboekt-left .ds-nights-badge {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--content-tertiary);
}
.ds-booking-card .ds-pill-main-verblijf .ds-date-boxes {
  margin: 0;
  flex-shrink: 0;
  align-items: center;
}

/* Verblijf datumtegels: subtiele schaduw (geen border); dag/maand = greyscale 500 */
.ds-booking-card .ds-pill-main-verblijf .ds-date-box {
  border: none;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.02);
}
.ds-booking-card .ds-pill-main-verblijf .ds-date-box .ds-date-day,
.ds-booking-card .ds-pill-main-verblijf .ds-date-box .ds-date-month {
  font-weight: 600;
  color: var(--content-tertiary);
}

/* ── ds-nights-badge ── */
.ds-nights-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 0;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--content-tertiary);
  background: var(--surface-white);
  border: 1px solid var(--gray-200, var(--gray-200));
}

/* ── Date boxes (check-in/check-out) ── */
.ds-booking-card .ds-date-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 72px;
  height: 72px;
  aspect-ratio: 1;
  padding: 0;
  background: var(--surface-white);
  border: none;
  border-radius: 12px;
  font-family: var(--font-body-family);
}
.ds-booking-card .ds-date-box .ds-date-day {
  position: absolute;
  left: 50%;
  top: calc(50% - 4px - 0.6875rem);
  transform: translate(-50%, -100%);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  color: var(--content-tertiary);
}
.ds-booking-card .ds-date-box .ds-date-num {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--content-primary);
  -webkit-text-stroke: 0.35px currentColor;
  paint-order: stroke fill;
}
.ds-booking-card .ds-date-box .ds-date-month {
  position: absolute;
  left: 50%;
  top: calc(50% + 13px);
  transform: translate(-50%, 0);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  color: var(--content-tertiary);
}
.ds-booking-card .ds-date-arrow {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--content-tertiary);
}
.ds-booking-card .ds-date-arrow svg {
  display: block;
}

/* ── Schoonmaak pill ── */
.ds-booking-card .ds-pill-main-schoonmaak {
  padding: 20px;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Stale waarschuwing: real-time open/dicht; zelfde grid-easing als .ds-schoonmaak-expandable-wrapper */
.ds-booking-card .ds-schoonmaak-stale-feedback-anchor {
  min-height: 0;
}
.ds-booking-card .ds-schoonmaak-stale-feedback-slide {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows 0.5s cubic-bezier(0.25, 1, 0.4, 1), opacity 0.4s cubic-bezier(0.25, 1, 0.4, 1), margin-top 0.4s cubic-bezier(0.25, 1, 0.4, 1);
}
.ds-booking-card .ds-schoonmaak-stale-feedback-slide.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 0;
}
.ds-booking-card .ds-schoonmaak-stale-feedback-measure {
  min-height: 0;
  overflow: hidden;
}
.ds-booking-card .ds-schoonmaak-stale-feedback-body {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  box-sizing: border-box;
}
@media (max-width: 700px) {
  .ds-booking-card .ds-schoonmaak-stale-feedback-body {
    padding-left: 0.1rem;
    padding-right: 0.1rem;
  }
}
.ds-booking-card .ds-schoonmaak-stale-feedback-slide .ds-schoonmaak-stale-feedback-below-msg {
  transform: translateY(8px);
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.4, 1);
}
.ds-booking-card .ds-schoonmaak-stale-feedback-slide.is-open .ds-schoonmaak-stale-feedback-below-msg {
  transform: translateY(0);
}
.ds-booking-card .ds-schoonmaak-stale-feedback-spacer {
  flex: 0 0 calc(var(--pill-icon-size, 38px) + 6px);
  width: calc(var(--pill-icon-size, 38px) + 6px);
  min-width: calc(var(--pill-icon-size, 38px) + 6px);
  max-width: calc(var(--pill-icon-size, 38px) + 6px);
  margin: 0;
  pointer-events: none;
  align-self: stretch;
}
.ds-booking-card .ds-schoonmaak-stale-feedback-below-msg {
  margin-top: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.ds-booking-card .ds-schoonmaak-top-row,
.ds-schoonmaak-top-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.ds-booking-card .ds-schoonmaak-left-col,
.ds-schoonmaak-left-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.ds-booking-card .ds-schoonmaak-left-col .pill-label,
.ds-schoonmaak-left-col .pill-label {
  margin: 0;
  flex-shrink: 0;
  line-height: 1.2;
}
.ds-booking-card .ds-schoonmaak-actions-wrap {
  align-self: flex-start;
  flex-shrink: 0;
  position: relative;
}
/* Zelfde secundaire tekstkleur als Geboekt/Verblijf meta — --content-secondary */
.ds-booking-card .ds-schoonmaak-date.ds-nights-badge {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--content-tertiary);
  align-self: flex-start;
  cursor: default;
}
/* Alleen bewerkbaar voor owners/managers (.exec__date + flatpickr trigger in card.php) */
.ds-booking-card .ds-schoonmaak-date.ds-nights-badge.exec__date,
.ds-booking-card .ds-schoonmaak-date.ds-nights-badge[data-flatpickr-trigger] {
  cursor: pointer;
  transition: color 0.15s;
}
.ds-booking-card .ds-schoonmaak-date.ds-nights-badge.exec__date:hover,
.ds-booking-card .ds-schoonmaak-date.ds-nights-badge[data-flatpickr-trigger]:hover {
  color: var(--content-primary);
}
/* Geannuleerd: schoonmaakdatum is alleen informatieve tekst (geen klik-/datepicker-UX) */
.ds-booking-card.is-cancelled .ds-schoonmaak-date.ds-nights-badge {
  cursor: default;
}
.ds-booking-card.is-cancelled .ds-schoonmaak-date.ds-nights-badge:hover {
  color: var(--content-secondary);
}

/* Klikbare uitvoerdatum: voorkomt tekstselectie bij snelle herhaalde klikken (flatpickr toggle) */
.ds-booking-card [data-flatpickr-trigger] {
  user-select: none;
  -webkit-user-select: none;
}

/* Claim button: alleen wat de card-context echt toevoegt.
   Kleuren komen van .ds-btn-lime — die worden hier NIET herhaald.
   1. padding-left 3px minder dan padding-right: optische symmetrie omdat het Lucide Plus-icoon
      (viewBox 0 0 24 24, pad M5 12h14, geschaald 24→18px) 3px visuele dode ruimte heeft vóór
      de zichtbare cross. Zonder dit ziet de linker padding er 3px groter uit dan rechts.
   2. Compacte hoogte alleen vanaf 420px — boven die breedte is standaard ds-btn-lg (48px) prima. */
.ds-booking-card .ds-schoonmaak-claim-btn {
  padding-left: calc(1.75rem - 3px); /* 25px i.p.v. 28px — optische symmetrie met + icoon */
}
.ds-booking-card .ds-schoonmaak-claim-btn svg {
  flex-shrink: 0;
}

/* Kleine schermen (≤420px): compact — 44px hoogte, iets minder padding */
@media (max-width: 420px) {
  .ds-booking-card .ds-schoonmaak-claim-btn {
    height: 44px;
    min-height: 44px;
    padding: 0 0.75rem 0 calc(0.75rem - 3px); /* rechts 12px, links 9px — optische correctie */
    font-size: 0.875rem;
    gap: 6px;
  }
}
/* Zeer kleine schermen (≤375px): button + wrapper op volle breedte, symmetrische padding.
   De wrapper (.ds-schoonmaak-actions-wrap) heeft shrink-0; zonder width:100% op de wrapper
   werkt width:100% op de button alleen t.o.v. de wrapper zelf — niet t.o.v. de rij. */
@media (max-width: 375px) {
  .ds-booking-card .ds-schoonmaak-actions-wrap {
    width: 100%;
  }
  .ds-booking-card .ds-schoonmaak-claim-btn {
    width: 100%;
    justify-content: center;
    padding: 0 0.75rem;
  }
}
.ds-schoonmaak-release-btn.ds-link.ds-link-release {
  font-family: var(--font-body-family);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--content-primary);
  text-decoration: none;
  transition: color 0.2s, text-decoration-color 0.2s;
  padding: 0;
  margin: 0;
  align-self: flex-start;
  background: transparent;
  border: none;
  cursor: pointer;
}
.ds-schoonmaak-release-btn.ds-link.ds-link-release:hover {
  color: var(--stoplicht-rood);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Claim/release animate states ── */
.ds-booking-card .ds-schoonmaak-claim-animate .ds-schoonmaak-top-row {
  position: relative;
  overflow: visible;
}
.ds-booking-card .ds-schoonmaak-claim-animate .ds-schoonmaak-actions-wrap {
  position: relative;
  overflow: visible;
}
.ds-booking-card .ds-schoonmaak-claim-animate .ds-schoonmaak-release-btn-animate {
  position: absolute;
  right: 0;
  top: 0;
}
.ds-booking-card .ds-schoonmaak-claim-animate .ds-schoonmaak-claim-btn-animate,
.ds-booking-card.ds-claim-just-happened .ds-schoonmaak-claim-animate .ds-schoonmaak-status-icon,
.ds-booking-card.ds-claim-just-happened .ds-schoonmaak-claim-animate .ds-schoonmaak-status-dot,
.ds-booking-card.ds-claim-just-happened .ds-schoonmaak-claim-animate .ds-schoonmaak-status-check,
.ds-booking-card.ds-claim-just-happened .ds-schoonmaak-claim-animate .ds-schoonmaak-cleaner-row,
.ds-booking-card.ds-claim-just-happened .ds-schoonmaak-claim-animate .ds-schoonmaak-datetime-row,
.ds-booking-card.ds-claim-just-happened .ds-schoonmaak-claim-animate .ds-schoonmaak-save-actions,
.ds-booking-card:not(.is-claimed) .ds-schoonmaak-claim-animate .ds-schoonmaak-status-icon,
.ds-booking-card:not(.is-claimed) .ds-schoonmaak-claim-animate .ds-schoonmaak-status-dot,
.ds-booking-card:not(.is-claimed) .ds-schoonmaak-claim-animate .ds-schoonmaak-status-check,
.ds-booking-card:not(.is-claimed) .ds-schoonmaak-claim-animate .ds-schoonmaak-cleaner-row,
.ds-booking-card:not(.is-claimed) .ds-schoonmaak-claim-animate .ds-schoonmaak-datetime-row,
.ds-booking-card:not(.is-claimed) .ds-schoonmaak-claim-animate .ds-schoonmaak-save-actions {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.4, 1),
    opacity 0.6s cubic-bezier(0.25, 1, 0.4, 1);
}
.ds-booking-card.ds-claim-just-happened .ds-schoonmaak-claim-animate .ds-schoonmaak-release-btn-animate,
.ds-booking-card:not(.is-claimed) .ds-schoonmaak-claim-animate .ds-schoonmaak-release-btn-animate {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.4, 1),
    opacity 0.6s cubic-bezier(0.25, 1, 0.4, 1),
    color 0.2s ease;
  transition-delay: 0ms;
}
@keyframes ds-release-btn-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bericht-actie: grid hoogte + fade (zelfde 0.6s ease als schoonmaak expand) — kaart groeit/krimpt vloeiend */
.ds-booking-card .ds-booking-message-action-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s cubic-bezier(0.25, 1, 0.4, 1);
}
.ds-booking-card .ds-booking-message-action-wrap-inner {
  min-height: 0;
  overflow: hidden;
}
.ds-booking-card .ds-booking-message-action-wrap.ds-booking-message-action-wrap--open {
  grid-template-rows: 1fr;
}
.ds-booking-card .ds-booking-message-action-wrap-inner > .ds-booking-action-btn[data-action="message"] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s cubic-bezier(0.25, 1, 0.4, 1),
    transform 0.55s cubic-bezier(0.25, 1, 0.4, 1);
  pointer-events: none;
}
.ds-booking-card .ds-booking-message-action-wrap.ds-booking-message-action-wrap--open .ds-booking-message-action-wrap-inner > .ds-booking-action-btn[data-action="message"] {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
  pointer-events: auto;
}
/* Legacy: berichtknop zonder wrapper (oude HTML) */
@keyframes ds-booking-message-action-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}
.ds-booking-action-btn[data-action="message"].ds-booking-message-action--in {
  animation: ds-booking-message-action-in 0.55s cubic-bezier(0.25, 1, 0.4, 1) 0.2s both;
}
@keyframes ds-booking-message-action-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ds-booking-action-btn[data-action="message"].ds-booking-message-action--out {
  animation: ds-booking-message-action-out 0.45s cubic-bezier(0.25, 1, 0.4, 1) forwards;
  pointer-events: none;
}

/* Status icon */
.ds-booking-card .ds-schoonmaak-claim-animate .ds-schoonmaak-status-icon {
  width: 16px; height: 16px;
  min-width: 16px; min-height: 16px;
  box-sizing: border-box;
  opacity: 0; transform: scale(0.85);
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.4, 1),
    transform 0.6s cubic-bezier(0.25, 1, 0.4, 1),
    background-color 0.6s cubic-bezier(0.25, 1, 0.4, 1),
    border-color 0.6s cubic-bezier(0.25, 1, 0.4, 1);
}
.ds-booking-card .ds-schoonmaak-claim-animate .ds-schoonmaak-status-dot {
  position: absolute; top: 50%; left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background-color: var(--gray-300);
  transform: translate(-50%, -50%);
}
.ds-booking-card .ds-schoonmaak-claim-animate .ds-schoonmaak-status-check {
  position: absolute; top: 50%; left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5) rotate(-45deg);
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.4, 1),
    transform 0.6s cubic-bezier(0.25, 1, 0.4, 1);
}

/* Expandable wrapper: grid animation */
.ds-booking-card .ds-schoonmaak-claim-animate .ds-schoonmaak-expandable-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s cubic-bezier(0.25, 1, 0.4, 1);
}
.ds-booking-card .ds-schoonmaak-claim-animate .ds-schoonmaak-expandable-inner {
  min-height: 0;
  overflow: hidden;
  padding-top: 0;
  transition: padding-top 0.6s cubic-bezier(0.25, 1, 0.4, 1);
}
.ds-booking-card .ds-pill-main-schoonmaak.ds-schoonmaak-claim-animate {
  overflow: visible; gap: 0;
  transition: gap 0.6s cubic-bezier(0.25, 1, 0.4, 1);
}

/* DEFAULT (unclaimed): claim btn visible, release btn + expandable hidden */
.ds-booking-card .ds-schoonmaak-claim-animate .ds-schoonmaak-release-btn-animate {
  opacity: 0; transform: translateY(-8px); pointer-events: none;
}
.ds-booking-card .ds-schoonmaak-claim-animate .ds-schoonmaak-claim-btn-animate {
  pointer-events: auto;
}
.ds-booking-card .ds-schoonmaak-claim-animate .ds-schoonmaak-cleaner-row,
.ds-booking-card .ds-schoonmaak-claim-animate .ds-schoonmaak-datetime-row,
.ds-booking-card .ds-schoonmaak-claim-animate .ds-schoonmaak-save-actions {
  opacity: 0; transform: translateY(10px);
}

/* CLAIMED state */
.ds-booking-card.is-claimed .ds-schoonmaak-claim-animate .ds-schoonmaak-expandable-wrapper {
  grid-template-rows: 1fr;
}
.ds-booking-card.is-claimed .ds-schoonmaak-claim-animate .ds-schoonmaak-expandable-inner {
  overflow: visible;
  padding-top: 12px;
}
.ds-booking-card.is-claimed .ds-pill-main-schoonmaak.ds-schoonmaak-claim-animate {
  gap: 8px;
}
.ds-booking-card.is-claimed .ds-schoonmaak-claim-animate .ds-schoonmaak-claim-btn-animate {
  transform: scale(0.8); opacity: 0; pointer-events: none;
}
.ds-booking-card.is-claimed .ds-schoonmaak-claim-animate .ds-schoonmaak-release-btn-animate {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.ds-booking-card.is-claimed.ds-claim-just-happened .ds-schoonmaak-claim-animate .ds-schoonmaak-release-btn-animate {
  animation: ds-release-btn-in 0.6s cubic-bezier(0.25, 1, 0.4, 1) 0.2s both;
}
.ds-booking-card.is-claimed .ds-schoonmaak-claim-animate .ds-schoonmaak-cleaner-row {
  opacity: 1; transform: none;
}
.ds-booking-card.is-claimed .ds-schoonmaak-claim-animate .ds-schoonmaak-datetime-row {
  opacity: 1; transform: none;
}
/* Save-actions: ALLEEN zichtbaar als dirty (is-dirty class via JS).
   Niet automatisch opacity:1 bij is-claimed — dat was het oude gedrag
   voor een altijd-zichtbare knop. De nieuwe aanpak: knop verschijnt pas
   als er echte wijzigingen zijn ten opzichte van de initiële staat. */
.ds-booking-card.is-claimed .ds-schoonmaak-claim-animate .ds-schoonmaak-save-actions {
  opacity: 0; transform: translateY(10px);
}
.ds-booking-card.is-claimed .ds-schoonmaak-claim-animate .ds-schoonmaak-save-actions.is-dirty {
  opacity: 1; transform: translateY(0);
}
.ds-booking-card.is-claimed .ds-schoonmaak-claim-animate .ds-schoonmaak-status-icon {
  opacity: 1; transform: scale(1);
  border-width: 2px; border-style: solid; border-color: var(--gray-300);
}
/* Staggered delays alleen bij verse claim-actie */
.ds-booking-card.is-claimed.ds-claim-just-happened .ds-schoonmaak-claim-animate .ds-schoonmaak-status-icon { transition-delay: 100ms; }
.ds-booking-card.is-claimed.ds-claim-just-happened .ds-schoonmaak-claim-animate .ds-schoonmaak-cleaner-row { transition-delay: 150ms; }
.ds-booking-card.is-claimed.ds-claim-just-happened .ds-schoonmaak-claim-animate .ds-schoonmaak-datetime-row { transition-delay: 250ms; }
/* Save-actions: transition-delay alleen bij dirty */
.ds-booking-card.is-claimed.ds-claim-just-happened .ds-schoonmaak-claim-animate .ds-schoonmaak-save-actions.is-dirty { transition-delay: 330ms; }
.ds-booking-card.is-claimed.ds-schoonmaak-times-filled .ds-schoonmaak-claim-animate .ds-schoonmaak-status-icon {
  background-color: var(--gray-200, var(--gray-200));
  border-color: transparent;
}
.ds-booking-card.is-claimed.ds-schoonmaak-times-filled .ds-schoonmaak-claim-animate .ds-schoonmaak-status-dot {
  transform: translate(-50%, -50%) scale(0); opacity: 0;
}
.ds-booking-card.is-claimed.ds-schoonmaak-times-filled .ds-schoonmaak-claim-animate .ds-schoonmaak-status-check {
  color: var(--content-primary);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
}
.ds-booking-card.is-claimed.ds-schoonmaak-times-filled .ds-schoonmaak-claim-animate .ds-schoonmaak-status-check,
.ds-booking-card.is-claimed.ds-schoonmaak-times-filled .ds-schoonmaak-claim-animate .ds-schoonmaak-status-check svg {
  width: 10px; height: 10px; stroke-width: 3;
}

/* Vraagteken-SVG: standaard verborgen.
   Morpht naar vinkje/dot wanneer is-claimed wordt toegevoegd via JS:
   background-color en border-color al in de status-icon transitie (0.6s),
   vraagteken opacity 0.5s met kleine delay zodat de cirkelkleur eerst wegslipt. */
.ds-booking-card .ds-schoonmaak-status-question {
  position: absolute;
  top: 50%; left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.4, 1),
    transform 0.5s cubic-bezier(0.25, 1, 0.4, 1);
  width: 13px; height: 13px;
  pointer-events: none;
}

/* Niet-geclaimd + toekomstig: status-icon zichtbaar, cirkel blijft 16×16px.
   :not(.is-claimed) zorgt dat dit wegvalt zodra JS is-claimed toevoegt → morph naar normaal. */
.ds-booking-card.ds-clean-unclaimed-future:not(.is-claimed) .ds-schoonmaak-claim-animate .ds-schoonmaak-status-icon,
.ds-booking-card.ds-clean-unclaimed-past:not(.is-claimed) .ds-schoonmaak-claim-animate .ds-schoonmaak-status-icon {
  opacity: 1;
  transform: scale(1);
}
.ds-booking-card.ds-clean-unclaimed-future:not(.is-claimed) .ds-schoonmaak-claim-animate .ds-schoonmaak-status-icon {
  background-color: var(--sent-yellow);
  border-color: var(--sent-yellow);
  color: var(--primary-dark);
}
.ds-booking-card.ds-clean-unclaimed-past:not(.is-claimed) .ds-schoonmaak-claim-animate .ds-schoonmaak-status-icon {
  background-color: var(--sent-red);
  border-color: var(--sent-red);
  color: var(--surface-white);
}

/* Stip volledig verborgen zolang vraagteken zichtbaar is */
.ds-booking-card.ds-clean-unclaimed-future:not(.is-claimed) .ds-schoonmaak-claim-animate .ds-schoonmaak-status-dot,
.ds-booking-card.ds-clean-unclaimed-past:not(.is-claimed) .ds-schoonmaak-claim-animate .ds-schoonmaak-status-dot {
  opacity: 0;
}

.ds-booking-card.ds-clean-unclaimed-future:not(.is-claimed) .ds-schoonmaak-claim-animate .ds-schoonmaak-status-question,
.ds-booking-card.ds-clean-unclaimed-past:not(.is-claimed) .ds-schoonmaak-claim-animate .ds-schoonmaak-status-question {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Timeline icon animation: grijs → zwart bij claim.
   Pop-up (schaal omhoog, nooit omlaag) zodat de witte box-shadow ring
   nooit krimpt en de tijdlijn-lijn niet zichtbaar wordt.
   will-change: transform zorgt voor GPU-compositing → 60fps. */
@keyframes ds-stamp-pulse {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.13); }
  68%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
/* Default: grijs achtergrond, grijze stroke */
.ds-booking-card .ds-schoonmaak-pill-row-animate .pill-icon.uitvoering.is-disabled {
  background-color: var(--pill-icon-bg-disabled, var(--gray-200));
  transform-origin: center;
  transition: background-color 0.45s cubic-bezier(0.25, 1, 0.4, 1);
}
.ds-booking-card .ds-schoonmaak-pill-row-animate .pill-icon.uitvoering.is-disabled svg {
  stroke: var(--content-tertiary);
  color: var(--content-tertiary);
  transition: stroke 0.45s cubic-bezier(0.25, 1, 0.4, 1),
    color 0.45s cubic-bezier(0.25, 1, 0.4, 1);
}
/* Claimed: zwart achtergrond, witte stroke */
.ds-booking-card.is-claimed .ds-schoonmaak-pill-row-animate .pill-icon.uitvoering.is-disabled {
  background-color: var(--pill-icon-bg, var(--gray-900));
}
.ds-booking-card.is-claimed .ds-schoonmaak-pill-row-animate .pill-icon.uitvoering.is-disabled svg {
  stroke: var(--pill-icon-stroke, #fff);
  color: var(--pill-icon-stroke, #fff);
}
/* Pulse alleen bij verse claim-actie */
.ds-booking-card.is-claimed.ds-timeline-icon-pulse-once .ds-schoonmaak-pill-row-animate .pill-icon.uitvoering.is-disabled {
  animation: ds-stamp-pulse 0.5s ease-out forwards;
  will-change: transform;
}

/* ── Cleaner row ── */
.ds-booking-card .ds-schoonmaak-cleaner-row,
.ds-schoonmaak-cleaner-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-width: 0;
}
.ds-booking-card .ds-schoonmaak-cleaner-wrap {
  position: relative; z-index: 10;
}
.ds-booking-card .ds-schoonmaak-cleaner-row {
  position: relative; z-index: 10;
}
/* Wanneer card is-claimed, verhoog z-index van cleaner-row zodat dropdown boven datetime-row komt.
   transform op cleaner-row en datetime-row creëren elk een eigen stacking context. */
.ds-booking-card.is-claimed .ds-schoonmaak-cleaner-row {
  z-index: 20;
}
/* ── Cleaner avatar in booking card — match Team pagina styling ── */
.ds-booking-card .ds-cleaner-avatar {
  --ds-avatar-size: 40px !important;
}

/* ── Cleaner display name in booking card — match Team pagina styling ── */
.ds-booking-card .ds-cleaner-display-name,
.ds-booking-card .ds-cleaner-display-name-full {
  font-family: var(--font-heading, 'Fira Sans', sans-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--content-primary) !important;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* Cleaner-trigger: géén aparte pill; naam + chevron doorlopend naast avatar */
.ds-booking-card button.ds-schoonmaak-cleaner-btn {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.ds-booking-card button.ds-schoonmaak-cleaner-btn:focus {
  outline: none;
}
.ds-booking-card button.ds-schoonmaak-cleaner-btn:focus-visible {
  outline: 2px solid var(--ring, var(--foreground));
  outline-offset: 2px;
  border-radius: var(--radius-sm, 6px);
}
.ds-booking-card button.ds-schoonmaak-cleaner-btn *,
.ds-booking-card button.ds-schoonmaak-cleaner-btn svg,
.ds-booking-card button.ds-schoonmaak-cleaner-btn svg * {
  cursor: pointer !important;
}

/* ── Cleaner dropdown — shell gelijk aan .bk-filter-popover (overflow hidden + 16px pad) ── */
.ds-cleaner-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  margin-top: 4px;
  z-index: 99999 !important;
  box-sizing: border-box;
  width: 100%;
  /* 100% i.p.v. 100vw: iOS wisselt layout viewport bij root overflow (modal) → subpixel jank */
  max-width: min(288px, 100%);
  min-width: 0;
  background: var(--card, var(--surface-white));
  border: none;
  border-radius: var(--radius-3xl, 32px);
  box-shadow: var(--shadow-xl, 0 12px 32px rgba(24, 34, 69, 0.12));
  padding: 16px;
  max-height: min(80vh, 320px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s cubic-bezier(0.2, 0, 0.2, 1), transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}

/*
 * Binnenste scrollvlak: zelfde patroon als .billing-recipient-dropdown-list /
 * cleaner-sectie in .bk-filter-popover — inner radius 32−16 = 16px (concentric).
 */
.ds-cleaner-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: calc(var(--radius-3xl, 32px) - 16px);
  padding-bottom: 8px;
  box-sizing: border-box;
}

/* Zonder inner list (oude markup): zelfde scroll als voorheen */
.ds-cleaner-dropdown:not(:has(.ds-cleaner-dropdown-list)) {
  gap: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ds-cleaner-dropdown.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Fallback: als display:block is gezet door JS maar is-visible class ontbreekt */
.ds-cleaner-dropdown[style*="display: block"],
.ds-cleaner-dropdown[style*="display:block"] {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.ds-schoonmaak-chevron {
  transition: transform 0.25s ease-out;
}
.ds-schoonmaak-cleaner-btn[aria-expanded="true"] .ds-schoonmaak-chevron {
  transform: rotate(180deg);
}

/*
 * Cleaner-lijst / picker (Kosten-filter + boekingskaart-dropdown)
 * Documentatie: /design-system#sec-cleaner-picker
 * Bron: src/components/ds-cleaner-list.css — moet HIER staan: @import na @tailwind
 * in src/tailwind.css wordt door de Tailwind-build niet in public/assets/css/tailwind.css uitgevoerd.
 */
.bk-filter-cleaners {
  max-height: 220px;
  overflow-y: auto;
  padding-bottom: 8px;
}

.bk-filter-items[data-type="cleaner"] .bk-filter-item,
.ds-cleaner-dropdown .bk-filter-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  /* Hover-vlak concentric met paneel: outer 32px − popover/dropdown padding 16px = 16px */
  border-radius: calc(var(--radius-3xl, 32px) - 16px);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  border: 1px solid transparent;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
  text-align: left;
  background: transparent;
}

.bk-filter-items[data-type="cleaner"] .bk-filter-item:hover,
.ds-cleaner-dropdown .bk-filter-item:hover {
  background: var(--dropdown-item-hover-bg, var(--gray-100));
  border-color: transparent;
}

.bk-filter-items[data-type="cleaner"] .bk-filter-item:focus-visible,
.ds-cleaner-dropdown .bk-filter-item:focus-visible {
  outline: none;
  background: var(--dropdown-item-hover-bg, var(--gray-100));
  border-color: transparent;
}

.bk-filter-avatar {
  --ds-avatar-size: 32px;
  flex-shrink: 0;
}

.bk-filter-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.bk-filter-item-label {
  flex: 1;
  font-family: var(--font-body-family, 'Inter', sans-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--content-secondary);
  min-width: 0;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bk-filter-check {
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
  flex-shrink: 0;
  display: block;
  box-sizing: content-box;
  color: var(--primary-dark);
  opacity: 0;
  transition: opacity 0.1s;
}

.bk-filter-item.selected .bk-filter-check {
  opacity: 1;
}

.bk-filter-item.selected.exclude-mode .bk-filter-check {
  color: var(--sent-red);
}

.ds-cleaner-dropdown .bk-filter-item.is-selected .bk-filter-check {
  opacity: 1;
}

.ds-cleaner-dropdown .bk-filter-item.is-selected .bk-filter-item-label {
  font-weight: 700;
  color: var(--content-primary, var(--gray-900));
}

/* ── Parent overflow visible wanneer dropdown open is ── */
.ds-booking-card .ds-pill-main-schoonmaak:has(.ds-schoonmaak-cleaner-btn[aria-expanded="true"]) {
  overflow: visible;
}
.ds-booking-card .ds-schoonmaak-expandable-wrapper:has(.ds-schoonmaak-cleaner-btn[aria-expanded="true"]),
.ds-booking-card .ds-schoonmaak-expandable-inner:has(.ds-schoonmaak-cleaner-btn[aria-expanded="true"]) {
  overflow: visible;
}

/* ── Avatar kleur-overrides voor cleaner avatars (DB-driven via head.php :root) ── */
.ds-cleaner-avatar.badge-cleaner-1  { background: var(--cleaner-color-1); color: var(--cleaner-text-color-1); }
.ds-cleaner-avatar.badge-cleaner-2  { background: var(--cleaner-color-2); color: var(--cleaner-text-color-2); }
.ds-cleaner-avatar.badge-cleaner-3  { background: var(--cleaner-color-3); color: var(--cleaner-text-color-3); }
.ds-cleaner-avatar.badge-cleaner-4  { background: var(--cleaner-color-4); color: var(--cleaner-text-color-4); }
.ds-cleaner-avatar.badge-cleaner-5  { background: var(--cleaner-color-5); color: var(--cleaner-text-color-5); }
.ds-cleaner-avatar.badge-cleaner-6  { background: var(--cleaner-color-6); color: var(--cleaner-text-color-6); }
.ds-cleaner-avatar.badge-cleaner-7  { background: var(--cleaner-color-7); color: var(--cleaner-text-color-7); }
.ds-cleaner-avatar.badge-cleaner-8  { background: var(--cleaner-color-8); color: var(--cleaner-text-color-8); }
.ds-cleaner-avatar.badge-cleaner-9  { background: var(--cleaner-color-9, var(--cleaner-color-1)); color: var(--cleaner-text-color-9, var(--cleaner-text-color-1)); }
.ds-cleaner-avatar.badge-cleaner-10 { background: var(--cleaner-color-10, var(--cleaner-color-2)); color: var(--cleaner-text-color-10, var(--cleaner-text-color-2)); }
.ds-cleaner-avatar.badge-cleaner-11 { background: var(--cleaner-color-11, var(--cleaner-color-3)); color: var(--cleaner-text-color-11, var(--cleaner-text-color-3)); }
.ds-cleaner-avatar.badge-cleaner-12 { background: var(--cleaner-color-12, var(--cleaner-color-4)); color: var(--cleaner-text-color-12, var(--cleaner-text-color-4)); }
.ds-cleaner-avatar.badge-cleaner-13 { background: var(--cleaner-color-13, var(--cleaner-color-5)); color: var(--cleaner-text-color-13, var(--cleaner-text-color-5)); }
.ds-cleaner-avatar.badge-cleaner-14 { background: var(--cleaner-color-14, var(--cleaner-color-6)); color: var(--cleaner-text-color-14, var(--cleaner-text-color-6)); }
.ds-cleaner-avatar.badge-cleaner-15 { background: var(--cleaner-color-15, var(--cleaner-color-7)); color: var(--cleaner-text-color-15, var(--cleaner-text-color-7)); }

/* ── Datetime row (tijdinputs) ── */
.ds-booking-card .ds-schoonmaak-datetime-row,
.ds-schoonmaak-datetime-row {
  display: flex; align-items: stretch; gap: 0;
  width: 100%; margin-top: 20px;
  position: relative; z-index: 5;
}
.ds-booking-card .ds-schoonmaak-datetime-row .ds-schoonmaak-time-wrap,
.ds-schoonmaak-datetime-row .ds-schoonmaak-time-wrap {
  flex: 1; min-width: 0; isolation: isolate; position: relative;
}
.ds-schoonmaak-arrow-duration {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  flex-shrink: 0; align-self: stretch;
  padding: 0 12px; min-width: 3rem;
}
.ds-booking-card.ds-schoonmaak-times-filled .ds-schoonmaak-arrow-duration {
  justify-content: center;
}
.ds-schoonmaak-arrow {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.4, 1);
  flex-shrink: 0;
}
.ds-booking-card.ds-schoonmaak-times-filled .ds-schoonmaak-arrow {
  transform: translateY(-0.25rem);
}
.ds-schoonmaak-duration-inline {
  opacity: 0; max-height: 0; overflow: hidden; margin-top: 0;
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.4, 1),
    max-height 0.6s cubic-bezier(0.25, 1, 0.4, 1),
    margin-top 0.6s cubic-bezier(0.25, 1, 0.4, 1);
  font-size: 0.75rem; font-weight: 600; color: var(--content-secondary); line-height: 1.2;
  will-change: opacity;
}
.ds-booking-card.ds-schoonmaak-times-filled .ds-schoonmaak-duration-inline {
  opacity: 1; max-height: 2.5em; margin-top: -6px; will-change: auto;
}

.ds-booking-card .ds-schoonmaak-time-range-error {
  margin-top: 8px;
}

/* Time inputs — gelijk aan user edit / .ds-input (border-crisp, brand-black hover/focus) */
.ds-booking-card .ds-schoonmaak-datetime-row .ds-exec-time-input,
.ds-schoonmaak-datetime-row .ds-exec-time-input,
.ds-booking-card .ds-schoonmaak-datetime-row .ds-timepicker-input-desktop,
.ds-schoonmaak-datetime-row .ds-timepicker-input-desktop {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  text-align: center !important;
  padding: 10px 12px !important;
  font-family: var(--font-body-family) !important;
  font-size: var(--font-body, 0.9375rem) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-input, 12px) !important;
  border: 2px solid var(--border-crisp) !important;
  background: var(--input) !important;
  color: var(--gray-600) !important;
  cursor: pointer !important;
  transition: border-color 0.2s, background-color 0.2s !important;
  display: block !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  height: auto !important;
  line-height: normal !important;
  box-shadow: none !important;
}
.ds-booking-card .ds-schoonmaak-datetime-row .ds-exec-time-input:hover,
.ds-schoonmaak-datetime-row .ds-exec-time-input:hover,
.ds-booking-card .ds-schoonmaak-datetime-row .ds-timepicker-input-desktop:hover,
.ds-schoonmaak-datetime-row .ds-timepicker-input-desktop:hover {
  border-color: var(--brand-black) !important;
}
.ds-booking-card .ds-schoonmaak-datetime-row .ds-exec-time-input:focus,
.ds-booking-card .ds-schoonmaak-datetime-row .ds-exec-time-input:focus-visible,
.ds-schoonmaak-datetime-row .ds-exec-time-input:focus,
.ds-schoonmaak-datetime-row .ds-exec-time-input:focus-visible,
.ds-booking-card .ds-schoonmaak-datetime-row .ds-timepicker-input-desktop:focus,
.ds-booking-card .ds-schoonmaak-datetime-row .ds-timepicker-input-desktop:focus-visible,
.ds-schoonmaak-datetime-row .ds-timepicker-input-desktop:focus,
.ds-schoonmaak-datetime-row .ds-timepicker-input-desktop:focus-visible {
  outline: none; box-shadow: none;
  border-color: var(--brand-black) !important;
}

/* Placeholder kleur: DS match */
.ds-booking-card .ds-schoonmaak-datetime-row .ds-exec-time-input::placeholder,
.ds-schoonmaak-datetime-row .ds-exec-time-input::placeholder,
.ds-booking-card .ds-schoonmaak-datetime-row .ds-timepicker-input-desktop::placeholder,
.ds-schoonmaak-datetime-row .ds-timepicker-input-desktop::placeholder {
  color: var(--gray-400, var(--gray-400)) !important;
}

/* Tijdinputs: device-switch (mobile native / desktop tekst) */
/* Desktop (≥ 640px): toon tekst input, verberg native time input */
@media (min-width: 1024px) {
  .ds-booking-card .ds-timepicker-input-mobile,
  .ds-schoonmaak-time-wrap .ds-timepicker-input-mobile {
    display: none !important;
  }
  .ds-booking-card .ds-timepicker-input-desktop,
  .ds-schoonmaak-time-wrap .ds-timepicker-input-desktop {
    display: block;
  }
}
/* Mobiel (< 640px): desktop input BLIJFT visueel zichtbaar als styled element.
   Native time input is een onzichtbare overlay erboven (gestyled door JS in applyTimepickerMode).
   Tap op het visuele veld → raakt de native input → iOS opent de native time picker. */
@media (max-width: 1023px) {
  .ds-booking-card .ds-timepicker-input-desktop,
  .ds-schoonmaak-time-wrap .ds-timepicker-input-desktop {
    display: block !important;
    pointer-events: none;
  }
  /* Mobiel hover: wrapper krijgt hover, visuele input krijgt border-change.
     De native input (overlay) onderschept touch/hover, dus we gebruiken wrapper:hover. */
  .ds-schoonmaak-time-wrap:hover .ds-timepicker-input-desktop,
  .ds-schoonmaak-time-wrap:hover .ds-exec-time-input {
    border-color: var(--brand-black) !important;
  }
  /* Mobiel focus: wanneer native input focus heeft, visuele input krijgt border-change.
     :focus-within op wrapper detecteert focus op elk child element (incl. native input). */
  .ds-schoonmaak-time-wrap:focus-within .ds-timepicker-input-desktop,
  .ds-schoonmaak-time-wrap:focus-within .ds-exec-time-input {
    border-color: var(--brand-black) !important;
  }
}

/* Hide webkit calendar picker indicator — native input is onzichtbare overlay op alle viewports */
.ds-booking-card .ds-schoonmaak-datetime-row input[type="time"]::-webkit-calendar-picker-indicator,
.ds-schoonmaak-datetime-row input[type="time"]::-webkit-calendar-picker-indicator {
  background: transparent; color: transparent; cursor: pointer;
  position: absolute; inset: 0; width: auto; height: auto;
}


/* ── Booking actions (Notitie, Bericht) ── */
.ds-booking-card .ds-booking-actions {
  display: flex; flex-direction: column;
  width: 100%; margin-left: 0; margin-right: 0;
  padding: 24px 0 0 0;
  background: var(--surface-white);
  position: relative; z-index: 1;
}
.ds-booking-card .ds-booking-action-btn {
  font-family: var(--font-body-family);
  color: var(--content-secondary);
  outline: none;
  transition: color 180ms ease-out;
}
.ds-booking-card .ds-booking-action-btn:focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 2px;
}
.ds-booking-card .ds-booking-action-btn .ds-booking-action-label {
  font-family: var(--font-heading); font-weight: 700;
  transition: transform 200ms ease;
  display: inline-block;
}
.ds-booking-card .ds-booking-action-btn:hover .ds-booking-action-label {
  transform: translateX(3px);
}
.ds-booking-card .ds-booking-action-btn .ds-booking-action-chevron,
.ds-booking-card .ds-booking-action-btn .ds-booking-action-chevron svg {
  stroke-width: 2;
  color: var(--content-tertiary);
  stroke: currentColor;
  transition: transform 200ms ease, color 200ms ease;
}
.ds-booking-card .ds-booking-action-btn:hover .ds-booking-action-chevron,
.ds-booking-card .ds-booking-action-btn:hover .ds-booking-action-chevron svg {
  transform: translateX(3px);
}
.ds-booking-card .ds-booking-actions > .ds-booking-action-btn:last-child,
.ds-booking-card .ds-booking-actions > .ds-booking-message-action-wrap:last-child .ds-booking-action-btn[data-action="message"] {
  border-radius: 0 0 4px 4px;
  overflow: hidden;
}

/* ── Booking note panel (Notitie toevoegen) ───────────────────────────────── */
/* Open/close animatie wordt JS-gestuurd via height: 0 → scrollHeight → auto.
   Zie app/web/card-behavior.php → setNotePanelOpen(). Geen grid-template-rows
   transition meer — die kan tijdens reflows van inner content (capacity-feedback
   slide, traits chips) onverwachte hoogteherberekeningen geven. Een directe
   height-transition op het panel-element zelf is robuust en bouncefree. */
.ds-booking-card .ds-booking-note-wrap {
  display: block;
}
.ds-booking-card .ds-booking-note-wrap .ds-booking-action-label,
.ds-booking-card .ds-booking-note-wrap .ds-booking-action-chevron {
  transform: none !important;
}
.ds-booking-card .ds-booking-note-wrap.is-open .ds-booking-action-chevron {
  transform: rotate(90deg) !important;
  transition: transform 0.24s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.ds-booking-card .ds-booking-note-wrap.is-open .ds-booking-action-btn {
  background: transparent;
}
.ds-booking-card .ds-booking-note-panel-wrap {
  /* Initial state — JS zet height/transition inline tijdens animatie. */
  overflow: hidden;
  border-top: 1px solid var(--border);
  background: var(--surface-white);
}
.ds-booking-card .ds-booking-note-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* Uitlijnen op de tekstlijn van "Notitie toevoegen" (zonder icoon), symmetrisch rechts. */
  padding: 24px 30px 0;
}
.ds-booking-card .ds-booking-note-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 24px;
  /* Voorkomt dat de kortere kolom wordt uitgerekt tot de hoogte van de stepper-kolom;
     anders krijgt het talen-veld (flex-wrap) extra hoogte en "stuwt" align-content: stretch de chip-rijen uit elkaar. */
  align-items: start;
}
/* Grid + optionele capaciteits-infobox: geen interne gap — slide regelt ruimte alleen bij open (spacing-and-cards §veld→veld 24px). */
.ds-booking-card .ds-booking-note-top-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: 0;
}
/* Capaciteit > standaard: DS field-validation --warning, zelfde slide-easing als schoonmaak-stale feedback */
.ds-booking-card .ds-booking-note-capacity-feedback-anchor {
  min-height: 0;
  width: 100%;
}
.ds-booking-card .ds-booking-note-capacity-feedback-slide {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition:
    grid-template-rows 0.45s cubic-bezier(0.25, 1, 0.4, 1),
    opacity 0.35s cubic-bezier(0.25, 1, 0.4, 1),
    margin-top 0.35s cubic-bezier(0.25, 1, 0.4, 1);
}
.ds-booking-card .ds-booking-note-capacity-feedback-slide.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 24px;
}
.ds-booking-card .ds-booking-note-capacity-feedback-measure {
  min-height: 0;
  overflow: hidden;
}
.ds-booking-card .ds-booking-note-capacity-feedback-body {
  width: 100%;
  box-sizing: border-box;
}
.ds-booking-card .ds-booking-note-capacity-feedback-body .ds-booking-note-capacity-msg.ds-field-feedback {
  margin-top: 0;
  width: 100%;
}
.ds-booking-card .ds-booking-note-capacity-feedback-slide .ds-booking-note-capacity-msg {
  transform: translateY(8px);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.4, 1);
}
.ds-booking-card .ds-booking-note-capacity-feedback-slide.is-open .ds-booking-note-capacity-msg {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .ds-booking-card .ds-booking-note-capacity-feedback-slide,
  .ds-booking-card .ds-booking-note-capacity-feedback-slide.is-open,
  .ds-booking-card .ds-booking-note-capacity-feedback-slide .ds-booking-note-capacity-msg {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
  .ds-booking-card .ds-booking-note-capacity-feedback-slide .ds-booking-note-capacity-msg {
    transform: none;
  }
}
.ds-booking-card .ds-booking-note-field {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  width: 100%;
}
.ds-booking-card .ds-booking-note-field.ds-form-row {
  margin-bottom: 0;
}
.ds-booking-card .ds-booking-note-field .ds-label {
  font-family: var(--font-heading, 'Fira Sans', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--foreground, var(--gray-900)) !important;
  margin-bottom: 8px !important;
}
.ds-booking-card .ds-booking-note-field.ds-booking-note-field--languages {
  z-index: 12;
}
.ds-booking-card .ds-booking-note-stepper {
  display: inline-grid;
  grid-template-columns: 44px 56px 44px;
  align-items: stretch;
  border: 2px solid var(--border-crisp);
  border-radius: var(--radius-input, 12px);
  background: var(--input);
  width: fit-content;
  min-width: 144px;
  max-width: 100%;
  overflow: hidden;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ds-booking-card .ds-booking-note-stepper:hover {
  border-color: var(--brand-black, var(--gray-900));
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06)), inset 0 0 0 0 var(--brand-black, var(--gray-900));
}
.ds-booking-card .ds-booking-note-stepper-btn {
  border: none;
  background: transparent;
  color: var(--gray-700);
  width: 44px;
  min-height: 44px;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ds-booking-card .ds-booking-note-stepper-btn:hover {
  color: var(--foreground);
}
.ds-booking-card .ds-booking-note-stepper-btn:disabled {
  color: var(--gray-400);
  cursor: not-allowed;
}
.ds-booking-card .ds-booking-note-stepper-btn:disabled:hover {
  color: var(--gray-400);
}
.ds-booking-card .ds-booking-note-stepper-input.ds-input {
  width: 56px;
  min-height: 44px;
  height: 44px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-radius: 0;
  padding: 0;
  color: var(--foreground);
  font-weight: 600;
  appearance: textfield;
  -moz-appearance: textfield;
}
.ds-booking-card .ds-booking-note-stepper-input.ds-input::-webkit-outer-spin-button,
.ds-booking-card .ds-booking-note-stepper-input.ds-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ds-booking-card .ds-booking-note-stepper-input.ds-input:focus {
  box-shadow: none;
}

.locations-page .loc-guest-stepper {
  display: inline-grid;
  grid-template-columns: 44px 56px 44px;
  align-items: stretch;
  border: 2px solid var(--border-crisp);
  border-radius: var(--radius-input, 12px);
  background: var(--input);
  width: fit-content;
  min-width: 144px;
  max-width: 100%;
  overflow: hidden;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.locations-page .loc-guest-stepper:hover {
  border-color: var(--brand-black, var(--gray-900));
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06)), inset 0 0 0 0 var(--brand-black, var(--gray-900));
}
.locations-page .loc-guest-stepper-btn {
  border: none;
  background: transparent;
  color: var(--gray-700);
  width: 44px;
  min-height: 44px;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.locations-page .loc-guest-stepper-btn:hover {
  color: var(--foreground);
}
.locations-page .loc-guest-stepper-btn:disabled {
  color: var(--gray-400);
  cursor: not-allowed;
}
.locations-page .loc-guest-stepper-btn:disabled:hover {
  color: var(--gray-400);
}
.locations-page .loc-guest-stepper-input.ds-input {
  width: 56px;
  min-height: 44px;
  height: 44px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-radius: 0;
  padding: 0;
  color: var(--foreground);
  font-weight: 600;
  appearance: textfield;
  -moz-appearance: textfield;
}
.locations-page .loc-guest-stepper-input.ds-input::-webkit-outer-spin-button,
.locations-page .loc-guest-stepper-input.ds-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.locations-page .loc-guest-stepper-input.ds-input:focus {
  box-shadow: none;
}
.ds-booking-card .ds-booking-note-language-combobox {
  position: relative;
  overflow: visible;
  z-index: 1;
}
.ds-booking-card .ds-booking-note-language-combobox.is-open {
  z-index: 80;
}
.ds-booking-card .ds-booking-note-language-input-wrap {
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  min-height: 48px;
  padding: 10px 17px;
  background: var(--input);
  border: 2px solid var(--border-crisp);
  border-radius: var(--radius-input, 12px);
  cursor: text;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.ds-booking-card .ds-booking-note-language-input-wrap:hover,
.ds-booking-card .ds-booking-note-language-input-wrap:focus-within,
.ds-booking-card .ds-booking-note-language-input-wrap[aria-expanded="true"] {
  border-color: var(--brand-black, var(--gray-900));
}
.ds-booking-card .ds-booking-note-language-tags {
  display: contents;
}
.ds-booking-card .ds-booking-note-language-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 24px;
  padding: 0 5px;
  border-radius: var(--radius-input, 12px);
  background: var(--gray-200);
  color: var(--gray-800);
  font-size: 12px;
  font-weight: 600;
}
.ds-booking-card .ds-booking-note-language-tag-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-booking-card .ds-booking-note-language-tag-emoji {
  font-size: 13px;
  line-height: 1;
}
.ds-booking-card .ds-booking-note-language-tag-remove {
  border: none;
  background: transparent;
  color: inherit;
  padding: 0;
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.78;
}
.ds-booking-card .ds-booking-note-language-tag-remove:hover {
  opacity: 1;
}
.ds-booking-card .ds-booking-note-language-search {
  border: none;
  outline: none;
  flex: 1 1 120px;
  min-width: 0;
  height: 24px;
  line-height: 24px;
  padding: 0;
  align-self: center;
  background: transparent;
  font-family: var(--font-body-family);
  font-size: 14px;
  color: var(--content-primary, var(--gray-800));
}
.ds-booking-card .ds-booking-note-language-input-wrap.has-tags .ds-booking-note-language-search {
  flex: 0 1 8px;
  min-width: 8px;
  height: 24px;
  line-height: 24px;
}
.ds-booking-card .ds-booking-note-language-search::placeholder {
  color: var(--ds-input-placeholder);
}
.ds-booking-card .ds-booking-note-language-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  min-width: 260px;
  background: var(--surface-white);
  border-radius: var(--radius-3xl, 32px);
  box-shadow: var(--shadow-xl, 0 24px 72px rgba(15, 23, 42, 0.18));
  z-index: 1000;
  max-height: 260px;
  overflow-y: auto;
  padding: 12px;
  margin-top: 6px;
  backdrop-filter: none;
  display: none;
}
.ds-booking-card .ds-booking-note-language-dropdown.is-open {
  display: block;
}
.ds-booking-card .ds-booking-note-language-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--foreground, var(--brand-black));
  font-size: 14px;
  line-height: 1.55;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.ds-booking-card .ds-booking-note-language-option:first-child { border-radius: 20px 20px 0 0; }
.ds-booking-card .ds-booking-note-language-option:last-child { border-radius: 0 0 20px 20px; }
.ds-booking-card .ds-booking-note-language-option:first-child:last-child { border-radius: 20px; }
/* Gebruik geen var(--muted) hier: op kalender/host-boekingen overschrijft calendar.css
   --muted met --theme-text-muted (var(--gray-500)) — bedoeld voor tekst, niet voor rij-achtergrond. */
.ds-booking-card .ds-booking-note-language-option:hover {
  background: var(--dropdown-item-hover-bg, var(--gray-100));
}
.ds-booking-card .ds-booking-note-language-option:focus,
.ds-booking-card .ds-booking-note-language-option:focus-visible {
  outline: none;
  background: var(--dropdown-item-hover-bg, var(--gray-100));
}
/* Zelfde patroon als user edit telefoon-land (.ds-phone-country-item): vinkje rechts alleen bij selectie */
.ds-booking-card .ds-booking-note-language-option .ds-dropdown-check {
  display: none;
  flex-shrink: 0;
}
.ds-booking-card .ds-booking-note-language-option.is-selected .ds-dropdown-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--foreground, var(--brand-black));
}
.ds-booking-card .ds-booking-note-language-option.is-selected .ds-dropdown-check svg {
  stroke-width: 2.75;
}
.ds-booking-card .ds-booking-note-language-option.is-selected {
  background: var(--dropdown-item-hover-bg, var(--gray-100));
}
.ds-booking-card .ds-booking-note-language-option.is-selected .ds-phone-country-name {
  font-weight: 700;
}
.ds-booking-card .ds-booking-note-language-option .ds-phone-country-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-booking-card .ds-booking-note-language-option .ds-note-language-emoji {
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
}
.ds-booking-card .ds-booking-note-language-option .ds-phone-country-name > span:last-child {
  font-size: 14px;
  font-weight: inherit;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-booking-card .ds-booking-note-save-btn .btn-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font-family: 'Fira Sans', sans-serif !important;
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.4, 1), transform 0.3s cubic-bezier(0.25, 1, 0.4, 1);
  will-change: transform, opacity;
}
.ds-booking-card .ds-booking-note-save-btn .btn-label svg {
  flex-shrink: 0;
}
.ds-booking-card .ds-booking-note-save-btn .ds-note-save-state {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Fira Sans', sans-serif !important;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.4, 1), transform 0.3s cubic-bezier(0.25, 1, 0.4, 1);
  will-change: transform, opacity;
}
.ds-booking-card .ds-booking-note-save-btn .ds-note-save-state svg {
  flex-shrink: 0;
}
.ds-booking-card .ds-booking-note-save-btn.is-success .btn-label,
.ds-booking-card .ds-booking-note-save-btn.is-error .btn-label {
  opacity: 0;
  transform: translateY(-16px);
}
.ds-booking-card .ds-booking-note-save-btn.is-success .ds-note-save-state--success,
.ds-booking-card .ds-booking-note-save-btn.is-error .ds-note-save-state--error {
  opacity: 1;
  transform: translateY(0);
}
/* Succes: alleen het vinkje, geen «Opgeslagen»-tekst */
.ds-booking-card .ds-booking-note-save-btn.is-success .ds-note-save-state--success [data-note-save-success-text] {
  display: none;
}
.ds-booking-card .ds-booking-note-save-btn.is-success .ds-note-save-state--success {
  gap: 0;
}
.ds-booking-card .ds-booking-note-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Opmerking: rand/hover/focus via globale .ds-textarea (gelijk aan .ds-input); hier alleen compacte hoogte op de kaart */
.ds-booking-card .ds-booking-note-textarea {
  min-height: 96px;
}
/* Notitie-footer: morph-patroon (users) — desktop delete links; mobiel Opslaan > Annuleren > Verwijder (tekstlink). */
.ds-booking-card .ds-booking-note-footer {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 8px;
  padding-top: 16px;
  padding-bottom: 24px;
  border-top: 1px solid var(--border);
  scroll-margin-bottom: 24px;
}
.ds-booking-card .ds-booking-note-footer-actions {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  gap: 8px;
}
.ds-booking-card .ds-booking-note-delete-btn {
  box-sizing: border-box;
  align-self: center;
  margin: 0;
  font-family: var(--font-body-family, 'Inter', system-ui, sans-serif);
  font-weight: 600;
  color: var(--sent-red) !important;
  background: transparent !important;
  border-color: transparent !important;
  padding: 12px 16px;
  min-height: 44px;
  min-width: 0;
  text-decoration: none;
}
.ds-booking-card .ds-booking-note-delete-btn:hover {
  color: var(--sent-red) !important;
  background: transparent !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 1;
}
.ds-booking-card .ds-booking-note-delete-btn:disabled {
  opacity: 0.55;
  text-decoration: none;
  cursor: not-allowed;
}
.ds-booking-card .ds-booking-note-cancel-btn,
.ds-booking-card .ds-booking-note-save-btn {
  width: 100%;
  min-height: 44px;
}
@media (min-width: 1024px) {
  .ds-booking-card .ds-booking-note-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .ds-booking-card .ds-booking-note-delete-btn {
    align-self: center;
    padding-left: 0;
    padding-right: 12px;
  }
  .ds-booking-card .ds-booking-note-footer-actions {
    flex-direction: row;
    width: auto;
    margin-left: auto;
    gap: 12px;
  }
  .ds-booking-card .ds-booking-note-cancel-btn,
  .ds-booking-card .ds-booking-note-save-btn {
    width: auto;
    min-width: 136px;
    min-height: 0;
  }
}
.ds-booking-card .ds-booking-note-save-btn {
  position: relative;
  overflow: hidden;
  font-family: 'Fira Sans', sans-serif !important;
}
.ds-booking-card .ds-booking-note-save-btn.is-success {
  background: var(--sent-green);
  color: var(--btn-lime);
  border-color: var(--sent-green);
}
.ds-booking-card .ds-booking-note-save-btn.is-error {
  background: var(--sent-red);
  color: var(--surface-white);
  border-color: var(--sent-red);
  animation: ds-booking-note-save-error 0.45s cubic-bezier(.36,.07,.19,.97);
}
/* Notitie-label: zoals HTML-mock — stip absolute op .ds-booking-note-label-shell; alleen opacity + scale (sync booking-card.css). */
.ds-booking-card .ds-booking-note-label-cluster {
  min-width: 0;
}
.ds-booking-card .ds-booking-note-label-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}
.ds-booking-card .ds-booking-note-typewriter {
  min-width: 0;
  gap: 0;
}
/* Mock: caret altijd in layout (opacity); display:none/active toggles waren onbetrouwbaar in inline-flex rij. */
.ds-booking-card .ds-booking-note-typewriter-cursor {
  display: inline-block;
  box-sizing: border-box;
  width: 2px;
  height: calc((24 / 28) * 1em);
  margin: 0 0 0 4px;
  padding: 0;
  flex-shrink: 0;
  align-self: center;
  border-radius: 1px;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  vertical-align: -0.1em;
  transition: opacity 120ms ease;
  animation: none;
}
.ds-booking-card .ds-booking-note-typewriter:not(.is-idle) .ds-booking-note-typewriter-cursor {
  opacity: 1;
  animation: ds-note-typewriter-cursor 0.6s step-start infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ds-booking-card .ds-booking-note-typewriter-cursor {
    animation: none !important;
  }
}
.ds-booking-card .ds-booking-note-badge {
  position: absolute;
  /* Afstand stip t.o.v. shell-rand — sync booking-card.css (woord ↔ stip −2px gap t.o.v. -6px) */
  right: -4px;
  top: 2px;
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--sent-red);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
  transition:
    opacity 120ms ease,
    transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ds-booking-card .ds-booking-note-label-cluster.note-label-filled .ds-booking-note-badge {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .ds-booking-card .ds-booking-note-badge {
    transition: none !important;
  }
}
@keyframes ds-note-typewriter-cursor {
  50% {
    opacity: 0;
  }
}
@keyframes ds-booking-note-save-error {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
@media (max-width: 1023px) {
  .ds-booking-card .ds-booking-note-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Cancelled state: dim alleen Verblijf/Schoonmaak-pill-rows (.ds-pill-row-after-cancel), niet header/platform/footer ── */

/* ── Flatpickr altInput: verbergen in DS card ── */
.ds-booking-card .flatpickr-alt,
.ds-booking-card .flatpickr-input.flatpickr-alt,
.ds-booking-card input.pill-date-input.exec-date.flatpickr-alt {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}
.ds-booking-card .ds-schoonmaak-date-input[type="text"] {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* ── Responsive: smaller date boxes ── */
@media (max-width: 405px) {
  .ds-booking-card .ds-pill-main-verblijf .ds-date-boxes { gap: 10px; min-width: 0; flex-shrink: 1; }
  .ds-booking-card .ds-date-box { width: 60px; height: 60px; border-radius: 11px; }
  .ds-booking-card .ds-date-box .ds-date-day { font-size: 0.65625rem; top: calc(50% - 3px - 0.65625rem); }
  .ds-booking-card .ds-date-box .ds-date-num { font-size: 1.25rem; }
  .ds-booking-card .ds-date-box .ds-date-month { font-size: 0.6875rem; top: calc(50% + 11px); }
}
@media (max-width: 375px) {
  .ds-booking-card .ds-pill-main-geboekt .ds-geboekt-row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .ds-booking-card .ds-pill-main-geannuleerd .ds-geannuleerd-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ds-booking-card .ds-geannuleerd-date.ds-nights-badge { align-self: flex-start; }

  /* Verblijf ≤375px: titel + meta (nachten, jaar) naast elkaar, datumvierkantjes daaronder */
  .ds-booking-card .ds-pill-main-verblijf .ds-verblijf-left {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }
  .ds-booking-card .ds-pill-main-verblijf .ds-verblijf-meta {
    flex-shrink: 0;
    text-align: right;
  }
  .ds-booking-card .ds-pill-main-verblijf .ds-verblijf-meta .ds-nights-badge {
    align-self: flex-end;
  }
  .ds-booking-card .ds-pill-main-verblijf .ds-verblijf-row {
    flex-direction: column; align-items: stretch; gap: 12px; min-width: 0;
  }
  .ds-booking-card .ds-pill-main-verblijf .ds-date-boxes { width: 100%; min-width: 0; gap: 10px; flex-shrink: 0; }
  .ds-booking-card .ds-pill-main-verblijf .ds-date-box {
    flex: 1 1 0; min-width: 0; min-height: 0; width: auto; height: auto;
    aspect-ratio: 1; border-radius: 20%; container-type: inline-size;
  }
  .ds-booking-card .ds-pill-main-verblijf .ds-date-box .ds-date-day { font-size: 15.28cqw; top: calc(50% - 5.56% - 1em); transform: translate(-50%, -100%); }
  .ds-booking-card .ds-pill-main-verblijf .ds-date-box .ds-date-num { font-size: 33.33cqw; top: 50%; transform: translate(-50%, -50%); -webkit-text-stroke: 0.015em currentColor; }
  .ds-booking-card .ds-pill-main-verblijf .ds-date-box .ds-date-month { font-size: 16.67cqw; top: calc(50% + 18.06%); transform: translate(-50%, 0); }
  .ds-booking-card .ds-pill-main-verblijf .ds-date-arrow { font-size: clamp(0.75rem, 3.5vw, 1rem); }

  /* Schoonmaak ≤375px: Vrijgeven op eigen rij */
  .ds-booking-card .ds-schoonmaak-claim-animate .ds-schoonmaak-top-row {
    flex-wrap: wrap;
    row-gap: 0;
    overflow: visible;
  }
  .ds-booking-card .ds-schoonmaak-claim-animate .ds-schoonmaak-left-col {
    flex: 1 1 100%;
  }
  .ds-booking-card .ds-schoonmaak-claim-animate .ds-schoonmaak-actions-wrap {
    position: static;
    overflow: hidden;
    max-height: 100px;
    margin-top: 16px;
  }
  .ds-booking-card.is-claimed .ds-schoonmaak-claim-animate .ds-schoonmaak-actions-wrap {
    max-height: 0;
    min-height: 0;
    margin-top: 0;
  }

  .ds-schoonmaak-datetime-row .ds-schoonmaak-arrow-duration { padding: 0 6px; min-width: 2rem; }

  /* Timeline icons: verkleind van 38px naar 32px op ≤375px (1:1 DS); op stack zodat stale-spacer mee schaalt */
  .ds-booking-card .pill-stack.ds-booking-card-stack {
    --pill-icon-size: 32px;
  }
  .ds-booking-card .pill-row {
    --pill-icon-half: calc(var(--pill-icon-size) / 2);
    --pill-main-padding: 16px;
  }
  .ds-booking-card .pill-icon svg {
    width: 16px;
    height: 16px;
  }

  /* Card padding: compacter op ≤375px */
  .ds-booking-card.card {
    --ds-booking-side-pad: 20px;
    padding: 20px !important;
    padding-bottom: 16px !important;
  }

  /* Pill-main padding compacter */
  .ds-booking-card .pill-main {
    padding: 16px;
  }

  /* Pill-icon witte ring kleiner (10px → 8px bij kleinere icons) */
  .ds-booking-card .pill-icon {
    box-shadow: rgb(255, 255, 255) 0px 0px 0px 8px, rgba(226, 229, 249, 0.1) 0px 1px 4px 0px !important;
  }
}

/* ── iOS 16px font fix on time inputs (voorkomt auto-zoom) ── */
@media (max-width: 1023px) {
  .ds-schoonmaak-datetime-row .ds-timepicker-input-mobile,
  .ds-schoonmaak-datetime-row .ds-timepicker-input-desktop,
  .ds-schoonmaak-datetime-row .ds-exec-time-input {
    font-size: 16px !important;
    font-family: var(--font-body-family) !important;
    font-weight: 600 !important;
  }
}

/* Timepicker modal: uur/min inputs behouden altijd 3.5rem (overschrijft globale iOS 16px fix) */
.ds-timepicker-hour,
.ds-timepicker-min {
  font-size: 3.5rem !important;
  font-weight: 700 !important;
}
.ds-timepicker-colon {
  font-size: 3.5rem !important;
  font-weight: 700 !important;
}

/* ================================================================
   BOOKING CARD — Legacy CSS overrides
   Neutraliseert alle oude card.css / dashboard.css regels
   die de DS booking card verstoren.
   ================================================================ */

/* Body font: hele card gebruikt DS body font */
.ds-booking-card.card,
.ds-booking-card.card * {
  font-family: var(--font-body-family);
}
.ds-booking-card.card .pill-label,
.ds-booking-card.card .ds-booking-action-label,
.ds-booking-card.card h4 {
  font-family: var(--font-heading);
}

/* Neutraliseer card.css .card basis (border-radius, padding, transform, hover) */
.ds-booking-card.card {
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04) !important;
  background: var(--surface-white) !important;
  border: none !important;
  min-height: auto !important;
  position: relative !important;
}

/* Neutraliseer card.css .card-header (background, border, padding) */
.ds-booking-card .card-header.ds-booking-card-header {
  min-height: auto !important;
  border-radius: 0 !important;
  position: relative !important;
}

/* Neutraliseer card.css .card-header-close hover/focus */
.ds-booking-card .card-header-close {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.ds-booking-card .card-header-close:hover {
  background: var(--gray-100, var(--gray-100)) !important;
}

/* Neutraliseer card.css .pill-stack (padding, overflow) */
.ds-booking-card .pill-stack {
  overflow: visible !important;
}

/* Neutraliseer card.css .pill-row (padding, z-index, display) */
.ds-booking-card .pill-row {
  z-index: auto !important;
  border: none !important;
}

/* pill-icon: witte ring als visuele gap tussen cirkel en timeline-lijn */
.ds-booking-card .pill-icon {
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 10px, rgba(226, 229, 249, 0.1) 0px 1px 4px 0px !important;
}

/* Neutraliseer card.css .pill-main */
.ds-booking-card .pill-main {
  border: none !important;
}

/* Neutraliseer card.css .pill-date-input */
.ds-booking-card .pill-date-input {
  font-size: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}

/* Neutraliseer card.css .badge-select — verborgen via inline style, maar voor zekerheid */
.ds-booking-card .badge-select {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* .claim-btn is enkel een JS-hook (card-behavior.php). Visual styling zit op .ds-schoonmaak-claim-btn.
   card.css heeft geen visuele .claim-btn stijlen meer — geen neutralisatie nodig. */

/* Neutraliseer card.css .release-btn legacy styling */
.ds-booking-card .release-btn,
.ds-booking-card .release-btn:hover,
.ds-booking-card .release-btn:focus,
.ds-booking-card .release-btn:disabled {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  display: inline !important;
}
/* Vrijgeven knop: DS link style */
.ds-booking-card .ds-schoonmaak-release-btn.release-btn {
  display: inline !important;
  font-family: var(--font-body-family) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--brand-black) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: color 0.2s, text-decoration-color 0.2s !important;
}
.ds-booking-card .ds-schoonmaak-release-btn.release-btn:hover {
  color: var(--stoplicht-rood) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
/* Verberg de ellipsis span in buttons als hidden */
.ds-booking-card .btn-ellipsis[hidden] { display: none !important; }

/* Neutraliseer card.css time-chip en exec-time op onze inputs (desktop) */
@media (min-width: 1024px) {
  .ds-booking-card .ds-exec-time-input,
  .ds-booking-card .ds-timepicker-input-mobile,
  .ds-booking-card .ds-timepicker-input-desktop {
    height: auto !important;
    min-height: auto !important;
  }
}

/* Neutraliseer dashboard.css card input styling */
.ds-booking-card input,
.ds-booking-card select {
  margin: 0 !important;
}

/* Neutraliseer card.css .exec-actions */
.ds-booking-card .exec-actions {
  border-top: none !important;
  padding-top: 0 !important;
}

/* Time input hover: primary-dark border (Van/Tot in card) */
.ds-booking-card .ds-schoonmaak-datetime-row .ds-exec-time-input:hover,
.ds-booking-card .ds-schoonmaak-datetime-row .ds-timepicker-input-desktop:hover {
  border-color: var(--primary-dark, #163300) !important;
}
.ds-booking-card .ds-schoonmaak-datetime-row .ds-exec-time-input:focus,
.ds-booking-card .ds-schoonmaak-datetime-row .ds-exec-time-input:focus-visible,
.ds-booking-card .ds-schoonmaak-datetime-row .ds-timepicker-input-desktop:focus,
.ds-booking-card .ds-schoonmaak-datetime-row .ds-timepicker-input-desktop:focus-visible {
  border-color: var(--primary-dark, #163300) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Platform badge: exact DS styling */
.ds-booking-card .ds-platform-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-family: var(--font-body-family, 'Fira Sans', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
}


/* Schoonmaak expandable: unclaimed = geen padding */
.ds-booking-card:not(.is-claimed) .ds-schoonmaak-expandable-inner {
  padding: 0 !important;
}

/* Chevron dropdown icon: simpel pijltje, geen achtergrond */
svg.ds-schoonmaak-chevron,
.ds-booking-card svg.ds-schoonmaak-chevron {
  width: 16px !important;
  height: 16px !important;
  color: var(--gray-400, var(--gray-400)) !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s ease-out, color 0.15s !important;
  background: none !important;
  border-radius: 0 !important;
}
.ds-booking-card .ds-schoonmaak-cleaner-btn:hover svg.ds-schoonmaak-chevron {
  color: var(--gray-600, #4b5563) !important;
}

/* ================================================================
   DS TIME PICKER MODAL
   Exacte implementatie van het DS design
   ================================================================ */

#ds-timepicker-modal.ds-timepicker-modal {
  z-index: 13100 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
/* Zelfde specificiteit (id+class) zodat open-state wint */
#ds-timepicker-modal.ds-timepicker-modal.ds-timepicker-modal--open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.ds-timepicker-modal .ds-timepicker-modal-inner {
  transform: scale(0.95);
}
.ds-timepicker-modal.ds-timepicker-modal--open .ds-timepicker-modal-inner {
  transform: scale(1);
  opacity: 1;
}
.ds-timepicker-modal-inner {
  position: relative;
  z-index: 1;
  border-radius: 32px;
  overflow: visible;
  /* Zelfde paneel als partial (bg-card, border-border, shadow-ds-lg, p-6) — werkt zonder Tailwind */
  background: var(--card, #ffffff);
  border: 1px solid var(--border, var(--gray-200, var(--gray-200)));
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(24, 34, 69, 0.1));
  padding: 24px;
  /* Responsive: max-width met padding, min-width alleen op grotere schermen */
  width: calc(100vw - 32px);
  max-width: 368px;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
.ds-timepicker-modal-inner .ds-timepicker-modal-title {
  font-family: var(--font-heading);
  font-size: var(--font-h2, 1.25rem);
  font-weight: 700;
  color: var(--foreground, var(--primary-dark, #163300));
  margin: 0 0 1.5rem;
}
.ds-timepicker-modal .ds-timepicker-fields {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}
.ds-timepicker-fields {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto 112px;
  gap: 6px 0.5rem;
  align-items: stretch;
  overflow: visible;
  justify-content: center;
  justify-items: center;
}
.ds-timepicker-fields .ds-timepicker-label {
  font-family: var(--font-body-family, 'Fira Sans', sans-serif);
  font-size: var(--ds-small, 0.8125rem);
  font-weight: 600;
  color: var(--gray-500, var(--gray-500));
  align-self: end;
  margin-bottom: 2px;
}
.ds-timepicker-fields .ds-timepicker-colon-spacer {
  grid-column: 2;
  min-width: 0.25rem;
}
.ds-timepicker-fields .ds-timepicker-colon {
  grid-column: 2;
  grid-row: 2;
  display: block;
  height: 112px;
  line-height: 112px;
  text-align: center;
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--gray-500, var(--gray-500));
  transform: translateY(-0.06em);
}
.ds-timepicker-fields .ds-timepicker-hour,
.ds-timepicker-fields .ds-timepicker-min {
  grid-row: 2;
  height: 112px;
  width: 120px;
  min-width: 100px; /* Verlaagd van 120px voor kleinere schermen */
  box-sizing: border-box;
  overflow: visible;
}

/* Responsive timepicker: kleinere inputs op smalle schermen */
@media (max-width: 380px) {
  .ds-timepicker-fields .ds-timepicker-hour,
  .ds-timepicker-fields .ds-timepicker-min {
    width: 100px;
    min-width: 80px;
    height: 100px;
    padding: 8px;
  }
  .ds-timepicker-hour,
  .ds-timepicker-min {
    font-size: 3rem !important;
    line-height: 48px;
    padding: 8px;
  }
  .ds-timepicker-colon {
    height: 100px;
    line-height: 100px;
    font-size: 3rem !important;
  }
}
.ds-timepicker-hour,
.ds-timepicker-min {
  -moz-appearance: textfield;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  border: 2px solid var(--gray-300, var(--gray-300));
  background: var(--gray-100, var(--gray-100));
  font-size: 3.5rem;
  line-height: 56px;
  font-weight: 700;
  color: var(--primary-dark, #163300);
  transition: background-color 0.15s ease, border-color 0.15s ease;
  padding: 12px;
  text-align: center;
  box-sizing: border-box;
  overflow: visible;
}
.ds-timepicker-modal .ds-timepicker-hour,
.ds-timepicker-modal .ds-timepicker-min {
  border-color: var(--gray-200, var(--gray-200));
  border-radius: var(--radius-md, 8px);
  /* Geen knipperende I-beam: focus blijft zichtbaar via veld-BG; typen/plakken werkt normaal. */
  caret-color: transparent;
}
.ds-timepicker-modal .ds-timepicker-actions {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  gap: 8px;
}
/* Twee gelijke actieknoppen; sizing via standaard .ds-btn (48px hoog, 28px horizontale padding). */
.ds-timepicker-modal .ds-timepicker-actions .ds-btn {
  flex: 1 1 0;
  min-width: 0;
}
.ds-timepicker-hour:hover,
.ds-timepicker-min:hover {
  background: var(--timepicker-modal-input-hover-bg, #DBF7CA);
  border-color: var(--timepicker-modal-input-hover-bg, #DBF7CA);
}
.ds-timepicker-modal .ds-timepicker-hour:hover,
.ds-timepicker-modal .ds-timepicker-min:hover {
  border-color: var(--timepicker-modal-input-hover-bg, #DBF7CA);
}
.ds-timepicker-hour:focus,
.ds-timepicker-min:focus {
  box-shadow: none;
  outline: none;
  border-color: color-mix(in srgb, var(--timepicker-modal-input-active-bg, #CFF4B9) 75%, black);
  background: var(--timepicker-modal-input-active-bg, #CFF4B9);
}
.ds-timepicker-modal .ds-timepicker-hour:focus,
.ds-timepicker-modal .ds-timepicker-min:focus {
  border-color: var(--timepicker-modal-input-active-bg, #CFF4B9);
}
.ds-timepicker-modal .ds-timepicker-hour:focus,
.ds-timepicker-modal .ds-timepicker-hour:focus-visible,
.ds-timepicker-modal .ds-timepicker-min:focus,
.ds-timepicker-modal .ds-timepicker-min:focus-visible {
  outline: none !important;
  outline-offset: 0;
  box-shadow: none !important;
}
/* Tekstselectie: zelfde tint als veld-BG (geen globale ::selection primary-dark-flits).
   Class-scope: ook Design System-pagina demo (geen #ds-timepicker-hour op die pagina). */
.ds-timepicker-modal .ds-timepicker-hour::-moz-selection,
.ds-timepicker-modal .ds-timepicker-min::-moz-selection,
.ds-timepicker-modal .ds-timepicker-hour::selection,
.ds-timepicker-modal .ds-timepicker-min::selection {
  background-color: var(--gray-100, var(--gray-100)) !important;
  color: var(--primary-dark, #163300) !important;
}
.ds-timepicker-modal .ds-timepicker-hour:hover::-moz-selection,
.ds-timepicker-modal .ds-timepicker-min:hover::-moz-selection,
.ds-timepicker-modal .ds-timepicker-hour:hover::selection,
.ds-timepicker-modal .ds-timepicker-min:hover::selection {
  background-color: var(--timepicker-modal-input-hover-bg, #DBF7CA) !important;
  color: var(--primary-dark, #163300) !important;
}
.ds-timepicker-modal .ds-timepicker-hour:focus::-moz-selection,
.ds-timepicker-modal .ds-timepicker-min:focus::-moz-selection,
.ds-timepicker-modal .ds-timepicker-hour:focus-visible::-moz-selection,
.ds-timepicker-modal .ds-timepicker-min:focus-visible::-moz-selection,
.ds-timepicker-modal .ds-timepicker-hour:focus::selection,
.ds-timepicker-modal .ds-timepicker-min:focus::selection,
.ds-timepicker-modal .ds-timepicker-hour:focus-visible::selection,
.ds-timepicker-modal .ds-timepicker-min:focus-visible::selection {
  background-color: var(--timepicker-modal-input-active-bg, #CFF4B9) !important;
  color: var(--primary-dark, #163300) !important;
}
.ds-timepicker-hour::-webkit-outer-spin-button,
.ds-timepicker-hour::-webkit-inner-spin-button,
.ds-timepicker-min::-webkit-outer-spin-button,
.ds-timepicker-min::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
}
.ds-timepicker-modal .ds-timepicker-ok.ds-btn-lime {
  background: var(--btn-lime);
  color: var(--btn-lime-text);
  border-color: var(--btn-lime);
}
.ds-timepicker-modal .ds-timepicker-ok.ds-btn-lime:hover {
  background: var(--btn-lime-hover);
  border-color: var(--btn-lime-hover);
}
/* Verwijder: design system Outline stijl (transparant, grey-300 rand, grey-600 text; hover: zwarte rand) */
.ds-timepicker-modal .ds-timepicker-remove.ds-btn-outline {
  background: transparent;
  border: 2px solid var(--gray-300, var(--gray-300));
  color: var(--gray-600, var(--gray-600));
}
.ds-timepicker-modal .ds-timepicker-remove.ds-btn-outline:hover {
  border-color: var(--btn-primary-black, var(--gray-900));
  color: var(--gray-900, var(--gray-900));
}
.ds-timepicker-wrap .ds-timepicker-input-mobile {
  cursor: pointer;
}
@media (min-width: 641px) and (pointer: fine) {
  .ds-timepicker-wrap .ds-timepicker-input-mobile {
    pointer-events: none;
  }
}

/* ── Booking Card Save Button & Success Animation ─────────────────────────
 * Regels staan hier (niet in @layer) zodat ze hogere prioriteit hebben dan
 * de @layer components regels in tailwind.css.
 * ─────────────────────────────────────────────────────────────────────── */

/* Card: position:relative nodig voor success overlay */
.ds-booking-card.card {
  position: relative;
}

/* Save-actions: grid-collapse voor smooth in/uit animatie.
   transform is meegenomen zodat translateY(10px→0) ook animeert wanneer
   is-dirty wordt toggled op een al-geclaimde card (is-claimed zonder ds-claim-just-happened).
   Voor ds-claim-just-happened en :not(.is-claimed) wint de specifiekere regel (0-4-0)
   met transform 0.6s — deze regel (0-2-0) dient als fallback voor alle overige states. */
.ds-booking-card .ds-schoonmaak-save-actions {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.25, 1, 0.4, 1),
              margin-top 0.35s cubic-bezier(0.25, 1, 0.4, 1),
              opacity 0.35s cubic-bezier(0.25, 1, 0.4, 1),
              transform 0.35s cubic-bezier(0.25, 1, 0.4, 1);
  margin-top: 0;
  opacity: 0;
}
.ds-booking-card .ds-schoonmaak-save-actions-inner {
  min-height: 0;
  overflow: hidden;
}
.ds-booking-card .ds-schoonmaak-save-actions.is-dirty {
  grid-template-rows: 1fr;
  margin-top: 16px;
  opacity: 1;
}
.ds-booking-card .ds-schoonmaak-save-btn {
  width: 100%;
  border-radius: var(--radius-pill, 999px);
}

/* Content fade-out bij saving state (0-180ms venster) */
.ds-booking-card[data-save-state="saving"] .ds-schoonmaak-claim-animate .ds-schoonmaak-save-btn {
  opacity: 0.6;
}

/* Ellipsis dots in Klaar button */
.ds-schoonmaak-save-btn .btn-ellipsis {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ds-booking-card .btn-ellipsis[hidden] { display: none !important; }
.ds-schoonmaak-save-btn .btn-ellipsis span {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  /* Zelfde als tekst op lime-knop (var(--btn-lime-text)); wit was voor oude zwarte knop */
  background: currentColor;
  animation: ds-save-btn-ellipsis 1s ease-in-out infinite;
}
.ds-schoonmaak-save-btn .btn-ellipsis span:nth-child(2) { animation-delay: 0.15s; }
.ds-schoonmaak-save-btn .btn-ellipsis span:nth-child(3) { animation-delay: 0.30s; }
@keyframes ds-save-btn-ellipsis {
  0%, 60%, 100% { transform: scale(0.7); opacity: 0.5; }
  30% { transform: scale(1.1); opacity: 1; }
}

/* Time validation error: rode border + shake op Tot bij ongeldige uren */
.ds-booking-card .ds-schoonmaak-time-wrap.is-time-error .ds-timepicker-input,
.ds-booking-card .ds-schoonmaak-time-wrap.is-time-error .ds-timepicker-input-desktop,
.ds-booking-card .ds-schoonmaak-time-wrap.is-time-error .ds-timepicker-input-mobile,
.ds-booking-card .ds-schoonmaak-time-wrap.is-time-error .ds-exec-time-input,
.ds-booking-card .ds-schoonmaak-datetime-row .ds-schoonmaak-time-wrap.is-time-error .ds-timepicker-input-desktop,
.ds-booking-card .ds-schoonmaak-datetime-row .ds-schoonmaak-time-wrap.is-time-error .ds-exec-time-input {
  border-width: 2px !important;
  border-color: var(--sent-red, #CB272F) !important;
  border-style: solid !important;
}
@keyframes ds-time-error-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.ds-booking-card .ds-schoonmaak-time-wrap.is-time-error-shake {
  animation: ds-time-error-shake 0.5s ease-in-out both;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SUCCESS ANIMATION — White ring shrinks inward + GIF pop-in
   
   Sequence:
   1. Giant white ring (donut) scales down from outside, closing in toward center
   2. When the ring reaches the center hole size, GIF pops in
   
   Technique: Scale a huge circle with a fixed-size transparent hole in center
   
   Trigger: add data-save-state="success" to .ds-booking-card
   ══════════════════════════════════════════════════════════════════════════════ */

/* Container: hidden by default */
.ds-booking-success-layer {
  position: absolute;
  inset: 0;
  border-radius: var(--ds-booking-radius, 32px);
  overflow: hidden;
  pointer-events: none;
  z-index: 20;
  display: none;
}

/* Show layer when success state is active */
.ds-booking-card.success-state .ds-booking-success-layer,
.ds-booking-card[data-save-state="success"] .ds-booking-success-layer,
.ds-booking-card[data-save-state="closing"] .ds-booking-success-layer {
  display: block;
  pointer-events: auto;
}

/* Mobile fullscreen: layer covers entire viewport */
@media (max-width: 1023px) {
  .ds-booking-success-layer {
    position: fixed;
    inset: 0;
    border-radius: 0;
    overflow: visible;
    z-index: 9999;
  }
  
  /* Block scroll on body during success animation.
     Geen position:fixed — dat veroorzaakt een layout-jump bij verwijderen en
     verstoort de page-push from-state. pointer-events:auto op de success-layer
     vangt alle touches op, zodat de pagina daadwerkelijk niet scrollt. */
  body.ds-success-animating {
    overflow: hidden !important;
  }

  /* Success-layer sluit met dezelfde slide-right animatie als de modal —
     identiek aan reguliere modal-close, geen "van links onder" glitch meer. */
  @keyframes ds-success-layer-close {
    from { transform: translateX(0); }
    to   { transform: translateX(100vw); }
  }

  .ds-booking-success-layer.is-closing {
    animation: ds-success-layer-close 0.42s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none; /* touches doorgeven zodat sluit-callbacks normaal werken */
  }
}

/* ── Overlay: huge white donut that scales down ── */
.ds-booking-success-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Size when scaled to 1: creates 60px radius hole */
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%) scale(15);
  transform-origin: center center;
  border-radius: 50%;
  /* 
   * The trick: box-shadow OUTWARD creates the white coverage.
   * The element itself is transparent = the hole.
   * When scaled large (15x), the shadow covers far beyond the card.
   * When scaled to 1, only a 60px radius hole remains visible.
   */
  background: transparent;
  box-shadow: 0 0 0 2000px #fff;
  pointer-events: none;
  opacity: 0;
}

/* Mobile fullscreen: center on viewport instead of card */
@media (max-width: 1023px) {
  .ds-booking-success-overlay {
    position: fixed;
    top: 50vh;
    left: 50%;
  }
}

.ds-booking-card.success-state .ds-booking-success-overlay,
.ds-booking-card[data-save-state="success"] .ds-booking-success-overlay,
.ds-booking-card[data-save-state="closing"] .ds-booking-success-overlay {
  animation: ds-success-ring-inward 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes ds-success-ring-inward {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(15);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ── Success GIF: centered, pops in with bounce ── */
.ds-booking-success-gif {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%) scale(0);
  z-index: 2;
  pointer-events: none;
}

/* Mobile fullscreen: center on viewport instead of card */
@media (max-width: 1023px) {
  .ds-booking-success-gif {
    position: fixed;
    top: 50vh;
    left: 50%;
  }
}

.ds-booking-card.success-state .ds-booking-success-gif,
.ds-booking-card[data-save-state="success"] .ds-booking-success-gif,
.ds-booking-card[data-save-state="closing"] .ds-booking-success-gif {
  /* GIF pops when ring is almost closed (0.28s delay, ring takes 0.35s) */
  animation: ds-success-gif-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.28s forwards;
}

@keyframes ds-success-gif-pop {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }
  65% {
    transform: translate(-50%, -50%) scale(1.12);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ── Reduced motion: instant state, no animations ── */
@media (prefers-reduced-motion: reduce) {
  .ds-booking-card.success-state .ds-booking-success-overlay,
  .ds-booking-card[data-save-state="success"] .ds-booking-success-overlay,
  .ds-booking-card[data-save-state="closing"] .ds-booking-success-overlay {
    animation: none;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  .ds-booking-card.success-state .ds-booking-success-gif,
  .ds-booking-card[data-save-state="success"] .ds-booking-success-gif,
  .ds-booking-card[data-save-state="closing"] .ds-booking-success-gif {
    animation: none;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* (Host Profile Menu CSS staat in topbar.css — geen aparte DS-component klassen nodig) */

/* ── Card overlay: altijd bovenop andere modals (notifications, host-profile-menu z-index: 9000) ──
   Beide de overlay-wrapper (positie/dim) en het paneel (.ds-modal binnen mobiel-slide)
   krijgen z-index: 9200 zodat de card altijd als bovenste laag verschijnt.
   Outer radius: 9000 — notifications modal
   outer radius: 9200 — card overlay (boven notifications)                                       */
#card-overlay {
  z-index: 9200;
}
@media (max-width: 1023px) {
  #card-overlay .ds-modal {
    z-index: 9200;
  }
}