/**
 * Radio ZMEN.tn — design system overlay (Phase B)
 * Loads after main.css; preserves Volna layout, updates tokens.
 */
:root {
  --zmen-bg: #0b0b0f;
  --zmen-surface: #14141c;
  --zmen-primary: #ff3b30;
  --zmen-secondary: #6c5ce7;
  --zmen-accent: #00d1ff;
  --zmen-radius-sm: 12px;
  --zmen-radius-md: 16px;
  --zmen-radius-lg: 24px;
  --zmen-glow: 0 0 24px rgba(255, 59, 48, 0.35);
  --zmen-glow-accent: 0 0 20px rgba(0, 209, 255, 0.25);
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cairo/cairo-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cairo/cairo-600.woff2') format('woff2');
}

html[lang="ar"] body,
body.lang-ar {
  font-family: 'Cairo', 'Inter', 'Open Sans', sans-serif;
}

body {
  background-color: var(--zmen-bg);
}

.sidebar,
.header,
.player,
.main,
.footer {
  background-color: var(--zmen-surface);
}

.sidebar {
  border-radius: 0 var(--zmen-radius-md) var(--zmen-radius-md) 0;
}

.hero__btn--green,
.sign__btn,
.plan__btn,
.modal__btn {
  background-color: var(--zmen-primary) !important;
  border-color: var(--zmen-primary) !important;
  border-radius: var(--zmen-radius-sm);
  box-shadow: var(--zmen-glow);
}

.hero__btn--green:hover,
.sign__btn:hover {
  background-color: #e6352b !important;
}

.main__link,
a:hover {
  color: var(--zmen-accent);
}

.live__status,
.event__ticket,
.badge--live {
  background-color: var(--zmen-primary);
}

.album__cover,
.artist__cover,
.post__img,
.event {
  border-radius: var(--zmen-radius-sm);
}

.dashbox,
.feature,
.plan,
.sign {
  border-radius: var(--zmen-radius-md);
  background-color: var(--zmen-surface);
}

/* Mic mark height locked to wordmark (logo.png ≈ 26px at template width) */
.header__logo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  height: 26px;
}

/* Override main.css .header__logo img { width: 100px } */
.header__logo-link .header__logo-mark,
.header__logo-link .header__logo-wordmark {
  width: auto !important;
  height: 26px !important;
  max-height: 26px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.sidebar__logo img,
.footer__logo img {
  max-height: 36px;
  width: auto;
  object-fit: contain;
}

/* Live now strip */
.zmen-live-now {
  background: linear-gradient(135deg, var(--zmen-surface) 0%, #1a1a24 100%);
  border-radius: var(--zmen-radius-md);
  padding: 24px;
  margin-bottom: 30px;
  border: 1px solid rgba(0, 209, 255, 0.15);
  box-shadow: var(--zmen-glow-accent);
}
.zmen-live-now__badge {
  display: inline-block;
  background: var(--zmen-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.zmen-live-now h2 {
  font-size: 22px;
  margin-bottom: 8px;
}
.zmen-live-now p {
  color: #c0c0c0;
  margin-bottom: 0;
}

/* Community / lifestyle chips */
.zmen-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.zmen-chip {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(108, 92, 231, 0.2);
  border: 1px solid var(--zmen-secondary);
  border-radius: var(--zmen-radius-sm);
  color: #fff;
  font-size: 13px;
}