:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#94a3b8;
  --accent1:#ff3b3b;
  --accent2:#ff9a3b;
  --glass: rgba(255,255,255,0.04);
  --radius:14px;
  --max-width:1100px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,var(--bg),#071021);color:#e6eef8}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max-width);margin:0 auto;padding:28px}
header{padding:18px 0}
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800}
.logo{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--accent1),var(--accent2));display:flex;align-items:center;justify-content:center;font-weight:800}
nav ul{list-style:none;display:flex;gap:16px;margin:0;padding:0;align-items:center}
.nav a{transition:color .14s ease}
.nav a:hover, nav ul li a:hover, .platform-banner a:hover{ color: var(--accent2); }
.btn, button, .cart-btn, .cart-add, input[type="submit"] {
  transition: transform 160ms ease, box-shadow 160ms ease;
  transform-origin: center;
  will-change: transform;
}
.btn:hover, button:hover, .cart-btn:hover, .cart-add:hover, input[type="submit"]:hover {
  transform: scale(1.04);
}
.btn:active, button:active, .cart-btn:active, .cart-add:active, input[type="submit"]:active {
  transform: scale(0.995);
}
.muted{color:var(--muted)}
.card{background:var(--glass);padding:16px;border-radius:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:20px}
.product{padding:14px;background:rgba(255,255,255,0.03);border-radius:12px;display:flex;flex-direction:column;gap:10px}
.product img{width:100%;height:160px;object-fit:cover;border-radius:10px;background:#111}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.locatie{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.locatie img{width:280px;height:280px;object-fit:cover;border-radius:12px}
.locatie > div{display:flex;flex-direction:column;gap:12px}
.card{box-shadow:0 6px 30px rgba(2,6,23,0.6)}
.pill{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.03);font-weight:700}
.btn{border:none;padding:10px 14px;border-radius:10px;color:#fff;font-weight:700;cursor:pointer;background:linear-gradient(135deg,var(--accent1),var(--accent2));}
.primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));border:none;color:#081023}
.secondary{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:10px 14px;border-radius:10px;cursor:pointer}
.trainer img,.product img{width:100%;height:220px;object-fit:cover;border-radius:10px}
.trainer{padding:16px;border-radius:12px;background:var(--glass);text-align:center}
.schedule{display:flex;flex-direction:column;gap:12px}
.class-row{display:flex;justify-content:space-between;gap:12px;padding:12px;border-radius:10px;background:rgba(255,255,255,0.02)}
footer{margin-top:40px;padding:24px 0;border-top:1px solid rgba(255,255,255,0.08);color:var(--muted)}

/* Cart (shared) */
.cart-btn { background: linear-gradient(135deg,var(--accent1),var(--accent2)); border:none; color:#fff; padding:10px 14px; border-radius:8px; cursor:pointer; font-weight:700; position:relative; }
.cart-add { background: linear-gradient(135deg,var(--accent1),var(--accent2)) !important; border:none; color:#fff; padding:8px 16px; border-radius:20px; cursor:pointer; font-weight:700; }
.cart-badge{ position:absolute; top:-8px; right:-8px; background:var(--accent2); color:#071021; padding:4px 8px; border-radius:999px; font-weight:800; font-size:12px; display:none; }
.cart-panel{ position:fixed; right:0; top:0; height:100vh; width:360px; max-width:92%; background:linear-gradient(180deg,#07121a,#04101a); box-shadow:-20px 0 40px rgba(0,0,0,0.6); transform:translateX(100%); transition:transform .25s ease; z-index:9999; padding:18px; display:flex; flex-direction:column; gap:12px; }
.cart-panel.open{ transform:translateX(0); }
.cart-items{ flex:1; overflow:auto; padding-right:6px; }
.cart-row{ display:flex; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.03); }
.cart-row img{ width:64px; height:48px; object-fit:cover; border-radius:6px; }
.qty-controls{ display:flex; gap:6px; align-items:center; }
.qty-controls button{ padding:6px 8px; border-radius:6px; border:none; background:rgba(255,255,255,0.04); color:#fff; cursor:pointer; }
.cart-summary{ margin-top:8px; border-top:1px solid rgba(255,255,255,0.03); padding-top:12px; }
.small-muted{ color:var(--muted); font-size:13px; }

/* lesaanbod specific cart panel (left) - keep both variants present */
#cart-panel.left { position:fixed; left:20px; top:80px; width:320px; max-height:80vh; overflow-y:auto; background:var(--card); padding:16px; border-radius:var(--radius); box-shadow:0 6px 30px rgba(2,6,23,0.6); transform:translateX(-400px); transition:transform .3s ease; }
#cart-panel.left.open { transform:translateX(0); }
/* ID-based left panel (used on index.html)
   keeps original left-positioned cart styling
   used when the aside has id="cart-panel" without class
   (kept separate from .cart-panel which is right-sided)
   note: also support older markup that used #cart-panel
   left position variant */
#cart-panel { position: fixed; top: 80px; left: 20px; width: 320px; max-height: 80vh; overflow-y: auto; background: var(--card); padding: 16px; border-radius: var(--radius); box-shadow: 0 6px 30px rgba(2,6,23,0.6); z-index: 9999; transform: translateX(-400px); transition: transform 0.3s ease; }
#cart-panel.open { transform: translateX(0); }
#cart-panel.left { position:fixed; left:20px; top:80px; width:320px; max-height:80vh; overflow-y:auto; background:var(--card); padding:16px; border-radius:var(--radius); box-shadow:0 6px 30px rgba(2,6,23,0.6); transform:translateX(-400px); transition:transform .3s ease; }
#cart-panel.left.open { transform:translateX(0); }
.cart-row.small img { width:80px; height:80px; border-radius:8px }

/* hero and layout tweaks from index */
.hero{display:grid;grid-template-columns:1fr 420px;gap:36px;align-items:center;padding:40px 0}
.hero h1{font-size:clamp(28px,5vw,44px);line-height:1.02;margin:0}
.lead{color:var(--muted);margin-top:12px;font-size:15px}
.hero-ctas{display:flex;gap:12px;margin-top:18px}

/* Events layout: keep image beside text */
.event-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:18px}
@media(min-width:880px){ .event-grid{grid-template-columns:repeat(2,1fr)} }
/* Make event rows align to the image height: media + content columns */
.event-row{display:flex;flex-direction:column;gap:16px;align-items:stretch}
.event-media{width:100%}
.event-media img{width:100%;height:auto;object-fit:cover;border-radius:12px;display:block}
.event-hero{display:flex;flex-direction:column;justify-content:flex-start;gap:12px}

/* responsive */
@media(max-width:1000px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:900px){ .grid-3{grid-template-columns:1fr 1fr;} }
@media(max-width:700px){ .grid-3{grid-template-columns:1fr} }
@media(max-width:640px){ .grid{grid-template-columns:1fr} .cart-panel{width:100%;} }
@media(max-width:600px){ .trainer img{height:160px} }
@media(max-width:560px){ .trainer img,.product img{height:140px} .cart-btn{padding:8px 10px;font-size:14px} .cart-panel{width:92vw} }

/* small utility */
.brand div:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:4px}

/* Form controls (restore look from contact.html) */
input, textarea {
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 16px;
  margin-top: 10px;
}

/* Form submit button styling for contact form (targeted to forms) */
form button[type="submit"] {
  background: linear-gradient(135deg,var(--accent1),var(--accent2));
  border: none;
  padding: 14px 22px;
  margin-top: 14px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}

.platform-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 8px 0;
  z-index: 10002;
  pointer-events: auto;
}
.platform-banner + .container { padding-top: 64px; }
.platform-link {
  display:inline-block;
  padding:10px 16px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  border-radius:12px;
  font-weight:700;
  color:#fff;
  text-decoration:none;
}
.brand-title { font-size:18px; }
.brand-location { font-size:12px; color:var(--muted); margin-top:2px; }
.nav-active { font-weight:700; color:var(--accent2); }
.card.centered { display:flex; flex-direction:column; gap:12px; align-items:center; }
.video-full { width:100%; border-radius:12px; }

/* ---------- Styles moved from lesaanbod.html (scoped) ---------- */
/* These rules are prefixed with body.lesaanbod so they only affect that page */
body.lesaanbod { --card:#191c22; --muted:#94a3b8; --accent1:#ff3b3b; --accent2:#ff9a3b; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto; background:linear-gradient(180deg,var(--bg),#071021); color:#e6eef8; min-height:100vh; }
body.lesaanbod a{ color:inherit; text-decoration:none }
body.lesaanbod .container{ max-width:1100px; margin:0 auto; padding:28px }
body.lesaanbod header{ padding:18px 0 }
body.lesaanbod .nav{ display:flex; justify-content:space-between; align-items:center; gap:12px }
body.lesaanbod .logo{ width:44px; height:44px; border-radius:10px; background:linear-gradient(135deg,var(--accent1),var(--accent2)); display:flex; align-items:center; justify-content:center; font-weight:800 }
body.lesaanbod nav ul{ display:flex; gap:18px; list-style:none; padding:0; margin:0 }
body.lesaanbod h1{ margin:0 }
body.lesaanbod .muted{ color:var(--muted) }
body.lesaanbod .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px }
body.lesaanbod .card{ background:rgba(255,255,255,0.03); padding:18px; border-radius:14px; box-shadow:0 4px 20px rgba(0,0,0,0.4) }
body.lesaanbod .pill{ background:rgba(255,59,59,0.1); color:var(--accent1); padding:4px 10px; border-radius:999px; font-weight:700; font-size:13px }
body.lesaanbod .btn{ border:none; padding:10px 14px; border-radius:10px; color:#fff; font-weight:700; cursor:pointer; background:linear-gradient(135deg,var(--accent1),var(--accent2)) }

/* winkelmand styles for lesaanbod page */
body.lesaanbod .cart-btn { background: linear-gradient(135deg,var(--accent1),var(--accent2)); border:none; color:#fff; padding:10px 14px; border-radius:8px; cursor:pointer; font-weight:700; position:relative }
body.lesaanbod .cart-add { background: linear-gradient(135deg,var(--accent1),var(--accent2)) !important; border:none; color:#fff; padding:8px 16px; border-radius:20px; cursor:pointer; font-weight:700 }
body.lesaanbod .cart-badge{ position:absolute; top:-8px; right:-8px; background:var(--accent2); color:#071021; padding:4px 8px; border-radius:999px; font-weight:800; font-size:12px; display:none }
body.lesaanbod .cart-panel{ position:fixed; right:0; top:0; height:100vh; width:360px; max-width:92%; background:linear-gradient(180deg,#07121a,#04101a); box-shadow:-20px 0 40px rgba(0,0,0,0.6); transform:translateX(100%); transition:transform .25s ease; z-index:9999; padding:18px; display:flex; flex-direction:column; gap:12px }
body.lesaanbod .cart-panel.open{ transform:translateX(0) }
body.lesaanbod .cart-items{ flex:1; overflow:auto; padding-right:6px }
body.lesaanbod .cart-row{ display:flex; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.03) }
body.lesaanbod .cart-row img{ width:64px; height:48px; object-fit:cover; border-radius:6px }
body.lesaanbod .qty-controls{ display:flex; gap:6px; align-items:center }
body.lesaanbod .qty-controls button{ padding:6px 8px; border-radius:6px; border:none; background:rgba(255,255,255,0.04); color:#fff; cursor:pointer }
body.lesaanbod .cart-summary{ margin-top:8px; border-top:1px solid rgba(255,255,255,0.03); padding-top:12px }
body.lesaanbod .small-muted{ color:var(--muted); font-size:13px }
body.lesaanbod footer{ margin-top:40px; padding:28px 0; border-top:1px solid rgba(255,255,255,0.05); color:var(--muted) }
@media (max-width:1000px) { body.lesaanbod .grid-3{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:700px) { body.lesaanbod .grid-3{ grid-template-columns:1fr } }
/* ---------- end lesaanbod rules ---------- */

/* Jamal trainer: use the provided image as a background behind the text */
.trainer.trainer-jamal{ position:relative; overflow:hidden; min-height:320px; display:flex; flex-direction:column; justify-content:flex-end; padding:18px }
.trainer.trainer-jamal .trainer-hero{ position:absolute; inset:0; background-image:url('../images/Copilot_20251207_173727.png'); background-size:cover; background-position:center; filter:brightness(0.45) contrast(0.98); transform:scale(1.02); z-index:0 }
.trainer.trainer-jamal > *{ position:relative; z-index:1 }
.trainer.trainer-jamal .muted{ color:rgba(230,238,248,0.9) }

/* Siham trainer: same treatment as Jamal but with Siham's image */
.trainer.trainer-siham{ position:relative; overflow:hidden; min-height:320px; display:flex; flex-direction:column; justify-content:flex-end; padding:18px }
.trainer.trainer-siham .trainer-hero{ position:absolute; inset:0; background-image:url('../images/Copilot_20251207_174900.png'); background-size:cover; background-position:center; filter:brightness(0.45) contrast(0.98); transform:scale(1.02); z-index:0 }
.trainer.trainer-siham > *{ position:relative; z-index:1 }
.trainer.trainer-siham .muted{ color:rgba(230,238,248,0.9) }

/* Omar trainer: same treatment as Jamal/Siham but with Omar's image */
.trainer.trainer-omar{ position:relative; overflow:hidden; min-height:320px; display:flex; flex-direction:column; justify-content:flex-end; padding:18px }
.trainer.trainer-omar .trainer-hero{ position:absolute; inset:0; background-image:url('../images/Copilot_20251207_181204.png'); background-size:cover; background-position:center; filter:brightness(0.45) contrast(0.98); transform:scale(1.02); z-index:0 }
.trainer.trainer-omar > *{ position:relative; z-index:1 }
.trainer.trainer-omar .muted{ color:rgba(230,238,248,0.9) }
.card.trainer{ min-height:320px }
/* ----- Moved index styles (deduped) ----- */
/* Kickboksen section layout: heading above, then list left + video right */
.kick-section{display:block;gap:24px;align-items:start;padding:24px 0}
.kick-content h2{margin-top:0;font-size:clamp(28px,2.4vw,32px)}
.kick-content p{margin-bottom:18px}
.kick-columns{display:grid;grid-template-columns:1fr 700px;gap:24px;align-items:start}
.kick-content ul{margin-top:12px;padding-left:20px}
.kick-video .video-full{width:100%;max-width:100%;border-radius:12px}

/* KICK-THIS hero styling (matches provided image) */
.kickthis-hero{background:#000;padding:36px;border-radius:12px;margin:22px 0;color:#fff;display:flex;align-items:center}
.kickthis-inner{max-width:980px}
.kickthis-title{font-size:clamp(22px,5vw,42px);line-height:1.02;margin:0 0 10px;font-weight:800;letter-spacing:2px}
.kickthis-text{color:#fff;opacity:0.95;font-size:16px;line-height:1.6;margin:0;max-width:720px}

@media(max-width:880px){
  .kickthis-hero{padding:24px}
  .kickthis-title{font-size:clamp(20px,7vw,34px)}
  .kickthis-text{font-size:15px}
}

/* Make columns slimmer inside the Openingstijden area */
.opening-grid .grid-2{display:grid;grid-template-columns:1fr 0.85fr;gap:12px}
.opening-grid .kickthis-hero{padding:14px}
.opening-grid .kickthis-inner{max-width:520px}
.opening-grid .opening-block{padding:12px}
.opening-grid .quick-links, .opening-grid .contact-card{padding:12px}
.opening-grid .hours-table{max-width:480px}

@media(max-width:780px){
  .opening-grid .grid-2{grid-template-columns:1fr}
}

.stats{display:flex;gap:12px;justify-content:space-between;margin-top:12px}
.stat{flex:1;text-align:center}

section{padding:48px 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

/* responsive adjustments used by index */
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  nav ul{display:none}
  .menu-toggle{display:block;background:rgba(255,255,255,0.03);padding:8px;border-radius:10px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .kick-section{grid-template-columns:1fr}
}
@media (max-width:560px){
  .trainer img,.product img{height:140px}
  .grid-4{grid-template-columns:1fr}
}

/* Quick links (used next to opening hours) */
.opening-grid{gap:18px;align-items:start}
.opening-block{padding:18px}
.quick-links{padding:18px}
.quick-links h3{font-size:20px;margin:0 0 12px 0;font-weight:800}
.quick-list{list-style:none;padding:0;margin:0}
.quick-list li{margin:12px 0}
.quick-list a{color:inherit;text-decoration:none}
.quick-list a:hover{color:var(--accent2)}

@media(max-width:780px){
  .opening-grid{grid-template-columns:1fr}
}

/* Contact card styling */
.contact-card h3{font-size:20px;margin:0 0 10px 0;font-weight:800}
.contact-info div{margin:6px 0}
.contact-info a{color:inherit;text-decoration:none}
.contact-info a:hover{color:var(--accent2)}

/* Openingstijden tabel styling */
.hours-table {
  width: 100%;
  max-width: 600px;
  border-collapse: collapse;
  margin-top: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 59, 59, 0.4);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.hours-table th {
  background: linear-gradient(135deg, rgba(255, 59, 59, 0.2), rgba(255, 154, 59, 0.2));
  padding: 16px;
  text-align: left;
  font-weight: 700;
  color: var(--accent2);
  border-bottom: 2px solid rgba(255, 59, 59, 0.3);
}

.hours-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hours-table tbody tr:last-child td {
  border-bottom: none;
}

.hours-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* platform banner: (handled above) */
/* ----- end moved CSS (deduped) ----- */

/* Footer: four column layout for bottom blocks */
.site-footer{background:#000;padding:36px 0 48px;/* make footer span full viewport width while keeping centered content */
  width:100vw;position:relative;left:50%;transform:translateX(-50%);}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.footer-col h4{font-size:18px;margin:0 0 12px;font-weight:800}
.footer-about .brand{display:flex;align-items:center}
.footer-about p{margin:0}
.footer-col .quick-list{list-style:none;padding:0;margin:0}
.footer-col .quick-list li{margin:10px 0}
.footer-col a{color:inherit;text-decoration:none}
.footer-col a:hover{color:var(--accent2)}

@media(max-width:980px){
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr}
}