/* ==========================================================================
   SPOT-ON — screens.css
   Layout-regels die specifiek zijn voor één scherm.
   ========================================================================== */

/* ---- Onboarding-logo (draaiende ring, hergebruikt van het voormalige splashscherm) ---- */
.splash-ring {
  width: 132px; height: 132px;
  border-radius: 50%;
  border: 2.5px solid var(--copper);
  margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  animation: splash-rotate 2.2s ease-in-out infinite;
}
@keyframes splash-rotate { 0%{ transform: rotate(-20deg);} 50%{ transform: rotate(200deg);} 100%{ transform: rotate(340deg);} }
.splash-ring img { width: 96px; }

/* ---- Laadlaag tijdens een reserveringsaanvraag: hergebruikt exact de
   bestaande draaiende .splash-ring hierboven (geen eigen animatie). Boven
   sheet (150) en tabbar, onder de meldingen (#toast-host, 200). ---- */
.reserve-loading-overlay {
  position: fixed; inset: 0; z-index: 180;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(251, 247, 241, 0.82);                      /* terugval: --cream */
  background: color-mix(in srgb, var(--cream) 82%, transparent); /* volgt licht/donker thema */
}
.reserve-loading-overlay .splash-ring { margin: 0 auto 14px; }
.reserve-loading-text { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }

/* ---- Onboarding / auth ---- */
/* Achtergrond: geen eigen override meer — erft de centrale --app-bg-gradient
   van #app (base.css), zodat deze schermen dezelfde gradient tonen als de
   rest van de app, zonder duplicatie. */
.onboard-slide { padding: 40px 30px 20px; text-align: center; }
.onboard-slide .ring-icon { margin: 0 auto 24px; }
.onboard-slide__wordmark { display: block; width: 100%; margin: 0 auto 12px; }
.onboard-slide h1 { font-family: var(--font-display); font-size: 25px; font-weight: 600; margin-bottom: 10px; }
.onboard-slide p { color: var(--ink-soft); font-size: 14.5px; max-width: 300px; margin: 0 auto; }
.onboard-dots { display: flex; gap: 6px; justify-content: center; margin-top: 21px; margin-bottom: 26px; }
.onboard-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.onboard-dots span.is-active { background: var(--copper-dark); width: 18px; border-radius: 4px; }
.auth-switch { text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--ink-soft); }
.field-forgot-row { text-align: right; margin: -8px 0 20px; }
.auth-switch button, .field-forgot-row button { color: var(--copper-dark); font-weight: 700; background: none; border: none; }
.field-forgot-row button { font-size: 13px; }

/* ---- Login: hero, intro en gemoderniseerde velden/knop ----
   Bewust volledig gescoped onder #screen-login: raakt geen enkele andere
   pagina (registratie, profiel, ...) die dezelfde basisklassen (.btn-primary,
   .field, .auth-switch) hergebruikt. */
#screen-login .auth-wrap { padding-top: 22px; position: relative; }

#screen-login .auth-back {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%;
  background: none; border: none; padding: 4px 0;
  margin: 22px 0 0;
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  transition: color 0.15s ease;
}
#screen-login .auth-back:hover { color: var(--copper-dark); }

#screen-login .auth-sponsor { display: flex; justify-content: flex-end; align-items: center; gap: 28px; padding: clamp(24px, 4vh, 70px) 26px 0; }
#screen-login .auth-sponsor img.auth-sponsor-dbp { width: auto; height: 32px; opacity: 0.85; }
#screen-login .auth-sponsor img.auth-sponsor-badge { width: auto; height: 38px; opacity: 0.85; }

#screen-login .auth-footer { text-align: center; padding: 40px 26px 24px; }
#screen-login .auth-footer__copyright { font-size: 10.5px; line-height: 1.4; color: var(--muted); margin: 0 0 2px; }
#screen-login .auth-footer__version { font-size: 9.5px; line-height: 1.4; color: var(--muted); margin: 0 0 10px; opacity: 0.75; }
#screen-login .auth-footer__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; }
#screen-login .auth-footer__links a { font-size: 10.5px; color: var(--muted); text-decoration: none; transition: color 0.15s ease; }
#screen-login .auth-footer__links a:hover { color: var(--copper-dark); }

#screen-login .auth-hero { text-align: center; margin-bottom: 8px; }
#screen-login .auth-hero-logo {
  display: block;
  width: 145px; height: auto;
  margin: 0 auto 5px;
}
#screen-login .auth-hero-word { font-family: var(--font-display); font-size: 17px; line-height: 1.2; font-weight: 600; color: var(--ink); }
#screen-login .auth-hero-tagline {
  font-size: 9px; line-height: 1.3; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--copper-dark); font-weight: 600; margin-top: 2px;
}

#screen-login .auth-intro {
  text-align: center; font-size: 11.5px; line-height: 1.3;
  color: var(--ink-soft); margin: 0 0 14px;
  white-space: nowrap;
}

#screen-login .auth-welcome { font-size: 18px; line-height: 1.2; margin-bottom: 2px; }
#screen-login .auth-welcome-sub { font-size: 12.5px; line-height: 1.3; margin-bottom: 20px; }

#screen-login .field input {
  padding: 14px 16px;
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
#screen-login .field input:focus {
  background: var(--surface);
  border-color: var(--copper);
  box-shadow: 0 0 0 3px var(--copper-mist);
}

#screen-login .field-input-wrap { position: relative; }
#screen-login .field-input-wrap input { padding-right: 44px; }
#screen-login form .field:last-of-type { margin-bottom: 22px; }
#screen-login .pw-toggle {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--radius-sm);
  color: var(--muted);
  transition: color 0.15s ease;
}
#screen-login .pw-toggle:hover { color: var(--copper-dark); }
#screen-login .pw-toggle.is-visible { color: var(--copper-dark); }

#screen-login .btn-primary {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
#screen-login .btn-primary:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); background: var(--copper-deep); }
#screen-login .btn-primary:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-sm); }

/* ---- Discover / Home ---- */
.view-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.view-toggle button {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--line-strong); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.view-toggle button.is-active { background: var(--copper-dark); border-color: var(--copper-dark); color: #fff; }
.view-toggle svg { width: 15px; height: 15px; }

#map-view { display: none; }
#map-view.is-active { display: block; }
#leaflet-map {
  width: 100%;
  height: calc(100vh - var(--header-h) - var(--tabbar-h) - 132px);
  min-height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.map-sheet-preview { margin-top: 12px; }

.deal-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
.deal-strip::-webkit-scrollbar { display: none; }
.deal-pill {
  flex: none; width: 210px;
  background: linear-gradient(135deg, var(--copper-dark), var(--copper-deep));
  color: #fff;
  border-radius: var(--radius-md);
  padding: 14px 15px;
}
.deal-pill .eyebrow { color: var(--copper-light); }
.deal-pill__title { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 4px 0 2px; }
.deal-pill__sub { font-size: 12px; opacity: 0.85; }

/* ---- Restaurant detail ---- */
.detail-safe-top-cover {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--safe-top);
  background: var(--surface);
  z-index: 45;
}
.hero-photo { position: relative; height: 240px; overflow: hidden; }
.hero-photo img, .hero-photo .restaurant-photo-placeholder { width: 100%; height: 100%; object-fit: cover; }

/* Swipebare fotogalerij — CSS scroll-snap zorgt voor het vloeiende swipen
   zelf, native, zonder JS-afhankelijkheid. */
.hero-photo__track {
  display: flex;
  width: 100%; height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hero-photo__track::-webkit-scrollbar { display: none; }
.hero-photo__slide { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; }
.hero-photo__dots {
  position: absolute; bottom: 14px; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: center; gap: 6px;
}
.hero-photo__dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.55); transition: all 0.2s ease; }
.hero-photo__dots span.is-active { background: #fff; width: 18px; border-radius: 4px; }
.hero-photo__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.85); color: var(--ink);
  align-items: center; justify-content: center;
  display: none; /* enkel op muis-toestellen zichtbaar, zie media query */
}
.hero-photo__arrow svg { width: 18px; height: 18px; }
.hero-photo__arrow--prev { left: 12px; }
.hero-photo__arrow--next { right: 12px; }
@media (hover: hover) and (pointer: fine) {
  .hero-photo__arrow { display: flex; }
}
.hero-photo__overlay {
  position: absolute; top: 0; left: 0; right: 0;
  padding-top: calc(var(--safe-top) + 10px);
  display: flex; justify-content: space-between; padding-left: 14px; padding-right: 14px;
}
.hero-photo__overlay .icon-btn { background: rgba(33,28,24,0.4); color: #fff; }
.hero-photo__overlay .icon-btn.is-fav { color: var(--wine); background: #fff; }
.preview-banner {
  background: var(--copper-dark); color: #fff; text-align: center;
  font-size: 12.5px; font-weight: 600; padding: 9px 16px;
}

/* ---- Presentatie (restaurant) ---- */
.presentation-intro { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 20px; }
.hero-photo-edit {
  position: relative; width: 100%; aspect-ratio: 16/10; border-radius: 16px;
  overflow: hidden; background: var(--surface-alt); margin-bottom: 8px;
}
.hero-photo-edit img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo-edit__badge {
  position: absolute; top: 8px; left: 8px;
  background: rgba(33,28,24,0.6); color: #fff; font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: var(--radius-pill);
}
/* Sleepbare kortingsbadge in de presentatie-editor -- zuivere UI-overlay
   bovenop .hero-photo-edit (dat al position:relative heeft), nooit in de
   foto zelf verwerkt. Positie in procenten, zie wireDiscountBadgeDrag() in
   restaurant.js. */
.discount-badge-drag {
  position: absolute; transform: translate(-50%, -50%);
  background: #ff0000; color: #fff; font-size: 13px; font-weight: 700;
  padding: 4px 10px; border-radius: var(--radius-pill);
  cursor: grab; touch-action: none; user-select: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.discount-badge-drag.is-dragging { cursor: grabbing; }
.hero-photo-edit__caption { font-size: 11.5px; color: var(--muted); margin-bottom: 14px; }
.hero-photo-edit--empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed var(--line-strong); color: var(--muted); font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.menu-empty-state { text-align: center; padding: 20px 0 4px; }
.presentation-save-hint { font-size: 11.5px; color: var(--muted); text-align: center; margin: 4px 0 10px; }

/* ---- Restaurantprofiel — menukaart-editor: gerechtkaarten ----
   Eigen, specifiek benoemde classes (dish-card__*) -- raakt bewust geen
   bestaande .card/.card-pad (elders hergebruikt) en geen enkele
   .menu-item*-selector aan (die is uitsluitend klantzijde, customer.js). */
#menu-editor { display: flex; flex-direction: column; gap: 10px; }
.dish-card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.dish-card.is-dirty { border-color: var(--warning); }

.dish-card__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.dish-card__summary-text { flex: 1; min-width: 0; }
.dish-card__name { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.dish-card__placeholder { color: var(--muted); font-weight: 500; font-style: italic; }
.dish-card__desc-summary {
  font-size: 12.5px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dish-card__summary-side { flex: none; }
.dish-card__price { font-weight: 700; color: var(--copper-deep); font-size: 14px; white-space: nowrap; }

.dish-card__edit-btn {
  flex: none;
  display: flex; align-items: center; gap: 6px;
  background: var(--copper-mist); color: var(--copper-deep);
  border: none; border-radius: var(--radius-pill);
  padding: 8px 12px; font-size: 12.5px; font-weight: 600;
  position: relative;
}
.dish-card__edit-btn svg { width: 15px; height: 15px; }
.dish-card__dirty-dot {
  position: absolute; top: -2px; right: -2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--warning); border: 1.5px solid var(--surface);
}

/* Body (bewerkstand) -- standaard verborgen; enkel getoond op een kaart
   met .is-editing. De velden zelf blijven altijd in de DOM aanwezig
   (ook ingeklapt), zodat lokale wijzigingen nooit verloren gaan en de
   bestaande opslaglogica ($all(".menu-edit-row")) ze gewoon kan uitlezen. */
.dish-card__body { display: none; padding: 0 16px 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.dish-card.is-editing .dish-card__summary { display: none; }
.dish-card.is-editing .dish-card__body { display: block; }
.dish-card__body .field:last-of-type { margin-bottom: 12px; }
.dish-card__body .menu-desc { min-height: 140px; }

.dish-card__body-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.dish-card__body-actions-main { display: flex; gap: 8px; }
.dish-card__remove-link {
  background: none; border: none; color: var(--danger);
  font-size: 12.5px; font-weight: 600; padding: 8px 0;
}

.menu-unsaved-hint {
  font-size: 12.5px;
  background: var(--warning-bg); color: var(--warning);
  border-radius: var(--radius-sm); padding: 10px 12px;
  margin: 12px 0 0; text-align: center; font-weight: 500;
}

/* ---- Contact ---- */
.contact-intro { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 18px; }
.contact-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-faq-item {
  border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px;
  background: var(--surface); overflow: hidden;
}
.contact-faq-question {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 12px 14px; background: none; border: none; text-align: left;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.contact-faq-chevron { color: var(--muted); flex: none; transition: transform 0.2s ease; }
.contact-faq-item.is-open .contact-faq-chevron { transform: rotate(180deg); }
.contact-faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
}
.contact-faq-item.is-open .contact-faq-answer { padding-bottom: 14px; }
.contact-faq-answer p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; padding: 0 14px; margin: 0; }
.detail-header { padding: 16px 18px 0; }
.detail-header__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.detail-header h1 { font-family: var(--font-display); font-size: 23px; font-weight: 600; }
.detail-header__meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin-top: 6px; flex-wrap: wrap; }
.rating-pill { display: flex; align-items: center; gap: 4px; background: var(--copper-mist); color: var(--copper-deep); padding: 4px 9px; border-radius: var(--radius-pill); font-weight: 700; font-size: 12.5px; flex: none; }
.rating-pill svg { width: 12px; height: 12px; fill: var(--copper-deep); }

.tab-strip { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin: 18px 18px 0; }
.tab-strip button { background: none; border: none; padding: 10px 0; font-weight: 600; font-size: 13.5px; color: var(--muted); border-bottom: 2px solid transparent; }
.tab-strip button.is-active { color: var(--copper-deep); border-color: var(--copper-dark); }
.tab-panel { display: none; padding: 16px 18px 0; }
.tab-panel.is-active { display: block; }

.menu-item { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.menu-item:last-child { border: none; }
.menu-item__name { font-weight: 600; font-size: 14.5px; }
.menu-item__desc { font-size: 12.5px; color: var(--muted); margin-top: 3px; white-space: pre-line; }
.menu-item__price { font-weight: 700; color: var(--copper-deep); flex: none; font-size: 14px; }

.deal-card {
  border: 1.5px solid var(--copper-light);
  background: var(--copper-mist);
  border-radius: var(--radius-md);
  padding: 14px 15px;
  margin-bottom: 12px;
}
.deal-card__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.deal-card__title { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; }
.deal-card__price { text-align: right; flex: none; }
.deal-card__price .now { font-weight: 700; color: var(--copper-deep); font-size: 15px; }
.deal-card__price .was { font-size: 11.5px; color: var(--muted); text-decoration: line-through; }
.deal-card__desc { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.deal-card__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.deal-card__window { font-size: 11.5px; color: var(--copper-dark); font-weight: 600; }

.review-row { padding: 13px 0; border-bottom: 1px solid var(--line); }
.review-row:last-child { border: none; }
.review-row__top { display: flex; justify-content: space-between; align-items: center; }
.review-row__name { font-weight: 700; font-size: 13.5px; }
.review-row__stars { display: flex; gap: 2px; }
.review-row__stars svg { width: 13px; height: 13px; fill: var(--copper); }
.review-row__text { font-size: 13.5px; color: var(--ink-soft); margin-top: 5px; }
.review-row__date { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* UX-010 — dealdetailpagina: consistente content-marge (gelijk aan
   .detail-header/.sticky-cta) + scheiding enkel tussen hoofdblokken, niet
   tussen elke afzonderlijke sectie. */
.detail-content { padding: 0 18px; }
.detail-content__group { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line); }
.detail-content__group:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.detail-map-breakout { margin: 12px -18px 0; height: 220px; }

/* Personen-stepper — één compact, samenhangend element i.p.v. over de
   volledige breedte uit elkaar getrokken. */
.persons-stepper {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding: 8px;
  background: var(--surface-alt); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill);
  max-width: 220px;
}
.persons-stepper__btn {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1.5px solid var(--line-strong); border-radius: 50%;
  color: var(--copper-dark); font-size: 20px; line-height: 1;
}
.persons-stepper__btn:active { background: var(--copper-mist); }
.persons-stepper #deal-persons-count { font-size: 19px; font-weight: 700; min-width: 28px; text-align: center; }

/* Fase 1 — reserveren met deals + kalender */
.deal-card--selectable { cursor: pointer; border: 1.5px solid var(--line-strong); }
.deal-card--selectable:focus { outline: none; }
.deal-card--selectable.is-selected { border-color: var(--copper-dark); background: var(--copper-mist); }

.radio-dot { display: inline-block; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--line-strong); background: #fff; flex: none; }
.radio-dot.is-selected { border-color: var(--copper-dark); background: var(--copper-dark); }

.calendar { margin-top: 4px; }
.calendar__header { display: flex; align-items: center; justify-content: space-between; }
.calendar__label { font-weight: 600; font-size: 14px; text-transform: capitalize; }
.calendar__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; text-align: center; font-size: 11px; color: var(--muted); text-transform: uppercase; }
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 6px; }
.cal-cell { aspect-ratio: 1; border: none; border-radius: 8px; font-size: 13px; background: none; }
.cal-cell--empty { visibility: hidden; }
.cal-cell--available { background: var(--success-bg, #E4F0E9); color: var(--success, #2F6B4F); font-weight: 600; cursor: pointer; }
.cal-cell--available.is-selected { background: var(--copper-dark); color: #fff; border-radius: 50%; }
.cal-cell--unavailable { background: var(--danger-bg, #F6E7E5); color: var(--danger, #A6412F); opacity: .55; }

.time-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.time-chip { border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); padding: 7px 14px; font-size: 13px; background: none; }
.time-chip.is-selected { border-color: var(--copper-dark); background: var(--copper-dark); color: #fff; }

.sticky-cta {
  position: sticky; bottom: 0;
  background: linear-gradient(to top, var(--cream) 60%, transparent);
  padding: 16px 18px 4px;
  display: flex; gap: 10px;
}
.sticky-cta .btn { flex: 1; }

/* ---- Wallet ---- */
.voucher-card {
  background: var(--surface);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 14px;
  position: relative;
}
.voucher-card.is-active { border-color: var(--copper); background: linear-gradient(180deg, var(--copper-mist), var(--surface) 40%); }
.voucher-card.is-redeemed { opacity: 0.55; }
.voucher-card__top { display: flex; justify-content: space-between; align-items: flex-start; }
.voucher-card__restaurant { font-size: 12px; color: var(--muted); font-weight: 600; }
.voucher-card__title { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-top: 2px; }
.voucher-card__code { font-size: 11px; color: var(--muted); letter-spacing: 0.05em; margin-top: 8px; }

/* ---- Reservations ---- */
.reservation-row { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.reservation-row:last-child { border: none; }
.reservation-date { width: 52px; flex: none; text-align: center; background: var(--copper-mist); border-radius: var(--radius-sm); padding: 8px 4px; }
.reservation-date .day { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--copper-deep); line-height: 1; }
.reservation-date .mon { font-size: 10px; text-transform: uppercase; color: var(--copper-dark); font-weight: 700; margin-top: 2px; }

/* ---- Scanner ---- */
#screen-scanner { background: #111; }
#screen-scanner .top-header { background: rgba(17,17,17,0.7); border-color: rgba(255,255,255,0.1); }
#screen-scanner .top-header__title, #screen-scanner .icon-btn, #screen-scanner .back-btn { color: #fff; }
.scan-frame-wrap { position: relative; display: flex; align-items: center; justify-content: center; min-height: 60vh; }
#qr-reader { width: 100% !important; }
.scan-result-sheet { text-align: center; padding-top: 6px; }
.scan-result-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.scan-result-icon.ok { background: var(--success-bg); color: var(--success); }
.scan-result-icon.fail { background: var(--danger-bg); color: var(--danger); }
.scan-result-icon svg { width: 30px; height: 30px; }

/* ---- Dashboard analytics ---- */
.legend-row { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.legend-dot { width: 9px; height: 9px; border-radius: 2px; }

/* ---- Photo upload grid ---- */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.photo-grid__item { aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-alt); position: relative; }
.photo-grid__item img { width: 100%; height: 100%; object-fit: cover; }
.photo-grid__add { border: 1.5px dashed var(--line-strong); display: flex; align-items: center; justify-content: center; color: var(--muted); }

/* ---- Hours editor ---- */
.hours-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.hours-row__day { width: 84px; font-size: 13.5px; font-weight: 600; flex: none; }
.hours-row input[type="time"] { border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 7px 9px; font-size: 13px; flex: 1; }
.hours-row__closed-toggle { flex: none; }

/* ---- Language switch ---- */
.lang-row { display: flex; gap: 8px; }
.lang-row button { flex: 1; padding: 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--line-strong); background: var(--surface); font-weight: 700; font-size: 13px; }
.lang-row button.is-active { border-color: var(--copper-dark); background: var(--copper-mist); color: var(--copper-deep); }

/* ---- Profile ---- */
.profile-head { display: flex; align-items: center; gap: 14px; padding: 6px 0 20px; }
.profile-avatar { width: 58px; height: 58px; border-radius: 50%; background: var(--copper-dark); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; font-weight: 600; flex: none; position: relative; overflow: hidden; }
.profile-avatar img { width: 100%; height: 100%; object-fit: contain; background: var(--copper-mist); }
.profile-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.profile-email { font-size: 12.5px; color: var(--muted); }

/* ---- Persoonlijke gegevens (klant) — hergebruikt .field-float/.field-row uit registration.css ---- */
#screen-customer-personal-data .screen-body { padding: 18px 18px 32px; }

/* ---- Profiel (klant) — v2 gegroepeerde weergave. Uitsluitend nieuwe,
   geïsoleerde klassen; .card/.list-row/.profile-avatar zelf blijven
   ongewijzigd (die worden nog steeds gebruikt door het onaangeroerde
   horecapartner-profiel en de rest van de app). ---- */
.profile-v2-header { display: flex; align-items: center; gap: 14px; padding: 6px 0 20px; }
.profile-v2-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--copper-dark); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 26px; font-weight: 600;
  flex: none; overflow: hidden; cursor: pointer;
}
.profile-v2-avatar img { width: 100%; height: 100%; object-fit: contain; background: var(--copper-mist); }
.profile-v2-header__text { flex: 1; min-width: 0; }
.profile-v2-edit-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--copper-mist); color: var(--copper-deep);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.profile-v2-edit-btn svg { width: 16px; height: 16px; }
.profile-v2-card { border-radius: 18px; }
.profile-v2-danger { color: var(--danger); }
.profile-v2-danger__icon { background: var(--danger-bg); color: var(--danger); }
.profile-greeting-sub { font-size: 12px; color: var(--muted); margin-top: 2px; font-weight: 400; }

/* ---- Persoonlijk dashboard (klant) — één blok, interne hiërarchie i.p.v.
   losse kaarten. Ruime interne witruimte (kwaliteitscriterium 1), en
   consistente, volledig aanklikbare rijen met dezelfde touch-feedback
   (kwaliteitscriterium 2). Rijen worden als array opgebouwd in JS, zodat
   een toekomstige module (AI-tip, verjaardagsvoordeel, ...) er zonder
   herstructurering bij kan (kwaliteitscriterium 3). ---- */
.profile-dashboard-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  margin: 4px 16px 22px; overflow: hidden;
}
.profile-dashboard-primary-btn {
  display: block; width: 100%; text-align: left;
  background: none; border: none; padding: 22px 20px 18px; cursor: pointer;
}
.profile-dashboard-primary-btn:active, .profile-dashboard-primary-btn:hover { background: var(--copper-mist); }
.profile-dashboard-label { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.profile-dashboard-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.2; }
.profile-dashboard-sub { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.profile-dashboard-divider { height: 1px; background: var(--line); margin: 0 20px; }
.profile-dashboard-row {
  display: block; width: 100%; text-align: left;
  background: none; border: none; padding: 12px 20px; font-size: 12.5px; color: var(--ink-soft);
  cursor: pointer;
}
.profile-dashboard-row:active, .profile-dashboard-row:hover { background: var(--copper-mist); }
.profile-dashboard-row:last-child { padding-bottom: 18px; }

/* ---- Help & Juridisch (klant) — bewust rustiger dan "Mijn Spot-On":
   geen kaartomlijning, kleinere/lichtere tekst. ---- */
.profile-eyebrow-quiet { color: var(--muted); font-size: 10.5px; }
.profile-help-legal-list { padding: 0 4px; }
.profile-help-legal-row {
  display: block; width: 100%; text-align: left; text-decoration: none;
  background: none; border: none; padding: 9px 12px; font-size: 12px; color: var(--muted);
  cursor: pointer;
}
.profile-help-legal-row:active, .profile-help-legal-row:hover { color: var(--copper-deep); background: var(--copper-mist); }

/* ---- Openingsuren (restaurant) — uitklapbare dagkaarten ---- */
.hours-day-card { border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; overflow: hidden; background: var(--surface); }
.hours-day-header {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 14px 16px; background: none; border: none; text-align: left; cursor: pointer;
}
.hours-day-name { font-weight: 600; font-size: 13.5px; flex: none; width: 90px; }
.hours-day-summary { flex: 1; font-size: 12.5px; color: var(--ink-soft); }
.hours-day-chevron { color: var(--muted); flex: none; transition: transform 0.15s ease; }
.hours-day-card.is-expanded .hours-day-chevron { transform: rotate(180deg); }
.hours-day-body { padding: 0 16px 16px; border-top: 1px solid var(--line); }
.hours-time-row { display: flex; gap: 12px; margin-top: 4px; }
.hours-time-field { flex: 1; }
.hours-time-field label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.hours-time-field input[type="time"] {
  width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 14px; font-family: inherit; background: var(--surface); color: var(--ink);
}
.hours-screen-intro { text-align: center; padding: 4px 0 20px; }
.hours-screen-logo { display: block; width: 72px; height: 72px; border-radius: 50%; object-fit: contain; background: var(--copper-mist); margin: 0 auto 10px; }
.hours-screen-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.hours-screen-subtitle { font-size: 12.5px; color: var(--muted); }

/* ---- Kaart (klant) — Fase B: 'Mijn locatie'-knop en lege-staat-banner ---- */
.map-locate-btn {
  position: absolute; right: 14px; bottom: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); border: none; box-shadow: var(--shadow-lg);
  color: var(--copper-deep); display: flex; align-items: center; justify-content: center;
  z-index: 5;
}
.map-locate-btn svg { width: 20px; height: 20px; }
.map-empty-banner {
  position: absolute; top: 14px; left: 14px; right: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-sm);
  padding: 12px 14px; z-index: 5;
}
.map-empty-banner strong { font-size: 13px; }
.map-empty-banner p { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.map-loading-overlay {
  position: absolute; inset: 0; z-index: 10;
  background: var(--app-bg-gradient);
  display: flex; align-items: center; justify-content: center;
}

/* ---- Kaart (klant) — niveau 1: compacte preview + info-balk ---- */
.map-preview-heading {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  padding: 14px 16px 10px;
}
.map-preview-wrap {
  width: 100%;
  height: calc((100vh - var(--header-h) - var(--tabbar-h)) * 0.48);
  position: relative;
}
.map-preview-infobar {
  display: flex; gap: 10px;
  padding: 16px;
}
.map-preview-stat-card {
  flex: 1; text-align: center;
  border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 6px;
  background: var(--surface);
}
.map-preview-stat-card__icon {
  width: 32px; height: 32px; margin: 0 auto 6px;
  border-radius: 50%; background: var(--copper-mist); color: var(--copper-deep);
  display: flex; align-items: center; justify-content: center;
}
.map-preview-stat-card__icon svg { width: 16px; height: 16px; }
.map-preview-stat-card strong { display: block; font-family: var(--font-display); font-size: 17px; color: var(--copper-deep); }
.map-preview-stat-card span { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.map-back-btn {
  position: absolute; top: calc(14px + var(--safe-top)); left: 14px; z-index: 60;
  background: var(--surface); box-shadow: var(--shadow-lg);
}

/* ---- Juridisch scherm (Voorwaarden/Privacy/Cookies/Help) ---- */
.legal-header {
  display: flex; align-items: center; gap: 12px;
  padding: calc(var(--safe-top) + 14px) 16px 14px;
  border-bottom: 1px solid var(--line);
}
.legal-header strong { font-family: var(--font-display); font-size: 16px; }
.legal-body {
  padding: 20px 18px calc(var(--safe-bottom) + 24px);
  font-size: 14px; line-height: 1.7; color: var(--ink);
  overflow-y: auto;
  height: calc(100vh - var(--safe-top) - 60px);
}
.legal-body h1, .legal-body h2, .legal-body h3 {
  font-family: var(--font-display); margin: 22px 0 10px;
}
.legal-body h1 { font-size: 20px; }
.legal-body h2 { font-size: 16.5px; }
.legal-body h3 { font-size: 14.5px; }
.legal-body p, .legal-body ul, .legal-body ol { margin-bottom: 12px; }
.legal-body ul, .legal-body ol { padding-left: 20px; }
.legal-body table {
  width: 100%; border-collapse: collapse; margin-bottom: 16px;
  font-size: 13px;
}
.legal-body th, .legal-body td {
  border: 1px solid var(--line); padding: 8px 10px; text-align: left;
  vertical-align: top;
}
.legal-body th { background: var(--copper-mist); color: var(--copper-deep); font-weight: 600; }

/* ---- Dashboard horecapartner — visuele verfijning ----
   Uitsluitend visueel en volledig gescoped onder #dashboard-content: de
   basisklassen .card/.list-row/.badge/.section-title/.stat-tile/.bar-chart
   blijven elders in de app ongewijzigd. Enkel bestaande kleurvariabelen,
   dus licht/donker thema volgen automatisch. Header en menubalk worden
   hier niet aangeraakt. */
#dashboard-content {
  --dash-shadow: 0 10px 28px rgba(95, 59, 31, 0.08), 0 2px 6px rgba(95, 59, 31, 0.05);
  padding-top: 22px;
}
[data-theme="dark"] #dashboard-content {
  --dash-shadow: 0 10px 28px rgba(0, 0, 0, 0.40), 0 0 0 1px var(--line);
}
#dashboard-content .section { margin-bottom: 30px; }
#dashboard-content .section-title { font-size: 22px; letter-spacing: -0.01em; }

/* Kaarten: groter afgerond, zachte schaduw i.p.v. harde rand. Kaarten met
   een eigen (inline) randkleur — banners, profielkaart — behouden die. */
#dashboard-content .card {
  border-radius: 24px;
  border-color: transparent;
  box-shadow: var(--dash-shadow);
}
#dashboard-content .card-pad { padding: 20px; }

/* Begroeting */
#dashboard-content .dash-hello__name { font-size: 27px; line-height: 1.2; }

/* Overzicht: statistiektegels */
#dashboard-content .stat-grid { gap: 12px; }
#dashboard-content .stat-tile {
  border: none; border-radius: 20px;
  padding: 18px 18px 16px;
  box-shadow: var(--dash-shadow);
}
#dashboard-content .stat-tile__value { font-size: 30px; line-height: 1.1; }
#dashboard-content .stat-tile__label { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }

/* Grafiekkaart "Weergaven per dag" */
#dashboard-content .dash-chart-card { padding: 22px 20px 18px; }
#dashboard-content .dash-chart-card .section-title { font-size: 21px; }
#dashboard-content .dash-card-sub { font-size: 13px; color: var(--muted); }
/* Daglabels onder de staafzone i.p.v. erin: zo is elke staafhoogte (%) exact
   evenredig met de waarde. In de oude opmaak drukte het label de hoogste
   staven samen (85% en 100% zagen er even hoog uit). */
#dashboard-content .dash-chart-card .bar-chart { height: 176px; gap: 10px; padding-top: 18px; padding-bottom: 26px; }
#dashboard-content .dash-chart-card .bar-chart__col { position: relative; }
#dashboard-content .dash-chart-card .bar-chart__label { position: absolute; left: 0; right: 0; bottom: -24px; text-align: center; }
#dashboard-content .dash-chart-card .bar-chart__bar { border-radius: 9px; }
/* Dag met 0 weergaven: enkel een lage, zachte staaf als visuele markering.
   De waarde blijft 0 (de hoogte-stijl blijft 0%; min-height tekent enkel). */
#dashboard-content .dash-chart-card .bar-chart__bar.is-empty { min-height: 8px; background: var(--copper-mist); }
#dashboard-content .dash-chart-card .bar-chart__label { font-size: 12px; }

/* Reserveringen: elke reservering een eigen kaart (niet klikbaar) */
#dashboard-content .dash-resv-section .section-title { font-size: 24px; }
#dashboard-content .dash-resv-section .flex-between { margin-bottom: 14px; }
#dashboard-content .dash-resv-card {
  align-items: flex-start; gap: 14px;
  background: var(--surface);
  border-radius: 22px; border-bottom: none;
  padding: 16px; margin-bottom: 12px;
  box-shadow: var(--dash-shadow);
}
#dashboard-content .dash-resv-card:last-child { margin-bottom: 0; }
#dashboard-content .dash-resv-card .list-row__icon {
  width: 52px; height: 52px; border-radius: 16px; align-self: center;
}
#dashboard-content .dash-resv-card .list-row__icon svg { width: 23px; height: 23px; }
#dashboard-content .dash-resv-card .list-row__title { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); }
#dashboard-content .dash-resv-guests { font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; }
#dashboard-content .dash-resv-time { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 13px; }
#dashboard-content .dash-resv-time svg { width: 15px; height: 15px; flex: none; }
#dashboard-content .dash-resv-card .badge { flex: none; padding: 6px 12px; font-size: 10.5px; letter-spacing: 0.07em; }

/* ==========================================================================
   Premium Edition — fase 2: klant Home / "Mijn Spot-On" (Menu-scherm)
   Uitsluitend visueel. Gescoped op het klantprofiel: #profile-content:has(.profile-greeting-sub)
   (enkel het klantprofiel — ingelogd én publiek — heeft .profile-greeting-sub;
   het horecaprofiel in dezelfde container blijft hierdoor onaangeroerd).
   De rijen hebben inline padding/border/background; daarom worden
   scheidingslijnen en de druk-feedback via ::before/::after getekend i.p.v.
   die inline-waarden te overschrijven. Geen fase-1-token gewijzigd.
   ========================================================================== */

/* ---- Begroeting ---- */
#profile-content:has(.profile-greeting-sub) .profile-v2-header { gap: 15px; padding: 2px 2px 22px; }
#profile-content:has(.profile-greeting-sub) .profile-v2-avatar {
  width: 64px; height: 64px; font-size: 23px;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--card-border), 0 10px 22px -12px rgba(95, 59, 31, 0.45);
}
#profile-content:has(.profile-greeting-sub) .profile-v2-header .profile-name { font-size: 21px; line-height: 1.2; letter-spacing: -0.015em; }
#profile-content:has(.profile-greeting-sub) .profile-greeting-sub { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
#profile-content:has(.profile-greeting-sub) .profile-v2-edit-btn {
  width: 38px; height: 38px; background: var(--surface); color: var(--copper-dark);
  box-shadow: 0 0 0 1px var(--card-border), var(--card-shadow);
  transition: transform var(--dur-fast) var(--ease-fast);
}
#profile-content:has(.profile-greeting-sub) .profile-v2-edit-btn:active { transform: scale(0.94); }

/* ---- Featured: "Je volgende reservering" ---- */
#profile-content:has(.profile-greeting-sub) .profile-dashboard-card {
  margin: 0 0 18px;
  border: 1px solid var(--card-border);
  border-radius: 24px;
  box-shadow: var(--card-shadow);
  background:
    radial-gradient(120% 95% at 100% 0%, color-mix(in srgb, var(--copper-light) 34%, transparent), transparent 62%),
    var(--surface);
}
#profile-content:has(.profile-greeting-sub) .profile-dashboard-primary-btn { padding: 22px 22px 20px; transition: background-color var(--dur-fast) ease; }
#profile-content:has(.profile-greeting-sub) .profile-dashboard-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--copper-dark); margin-bottom: 8px;
}
#profile-content:has(.profile-greeting-sub) .profile-dashboard-title { font-size: 25px; line-height: 1.15; letter-spacing: -0.015em; }
/* Datum/tijd van de reservering als rustige koperen pil (enkel in de
   reserveringsvariant: label + titel + sub). */
#profile-content:has(.profile-greeting-sub) .profile-dashboard-label + .profile-dashboard-title + .profile-dashboard-sub {
  display: inline-flex; align-items: center;
  margin-top: 12px; padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--copper-mist); color: var(--copper-deep);
  box-shadow: inset 0 0 0 1px var(--card-border);
  font-size: 13px; font-weight: 600;
}
#profile-content:has(.profile-greeting-sub) .profile-dashboard-divider { margin: 0 22px; background: var(--divider-warm); }
#profile-content:has(.profile-greeting-sub) .profile-dashboard-row { padding: 13px 22px; font-size: 13px; font-weight: 500; color: var(--ink-soft); transition: background-color var(--dur-fast) ease; }
#profile-content:has(.profile-greeting-sub) .profile-dashboard-row:last-child { padding-bottom: 18px; }

/* ---- Groepen (Flash Deal, Mijn Spot-On, Mijn account, Voorkeuren, Afmelden):
   één container per groep met verfijnde rijen ---- */
#profile-content:has(.profile-greeting-sub) .section { margin-bottom: 24px; }
#profile-content:has(.profile-greeting-sub) .section > .eyebrow { margin: 8px 0 10px 4px; }
#profile-content:has(.profile-greeting-sub) .profile-v2-card { border-radius: 22px; }
#profile-content:has(.profile-greeting-sub) .profile-v2-card > .list-row { position: relative; gap: 14px; }
#profile-content:has(.profile-greeting-sub) .profile-v2-card .list-row__title { font-size: 15px; font-weight: 500; color: var(--ink); }
#profile-content:has(.profile-greeting-sub) .profile-v2-card .list-row__chev { color: var(--copper); opacity: 0.75; display: flex; }
#profile-content:has(.profile-greeting-sub) .profile-v2-card .list-row__chev svg { width: 18px; height: 18px; }
/* Scheidingslijn tussen rijen, ingesprongen tot na de icoonzone */
#profile-content:has(.profile-greeting-sub) .profile-v2-card > * + .list-row::before {
  content: ""; position: absolute; top: 0; left: 72px; right: 16px;
  height: 1px; background: var(--line); pointer-events: none;
}
/* Druk-feedback op klikbare rijen (laag erboven; inline background blijft) */
#profile-content:has(.profile-greeting-sub) .profile-v2-card > button.list-row::after {
  content: ""; position: absolute; inset: 0; background: var(--copper-mist);
  opacity: 0; transition: opacity var(--dur-fast) ease; pointer-events: none; mix-blend-mode: multiply;
}
[data-theme="dark"] #profile-content:has(.profile-greeting-sub) .profile-v2-card > button.list-row::after { mix-blend-mode: screen; }
#profile-content:has(.profile-greeting-sub) .profile-v2-card > button.list-row:active::after { opacity: 0.55; }

/* ---- Flash Deal: iets actiever dan een gewone kaart, binnen de huisstijl ---- */
#profile-content:has(.profile-greeting-sub) .profile-v2-card:has(#btn-go-flash-deals) {
  border-color: color-mix(in srgb, var(--copper) 30%, transparent);
  background: linear-gradient(135deg, var(--copper-mist) 0%, var(--surface) 72%);
}
#profile-content:has(.profile-greeting-sub) #btn-go-flash-deals .list-row__icon {
  background: var(--copper-dark); color: var(--surface);
  box-shadow: 0 6px 14px -8px rgba(95, 59, 31, 0.6);
}
#profile-content:has(.profile-greeting-sub) #btn-go-flash-deals .list-row__title { font-weight: 700; }
#profile-content:has(.profile-greeting-sub) #btn-go-flash-deals .list-row__sub { color: var(--copper-dark); font-weight: 500; }

/* ---- Afmelden ---- */
#profile-content:has(.profile-greeting-sub) .profile-v2-danger .list-row__title { color: var(--danger); }

/* ---- Help & Juridisch: rustig, op het ritme van de rest ---- */
#profile-content:has(.profile-greeting-sub) .profile-help-legal-row { border-radius: 12px; transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease; }

/* ==========================================================================
   Premium Edition — fase 3: Presentatie-editor (horeca)
   Uitsluitend visueel, volledig gescoped op #restaurant-profile-edit-content.
   Geen wrappers toegevoegd. De kortingsbadge-rijen worden via CSS als één
   kaart getekend (clip-path knipt de schaduw aan de naden weg); de
   inhoudsonderdelen, Menukaart en Plattegrond zijn elk een eigen kaart.
   Enkel de bestaande "Bewerken ›"-knoppen blijven klikbaar.
   ========================================================================== */

#restaurant-profile-edit-content .presentation-intro { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 22px; }
#restaurant-profile-edit-content > .section { margin-bottom: 26px; }
#restaurant-profile-edit-content > .section .flex-between.mb-8 { margin-bottom: 10px; padding: 0 4px; }

/* ---- Foto's ---- */
#restaurant-profile-edit-content .hero-photo-edit { border-radius: 22px; box-shadow: var(--card-shadow); }
#restaurant-profile-edit-content .photo-grid__item { border-radius: 14px; }
#restaurant-profile-edit-content .photo-grid__item:not(.photo-grid__add) { box-shadow: var(--card-shadow); }
#restaurant-profile-edit-content .photo-grid__add svg { width: 30px; height: 30px; }
#restaurant-profile-edit-content .photo-grid__add { border-color: color-mix(in srgb, var(--copper) 35%, transparent); background: var(--surface-soft); color: var(--copper); }

/* ---- Editor-rijen: gemeenschappelijke kaartstijl ---- */
#restaurant-profile-edit-content > .field.flex-between:has(#biz-short-intro-summary-btn),
#restaurant-profile-edit-content > .field.flex-between:has(#biz-description-summary-btn),
#restaurant-profile-edit-content > .field.flex-between:has(> label[data-i18n="deal_more_title"]),
#restaurant-profile-edit-content > .field.flex-between:has(#biz-highlights-summary-btn),
#restaurant-profile-edit-content > .field.flex-between:has(#biz-terms-summary-btn),
#restaurant-profile-edit-content > .field.flex-between:has(#biz-menu-summary-btn),
#restaurant-profile-edit-content > .field:has(#btn-open-floorplan-editor),
#restaurant-profile-edit-content #discount-badge-config-wrap > .field.flex-between,
#restaurant-profile-edit-content #discount-badge-config-wrap > .field:not(.flex-between),
#restaurant-profile-edit-content #discount-badge-config-wrap > p.muted {
  position: relative;
  margin: 0;
  background: var(--surface);
  border-left: 1px solid var(--card-border);
  border-right: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}
#restaurant-profile-edit-content > .field.flex-between:has(#biz-short-intro-summary-btn),#restaurant-profile-edit-content > .field.flex-between:has(#biz-description-summary-btn),#restaurant-profile-edit-content > .field.flex-between:has(> label[data-i18n="deal_more_title"]),#restaurant-profile-edit-content > .field.flex-between:has(#biz-highlights-summary-btn),#restaurant-profile-edit-content > .field.flex-between:has(#biz-terms-summary-btn),#restaurant-profile-edit-content > .field.flex-between:has(#biz-menu-summary-btn),#restaurant-profile-edit-content #discount-badge-config-wrap > .field.flex-between {
  min-height: 58px; padding: 9px 10px 9px 18px; gap: 12px;
}
#restaurant-profile-edit-content #discount-badge-config-wrap > .field:not(.flex-between) { padding: 4px 18px 14px; }
#restaurant-profile-edit-content #discount-badge-config-wrap > p.muted { padding: 0 18px 16px; }
#restaurant-profile-edit-content > .field:has(#btn-open-floorplan-editor) { padding: 0; }

/* Kortingsbadge: één kaart over drie rijen (eerste / midden / laatste) */
#restaurant-profile-edit-content #discount-badge-config-wrap > .field.flex-between {
  border-top: 1px solid var(--card-border);
  border-radius: 22px 22px 0 0;
  clip-path: inset(-40px -40px 0 -40px);
}
#restaurant-profile-edit-content #discount-badge-config-wrap > .field:not(.flex-between) { clip-path: inset(0 -40px 0 -40px); }
#restaurant-profile-edit-content #discount-badge-config-wrap > p.muted {
  border-bottom: 1px solid var(--card-border);
  border-radius: 0 0 22px 22px;
  clip-path: inset(0 -40px -40px -40px);
  margin-bottom: 26px;
}

/* In het kort, Beschrijving, Meer over deze deal, Highlights, Voorwaarden,
   Menukaart en Plattegrond: elk een eigen, rondom afgeronde kaart met 12px
   tussenruimte; 26px na Menukaart (vóór Plattegrond) en na Plattegrond. */
#restaurant-profile-edit-content > .field.flex-between:has(#biz-short-intro-summary-btn),
#restaurant-profile-edit-content > .field.flex-between:has(#biz-description-summary-btn),
#restaurant-profile-edit-content > .field.flex-between:has(> label[data-i18n="deal_more_title"]),
#restaurant-profile-edit-content > .field.flex-between:has(#biz-highlights-summary-btn),
#restaurant-profile-edit-content > .field.flex-between:has(#biz-terms-summary-btn),
#restaurant-profile-edit-content > .field.flex-between:has(#biz-menu-summary-btn),
#restaurant-profile-edit-content > .field:has(#btn-open-floorplan-editor) {
  border: 1px solid var(--card-border);
  border-radius: 22px;
  margin-bottom: 12px;
}
#restaurant-profile-edit-content > .field.flex-between:has(#biz-menu-summary-btn),
#restaurant-profile-edit-content > .field:has(#btn-open-floorplan-editor) { margin-bottom: 26px; }

/* rijtitels (bestaande labels) */
#restaurant-profile-edit-content > .field.flex-between:has(#biz-short-intro-summary-btn) > label,#restaurant-profile-edit-content > .field.flex-between:has(#biz-description-summary-btn) > label,#restaurant-profile-edit-content > .field.flex-between:has(> label[data-i18n="deal_more_title"]) > label,#restaurant-profile-edit-content > .field.flex-between:has(#biz-highlights-summary-btn) > label,#restaurant-profile-edit-content > .field.flex-between:has(#biz-terms-summary-btn) > label,#restaurant-profile-edit-content > .field.flex-between:has(#biz-menu-summary-btn) > label,#restaurant-profile-edit-content #discount-badge-config-wrap > .field.flex-between > label {
  font-size: 15px; font-weight: 500; color: var(--ink); letter-spacing: 0;
}
#restaurant-profile-edit-content #discount-badge-config-wrap > .field:not(.flex-between) > label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
#restaurant-profile-edit-content #discount-badge-config-wrap > .field:not(.flex-between) input { background: var(--surface-soft); border-radius: 12px; }
#restaurant-profile-edit-content > .field.flex-between:has(> label[data-i18n="deal_more_title"]) > .muted { padding-right: 8px; }

/* ---- "Bewerken ›": koper, rustige pil, subtiele druk-feedback ---- */
#restaurant-profile-edit-content #biz-short-intro-summary-btn, #restaurant-profile-edit-content #biz-description-summary-btn, #restaurant-profile-edit-content #biz-deal-desc-summary-btn, #restaurant-profile-edit-content #biz-highlights-summary-btn, #restaurant-profile-edit-content #biz-terms-summary-btn, #restaurant-profile-edit-content #biz-menu-summary-btn {
  height: 36px; padding: 0 8px 0 14px; gap: 2px;
  border-radius: var(--radius-pill);
  color: var(--copper-dark); font-size: 13.5px; font-weight: 600;
  transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-fast);
}
#restaurant-profile-edit-content #biz-short-intro-summary-btn svg, #restaurant-profile-edit-content #biz-description-summary-btn svg, #restaurant-profile-edit-content #biz-deal-desc-summary-btn svg, #restaurant-profile-edit-content #biz-highlights-summary-btn svg, #restaurant-profile-edit-content #biz-terms-summary-btn svg, #restaurant-profile-edit-content #biz-menu-summary-btn svg { width: 16px; height: 16px; }
#restaurant-profile-edit-content #biz-short-intro-summary-btn:active, #restaurant-profile-edit-content #biz-description-summary-btn:active, #restaurant-profile-edit-content #biz-deal-desc-summary-btn:active, #restaurant-profile-edit-content #biz-highlights-summary-btn:active, #restaurant-profile-edit-content #biz-terms-summary-btn:active, #restaurant-profile-edit-content #biz-menu-summary-btn:active {
  background: var(--copper-mist); transform: scale(0.97);
}

/* ---- Plattegrond: eigen, rondom afgeronde kaart.
   De knop heeft een inline rand/hoek/padding (kaart-in-kaart); die worden
   hier — enkel voor deze ene knop — visueel geneutraliseerd. ---- */
#restaurant-profile-edit-content #btn-open-floorplan-editor {
  border: 0 !important; border-radius: 22px !important;
  padding: 14px 12px 14px 18px !important;
  transition: background-color var(--dur-fast) ease;
}
#restaurant-profile-edit-content #btn-open-floorplan-editor:active { background-color: var(--surface-alt) !important; }
#restaurant-profile-edit-content #btn-open-floorplan-editor .list-row__title { font-size: 15px; font-weight: 500; }
#restaurant-profile-edit-content #btn-open-floorplan-editor .list-row__sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
#restaurant-profile-edit-content #btn-open-floorplan-editor .list-row__chev { color: var(--copper-dark); }
#restaurant-profile-edit-content #btn-open-floorplan-editor .list-row__chev svg { width: 18px; height: 18px; }

/* ---- Bekijk zoals klanten jouw restaurant zien: rustige secundaire actie ---- */
#restaurant-profile-edit-content #btn-preview-restaurant {
  height: 50px; border-radius: 16px;
  background: var(--surface); color: var(--copper-deep);
  box-shadow: inset 0 0 0 1px var(--card-border), var(--card-shadow);
}
#restaurant-profile-edit-content #btn-preview-restaurant svg { color: var(--copper); }
#restaurant-profile-edit-content #btn-preview-restaurant:active { box-shadow: inset 0 0 0 1px var(--card-border), var(--card-shadow-pressed); }

/* ---- Wijzigingen opslaan: de primaire actie ---- */
#restaurant-profile-edit-content .presentation-save-hint { margin: 6px 0 12px; }
#restaurant-profile-edit-content #btn-save-restaurant-profile { height: 54px; border-radius: 16px; font-size: 15.5px; letter-spacing: 0.01em; }

/* ---- Download de app (Home, website, alleen bezoekers zonder login) ----
   Zie appDownloadHtml() in js/customer.js. Lichte crèmekaart met koperen
   accenten; beeld: het bestaande ontwerp assets/achtergronden/menu-kleur.webp
   (ongewijzigd, alleen bijgesneden met background-position).
   - Smartphone/tablet (< 1024 px): compacte strook bovenaan Home: titel en
     korte omschrijving links, foto met de gsm rechts, knop over de volle
     breedte eronder.
   - Desktop (>= 1024 px): Home krijgt bovenaan twee kolommen, ALLEEN als
     deze sectie er is (:has). Links blijven seizoensbanner, begroeting,
     zoekbalk en filters; rechts staat de kaart. Sociale iconen, Flash Deals
     en alle restaurantlijsten blijven over de volle breedte. Voor ingelogde
     klanten (geen sectie) verandert er niets.
   Bewust geen .display/.eyebrow/.muted-klassen: de leesbaarheidsregels van
   site-backgrounds.css gelden hier niet. Kleuren via bestaande tokens, zodat
   ook de donkere modus klopt. */
.app-dl {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  column-gap: 14px;
  align-items: start;
  margin: 2px 0 18px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-soft) 55%, var(--copper-mist) 100%);
  box-shadow: var(--card-shadow);
  color: var(--ink);
}
.app-dl__body { display: contents; }
.app-dl__media {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: stretch;
  min-height: 112px;
  border-radius: 14px;
  background: var(--copper-mist) url("../assets/achtergronden/menu-kleur.webp") 31% 42% / auto 160% no-repeat;
  box-shadow: inset 0 0 0 1px var(--card-border);
}
.app-dl__title {
  grid-column: 1; grid-row: 1;
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.app-dl__accent { color: var(--copper-dark); }
.app-dl__text { grid-column: 1; grid-row: 2; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.app-dl__btn {
  grid-column: 1 / -1; grid-row: 3;
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 50px; margin-top: 14px;
  padding: 0 16px 0 18px;
  border: 1px solid rgba(95, 59, 31, 0.25);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #9C6838 0%, #8A5A31 100%);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 16px; font-weight: 700; letter-spacing: 0.005em;
  box-shadow: 0 10px 22px -12px rgba(95, 59, 31, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease-fast), transform var(--dur-fast) var(--ease-fast);
}
.app-dl__btn:hover { filter: brightness(1.08); }
.app-dl__btn:active { transform: translateY(1px); }
.app-dl__btn:focus-visible { outline: 3px solid var(--copper-light); outline-offset: 3px; }
.app-dl__btn-icon { width: 22px; height: 22px; flex: none; }
.app-dl__btn-label { flex: 1; text-align: center; }
.app-dl__btn-chev { display: flex; flex: none; }
.app-dl__btn-chev svg { width: 20px; height: 20px; }
.app-dl__note { display: none; }
.app-dl-steps { margin: 14px 0 8px; padding-left: 20px; }
.app-dl-steps li { margin-bottom: 10px; line-height: 1.5; }
.app-dl-steps__soon { font-size: 13px; }

@media (min-width: 768px) {
  .app-dl { grid-template-columns: minmax(0, 1fr) 132px; column-gap: 20px; padding: 20px 22px; }
  .app-dl__media { min-height: 132px; }
  .app-dl__title { font-size: 23px; }
  .app-dl__text { font-size: 13.5px; }
  .app-dl__btn { max-width: 420px; }
}

@media (min-width: 1024px) {
  /* Twee kolommen bovenaan Home, alleen wanneer de downloadkaart er is.
     Rij 1: sociale iconen (volle breedte). Rijen 2–6: linkerkolom
     (seizoensbanner, begroeting, zoekbalk, filters, gekozen stad);
     rij 7 vangt een eventueel hoogteverschil op, zodat er tussen de
     linkerelementen geen gaten ontstaan. Daarna alles weer volle breedte. */
  #discover-content:has(> .app-dl) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    grid-template-rows: auto auto auto auto auto auto 1fr;
    column-gap: 32px;
    align-items: start;
  }
  #discover-content:has(> .app-dl) > * { grid-column: 1 / -1; }
  #discover-content:has(> .app-dl) > .social-icon-row { grid-row: 1; }
  #discover-content:has(> .app-dl) > :is(.season-banner, .section:has(> .eyebrow), .search-bar, .chip-row, #btn-clear-city) { grid-column: 1; }
  #discover-content:has(> .app-dl) > #btn-clear-city { justify-self: start; }

  .app-dl {
    grid-column: 2 !important; grid-row: 2 / 8;
    display: block;
    margin: 8px 0 22px;
    padding: 28px 26px 24px;
    min-height: 300px;
  }
  .app-dl__body { display: block; position: relative; z-index: 1; width: 58%; }
  .app-dl__media {
    position: absolute; top: 0; right: 0; bottom: 0; width: 48%;
    min-height: 0; border-radius: 0; box-shadow: none;
    background: url("../assets/achtergronden/menu-kleur.webp") 31% 50% / auto 118% no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
  }
  .app-dl__title { font-size: 27px; margin-bottom: 12px; }
  .app-dl__text { font-size: 14px; margin-bottom: 20px; }
  .app-dl__btn { width: auto; min-width: 260px; max-width: none; min-height: 54px; margin-top: 0; font-size: 16.5px; }
  .app-dl__note { display: block; margin: 12px 0 0; font-size: 12px; color: var(--ink-soft); }
}

/* ---- Small responsive tweak ---- */
@media (max-width: 360px) {
  .role-pick { flex-direction: column; }
}

/* ---- Websitefooter (addWebFooter in app.js) ----
   Alleen op de website; in de native app bestaat het element niet. Staat
   in de gewone paginastroom onder het actieve scherm (geen vaste positie)
   en verandert niets aan de schermen zelf. Onderaan dezelfde ruimte als
   de schermen al voor de navigatiecapsule reserveren; vanaf 1024 px is er
   geen capsule. Niet zichtbaar vóór het eerste scherm, op schermen zonder
   kopbalk (introductie, inloggen, registreren, juridisch, …), op de kaart
   en op de scanner. De footer op het inlogscherm (.auth-footer) staat hier
   los van. Uitsluitend bestaande kleuren. */
.site-footer {
  text-align: center;
  padding: 24px 18px calc(var(--tabbar-h) + var(--safe-bottom) + 12px);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--copper-dark);
}
.site-footer__links,
.site-footer__meta { margin: 0 0 4px; }
.site-footer__credit { margin: 0; }
.site-footer__links a,
.site-footer__meta > span:not(.site-footer__sep) { display: inline-block; }
.site-footer__links a {
  padding: 2px 0;
  font-weight: 600;
  color: var(--copper-dark);
  text-decoration: none;
  transition: color 0.15s ease;
}
.site-footer__links a:hover,
.site-footer__links a:focus-visible { color: var(--copper-deep); text-decoration: underline; }
.site-footer__sep { margin: 0 7px; color: var(--copper); }
@media (min-width: 1024px) {
  .site-footer { padding-bottom: 32px; }
}
/* Verbergen. Bewust drie aparte regels: een browser die :has() niet kent
   (ouder dan Safari 15.4 / Firefox 121) negeert alleen de derde regel;
   de eerste twee werken overal. De tweede noemt de schermen zonder
   kopbalk (data-chrome="none" in index.html) letterlijk; de derde vangt
   een later toegevoegd scherm zonder kopbalk automatisch op. */
body:not([data-screen]) #site-footer { display: none; }
body[data-screen="map"] #site-footer,
body[data-screen="scanner"] #site-footer,
body[data-screen="onboarding"] #site-footer,
body[data-screen="login"] #site-footer,
body[data-screen="register-choice"] #site-footer,
body[data-screen="register-customer"] #site-footer,
body[data-screen="register-business"] #site-footer,
body[data-screen="verify-email"] #site-footer,
body[data-screen="restaurant-detail"] #site-footer,
body[data-screen="reserve"] #site-footer,
body[data-screen="notifications"] #site-footer,
body[data-screen="restaurant-menu"] #site-footer,
body[data-screen="legal"] #site-footer { display: none; }
body:has(.screen.is-active[data-chrome="none"]) #site-footer { display: none; }
/* Leesbaarheid op de websiteachtergronden: dezelfde zachte crème gloed
   als de titels daar (site-backgrounds.css). */
body[data-site-bg] #site-footer {
  text-shadow:
    0 0 1px var(--cream), 0 0 2px var(--cream), 0 0 3px var(--cream),
    0 0 6px var(--cream), 0 0 12px rgba(251, 247, 241, 0.9),
    0 0 22px rgba(251, 247, 241, 0.7);
}