/* ===== Reserveren sectie ===== */
:root{
  --rs-ink: #0f172a;
  --rs-muted: #475569;
  --rs-bg: #ffffff;
  --rs-bg-dark: #0e1113;
  --rs-beige: #b59678;
  --rs-accent: #F4B41A;
  --rs-green: #17c964;
  --rs-red: #f31260;
}

.ea-reserve{ position: relative; padding: clamp(32px, 7vw, 86px) 0; overflow:hidden; }
.ea-reserve--light{ background: var(--rs-bg); color: var(--rs-ink); }
.ea-reserve--dark{ background: var(--rs-bg-dark); color: #e9eef3; }
.ea-reserve--beige{ background: linear-gradient(180deg, rgba(181,150,120,.10), rgba(181,150,120,.18)); }

.ea-reserve.has-bg .ea-reserve__bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform: scale(1.02);
}
.ea-reserve.has-bg .ea-reserve__bg-overlay{
  position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25));
}
.ea-reserve__wrap.container{ max-width: 1200px; margin:0 auto; padding: 0 16px; position:relative; z-index:2; }

/* Head */
.ea-reserve__head{ display:grid; grid-template-columns: 1.2fr 1fr; gap: clamp(20px, 6vw, 48px); align-items: start; }
@media (max-width: 1024px){ .ea-reserve__head{ grid-template-columns: 1fr; } }

.ea-reserve__eyebrow{ font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity:.8; margin-bottom: 8px; }
.ea-reserve__title{ margin:0 0 8px; font-size: clamp(24px, 4.6vw, 40px); line-height:1.12; color:#6f5854; }
.ea-reserve__text{ font-size: 18px; line-height:1.7; color: #474747 !important; }
.ea-reserve--dark .ea-reserve__text{ color:#cdd6dd; }

.ea-reserve__actions{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:16px; }
.ea-btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:999px; text-decoration:none; font-weight:700; }
.ea-btn--primary{ background: var(--rs-accent); color:#16181a; }
.ea-btn--ghost{ border:1.5px solid rgba(0,0,0,.22); color: inherit; }
.ea-reserve--dark .ea-btn--ghost{ border-color: rgba(255,255,255,.28); }

/* Pulse micro-animatie voor primaire CTA */
@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(244,180,26,.45); transform: translateZ(0); }
  70%{ box-shadow: 0 0 0 12px rgba(244,180,26,0); }
  100%{ box-shadow: 0 0 0 0 rgba(244,180,26,0); }
}
.pulse{ animation: pulseGlow 2.8s ease-out infinite; }

/* Live status */
.ea-status{ display:inline-flex; align-items:center; gap:8px; font-weight:700; padding:8px 12px; border-radius:999px;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
}
.ea-reserve--light .ea-status{ background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); }
.ea-status .dot{ width:10px; height:10px; border-radius:50%; background: var(--rs-red); position:relative; }
.ea-status.open .dot{ background: var(--rs-green); }
.ea-status.open .dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid rgba(23,201,100,.45);
  animation: ring 1.6s ease-out infinite;
}
@keyframes ring {
  0% { transform: scale(.6); opacity:1; }
  100% { transform: scale(1.6); opacity:0; }
}

/* USPs */
.ea-reserve__usps{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ea-reserve__usps li{ display:flex; align-items:flex-start; gap:10px; font-weight:600; }
.ea-reserve__usps .check{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:999px;
  background: rgba(244,180,26,.18); color:#111; font-size:14px; margin-top:2px;
}
.ea-reserve--dark .ea-reserve__usps .check{ background: rgba(255,255,255,.12); color:#fff; }

/* Tabel openingstijden */
.ea-reserve__hours{ margin-top: 22px; }
.ea-table{ width:100%; border-collapse: collapse; }
.ea-table th, .ea-table td{ padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.ea-reserve--dark .ea-table th, .ea-reserve--dark .ea-table td{ border-color: rgba(255,255,255,.12); }
.ea-table th{ text-align:left; font-weight:700; width: 180px; }
.ea-table td .ea-tag{
  display:inline-block; padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,.06);
}
.ea-reserve--dark .ea-table td .ea-tag{ background: rgba(255,255,255,.12); }

.ea-table tr.is-today th, .ea-table tr.is-today td{ font-weight: 800; }
.ea-table td .note{ margin-left:8px; opacity:.8; font-size: 14px; }