/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Kleuren ──────────────────────────────────────────────────────────
   Alles is afgeleid van de wandkleur in de salon: Perfection mat
   "macaron 83". Dat is een pastel, dus te licht voor knoppen en tekst
   (witte letters erop zijn onleesbaar). Daarom staat macaron zelf op de
   grote vlakken en randen, en is --rose dezelfde kleurtoon maar dieper,
   voor alles waar je op klikt of leest.

   Klopt de tint niet helemaal met je verfblik? Pas --macaron aan en
   daarna --rose-light; die twee horen dezelfde kleur te zijn.
   ────────────────────────────────────────────────────────────────── */
:root {
  --macaron:   #f4cfd8;   /* de wandkleur uit de salon */
  --rose:      #a55065;   /* zelfde tint, dieper: knoppen, links, labels */
  --rose-dark: #863c4e;   /* aanwijzen/hover */
  --rose-light:#f4cfd8;   /* = macaron */
  --rose-pale: #fdf4f6;   /* macaron, heel licht uitgewassen */
  --macaron-wash: #faebee; /* macaron als zacht vlak, voor hele secties */
  --brown:     #2e1a21;
  --brown-mid: #59353f;
  --muted:     #80626b;
  --border:    #f0dbe1;
  --white:     #ffffff;
  --bg:        #fdfafb;
  --card:      #ffffff;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Inter', ui-sans-serif, system-ui, sans-serif;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --shadow-sm: 0 2px 12px rgba(140,70,95,.07);
  --shadow-md: 0 8px 40px rgba(140,70,95,.10);
  --shadow-lg: 0 24px 80px rgba(140,70,95,.13);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--brown);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ===== UTILITIES ===== */
.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--rose);
  margin-bottom: 10px;
}
.centered { text-align: center; }
.optional { font-weight: 400; color: var(--muted); font-size: .88em; }
.hidden { display: none !important; }
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-md);
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, background .18s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--rose);
  color: #fff;
  box-shadow: 0 8px 28px rgba(200,120,114,.32);
}
.btn-primary:hover { background: var(--rose-dark); box-shadow: 0 12px 36px rgba(200,120,114,.42); }
.btn-ghost {
  background: transparent;
  color: var(--brown);
  border: 1.5px solid var(--border);
  box-shadow: none;
}
.btn-ghost:hover { border-color: var(--rose); color: var(--rose); }
.btn-sm { padding: 10px 18px; font-size: .88rem; }
.btn-full { width: 100%; }

/* ===== HEADER ===== */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 6vw;
  background: rgba(253,250,249,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.header.scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.header-logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.header-nav a:not(.btn) {
  font-size: .92rem;
  font-weight: 500;
  color: var(--brown-mid);
  transition: color .18s;
}
.header-nav a:not(.btn):hover { color: var(--rose); }

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--brown);
  border-radius: 2px;
  transition: .25s;
}

/* Mobile nav overlay */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(253,250,249,.97);
  backdrop-filter: blur(20px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.mobile-nav a {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  color: var(--brown);
  font-weight: 600;
}
.mobile-nav a:hover { color: var(--rose); }
body.nav-open .mobile-nav { display: flex; }
body.nav-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 90px 6vw 60px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 88% 55%, #f2c4d0 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 8%  70%, #fadfe6 0%, transparent 50%),
    radial-gradient(ellipse 35% 40% at 55% 10%, #fbe7ed 0%, transparent 50%),
    radial-gradient(ellipse 30% 30% at 20% 15%, #fdf1f4 0%, transparent 55%),
    linear-gradient(155deg, #fdf6f8 0%, #fdfafb 55%, #fdf7f9 100%);
  z-index: 0;
}
.hero-bg::after {
  content: '';
  position: absolute;
  right: 4%;
  top: 10%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,120,114,.13) 0%, transparent 65%);
  pointer-events: none;
}
.hero-bg::before {
  content: '';
  position: absolute;
  left: 2%;
  bottom: 8%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,120,114,.08) 0%, transparent 65%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.hero-logo-wrap {
  display: flex;
  justify-content: center;
}
.hero-logo {
  width: min(520px, 90%);
  border-radius: 50%;
  filter: drop-shadow(0 32px 64px rgba(150,80,105,.2));
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--brown);
  margin: 6px 0 4px;
}
.hero-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  color: var(--rose);
  margin-bottom: 20px;
}
.hero-lead {
  font-size: 1.05rem;
  color: var(--brown-mid);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 32px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero feature pills */
.hero-feats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.hero-feats span {
  font-size: .85rem;
  font-weight: 600;
  color: var(--brown-mid);
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-feats span::before { content: none; }

/* Decoratieve zwevende elementen */
.deco {
  position: absolute;
  color: var(--rose);
  pointer-events: none;
  z-index: 0;
  font-weight: 400;
  animation: floatDeco 7s ease-in-out infinite;
}
.deco-1 { top: 12%; left: 42%; font-size: 1.8rem; opacity: .25; animation-delay: 0s; }
.deco-2 { top: 72%; right: 8%; font-size: 1.2rem; opacity: .2;  animation-delay: 2s; }
.deco-3 { top: 20%; right: 20%; font-size: 1.4rem; opacity: .22; animation-delay: 1s; }
.deco-4 { bottom: 18%; left: 28%; font-size: .9rem; opacity: .18; animation-delay: 3s; }
@keyframes floatDeco {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-14px) rotate(15deg); }
}

.hero-scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1;
}
.hero-scroll-hint span { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--rose), transparent);
  animation: scrollpulse 2s ease-in-out infinite;
}
@keyframes scrollpulse { 0%,100%{opacity:.3} 50%{opacity:1} }

/* ===== CONTACT STRIP ===== */
.contact-strip-section {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0 6vw;
}
.contact-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1000px;
  margin: 0 auto;
}
.contact-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px 16px;
  font-size: .93rem;
  color: var(--brown-mid);
  font-weight: 500;
  border-right: 1px solid var(--border);
  transition: color .18s;
}
.contact-item:last-child { border-right: none; }
a.contact-item:hover { color: var(--rose); }
.contact-icon {
  font-size: 1.3rem;
  color: var(--rose);
  flex-shrink: 0;
}

/* ===== SECTIONS ===== */
.section { padding: 96px 6vw; }

.section-header { margin-bottom: 56px; }
.section-header h2 {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 16px;
}
.section-desc { color: var(--muted); font-size: 1.05rem; max-width: 560px; margin: 0 auto; }

/* ===== OVER ONS ===== */
.over-section { background: var(--white); }
.over-grid {
  display: grid;
  grid-template-columns: 1fr .65fr;
  gap: 80px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.over-text h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 20px;
}
.lead-text {
  font-size: 1.08rem;
  color: var(--brown-mid);
  line-height: 1.75;
  margin-bottom: 16px;
}
.over-text p { color: var(--brown-mid); margin-bottom: 24px; }
.promise-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-top: 4px;
}
.promise-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: var(--brown);
}
.promise-list li::before {
  content: '✦';
  color: var(--rose);
  font-size: .7rem;
  flex-shrink: 0;
}
.over-card {
  background: linear-gradient(160deg, #fdf7f9 0%, #fff 60%, #f8dde5 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.over-card-logo img {
  width: 200px;
  border-radius: 50%;
  margin: 0 auto 32px;
  filter: drop-shadow(0 12px 30px rgba(150,80,105,.15));
}
.over-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.stat {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.stat-num { font-family: var(--font-serif); font-size: 2rem; font-weight: 600; color: var(--rose); }
.stat-label { font-size: .8rem; color: var(--muted); text-align: center; }
/* Gelijke padding boven en onder, anders staat de inhoud niet gecentreerd */
.stat-full { grid-column: 1 / -1; border-top: 1px solid var(--border); padding: 16px 12px; flex-direction: row; gap: 10px; justify-content: center; align-items: center; overflow: hidden; }
.stat-full .stat-num { display: flex; align-items: center; }
.stat-full .stat-num { font-size: 1.1rem; white-space: nowrap; }
.stat-full .stat-label { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 820px) {
  .over-card-stats { grid-template-columns: 1fr 1fr; max-width: 420px; margin: 0 auto; }
  .stat { padding: 14px 10px; }
  .stat-num { font-size: 1.5rem; }
}

/* ===== VERWIJSACTIE ===== */
.referral-section {
  background: linear-gradient(135deg, var(--rose-dark) 0%, var(--rose) 100%);
  padding: 48px 5vw;
}
.referral-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
}
.referral-badge {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
}
.referral-text { flex: 1; }
.referral-text h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}
.referral-text p { color: rgba(255,255,255,.88); line-height: 1.6; font-size: .95rem; }
.referral-text strong { color: #fff; }
.referral-btn {
  flex-shrink: 0;
  background: #fff !important;
  color: var(--rose-dark) !important;
  border-color: #fff !important;
  white-space: nowrap;
}
.referral-btn:hover { background: var(--rose-pale) !important; }

@media (max-width: 700px) {
  .referral-inner { flex-direction: column; text-align: center; gap: 20px; }
  .referral-btn { width: 100%; max-width: 300px; }
}

/* ===== DIENSTEN ===== */
.diensten-section { background: var(--macaron-wash); }
/* Twee kolommen in rijen, zodat de categoriekoppen links en rechts op
   dezelfde hoogte staan. Een rij wordt zo hoog als het langste blok erin,
   dus de volgorde in de HTML is bewust gekozen: blokken van gelijke hoogte
   staan naast elkaar en de langste van een paar links. Voeg je een regel
   toe of haal je er een weg, kijk dan of de paren nog kloppen. */
/* Twee kolommen, zodat de categoriekoppen naast elkaar op dezelfde hoogte
   beginnen. Een rij wordt zo hoog als het langste blok erin, dus de blokken
   staan in index.html per twee gekoppeld op hoogte: het langste van elk
   paar links, het kortste rechts. Zo valt de restruimte altijd rechts en
   blijft het gat zo klein mogelijk. Verander je de volgorde of het aantal
   regels in een categorie, kijk dan even of dat nog uitkomt. */
.price-categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
}
.price-category h3.category-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--brown);
  margin-bottom: 16px;
  padding-left: 4px;
}
.category-note {
  font-size: .75em;
  font-weight: 400;
  color: var(--muted);
}
/* Toelichting onder een categoriekop in de prijslijst */
.category-uitleg {
  margin: -10px 0 14px;
  padding-left: 12px;
  border-left: 3px solid var(--macaron);
  font-size: .85rem;
  line-height: 1.55;
  color: var(--muted);
}
.category-uitleg a { color: var(--rose); text-decoration: underline; text-underline-offset: 3px; }
.price-table {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.price-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.price-row:last-child { border-bottom: none; }
.price-head {
  background: linear-gradient(90deg, #e8bdb8, #d99a95);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 10px 20px;
}
.price-row-link {
  cursor: pointer;
  transition: background .15s;
}
.price-row-link:hover { background: #fff5f4; }
.price-row-link:hover .service-name { color: var(--rose); }
.service-name { font-weight: 600; font-size: .95rem; color: var(--brown); transition: color .15s; }
.service-dur { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.service-price { font-weight: 700; color: var(--rose); white-space: nowrap; text-align: right; }

/* ===== BOEKEN ===== */
.boeken-section { background: var(--white); }
.boeken-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 64px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
.boeken-info h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 16px;
}
.boeken-info > p { color: var(--muted); margin-bottom: 36px; line-height: 1.7; }
.boeken-contact { display: grid; gap: 16px; }
.boeken-contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--rose-pale);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color .18s, box-shadow .18s;
}
a.boeken-contact-item:hover { border-color: var(--rose); box-shadow: var(--shadow-sm); }
.boeken-contact-item .contact-icon { font-size: 1.5rem; color: var(--rose); flex-shrink: 0; }
.boeken-contact-item div { display: flex; flex-direction: column; gap: 2px; }
.boeken-contact-item strong { font-size: .88rem; font-weight: 700; color: var(--brown); }
.boeken-contact-item span { font-size: .9rem; color: var(--muted); }

/* Booking form */
.booking-form h3 {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--brown);
  margin-bottom: 28px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 18px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-field label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--brown);
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: .95rem;
  color: var(--brown);
  background: #fdfafb;
  transition: border-color .18s, box-shadow .18s;
  outline: none;
  appearance: none;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(200,120,114,.12);
  background: #fff;
}
.form-field textarea { min-height: 96px; resize: vertical; }
.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c87872' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

.booking-success {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 20px;
  padding: 20px 22px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: var(--radius-md);
  color: #065f46;
}
.success-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #a7f3d0;
  display: grid;
  place-items: center;
  font-weight: 900;
  flex-shrink: 0;
}
.booking-success strong { display: block; margin-bottom: 4px; }
.booking-success p { margin: 0; font-size: .9rem; opacity: .85; }

/* ===== FOOTER ===== */
.footer {
  background: var(--brown);
  color: #e9d6dc;
  padding: 64px 6vw 0;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-logo {
  height: 80px;
  width: auto;
  margin-bottom: 12px;
  border-radius: 50%;
  opacity: .9;
}
.footer-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--rose-light);
}
.footer-links, .footer-contact, .footer-social {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-links strong, .footer-contact strong, .footer-social strong {
  color: #fff;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 4px;
}
.footer-links a, .footer-contact a, .footer-contact span, .footer-social a {
  font-size: .92rem;
  color: #c9adb5;
  transition: color .18s;
}
.footer-links a:hover, .footer-contact a:hover, .footer-social a:hover { color: var(--rose-light); }
.insta-link { display: flex; align-items: center; gap: 8px; }
.insta-link svg { flex-shrink: 0; }
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  font-size: .84rem;
  color: #7a5f68;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .price-categories { grid-template-columns: 1fr; }
  .over-grid { grid-template-columns: 1fr; gap: 48px; }
  .over-visual { order: -1; }
  .over-card { max-width: 480px; margin: 0 auto; }
  .over-text { text-align: center; }
  .over-text h2 { text-align: center; }
  .promise-list { display: inline-grid; text-align: left; }
  .over-text .btn { display: block; width: fit-content; margin: 0 auto; }
}

@media (max-width: 820px) {
  .header-nav { display: none; }
  .menu-toggle { display: flex; }

  /* De account- en wachtwoordpagina hebben geen hamburgermenu, dus daar
     moet de navigatie blijven staan. Anders is Uitloggen op een telefoon
     nergens meer te vinden. De losse tekstlink en het label van de
     instellingenknop gaan eruit om ruimte te maken. */
  .account-page .header-nav { display: flex; gap: 10px; }
  .account-page .nav-hide-sm { display: none; }
  .account-page .btn-icoon-tekst { display: none; }
  .account-page .btn-met-icoon { padding-left: 13px; padding-right: 13px; }

  .hero { padding: 90px 5vw 80px; }
  .hero-content { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .hero-logo-wrap { order: -1; }
  .hero-logo { width: min(220px, 55vw); }
  .hero-actions { justify-content: center; }
  .hero-lead { margin: 0 auto 24px; font-size: .95rem; }
  .hero-feats { justify-content: center; gap: 12px; margin-top: 20px; }
  /* Scroll hint op mobiel: genoeg ruimte onderaan hero zodat absolute hint zichtbaar is */
  .hero { padding-bottom: 100px; }

  .contact-strip { grid-template-columns: 1fr; }
  .contact-item { border-right: none; border-bottom: 1px solid var(--border); padding: 16px; justify-content: flex-start; }
  .contact-item:last-child { border-bottom: none; }

  .boeken-grid { grid-template-columns: 1fr; gap: 48px; }
  .form-row { grid-template-columns: 1fr; }

  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }

  .section { padding: 56px 5vw; }
  .panel { padding: 24px 16px; }
}

@media (max-width: 480px) {
  .hero { padding: 80px 5vw 130px; }

  /* Feats als nette lijst onder elkaar */
  .hero-feats { flex-direction: column; align-items: center; gap: 8px; }
  .hero-feats span { font-size: .82rem; }

  /* Hero tekst kleiner op klein scherm */
  .hero-lead { font-size: .9rem; }
  .hero-tagline { font-size: 1rem; }

  /* Knoppen full-width op mobiel */
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 300px; margin: 0 auto; }

  .price-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 12px;
    padding: 14px 16px;
    align-items: center;
  }
  .service-name  { grid-column: 1; grid-row: 1; }
  .service-dur   { grid-column: 1; grid-row: 2; }
  .service-price { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 1rem; }
  .price-head { display: none; }

  /* Footer volledig onder elkaar op kleine schermen */
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }

  /* Email adres niet buiten het scherm */
  .bci span, .footer-contact a { word-break: break-all; }

  /* Betaalopties naast elkaar blijven maar kleiner */
  .pay-opts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pay-opt { padding: 16px 10px; }
}

/* ===== BOOKING WIDGET ===== */

/* Layout */
.boeken-outer {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 64px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
.boeken-info h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 16px;
}
.boeken-info > p { color: var(--muted); margin-bottom: 28px; line-height: 1.7; }
.boeken-contacts { display: grid; gap: 12px; margin-bottom: 28px; }
.bci {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--border);
  transition: opacity .18s;
}
.bci:last-child { border-bottom: none; }
a.bci:hover { opacity: .68; }
.bci-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--rose-pale);
  border: 1px solid var(--border);
  color: var(--rose);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background .18s, border-color .18s;
}
a.bci:hover .bci-icon { background: var(--rose-light); border-color: var(--rose-light); }
.bci div { display: flex; flex-direction: column; gap: 1px; }
.bci strong { font-size: .82rem; font-weight: 600; color: var(--brown); }
.bci span   { font-size: .87rem; color: var(--muted); }

/* Waar de salon zit. Het adres mag bekend zijn, de precieze route binnen
   het complex krijgt de klant pas na het boeken. Het blok staat op een wit
   vlak, dus rose-pale was te licht om op te vallen — vandaar de wat diepere
   macaron-tint en dezelfde ronding als de andere kaarten. */
.locatie-blok {
  margin-top: 34px;
  padding: 24px 26px;
  background: var(--macaron-wash);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.locatie-kop {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
}
.locatie-icoon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--rose);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.locatie-blok h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--brown);
  margin: 0;
}
.locatie-blok p {
  font-size: .9rem;
  line-height: 1.7;
  color: var(--brown-mid);
  margin: 0;
}
.locatie-blok strong { color: var(--brown); font-weight: 700; }
/* De route is bijzaak naast het adres, dus een toontje zachter en met een
   scheidingslijntje ertussen. */
.locatie-blok .locatie-route {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
  font-size: .84rem;
  color: var(--muted);
}

/* Telefoonnotitie onder de kalender: als er geen passende datum of tijd
   tussen staat, kan de klant Anne direct bellen of appen om te schuiven. */
.call-note {
  background: var(--rose-pale);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 14px;
}
.call-note p { font-size: .87rem; color: var(--brown-mid); margin: 0; line-height: 1.6; }
.call-note a {
  font-weight: 700;
  color: var(--rose);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.call-note a:hover { color: var(--rose-dark); }

/* WhatsApp note */
.wa-note {
  display: flex; gap: 14px; align-items: flex-start;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-top: 4px;
}
.wa-icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; }
.wa-note p { font-size: .9rem; color: #065f46; margin: 0; line-height: 1.6; }

/* WhatsApp note onder submit knop */
.wa-note-inline {
  display: flex; gap: 10px; align-items: flex-start;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-top: 12px;
}
.wa-note-inline span { font-size: 1.2rem; flex-shrink: 0; line-height: 1.4; }
.wa-note-inline p { font-size: .88rem; color: #065f46; margin: 0; line-height: 1.6; }

/* Gallery horizontal scroll */
.gallery-section { padding: 48px 0; background: var(--white); }
.gallery-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 5vw 16px;
}
.gallery-scroll-wrap::-webkit-scrollbar { display: none; }
.gallery-scroll {
  display: flex;
  gap: 16px;
  width: max-content;
  margin: 0 auto;
}
.gallery-card {
  width: 260px;
  height: 340px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--rose-light);
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(140,70,95,.10);
}
.gallery-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.gallery-card:hover img { transform: scale(1.04); }

@media (max-width: 640px) {
  .gallery-card { width: 200px; height: 260px; }
}

/* Zo werkt het boeken */
.how-steps {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}
.how-steps-title {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--brown);
  margin: 0 0 24px;
}
.how-list { list-style: none; margin: 0; padding: 0; }
.how-step {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 18px;
  padding-bottom: 28px;
}
.how-step:last-child { padding-bottom: 0; }
.how-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 16.5px;
  top: 38px;
  bottom: 2px;
  width: 1px;
  background: var(--border);
}
.how-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--rose-light);
  color: var(--rose);
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  /* Cormorant gebruikt standaard mediëvale cijfers; die staan scheef
     in een rondje. Deze regel zet ze allemaal op gelijke hoogte. */
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
  line-height: 1;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}
.how-body { padding-top: 5px; }
.how-body strong {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  color: var(--brown);
  margin-bottom: 4px;
  letter-spacing: -.01em;
}
.how-body span {
  display: block;
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.6;
}

/* Panel & steps */
.booking-panel { padding: 32px; }
.bstep { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--border); }
.bstep:last-of-type { border-bottom: none; }
.bstep-hd {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.bstep-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--rose); color: #fff;
  display: grid; place-items: center;
  font-size: .82rem; font-weight: 800;
  flex-shrink: 0;
}
.bstep-hd h3 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--brown);
  margin: 0;
}

/* Required asterisk */
.req { color: var(--rose); font-weight: 700; margin-left: 2px; }

/* ── Treatment accordion ── */
.tc { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden; }
.tc-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px;
  background: var(--rose-pale);
  border: none; cursor: pointer; font-family: var(--font-sans);
  transition: background .15s;
  gap: 10px;
}
.tc-toggle:hover { background: var(--rose-light); }
.tc.open .tc-toggle { background: var(--rose-light); }
.tc-cat-name { font-size: .92rem; font-weight: 700; color: var(--brown); text-align: left; }
.tc-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tc-badge {
  background: var(--rose); color: #fff;
  font-size: .72rem; font-weight: 800;
  padding: 2px 8px; border-radius: 999px;
}
.tc-arrow {
  width: 18px; height: 18px; flex-shrink: 0;
  display: grid; place-items: center;
}
.tc-arrow::after {
  content: '›';
  font-size: 1.1rem; color: var(--rose); font-weight: 700;
  transition: transform .2s;
  display: block;
}
.tc.open .tc-arrow::after { transform: rotate(90deg); }

/* Body hidden/shown via class */
.tc-body { display: none; padding: 12px; background: #fff; }
.tc.open .tc-body { display: block; }

/* Toelichting boven de behandelingen van een categorie */
.tc-note {
  margin: 0 2px 10px;
  padding-left: 12px;
  border-left: 3px solid var(--macaron);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--muted);
}

.tc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tcard {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  background: var(--rose-pale);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  position: relative;
}
.tcard input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.tcard-inner { flex: 1; min-width: 0; }
.tcard-name { display: block; font-size: .88rem; font-weight: 600; color: var(--brown); }
.tcard-foot { display: flex; gap: 8px; margin-top: 3px; }
.tcard-dur   { font-size: .76rem; color: var(--muted); }
.tcard-price { font-size: .76rem; font-weight: 700; color: var(--rose); margin-left: auto; }
.tcard-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--border);
  background: #fff;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
  display: grid; place-items: center;
}
/* Een behandeling die alleen samen met een andere geboekt kan worden, en
   waarvan die andere nog niet is aangeklikt. Zichtbaar laten staan, maar
   duidelijk niet aanklikbaar. */
.tcard-uit {
  opacity: .55;
  cursor: not-allowed;
  background: #fbf7f8;
}
.tcard-uit:hover { border-color: var(--border); }
.tcard-eis {
  display: block;
  margin-top: 4px;
  font-size: .72rem;
  font-style: italic;
  color: var(--muted);
}

.tcard.sel { border-color: var(--rose); background: #fdf0f4; }
.tcard.sel .tcard-dot {
  background: var(--rose);
  border-color: var(--rose);
}
.tcard.sel .tcard-dot::after {
  content: '✓'; color: #fff; font-size: .65rem; font-weight: 900;
}

/* Treatment summary bar */
.treat-summary[hidden] { display: none !important; }
.treat-summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--rose); color: #fff;
  border-radius: var(--radius-sm);
  padding: 11px 16px;
  font-size: .88rem;
  font-weight: 600;
  margin-top: 12px;
}
.sum-sep { opacity: .55; }

/* ── Custom calendar ── */
#bookingCalendar {
  background: var(--rose-pale);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}
.cal-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.cal-month {
  font-family: var(--font-serif);
  font-size: 1.15rem; font-weight: 600;
  color: var(--brown);
}
.cal-nav {
  background: #fff; border: 1px solid var(--border);
  border-radius: 50%; width: 32px; height: 32px;
  font-size: 1.1rem; color: var(--rose); cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s, border-color .15s;
}
.cal-nav:hover { background: var(--rose); color: #fff; border-color: var(--rose); }
.cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px; margin-bottom: 6px;
}
.cal-dow span {
  text-align: center; font-size: .72rem; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 0;
}
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.cc {
  aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .85rem; font-weight: 500;
  color: var(--muted);
}
.cc.past   { color: #d0bfbc; }
.cc.avail  {
  background: var(--white); color: var(--brown);
  border: 1.5px solid var(--border);
  cursor: pointer; font-weight: 700;
  transition: background .15s, border-color .15s;
}
.cc.avail:hover { background: var(--rose-light); border-color: var(--rose); color: var(--rose-dark); }
.cc.sel    { background: var(--rose) !important; color: #fff !important; border-color: var(--rose) !important; }
.cal-leg {
  display: flex; gap: 18px; margin-top: 14px;
  font-size: .76rem;
}
.leg-a { color: var(--rose); font-weight: 600; }
.leg-n { color: var(--muted); }
.cal-msg {
  text-align: center; color: var(--muted);
  font-size: .88rem; margin-top: 14px; line-height: 1.6;
}

/* ── Time slot buttons ── */
.ts-hint { color: var(--muted); font-size: .9rem; font-style: italic; }
.ts-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.ts-btn {
  padding: 9px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--rose-pale);
  color: var(--brown);
  font-size: .9rem; font-weight: 600;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background .15s, border-color .15s, color .15s;
}
.ts-btn:hover { border-color: var(--rose); color: var(--rose); }
.ts-btn.sel   { background: var(--rose); border-color: var(--rose); color: #fff; }

/* ── Form grid ── */
.bf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bf-grid .full { grid-column: 1 / -1; }

/* Payment options */
.pay-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.pay-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 22px 16px;
  background: var(--rose-pale);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
  text-align: center;
  position: relative;
}
/* Kleine toevoeging onder een betaalwijze, bijvoorbeeld de servicekosten
   bij contactloos betalen. Moet opvallen zonder af te schrikken. */
.pay-extra {
  font-size: .72rem;
  font-weight: 600;
  color: var(--rose);
}

.pay-opt input[type=radio] {
  position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
.pay-icon { font-size: 2rem; line-height: 1; }
.pay-label { font-size: .9rem; font-weight: 700; color: var(--brown); }
.pay-opt:hover { border-color: var(--rose); }
.pay-opt:has(input:checked) {
  border-color: var(--rose);
  background: #fdf0f4;
  box-shadow: 0 0 0 3px rgba(200,120,114,.15);
}
.pay-opt:has(input:checked) .pay-label { color: var(--rose); }
.pay-opt:has(input:checked)::after {
  content: '✓';
  position: absolute; top: 8px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--rose); color: #fff;
  font-size: .7rem; font-weight: 900;
  display: grid; place-items: center;
}

/* Error & success */
.booking-error {
  padding: 12px 16px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: var(--radius-sm);
  color: #991b1b;
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: 12px;
}
.booking-success[hidden] { display: none !important; }
.booking-success {
  display: flex; align-items: flex-start; gap: 14px;
  margin-top: 16px; padding: 20px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: var(--radius-md);
  color: #065f46;
}
.suc-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: #a7f3d0; display: grid; place-items: center;
  font-weight: 900; flex-shrink: 0;
}
.booking-success strong { display: block; margin-bottom: 6px; }
.booking-success p { margin: 0; font-size: .9rem; }
.suc-wa { margin-top: 8px !important; }

/* Footer */
.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px 24px;
  flex-wrap: wrap;
}
/* KvK-nummer: wettelijk verplicht om te vermelden, maar mag rustig
   secundair blijven naast de copyrightregel. */
.footer-kvk { opacity: .8; }

/* Account- en wachtwoordpagina hebben geen grote footerkolommen, alleen
   de onderste regel. Zonder deze regels blijft daar 64px lege ruimte
   boven de tekst staan. */
.account-page .footer { padding: 0 6vw; }
.account-page .footer-bottom {
  justify-content: space-between;
  padding: 26px 0 30px;
}
.footer-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 600;
  color: #e9d6dc;
  transition: background .18s, border-color .18s, color .18s;
}
.footer-back:hover {
  background: rgba(255,255,255,.06);
  border-color: var(--rose-light);
  color: var(--rose-light);
}
@media (max-width: 560px) {
  .account-page .footer-bottom { justify-content: center; text-align: center; }
}

/* Desktop: contacts in linkerkolom onder de info */
.boeken-outer {
  grid-template-areas:
    "info  form"
    "contacts form";
  grid-template-rows: auto 1fr;
}
.boeken-info           { grid-area: info; }
.boeken-contacts-block { grid-area: contacts; align-content: start; }
.boeken-form-wrap      { grid-area: form; }

/* Booking responsive */
@media (max-width: 1024px) {
  .boeken-outer {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .boeken-info           { order: 1; text-align: center; }
  .boeken-info .eyebrow  { text-align: center; display: block; }
  .boeken-info h2        { text-align: center; }
  .boeken-info > p       { text-align: center; }
  .boeken-form-wrap      { order: 2; }
  .boeken-contacts-block {
    order: 3;
    display: grid;
    gap: 16px;
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
    padding: 0 4px;
  }
}
@media (max-width: 640px) {
  .boeken-outer { gap: 24px; }
  .tc-grid  { grid-template-columns: 1fr; }
  .bf-grid  { grid-template-columns: 1fr; }
  .pay-opts { flex-direction: column; }
  .booking-panel { padding: 20px 16px; }
  .boeken-info h2 { text-align: center; }
  .boeken-info > p { text-align: center; }
  .boeken-info .eyebrow { text-align: center; }
  .how-steps { max-width: 400px; margin: 0 auto; text-align: left; padding: 24px 22px; }
  .how-steps-title { font-size: 1.2rem; margin-bottom: 22px; }
  /* Even breed als de stappen erboven, anders staat het blok scheef */
  .locatie-blok { max-width: 400px; margin-left: auto; margin-right: auto; padding: 20px 22px; }
  .locatie-blok h3 { font-size: 1.2rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   ACCOUNTS, LOGIN & STEMPELKAART
   ═══════════════════════════════════════════════════════════════════ */

/* `hidden` moet altijd winnen van display-regels hieronder */
[hidden] { display: none !important; }

/* ===== AUTH MODAL ===== */
.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(46, 26, 33, .55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: authFade .2s ease;
}
@keyframes authFade { from { opacity: 0 } to { opacity: 1 } }

.auth-box {
  position: relative;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 36px 32px 32px;
  width: 100%;
  max-width: 420px;
  max-height: 92vh;
  overflow-y: auto;
  animation: authUp .28s cubic-bezier(.2,.8,.3,1);
}
@keyframes authUp { from { transform: translateY(24px); opacity: 0 } to { transform: none; opacity: 1 } }

.auth-close {
  position: absolute;
  top: 14px; right: 16px;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  transition: color .18s;
}
.auth-close:hover { color: var(--rose); }

.auth-logo { height: 54px; margin: 0 auto 20px; }

.auth-tabs {
  display: flex;
  gap: 4px;
  background: var(--rose-pale);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 24px;
}
.auth-tab-btn {
  flex: 1;
  background: none;
  border: none;
  border-radius: 999px;
  padding: 10px;
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: background .18s, color .18s;
}
.auth-tab-btn.active { background: var(--white); color: var(--rose); box-shadow: var(--shadow-sm); }

.auth-intro {
  font-size: .88rem;
  color: var(--muted);
  text-align: center;
  margin-bottom: 18px;
  line-height: 1.55;
}
.auth-panel .form-field { margin-bottom: 14px; }
.auth-panel .btn { margin-top: 8px; }

.auth-error {
  background: #fdeceb;
  border: 1px solid #f5c6c3;
  color: #a8322c;
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: .87rem;
  margin-bottom: 12px;
}

/* ===== NAV ACCOUNT BUTTON ===== */
.nav-account-btn { display: inline-flex; align-items: center; gap: 7px; }
.nav-user-name { font-weight: 700; }
.mobile-nav .nav-login-btn {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}

/* ===== LOGIN GATE IN BOOKING FORM ===== */
.booking-auth-gate {
  background: linear-gradient(135deg, var(--rose-pale), #fff);
  border: 1.5px dashed var(--rose-light);
  border-radius: var(--radius-md);
  padding: 24px;
  margin: 8px 0 20px;
}
.auth-gate-inner {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}
.auth-gate-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--rose);
  color: #fff;
  display: grid;
  place-items: center;
}
.auth-gate-inner strong { display: block; font-size: 1.05rem; margin-bottom: 5px; }
.auth-gate-inner p { font-size: .88rem; color: var(--muted); line-height: 1.55; margin: 0; }
.auth-gate-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ===== KORTING TOGGLE ===== */
.discount-toggle {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: linear-gradient(135deg, #fff4f2, #fff);
  border: 1.5px solid var(--rose-light);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s;
}
.discount-toggle:hover { border-color: var(--rose); box-shadow: var(--shadow-sm); }
.discount-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.discount-check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: 2px solid var(--rose-light);
  border-radius: 6px;
  margin-top: 2px;
  position: relative;
  transition: background .18s, border-color .18s;
}
.discount-toggle input:checked ~ .discount-check {
  background: var(--rose);
  border-color: var(--rose);
}
.discount-toggle input:checked ~ .discount-check::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.discount-text strong { display: block; font-size: .95rem; margin-bottom: 3px; }
.discount-text small { color: var(--muted); font-size: .82rem; line-height: 1.5; }

/* ===== STEMPEL VOORTGANG (in formulier) ===== */
.stamp-progress {
  background: var(--rose-pale);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.stamp-progress-hd {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.stamp-progress-hd span:last-child { color: var(--rose); }
.stamp-progress-dots { display: flex; gap: 8px; margin-bottom: 8px; }
.spd {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--rose-light);
  transition: background .3s;
}
.spd.on { background: var(--rose); }
.stamp-progress small { color: var(--muted); font-size: .8rem; }

/* ===== SAMENVATTING MET KORTING ===== */
.sum-old { text-decoration: line-through; color: var(--muted); opacity: .75; }
.sum-new { color: var(--rose); font-weight: 700; }
.sum-badge {
  background: var(--rose);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 4px;
}

/* ===== SUCCESS: STEMPEL REGEL ===== */
.suc-stamp {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: .88rem;
}
.suc-stamp a { color: var(--rose); font-weight: 700; }
.suc-stamp a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════
   ACCOUNT PAGINA
   ═══════════════════════════════════════════════════════════════════ */
.account-page { background: var(--bg); }
.account-main { max-width: 900px; margin: 0 auto; padding: 120px 24px 60px; }

.account-gate { display: grid; place-items: center; min-height: 50vh; }
.gate-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 44px 36px;
  text-align: center;
  max-width: 420px;
}
.gate-card h2 { font-family: var(--font-serif); font-size: 1.7rem; margin-bottom: 10px; }
.gate-card p { color: var(--muted); margin-bottom: 24px; line-height: 1.6; }
.gate-card .btn { margin: 0 5px 8px; }

.account-hero { text-align: center; margin-bottom: 44px; }
.account-greeting {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
}
.account-greeting span { color: var(--rose); }
.account-sub { color: var(--muted); font-size: .95rem; margin-top: 6px; }

/* Knop met een icoontje ervoor, bijv. Instellingen in de header */
.btn-met-icoon { display: inline-flex; align-items: center; gap: 8px; }
.btn-met-icoon svg { flex-shrink: 0; }

/* ===== INSTELLINGENVENSTER ===== */
.settings-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--brown);
  text-align: center;
}
.settings-intro {
  font-size: .88rem;
  color: var(--muted);
  text-align: center;
  margin: 6px 0 22px;
  line-height: 1.55;
}
/* Streep met kopje boven het wachtwoordgedeelte */
.settings-scheiding {
  margin: 24px 0 16px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.settings-scheiding span {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--brown);
}
.settings-scheiding small {
  display: block;
  margin-top: 3px;
  font-size: .78rem;
  color: var(--muted);
}
.settings-ok {
  background: #eef7f1;
  border: 1px solid #cfe6da;
  color: #1d6b46;
  border-radius: var(--radius-sm);
  padding: 12px 15px;
  font-size: .87rem;
  margin-bottom: 14px;
}

/* ===== STEMPELKAART ===== */
.stampcard-section { padding: 0; margin-bottom: 52px; }
.stampcard {
  background: linear-gradient(140deg, #fff, var(--rose-pale));
  border: 1px solid var(--rose-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 36px;
  position: relative;
  overflow: hidden;
}
.stampcard::before {
  content: '✦';
  position: absolute;
  top: -20px; right: 24px;
  font-size: 8rem;
  color: var(--rose);
  opacity: .05;
  pointer-events: none;
}
.stampcard-hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
}
.stampcard-hd h2 { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 600; line-height: 1.1; }
.stampcard-count {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--rose);
  line-height: 1;
  white-space: nowrap;
}
.stampcard-count small { font-size: 1.2rem; color: var(--muted); margin-left: 2px; }

.stamps-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 26px;
}
.stamp {
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2.5px dashed var(--rose-light);
  background: var(--white);
  transition: transform .3s, background .3s, border-color .3s;
}
.stamp.filled {
  background: var(--rose);
  border: 2.5px solid var(--rose);
  color: #fff;
  box-shadow: 0 6px 20px rgba(200,120,114,.3);
  animation: stampPop .4s cubic-bezier(.3,1.4,.5,1);
}
@keyframes stampPop { from { transform: scale(.4); opacity: 0 } to { transform: none; opacity: 1 } }
.stamp-num { font-size: 1.05rem; font-weight: 700; color: var(--rose-light); }

.stampcard-status {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  text-align: center;
  margin-bottom: 18px;
}
.stampcard-status p { margin: 0; font-size: .95rem; }
.stampcard-status.ready {
  background: var(--rose);
  border-color: var(--rose);
  color: #fff;
}
.stampcard-status.ready strong { display: block; font-size: 1.15rem; margin-bottom: 6px; }
.stampcard-status.ready p { font-size: .9rem; opacity: .95; margin-bottom: 14px; }
.stampcard-status.ready .btn { background: #fff; color: var(--rose); box-shadow: none; }
.stampcard-status.ready .btn:hover { background: var(--rose-pale); }

.stampcard-note { font-size: .84rem; color: var(--muted); line-height: 1.6; text-align: center; }

/* ===== AFSPRAKEN LIJST ===== */
.bookings-section { padding: 0; }
.bookings-section .section-header { margin-bottom: 20px; }
.bookings-section h2 { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 600; }

.bookings-tabs {
  display: flex;
  gap: 6px;
  background: var(--rose-pale);
  border-radius: 999px;
  padding: 5px;
  margin-bottom: 24px;
  width: fit-content;
}
.bk-tab {
  background: none;
  border: none;
  border-radius: 999px;
  padding: 9px 20px;
  font-family: var(--font-sans);
  font-size: .87rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background .18s, color .18s;
}
.bk-tab.active { background: var(--white); color: var(--rose); box-shadow: var(--shadow-sm); }

.bookings-list { display: grid; gap: 14px; }
.bk-loading, .bk-empty { color: var(--muted); text-align: center; padding: 40px 20px; }
.bk-empty p { margin-bottom: 16px; }

.bk-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px;
  transition: transform .18s, box-shadow .18s;
}
.bk-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.bk-date {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  background: var(--rose-pale);
  border: 1px solid var(--rose-light);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.bk-day { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--rose); }
.bk-month { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--muted); }

.bk-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
.bk-body h3 { font-size: 1rem; font-weight: 700; }
.bk-meta { font-size: .85rem; color: var(--muted); }
.bk-sep { margin: 0 6px; opacity: .5; }
.bk-note { font-size: .84rem; color: var(--muted); font-style: italic; margin-top: 6px; }

.bk-status {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: 999px;
}
.bk-status.pending   { background: #fff4e5; color: #9a6a1a; }
.bk-status.confirmed { background: #e8f5ee; color: #1d6b46; }
.bk-status.completed { background: var(--rose-pale); color: var(--rose-dark); }
.bk-status.cancelled { background: #f3f0f0; color: #8a8080; }

.bk-price-wrap { text-align: right; white-space: nowrap; }
.bk-price { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 600; color: var(--rose); }
.bk-price-old { display: block; font-size: .82rem; color: var(--muted); text-decoration: line-through; }
.bk-discount-badge {
  display: inline-block;
  background: var(--rose);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 5px;
  vertical-align: middle;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 700px) {
  .account-main { padding: 100px 16px 40px; }
  .stampcard { padding: 24px 20px; }
  .stampcard-hd { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .stamps-row { gap: 9px; }
  .bk-card { grid-template-columns: auto 1fr; gap: 14px; padding: 16px; }
  .bk-price-wrap { grid-column: 2; text-align: left; margin-top: 4px; }
  .bookings-tabs { width: 100%; }
  .bk-tab { flex: 1; padding: 9px 8px; }
  .auth-box { padding: 30px 22px 26px; }
  .auth-gate-actions { flex-direction: column; width: 100%; }
  .auth-gate-actions .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   WACHTWOORD VERGETEN & ANNULEREN
   ═══════════════════════════════════════════════════════════════════ */
.auth-forgot { text-align: center; margin-top: 14px; }
.auth-forgot a {
  font-size: .85rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-forgot a:hover { color: var(--rose); }

.reset-form { text-align: left; margin-top: 22px; }
.reset-form .form-field { margin-bottom: 14px; }
.reset-ok {
  background: #eef7f1;
  border: 1px solid #cfe6da;
  color: #1d6b46;
  border-radius: var(--radius-sm);
  padding: 12px 15px;
  font-size: .87rem;
  line-height: 1.55;
  margin-bottom: 12px;
}

.bk-cancel {
  display: block;
  margin-top: 8px;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 5px 12px;
  font-family: var(--font-sans);
  font-size: .76rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.bk-cancel:hover:not(:disabled) { border-color: #e39b97; color: #a8322c; background: #fdeceb; }
.bk-cancel:disabled { opacity: .6; cursor: default; }

@media (max-width: 700px) {
  .bk-cancel { margin-top: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   BOEKEN ALS GAST OF MET ACCOUNT
   ═══════════════════════════════════════════════════════════════════ */
/* Balk bovenin het boekingsformulier: je boekt standaard als gast,
   met een duidelijke uitnodiging om in te loggen. */
.gast-balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.gast-balk-tekst { flex: 1 1 260px; }
.gast-balk strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--brown);
  margin-bottom: 5px;
}
.gast-balk p { font-size: .84rem; color: var(--muted); line-height: 1.5; margin: 0; }
.gast-balk p strong {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: var(--rose);
}
.gast-balk-acties { display: flex; gap: 8px; flex-wrap: wrap; }

/* Stempelkaart-uitnodiging voor gasten */
.stamp-progress.gast-spaar { opacity: .85; }
.stamp-progress.gast-spaar .stamp-progress-hd span:last-child {
  font-weight: 600;
  font-size: .78rem;
  color: var(--muted);
}

.field-hint {
  display: block;
  margin-top: 5px;
  font-size: .78rem;
  color: var(--muted);
}

.suc-link {
  background: none;
  border: none;
  font: inherit;
  font-weight: 700;
  color: var(--rose);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}

@media (max-width: 640px) {
  .gast-balk { flex-direction: column; align-items: flex-start; }
  .gast-balk-tekst { flex: 0 0 auto; }
  .gast-balk-acties { width: 100%; }
  .gast-balk-acties .btn { flex: 1; }
}