html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body .topbar,
body .hero,
body .section,
body main,
body footer {
  max-width: 100%;
  overflow-x: clip;
}

body .topbar {
  min-height: 67px !important;
}

body .topbar .container {
  width: min(1100px, 100% - 40px) !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

body .nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 66px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

body .nav,
body .nav-home-main,
body .brand,
body .hero-card,
body .panel,
body .card,
body .reserve-grid,
body .layout,
body .grid3,
body .split-panels,
body .package-choice-layout,
body .packages-grid,
body .legal-card {
  min-width: 0;
}

body .nav-home-main {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

body .brand {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  line-height: 1.2 !important;
}

body .brand > :last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .brand .logo,
body .brand-logo-wrap {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

body .brand .logo img,
body .brand-logo {
  width: 78% !important;
  height: 78% !important;
  max-width: none !important;
  object-fit: contain !important;
}

body .nav-home-zaal-btn {
  width: 156px !important;
  min-width: 156px !important;
  min-height: 44px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
  text-align: center !important;
}

body .nav-links {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

body .nav-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

body .btn,
body .pill,
body .chip,
body .tag,
body button,
body input,
body select,
body textarea {
  max-width: 100%;
}

body .btn,
body .pill,
body .chip,
body .tag,
body .nav-links a {
  overflow-wrap: anywhere;
  text-align: center;
}

body h1,
body h2,
body h3,
body p,
body li,
body dt,
body dd,
body label,
body strong,
body span {
  overflow-wrap: break-word;
}

@media (max-width: 860px) {
  body .topbar .container {
    width: min(1100px, 100% - 28px) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body .nav-home-main {
    gap: 10px !important;
  }

  body .brand {
    gap: 10px !important;
    font-size: 18px !important;
  }

  body .nav-home-zaal-btn {
    width: 148px !important;
    min-width: 148px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 560px) {
  body .topbar .container {
    width: min(1100px, 100% - 20px) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body .nav {
    min-height: 62px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  body .brand {
    gap: 9px !important;
    font-size: 16px !important;
  }

  body .brand .logo,
  body .brand-logo-wrap {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }

  body .nav-home-zaal-btn {
    width: 126px !important;
    min-width: 126px !important;
    min-height: 42px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 13px !important;
  }

  body .nav-links {
    gap: 6px;
  }

  body .nav-links a {
    min-height: 40px;
    padding: 0 10px;
    font-size: 13px;
  }

  body .cookie-table,
  body .cookie-table tbody,
  body .cookie-table tr,
  body .cookie-table td {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  body .cookie-table {
    border-collapse: separate;
    border-spacing: 0;
  }

  body .cookie-table thead {
    display: none;
  }

  body .cookie-table tr {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
  }

  body .cookie-table td,
  body .cookie-table th {
    border: 0 !important;
    padding: 8px 0 !important;
    text-align: left !important;
  }

  body .cookie-table td + td {
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }

  body .cookie-table td::before {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
  }

  body .cookie-table td:nth-child(1)::before { content: "Categorie"; }
  body .cookie-table td:nth-child(2)::before { content: "Doel"; }
  body .cookie-table td:nth-child(3)::before { content: "Bewaartermijn"; }
  body .cookie-table td:nth-child(4)::before { content: "Toestemming nodig"; }

  body .hero-actions,
  body .dart-page-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body .hero-actions .btn,
  body .dart-page-actions .btn {
    width: 100% !important;
  }
}

@media (max-width: 390px) {
  body .topbar .container {
    width: min(1100px, 100% - 16px) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body .brand {
    gap: 8px !important;
    font-size: 15px !important;
  }

  body .brand .logo,
  body .brand-logo-wrap {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }

  body .nav-home-zaal-btn {
    width: 118px !important;
    min-width: 118px !important;
    min-height: 40px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 12px !important;
  }
}

body.seasonal-theme {
  --seasonal-a: #c8a45d;
  --seasonal-b: #6b2631;
  --seasonal-c: #17110d;
  --seasonal-bg-top: rgba(15, 12, 10, 0.96);
  --seasonal-bg-bottom: rgba(14, 11, 9, 1);
  --seasonal-panel: rgba(34, 25, 18, 0.94);
  --seasonal-panel-soft: rgba(26, 20, 16, 0.88);
  --seasonal-line: rgba(200, 164, 93, 0.45);
  --seasonal-soft: rgba(200, 164, 93, 0.16);
  background:
    linear-gradient(180deg, var(--seasonal-bg-top), var(--seasonal-bg-bottom)),
    var(--bg);
}

body.seasonal-theme::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: 4px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--seasonal-a), var(--seasonal-b), var(--seasonal-a));
}

body.seasonal-theme .topbar {
  background: rgba(12, 9, 8, 0.98);
  border-bottom-color: var(--seasonal-line);
}

body.seasonal-theme .brand .logo,
body.seasonal-theme .card-icon,
body.seasonal-theme .kicker,
body.seasonal-theme .card-tag {
  border-color: var(--seasonal-line);
  background: var(--seasonal-soft);
}

body.seasonal-theme .hero-card,
body.seasonal-theme .status-card,
body.seasonal-theme .panel,
body.seasonal-theme .card,
body.seasonal-theme .footer {
  border-color: var(--seasonal-line);
}

body.seasonal-theme .hero-card {
  background:
    linear-gradient(135deg, var(--seasonal-panel), rgba(16, 12, 10, 0.98));
}

body.seasonal-theme .status-card,
body.seasonal-theme .panel {
  background: var(--seasonal-panel-soft);
}

body.seasonal-theme .btn.primary {
  background: linear-gradient(135deg, var(--seasonal-a), var(--seasonal-b));
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff8ea;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

body.seasonal-theme .status-line.status-open {
  border-color: rgba(131, 182, 148, 0.58);
}

body.seasonal-theme .status-line.status-closed {
  border-color: rgba(239, 123, 134, 0.58);
}

body.theme-wk {
  --gold: #ffd166;
  --seasonal-a: #f97316;
  --seasonal-b: #1d4ed8;
  --seasonal-bg-top: rgba(39, 20, 8, 0.98);
  --seasonal-bg-bottom: rgba(8, 22, 42, 1);
  --seasonal-panel: rgba(68, 31, 13, 0.93);
  --seasonal-panel-soft: rgba(27, 43, 70, 0.84);
  --seasonal-line: rgba(249, 115, 22, 0.48);
  --seasonal-soft: rgba(249, 115, 22, 0.16);
}

body.theme-wk .topbar {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

body.theme-wk .topbar .container {
  position: relative;
  z-index: 2;
}

body.theme-wk::after {
  content: "⚽";
  position: fixed;
  left: 22px;
  bottom: 18px;
  z-index: 0;
  pointer-events: none;
  font-size: clamp(46px, 6vw, 90px);
  line-height: 1;
  opacity: 0.12;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}

body.theme-wk .topbar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: 54px;
  pointer-events: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='132'%20height='54'%20viewBox='0%200%20132%2054'%3E%3Cpath%20d='M0%207H132'%20stroke='%23080604'%20stroke-width='5'%20stroke-linecap='round'/%3E%3Cpath%20d='M7%208H39L23%2048Z'%20fill='%23f97316'%20stroke='%23080604'%20stroke-width='2'/%3E%3Cpath%20d='M49%208H81L65%2048Z'%20fill='%23ff7a1a'%20stroke='%23080604'%20stroke-width='2'/%3E%3Cpath%20d='M91%208H123L107%2048Z'%20fill='%23f97316'%20stroke='%23080604'%20stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 132px 54px;
  background-position: left top;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.34));
}

body.theme-wk .hero,
body.theme-wk .section,
body.theme-wk .legal-note,
body.theme-wk .footer {
  position: relative;
  z-index: 1;
}

body.theme-wk .grid3,
body.theme-wk .split-panels {
  position: relative;
}

body.theme-wk .grid3::after,
body.theme-wk .split-panels::after {
  content: "⚽";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  line-height: 1;
  opacity: 0.18;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}

body.theme-wk .grid3::after {
  right: -18px;
  top: -26px;
  font-size: clamp(28px, 3vw, 48px);
}

body.theme-wk .split-panels::after {
  left: -22px;
  bottom: 18px;
  font-size: clamp(34px, 4vw, 64px);
}

body.theme-wk .hero-card,
body.theme-wk .card,
body.theme-wk .panel {
  position: relative;
  overflow: hidden;
}

body.theme-wk .hero-card::before {
  content: "⚽";
  position: absolute;
  right: 24px;
  bottom: 18px;
  z-index: 0;
  pointer-events: none;
  font-size: clamp(72px, 8vw, 132px);
  line-height: 1;
  opacity: 0.11;
}

body.theme-wk .card::before,
body.theme-wk .panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
  background:
    linear-gradient(135deg, transparent 0 68%, rgba(249, 115, 22, 0.42) 68% 72%, transparent 72%),
    linear-gradient(45deg, transparent 0 74%, rgba(29, 78, 216, 0.34) 74% 78%, transparent 78%);
}

body.theme-wk .hero-card > *,
body.theme-wk .card > *,
body.theme-wk .panel > * {
  position: relative;
  z-index: 1;
}

body.theme-wk .card-topline::after {
  content: "⚽";
  margin-left: auto;
  font-size: 18px;
  opacity: 0.78;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

body.theme-wk .wk-zaal-label {
  display: inline-flex;
  width: fit-content;
  margin: -2px 0 10px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 209, 102, 0.58);
  background: rgba(249, 115, 22, 0.2);
  color: #ffb15d;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

body.theme-wk .wk-pool-btn {
  display: inline-flex;
  background: linear-gradient(135deg, #f97316, #facc15 56%, #1d4ed8);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff8ea;
  box-shadow: 0 12px 26px rgba(249, 115, 22, 0.24);
}

body.theme-wk .wk-pool-btn::before {
  content: "⚽";
  margin-right: 8px;
}

body.theme-wk.wk-pool-page .hero-card,
body.theme-wk.wk-pool-page .panel {
  border-color: rgba(249, 115, 22, 0.52);
}

body.theme-zomer {
  --gold: #ffe082;
  --seasonal-a: #facc15;
  --seasonal-b: #0ea5a8;
  --seasonal-bg-top: rgba(37, 34, 10, 0.98);
  --seasonal-bg-bottom: rgba(6, 38, 43, 1);
  --seasonal-panel: rgba(49, 42, 16, 0.92);
  --seasonal-panel-soft: rgba(11, 54, 58, 0.84);
  --seasonal-line: rgba(250, 204, 21, 0.46);
  --seasonal-soft: rgba(250, 204, 21, 0.15);
}

body.theme-zomer .topbar {
  position: relative;
  isolation: isolate;
}

body.theme-zomer::after {
  content: "⛱️";
  position: fixed;
  right: -36px;
  bottom: -34px;
  z-index: 0;
  pointer-events: none;
  font-size: clamp(120px, 18vw, 260px);
  line-height: 1;
  opacity: 0.12;
  transform: rotate(-12deg);
  filter: blur(1.4px) drop-shadow(0 18px 34px rgba(0, 0, 0, 0.34));
}

body.theme-zomer .topbar::after {
  content: "☀️   ☀️   ⛱️   ☀️";
  position: absolute;
  right: max(14px, calc((100vw - 1100px) / 2 + 14px));
  top: 50%;
  z-index: 0;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgba(255, 224, 130, 0.86);
  font-size: clamp(18px, 2.4vw, 28px);
  letter-spacing: 10px;
  white-space: nowrap;
  opacity: 0.42;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.36));
}

body.theme-zomer .hero,
body.theme-zomer .section,
body.theme-zomer .legal-note,
body.theme-zomer .footer {
  position: relative;
  z-index: 1;
}

body.theme-zomer .hero::before,
body.theme-zomer .section::before {
  content: "☀️";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  line-height: 1;
  opacity: 0.13;
  filter: blur(.4px) drop-shadow(0 9px 18px rgba(0, 0, 0, 0.25));
}

body.theme-zomer .hero::before {
  left: max(16px, calc((100vw - 1100px) / 2 - 38px));
  top: 84px;
  font-size: clamp(42px, 5vw, 82px);
}

body.theme-zomer .section::before {
  right: max(18px, calc((100vw - 1100px) / 2 - 26px));
  top: 34px;
  font-size: clamp(32px, 3.8vw, 60px);
}

body.theme-zomer .hero-card,
body.theme-zomer .card,
body.theme-zomer .panel {
  position: relative;
  overflow: hidden;
}

body.theme-zomer .hero-card::before {
  content: "☀️   ☀️";
  position: absolute;
  right: 24px;
  top: 22px;
  z-index: 0;
  pointer-events: none;
  font-size: clamp(56px, 7vw, 118px);
  line-height: 1;
  opacity: 0.14;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.28));
}

body.theme-zomer .card::before,
body.theme-zomer .panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.2;
  background:
    radial-gradient(circle at 16% 18%, rgba(250, 204, 21, 0.24), transparent 0 2.6rem, transparent 2.7rem),
    radial-gradient(circle at 86% 16%, rgba(250, 204, 21, 0.36), transparent 0 4.2rem, transparent 4.3rem),
    linear-gradient(135deg, transparent 0 66%, rgba(14, 165, 168, 0.34) 66% 70%, transparent 70%);
}

body.theme-zomer .card::after,
body.theme-zomer .panel::after {
  content: "☀️";
  position: absolute;
  left: 18px;
  bottom: 14px;
  z-index: 0;
  pointer-events: none;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1;
  opacity: 0.12;
  filter: blur(.3px);
}

body.theme-zomer .hero-card > *,
body.theme-zomer .card > *,
body.theme-zomer .panel > * {
  position: relative;
  z-index: 1;
}

body.theme-zomer .card-topline::after {
  content: "⛱️";
  margin-left: auto;
  font-size: 18px;
  opacity: 0.86;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.32));
}

body.theme-zomer .wk-pool-btn {
  background: linear-gradient(135deg, #facc15, #fb923c 48%, #0ea5a8);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff8ea;
}

@media (max-width: 560px) {
  body.theme-zomer .topbar::after {
    content: "☀️ ☀️";
    right: 10px;
    letter-spacing: 4px;
    font-size: 20px;
    opacity: 0.26;
  }

  body.theme-zomer::after {
    right: -34px;
    bottom: -28px;
    font-size: 132px;
    opacity: 0.09;
  }

  body.theme-zomer .hero::before,
  body.theme-zomer .section::before {
    display: none;
  }

  body.theme-zomer .hero-card::before {
    right: 14px;
    top: 14px;
    font-size: 54px;
    opacity: 0.11;
  }
}

body.theme-sinterklaas {
  --gold: #ffe082;
  --seasonal-a: #c1121f;
  --seasonal-b: #174ea6;
  --seasonal-bg-top: rgba(45, 5, 10, 0.98);
  --seasonal-bg-bottom: rgba(8, 24, 58, 1);
  --seasonal-panel: rgba(64, 12, 18, 0.93);
  --seasonal-panel-soft: rgba(18, 37, 78, 0.84);
  --seasonal-line: rgba(255, 224, 130, 0.52);
  --seasonal-soft: rgba(193, 18, 31, 0.16);
}

body.theme-kerst {
  --gold: #e8d27a;
  --green: #8fd6a4;
  --red: #d86b74;
  --seasonal-a: #0f5f3d;
  --seasonal-b: #b91c1c;
  --seasonal-bg-top: rgba(8, 34, 24, 0.98);
  --seasonal-bg-bottom: rgba(43, 7, 11, 1);
  --seasonal-panel: rgba(20, 55, 39, 0.92);
  --seasonal-panel-soft: rgba(65, 20, 24, 0.82);
  --seasonal-line: rgba(232, 210, 122, 0.48);
  --seasonal-soft: rgba(15, 95, 61, 0.18);
}

body.theme-halloween {
  --gold: #ffb454;
  --seasonal-a: #f97316;
  --seasonal-b: #3b0764;
  --seasonal-bg-top: rgba(42, 18, 5, 0.98);
  --seasonal-bg-bottom: rgba(22, 5, 35, 1);
  --seasonal-panel: rgba(58, 24, 8, 0.93);
  --seasonal-panel-soft: rgba(37, 11, 58, 0.84);
  --seasonal-line: rgba(249, 115, 22, 0.52);
  --seasonal-soft: rgba(249, 115, 22, 0.16);
}

body.theme-koningsdag {
  --gold: #ffd166;
  --seasonal-a: #f97316;
  --seasonal-b: #dc2626;
  --seasonal-bg-top: rgba(47, 20, 5, 0.98);
  --seasonal-bg-bottom: rgba(54, 8, 12, 1);
  --seasonal-panel: rgba(70, 29, 9, 0.93);
  --seasonal-panel-soft: rgba(77, 18, 22, 0.84);
  --seasonal-line: rgba(255, 209, 102, 0.48);
  --seasonal-soft: rgba(249, 115, 22, 0.17);
}

body.theme-wk .card-offer,
body.theme-koningsdag .card-offer,
body.theme-halloween .card-offer {
  background: linear-gradient(135deg, rgba(116, 48, 15, 0.96), rgba(35, 18, 14, 0.98));
  border-color: var(--seasonal-line);
}

body.seasonal-theme .legal-card,
body.seasonal-theme .legal-wrap article {
  border-color: var(--seasonal-line);
  background:
    radial-gradient(circle at 92% 8%, var(--seasonal-soft), transparent 34%),
    var(--seasonal-panel);
}

body.seasonal-theme .brand-logo-wrap,
body.seasonal-theme .nav-links a {
  border-color: var(--seasonal-line);
}

body.seasonal-theme .nav-links a:hover {
  background: var(--seasonal-soft);
}

body.theme-zomer .card-games,
body.theme-kerst .card-games {
  background: linear-gradient(135deg, var(--seasonal-panel-soft), rgba(24, 25, 18, 0.98));
  border-color: var(--seasonal-line);
}

body.theme-sinterklaas .card-dart {
  background: linear-gradient(135deg, rgba(44, 67, 120, 0.94), rgba(42, 10, 15, 0.98));
  border-color: var(--seasonal-line);
}