/* ══════════════════════════════════════════════════════════
   Sportcafé Corlaer – Menukaart Frontend CSS v1.0
   ══════════════════════════════════════════════════════════ */

.cm-menu-wrap {
  --or:      #FD5904;
  --or-d:    #d44a03;
  --or-bg:   rgba(253,89,4,0.08);
  --or-rand: rgba(253,89,4,0.2);
  --zw:      #0a0a0a;
  --dn:      #111111;
  --dn2:     #191919;
  --dn3:     #222222;
  --wit:     #ffffff;
  --grijs:   #cccccc;
  --lgrijs:  #888888;
  --rand:    rgba(255,255,255,0.08);
  --r:       8px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--wit);
  background: var(--zw);
  border-radius: var(--r);
  overflow: hidden;
}

/* ── Tab navigatie ── */
.cm-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--dn);
  border-bottom: 1px solid var(--rand);
  padding: 1rem 1.5rem .75rem;
  gap: .5rem;
}

.cm-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--dn2);
  border: 1px solid var(--rand);
  color: var(--lgrijs);
  border-radius: 50px;
  padding: .45rem 1rem;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.cm-tab-btn:hover {
  border-color: var(--or-rand);
  color: var(--or);
}
.cm-tab-actief {
  background: var(--or) !important;
  border-color: var(--or) !important;
  color: #fff !important;
  font-weight: 700;
}
.cm-tab-icon { font-size: 1rem; }

/* ── Tab panels ── */
.cm-tab-panel { display: none; padding: 1.75rem 1.5rem; }
.cm-tab-panel-actief { display: block; }

.cm-cat-titel {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--wit);
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--or);
}

/* ── Items grid ── */
.cm-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .75rem;
}

.cm-menu-item {
  background: var(--dn2);
  border: 1px solid var(--rand);
  border-radius: var(--r);
  padding: .9rem 1rem;
  transition: border-color .15s, transform .15s;
}
.cm-menu-item:hover {
  border-color: var(--or-rand);
  transform: translateY(-1px);
}

.cm-item-kop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .3rem;
}
.cm-item-naam-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  flex: 1;
}
.cm-item-naam {
  font-size: .95rem;
  font-weight: 600;
  color: var(--wit);
}
.cm-item-prijs {
  font-size: 1rem;
  font-weight: 800;
  color: var(--or);
  white-space: nowrap;
  flex-shrink: 0;
}
.cm-item-omschr {
  font-size: .8rem;
  color: var(--lgrijs);
  line-height: 1.5;
  margin: 0;
}

/* ── Badges ── */
.cm-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  border-radius: 50px;
  white-space: nowrap;
}
.cm-badge-populair   { background: rgba(253,89,4,.15); color: #FD5904; border: 1px solid rgba(253,89,4,.3); }
.cm-badge-aanbevolen { background: rgba(34,197,94,.12); color: #22c55e; border: 1px solid rgba(34,197,94,.3); }
.cm-badge-nieuw      { background: rgba(59,130,246,.12); color: #3b82f6; border: 1px solid rgba(59,130,246,.3); }
.cm-badge-speciaal   { background: rgba(168,85,247,.12); color: #a855f7; border: 1px solid rgba(168,85,247,.3); }
.cm-badge-craft      { background: rgba(180,120,60,.15); color: #c8834a; border: 1px solid rgba(180,120,60,.3); }
.cm-badge-alcoholvrij{ background: rgba(100,100,100,.15); color: #aaaaaa; border: 1px solid rgba(100,100,100,.3); }

/* ── Responsive ── */
@media (max-width: 600px) {
  .cm-tabs-nav { padding: .75rem 1rem .5rem; }
  .cm-tab-panel { padding: 1.25rem 1rem; }
  .cm-items-grid { grid-template-columns: 1fr; }
  .cm-tab-btn { font-size: .78rem; padding: .4rem .8rem; }
}

/* ════════════════════════════════════════
   HERO HEADER
════════════════════════════════════════ */
.cm-hero {
  background: var(--zw);
  padding: clamp(2.5rem,6vw,4rem) 1.5rem clamp(1.5rem,4vw,2.5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cm-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 60% 20%, rgba(253,89,4,.1) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 30% 80%, rgba(253,89,4,.05) 0%, transparent 60%);
  pointer-events: none;
}
.cm-hero-inner { position: relative; z-index: 1; }
.cm-hero-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50px; padding: .35rem .9rem;
  font-size: .75rem; letter-spacing: .08em;
  color: #888; margin-bottom: 1.1rem;
}
.cm-hero-h1 {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  font-weight: 900; line-height: 1; letter-spacing: -.02em;
  color: var(--wit); margin-bottom: .9rem;
}
.cm-or { color: var(--or); }
.cm-hero-sub {
  font-size: clamp(.88rem, 1.3vw, 1rem);
  color: var(--lgrijs); line-height: 1.7;
  max-width: 520px; margin: 0 auto;
}

/* ════════════════════════════════════════
   ALLES-OVERZICHT (alle secties gestapeld)
════════════════════════════════════════ */
.cm-panel-alles {
  padding: 0;
}
.cm-alles-sectie {
  padding: 1.5rem 1.5rem 1.75rem;
  border-bottom: 1px solid var(--rand);
}
.cm-alles-sectie:last-child { border-bottom: none; }
.cm-alles-sectie .cm-cat-titel {
  margin-bottom: 1rem;
}
.cm-alles-sectie .cm-items-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Tabbladen komen ná het overzicht — verberg ze standaard
   (ze blijven beschikbaar als fallback of voor gebruik) */
.cm-tabs-nav {
  border-bottom: 1px solid var(--rand);
  padding: 1rem 1.5rem .75rem;
  background: var(--dn);
}

/* Twee-prijzen label */
.cm-prijs-labels {
  font-size: .75rem;
  color: var(--lgrijs);
  font-style: italic;
}

/* Admin dim */
.cm-dim { color: #555; font-size: .8rem; }