/* ============================================================
 *  Majlis Design System v1.0
 *  Arabic Luxury UI Framework — Pure CSS, No Dependencies
 *  ============================================================
 *
 *  Design Philosophy: Majlis (المجلس) — the traditional Arab
 *  gathering room. Warm, luxurious, geometric, gold-toned.
 *
 *  Target: H5 Game Aggregation + Social Voice Platform
 *  Domains: aibrewlab.com (Games) · funarab.com (Social)
 *  Audience: UAE, Saudi Arabia, Qatar, Gulf States
 *
 *  Features:
 *    - Dark theme with gold/emerald accents
 *    - RTL-first with CSS logical properties
 *    - Islamic geometric decorative patterns (pure CSS)
 *    - Responsive: Mobile (<640px) / Tablet (640-1024px) / Desktop (>1024px)
 *    - Glassmorphism navigation, gradient buttons, custom scrollbar
 *
 *  Font Stack (load via Google Fonts):
 *    @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@600;700;800&family=Tajawal:wght@300;400;500;700&display=swap');
 *
 *  Usage: Copy this file to your project and link it in your HTML.
 * ============================================================ */

/* ============================================================
 *  1. CSS CUSTOM PROPERTIES — Design Tokens
 * ============================================================ */
:root {
  /* --- Color Palette --- */

  /* Core Background */
  --majlis-bg-deep:        #0a0e14;      /* 最深背景 — 暗蓝黑 */
  --majlis-bg-primary:     #111820;      /* 主背景 */
  --majlis-bg-surface:     #161e28;      /* 卡片/面板表面 */
  --majlis-bg-elevated:    #1c2634;      /* 悬浮层/弹窗 */
  --majlis-bg-overlay:     rgba(10,14,20,0.75); /* 遮罩 */

  /* Gold — 主强调色 (伊斯兰奢华感) */
  --majlis-gold-100:       #fef3c7;      /* 最浅金 */
  --majlis-gold-200:       #fde68a;
  --majlis-gold-300:       #fcd34d;
  --majlis-gold-400:       #d4a843;      /* 主金色 */
  --majlis-gold-500:       #b8860b;      /* 暗金色 */
  --majlis-gold-600:       #8b6914;

  /* Emerald Green — 伊斯兰文化色点缀 */
  --majlis-emerald-100:    #d1fae5;
  --majlis-emerald-200:    #6ee7b7;
  --majlis-emerald-300:    #34d399;
  --majlis-emerald-400:    #059669;
  --majlis-emerald-500:    #065f46;
  --majlis-emerald-600:    #064e3b;

  /* Sand / Warm Earth — 沙色暖色调辅助 */
  --majlis-sand-100:       #fef8f0;
  --majlis-sand-200:       #f5e6d3;
  --majlis-sand-300:       #d4a574;
  --majlis-sand-400:       #8b6914;
  --majlis-sand-500:       #5c3d2e;
  --majlis-sand-600:       #3b2418;

  /* Accent Red (limited use — notifications, errors) */
  --majlis-red:            #dc2626;
  --majlis-red-light:      #f87171;

  /* --- Typography --- */

  /* Font Families */
  --majlis-font-primary:   'Tajawal', 'Noto Naskh Arabic', sans-serif;   /* 正文 */
  --majlis-font-heading:   'Cairo', 'Tajawal', sans-serif;               /* 标题 */
  --majlis-font-mono:      'Fira Code', 'Cascadia Code', monospace;

  /* Font Sizes (RTL-aware relative scale) */
  --majlis-text-xs:        0.75rem;   /* 12px */
  --majlis-text-sm:        0.875rem;  /* 14px */
  --majlis-text-base:      1rem;      /* 16px */
  --majlis-text-lg:        1.125rem;  /* 18px */
  --majlis-text-xl:        1.25rem;   /* 20px */
  --majlis-text-2xl:       1.5rem;    /* 24px */
  --majlis-text-3xl:       1.875rem;  /* 30px */
  --majlis-text-4xl:       2.25rem;   /* 36px */
  --majlis-text-5xl:       3rem;      /* 48px */

  /* Font Weights */
  --majlis-font-light:     300;
  --majlis-font-regular:   400;
  --majlis-font-medium:    500;
  --majlis-font-semibold:  600;
  --majlis-font-bold:      700;
  --majlis-font-extrabold: 800;

  /* Line Heights (Arabic needs taller line-height) */
  --majlis-leading-tight:  1.4;
  --majlis-leading-normal: 1.7;
  --majlis-leading-relaxed: 2;

  /* Letter Spacing (Arabic is naturally connected, minimal tracking) */
  --majlis-tracking-normal: 0;
  --majlis-tracking-wide:   0.02em;

  /* --- Spacing Scale (8px base) --- */
  --majlis-space-1:   0.25rem;  /* 4px  */
  --majlis-space-2:   0.5rem;   /* 8px  */
  --majlis-space-3:   0.75rem;  /* 12px */
  --majlis-space-4:   1rem;     /* 16px */
  --majlis-space-5:   1.25rem;  /* 20px */
  --majlis-space-6:   1.5rem;   /* 24px */
  --majlis-space-8:   2rem;     /* 32px */
  --majlis-space-10:  2.5rem;   /* 40px */
  --majlis-space-12:  3rem;     /* 48px */
  --majlis-space-16:  4rem;     /* 64px */
  --majlis-space-20:  5rem;     /* 80px */
  --majlis-space-24:  6rem;     /* 96px */

  /* --- Border Radius --- */
  --majlis-radius-sm:     0.375rem;
  --majlis-radius-md:     0.5rem;
  --majlis-radius-lg:     0.75rem;
  --majlis-radius-xl:     1rem;
  --majlis-radius-2xl:    1.5rem;
  --majlis-radius-full:   9999px;

  /* --- Borders --- */
  --majlis-border-thin:   1px solid rgba(212,168,67,0.18);
  --majlis-border-gold:   1px solid rgba(212,168,67,0.35);
  --majlis-border-focus:  2px solid var(--majlis-gold-400);

  /* --- Shadows --- */
  --majlis-shadow-sm:     0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --majlis-shadow-md:     0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
  --majlis-shadow-lg:     0 10px 30px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.4);
  --majlis-shadow-gold:   0 0 20px rgba(212,168,67,0.3), 0 0 40px rgba(212,168,67,0.1);
  --majlis-shadow-emerald: 0 0 20px rgba(5,150,105,0.2);

  /* --- Transitions --- */
  --majlis-transition-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --majlis-transition-normal:  250ms cubic-bezier(0.4, 0, 0.2, 1);
  --majlis-transition-slow:    400ms cubic-bezier(0.4, 0, 0.2, 1);
  --majlis-transition-bounce:  300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Z-Index Scale --- */
  --majlis-z-dropdown:    100;
  --majlis-z-sticky:      200;
  --majlis-z-navbar:      300;
  --majlis-z-modal:       400;
  --majlis-z-toast:       500;
  --majlis-z-tooltip:     600;

  /* --- Glassmorphism --- */
  --majlis-glass-bg:       rgba(22,30,40,0.75);
  --majlis-glass-blur:     12px;
  --majlis-glass-border:   rgba(212,168,67,0.15);

  /* --- Layout --- */
  --majlis-nav-height:     64px;
  --majlis-max-width:      1200px;
  --majlis-sidebar-width:  280px;
}


/* ============================================================
 *  2. GLOBAL RESET & BASE STYLES
 * ============================================================ */

/* Box-sizing border-box globally */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Base HTML & Body — RTL-first */
html {
  direction: rtl;                    /* RTL by default */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--majlis-font-primary);
  font-size: var(--majlis-text-base);
  line-height: var(--majlis-leading-normal);
  font-weight: var(--majlis-font-regular);
  letter-spacing: var(--majlis-tracking-normal);
  color: var(--majlis-sand-100);
  background-color: var(--majlis-bg-deep);
  background-image:
    /* 微妙的沙漠纹理渐变 */
    radial-gradient(ellipse at 20% 50%, rgba(139,105,20,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(5,150,105,0.05) 0%, transparent 50%);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Selection */
::selection {
  background-color: rgba(212,168,67,0.3);
  color: var(--majlis-sand-100);
}

/* Links */
a {
  color: var(--majlis-gold-400);
  text-decoration: none;
  transition: color var(--majlis-transition-fast);
}

a:hover {
  color: var(--majlis-gold-300);
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--majlis-font-heading);
  font-weight: var(--majlis-font-bold);
  line-height: var(--majlis-leading-tight);
  color: var(--majlis-sand-100);
  margin-bottom: var(--majlis-space-4);
}

h1 { font-size: var(--majlis-text-5xl); }
h2 { font-size: var(--majlis-text-4xl); }
h3 { font-size: var(--majlis-text-3xl); }
h4 { font-size: var(--majlis-text-2xl); }
h5 { font-size: var(--majlis-text-xl);  }
h6 { font-size: var(--majlis-text-lg);  }

/* Paragraphs */
p {
  margin-bottom: var(--majlis-space-4);
}

/* Lists */
ul, ol {
  padding-inline-start: var(--majlis-space-6);  /* RTL-aware */
}


/* ============================================================
 *  3. CUSTOM SCROLLBAR — Thin Gold Scrollbar
 * ============================================================ */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--majlis-gold-500) var(--majlis-bg-primary);
}

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--majlis-bg-primary);
  border-radius: var(--majlis-radius-full);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--majlis-gold-500), var(--majlis-gold-400));
  border-radius: var(--majlis-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--majlis-gold-400), var(--majlis-gold-300));
}

::-webkit-scrollbar-corner {
  background: transparent;
}


/* ============================================================
 *  4. NAVIGATION BAR — Glassmorphism + Gold Divider
 * ============================================================ */

.majlis-navbar {
  position: sticky;
  top: 0;
  z-index: var(--majlis-z-navbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--majlis-nav-height);
  padding-inline: var(--majlis-space-6);
  background: var(--majlis-glass-bg);
  backdrop-filter: blur(var(--majlis-glass-blur));
  -webkit-backdrop-filter: blur(var(--majlis-glass-blur));
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(
    to left,
    transparent 0%,
    var(--majlis-gold-400) 20%,
    var(--majlis-gold-400) 80%,
    transparent 100%
  ) 1;
  /* Fallback for browsers without border-image support */
  box-shadow: 0 2px 0 -1px rgba(212,168,67,0.3);
  transition: background var(--majlis-transition-normal);
}

/* Navbar logo */
.majlis-navbar__logo {
  font-family: var(--majlis-font-heading);
  font-size: var(--majlis-text-2xl);
  font-weight: var(--majlis-font-extrabold);
  color: var(--majlis-gold-400);
  display: flex;
  align-items: center;
  gap: var(--majlis-space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Navbar links container */
.majlis-navbar__links {
  display: flex;
  align-items: center;
  gap: var(--majlis-space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Individual nav link */
.majlis-navbar__link {
  font-family: var(--majlis-font-primary);
  font-size: var(--majlis-text-sm);
  font-weight: var(--majlis-font-medium);
  color: var(--majlis-sand-200);
  text-transform: uppercase;
  letter-spacing: var(--majlis-tracking-wide);
  position: relative;
  padding: var(--majlis-space-1) 0;
  transition: color var(--majlis-transition-fast);
}

.majlis-navbar__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  inset-inline-start: 0;   /* RTL-aware */
  width: 0;
  height: 2px;
  background: var(--majlis-gold-400);
  transition: width var(--majlis-transition-normal);
}

.majlis-navbar__link:hover,
.majlis-navbar__link--active {
  color: var(--majlis-gold-300);
}

.majlis-navbar__link:hover::after,
.majlis-navbar__link--active::after {
  width: 100%;
}

/* Navbar action buttons area */
.majlis-navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--majlis-space-3);
}

/* Mobile hamburger menu */
.majlis-navbar__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--majlis-space-2);
}

.majlis-navbar__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--majlis-gold-400);
  margin: 5px 0;
  transition: var(--majlis-transition-normal);
}


/* ============================================================
 *  5. BUTTONS — Gold Gradient + Hover Float + Glow
 * ============================================================ */

/* Base button */
.majlis-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--majlis-space-2);
  font-family: var(--majlis-font-heading);
  font-weight: var(--majlis-font-semibold);
  font-size: var(--majlis-text-sm);
  line-height: 1;
  padding: var(--majlis-space-3) var(--majlis-space-6);
  border: none;
  border-radius: var(--majlis-radius-lg);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    transform var(--majlis-transition-bounce),
    box-shadow var(--majlis-transition-normal),
    background var(--majlis-transition-normal);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

/* Hover: float up 2px + glow */
.majlis-btn:hover {
  transform: translateY(-2px);
}

.majlis-btn:active {
  transform: translateY(0);
}

/* Button: Primary — Full gold gradient */
.majlis-btn--primary {
  background: linear-gradient(135deg, var(--majlis-gold-500), var(--majlis-gold-400), var(--majlis-gold-300));
  color: var(--majlis-bg-deep);
  box-shadow: var(--majlis-shadow-md);
}

.majlis-btn--primary:hover {
  box-shadow: var(--majlis-shadow-gold), var(--majlis-shadow-lg);
}

.majlis-btn--primary:active {
  box-shadow: var(--majlis-shadow-md);
}

/* Button: Outline — Gold border */
.majlis-btn--outline {
  background: transparent;
  color: var(--majlis-gold-400);
  border: var(--majlis-border-gold);
}

.majlis-btn--outline:hover {
  background: rgba(212,168,67,0.08);
  box-shadow: var(--majlis-shadow-gold);
}

/* Button: Ghost — transparent with hover */
.majlis-btn--ghost {
  background: transparent;
  color: var(--majlis-sand-200);
}

.majlis-btn--ghost:hover {
  background: rgba(212,168,67,0.06);
  color: var(--majlis-gold-300);
}

/* Button: Emerald — green accent for success/confirm */
.majlis-btn--emerald {
  background: linear-gradient(135deg, var(--majlis-emerald-500), var(--majlis-emerald-400));
  color: var(--majlis-sand-100);
  box-shadow: var(--majlis-shadow-md);
}

.majlis-btn--emerald:hover {
  box-shadow: var(--majlis-shadow-emerald), var(--majlis-shadow-lg);
}

/* Button sizes */
.majlis-btn--sm {
  padding: var(--majlis-space-2) var(--majlis-space-4);
  font-size: var(--majlis-text-xs);
  border-radius: var(--majlis-radius-md);
}

.majlis-btn--lg {
  padding: var(--majlis-space-4) var(--majlis-space-8);
  font-size: var(--majlis-text-lg);
  border-radius: var(--majlis-radius-xl);
}

.majlis-btn--pill {
  border-radius: var(--majlis-radius-full);
}

/* Button: disabled state */
.majlis-btn:disabled,
.majlis-btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button: icon-only (circle) */
.majlis-btn--icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--majlis-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ============================================================
 *  6. CARDS — Semi-transparent + Gold Border + Hover Scale
 * ============================================================ */

.majlis-card {
  background: var(--majlis-bg-surface);
  border: var(--majlis-border-thin);
  border-radius: var(--majlis-radius-xl);
  padding: var(--majlis-space-6);
  transition:
    transform var(--majlis-transition-bounce),
    box-shadow var(--majlis-transition-normal),
    border-color var(--majlis-transition-normal);
  position: relative;
  overflow: hidden;
}

/* Subtle gold gradient overlay */
.majlis-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(212,168,67,0.03) 0%,
    transparent 50%,
    rgba(5,150,105,0.02) 100%
  );
  pointer-events: none;
}

/* Hover: scale up slightly + enhanced gold border + shadow */
.majlis-card:hover {
  transform: scale(1.02);
  border-color: var(--majlis-gold-400);
  box-shadow: var(--majlis-shadow-gold), var(--majlis-shadow-lg);
}

/* Card variants */

/* Featured card — more prominent gold border */
.majlis-card--featured {
  border: var(--majlis-border-gold);
  background: linear-gradient(
    135deg,
    var(--majlis-bg-surface) 0%,
    rgba(212,168,67,0.05) 100%
  );
}

/* Interactive card (clickable) */
.majlis-card--interactive {
  cursor: pointer;
}

.majlis-card--interactive:active {
  transform: scale(0.98);
}

/* Compact card */
.majlis-card--compact {
  padding: var(--majlis-space-4);
}

/* Card header */
.majlis-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--majlis-space-4);
  padding-bottom: var(--majlis-space-3);
  border-bottom: 1px solid rgba(212,168,67,0.1);
}

.majlis-card__title {
  font-family: var(--majlis-font-heading);
  font-size: var(--majlis-text-lg);
  font-weight: var(--majlis-font-bold);
  color: var(--majlis-sand-100);
  margin: 0;
}

/* Card footer */
.majlis-card__footer {
  margin-top: var(--majlis-space-4);
  padding-top: var(--majlis-space-3);
  border-top: 1px solid rgba(212,168,67,0.1);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--majlis-space-3);
}

/* Game card — for game aggregation site */
.majlis-game-card {
  background: var(--majlis-bg-surface);
  border: var(--majlis-border-thin);
  border-radius: var(--majlis-radius-xl);
  overflow: hidden;
  transition:
    transform var(--majlis-transition-bounce),
    box-shadow var(--majlis-transition-normal);
  cursor: pointer;
}

.majlis-game-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--majlis-shadow-gold), var(--majlis-shadow-lg);
}

.majlis-game-card__image {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  background: var(--majlis-bg-elevated);
}

.majlis-game-card__body {
  padding: var(--majlis-space-4);
}

.majlis-game-card__title {
  font-family: var(--majlis-font-heading);
  font-weight: var(--majlis-font-bold);
  font-size: var(--majlis-text-base);
  color: var(--majlis-sand-100);
  margin-bottom: var(--majlis-space-1);
}

.majlis-game-card__meta {
  font-size: var(--majlis-text-xs);
  color: var(--majlis-sand-300);
}


/* ============================================================
 *  7. FORM INPUTS — Dark Background + Gold Focus Border
 * ============================================================ */

.majlis-input {
  width: 100%;
  font-family: var(--majlis-font-primary);
  font-size: var(--majlis-text-base);
  color: var(--majlis-sand-100);
  background: var(--majlis-bg-primary);
  border: 1px solid rgba(212,168,67,0.15);
  border-radius: var(--majlis-radius-lg);
  padding: var(--majlis-space-3) var(--majlis-space-4);
  outline: none;
  transition:
    border-color var(--majlis-transition-fast),
    box-shadow var(--majlis-transition-fast);
  direction: rtl;
}

.majlis-input::placeholder {
  color: var(--majlis-sand-400);
  opacity: 0.6;
}

.majlis-input:focus {
  border-color: var(--majlis-gold-400);
  box-shadow: 0 0 0 3px rgba(212,168,67,0.15), 0 0 15px rgba(212,168,67,0.08);
}

/* Input with error state */
.majlis-input--error {
  border-color: var(--majlis-red);
}

.majlis-input--error:focus {
  box-shadow: 0 0 0 3px rgba(220,38,38,0.15);
}

/* Textarea */
.majlis-textarea {
  resize: vertical;
  min-height: 100px;
  line-height: var(--majlis-leading-relaxed);
}

/* Select */
.majlis-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23d4a843' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--majlis-space-4) center;
  padding-inline-end: var(--majlis-space-10);
  cursor: pointer;
}

.majlis-select option {
  background: var(--majlis-bg-elevated);
  color: var(--majlis-sand-100);
}

/* Label */
.majlis-label {
  display: block;
  font-family: var(--majlis-font-heading);
  font-size: var(--majlis-text-sm);
  font-weight: var(--majlis-font-medium);
  color: var(--majlis-sand-200);
  margin-bottom: var(--majlis-space-2);
}

/* Form group */
.majlis-form-group {
  margin-bottom: var(--majlis-space-5);
}

/* Helper/error text */
.majlis-form-helper {
  font-size: var(--majlis-text-xs);
  color: var(--majlis-sand-300);
  margin-top: var(--majlis-space-1);
}

.majlis-form-error {
  font-size: var(--majlis-text-xs);
  color: var(--majlis-red-light);
  margin-top: var(--majlis-space-1);
}

/* Checkbox / Radio custom */
.majlis-checkbox,
.majlis-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--majlis-space-2);
  cursor: pointer;
  font-size: var(--majlis-text-sm);
  color: var(--majlis-sand-200);
}

.majlis-checkbox input,
.majlis-radio input {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(212,168,67,0.3);
  border-radius: var(--majlis-radius-sm);
  background: var(--majlis-bg-primary);
  cursor: pointer;
  position: relative;
  transition: all var(--majlis-transition-fast);
  flex-shrink: 0;
}

.majlis-radio input {
  border-radius: var(--majlis-radius-full);
}

.majlis-checkbox input:checked,
.majlis-radio input:checked {
  background: var(--majlis-gold-400);
  border-color: var(--majlis-gold-400);
}

.majlis-checkbox input:checked::after {
  content: '';
  position: absolute;
  inset-inline-start: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid var(--majlis-bg-deep);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.majlis-radio input:checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--majlis-bg-deep);
}

/* Toggle switch */
.majlis-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--majlis-space-2);
  cursor: pointer;
  font-size: var(--majlis-text-sm);
  color: var(--majlis-sand-200);
}

.majlis-toggle input {
  display: none;
}

.majlis-toggle__track {
  width: 44px;
  height: 24px;
  background: var(--majlis-bg-primary);
  border: 1px solid rgba(212,168,67,0.2);
  border-radius: var(--majlis-radius-full);
  position: relative;
  transition: background var(--majlis-transition-fast);
  flex-shrink: 0;
}

.majlis-toggle__track::after {
  content: '';
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 16px;
  height: 16px;
  background: var(--majlis-gold-500);
  border-radius: 50%;
  transition: transform var(--majlis-transition-fast);
}

.majlis-toggle input:checked + .majlis-toggle__track {
  background: rgba(212,168,67,0.2);
  border-color: var(--majlis-gold-400);
}

.majlis-toggle input:checked + .majlis-toggle__track::after {
  transform: translateX(20px);
  background: var(--majlis-gold-400);
}


/* ============================================================
 *  8. MODAL / DIALOG — Centered + Background Blur
 * ============================================================ */

/* Overlay */
.majlis-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--majlis-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--majlis-space-6);
  background: var(--majlis-bg-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--majlis-transition-normal),
    visibility var(--majlis-transition-normal);
}

.majlis-modal-overlay--open {
  opacity: 1;
  visibility: visible;
}

/* Modal container */
.majlis-modal {
  background: var(--majlis-bg-elevated);
  border: var(--majlis-border-gold);
  border-radius: var(--majlis-radius-2xl);
  width: 100%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--majlis-shadow-gold), var(--majlis-shadow-lg);
  transform: scale(0.95) translateY(10px);
  transition: transform var(--majlis-transition-bounce);
  position: relative;
}

.majlis-modal-overlay--open .majlis-modal {
  transform: scale(1) translateY(0);
}

/* Modal sizes */
.majlis-modal--sm { max-width: 380px; }
.majlis-modal--lg { max-width: 720px; }
.majlis-modal--xl { max-width: 960px; }

/* Modal header */
.majlis-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--majlis-space-5) var(--majlis-space-6);
  border-bottom: 1px solid rgba(212,168,67,0.1);
}

.majlis-modal__title {
  font-family: var(--majlis-font-heading);
  font-size: var(--majlis-text-xl);
  font-weight: var(--majlis-font-bold);
  color: var(--majlis-sand-100);
  margin: 0;
}

.majlis-modal__close {
  background: none;
  border: none;
  color: var(--majlis-sand-300);
  font-size: var(--majlis-text-xl);
  cursor: pointer;
  padding: var(--majlis-space-1);
  transition: color var(--majlis-transition-fast);
  line-height: 1;
}

.majlis-modal__close:hover {
  color: var(--majlis-gold-400);
}

/* Modal body */
.majlis-modal__body {
  padding: var(--majlis-space-6);
}

/* Modal footer */
.majlis-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--majlis-space-3);
  padding: var(--majlis-space-4) var(--majlis-space-6);
  border-top: 1px solid rgba(212,168,67,0.1);
}


/* ============================================================
 *  9. BADGE / TAG
 * ============================================================ */

.majlis-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--majlis-space-1);
  font-family: var(--majlis-font-heading);
  font-size: var(--majlis-text-xs);
  font-weight: var(--majlis-font-semibold);
  padding: var(--majlis-space-1) var(--majlis-space-3);
  border-radius: var(--majlis-radius-full);
  line-height: 1.4;
}

.majlis-badge--gold {
  background: rgba(212,168,67,0.15);
  color: var(--majlis-gold-300);
  border: 1px solid rgba(212,168,67,0.25);
}

.majlis-badge--emerald {
  background: rgba(5,150,105,0.15);
  color: var(--majlis-emerald-300);
  border: 1px solid rgba(5,150,105,0.25);
}

.majlis-badge--red {
  background: rgba(220,38,38,0.15);
  color: var(--majlis-red-light);
  border: 1px solid rgba(220,38,38,0.25);
}

.majlis-badge--sand {
  background: rgba(212,165,116,0.12);
  color: var(--majlis-sand-300);
  border: 1px solid rgba(212,165,116,0.2);
}


/* ============================================================
 *  10. TOOLTIP
 * ============================================================ */

.majlis-tooltip {
  position: relative;
}

.majlis-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: var(--majlis-space-1) var(--majlis-space-3);
  background: var(--majlis-bg-elevated);
  color: var(--majlis-sand-100);
  font-size: var(--majlis-text-xs);
  font-family: var(--majlis-font-primary);
  border-radius: var(--majlis-radius-md);
  border: 1px solid var(--majlis-gold-400);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: var(--majlis-transition-fast);
  pointer-events: none;
  z-index: var(--majlis-z-tooltip);
}

.majlis-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-8px);
}


/* ============================================================
 *  11. DIVIDER / SEPARATOR
 * ============================================================ */

.majlis-divider {
  border: none;
  height: 1px;
  background: linear-gradient(
    to left,
    transparent 0%,
    var(--majlis-gold-400) 20%,
    var(--majlis-gold-400) 80%,
    transparent 100%
  );
  margin: var(--majlis-space-6) 0;
  opacity: 0.3;
}

.majlis-divider--vertical {
  width: 1px;
  height: auto;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--majlis-gold-400) 20%,
    var(--majlis-gold-400) 80%,
    transparent 100%
  );
  margin: 0 var(--majlis-space-3);
}


/* ============================================================
 *  12. AVATAR
 * ============================================================ */

.majlis-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--majlis-radius-full);
  object-fit: cover;
  border: 2px solid var(--majlis-gold-400);
  flex-shrink: 0;
}

.majlis-avatar--sm { width: 32px; height: 32px; }
.majlis-avatar--lg { width: 64px; height: 64px; }
.majlis-avatar--xl { width: 96px; height: 96px; }

/* Avatar with online indicator */
.majlis-avatar--online {
  position: relative;
}

.majlis-avatar--online::after {
  content: '';
  position: absolute;
  bottom: 2px;
  inset-inline-end: 2px;
  width: 12px;
  height: 12px;
  background: var(--majlis-emerald-300);
  border: 2px solid var(--majlis-bg-surface);
  border-radius: 50%;
}

/* Avatar group stack (RTL) */
.majlis-avatar-group {
  display: flex;
  flex-direction: row-reverse;  /* RTL: later elements on left */
}

.majlis-avatar-group .majlis-avatar {
  margin-inline-end: -10px;
  transition: transform var(--majlis-transition-fast);
}

.majlis-avatar-group .majlis-avatar:hover {
  transform: translateY(-2px);
  z-index: 1;
}


/* ============================================================
 *  13. SKELETON / LOADING PLACEHOLDER
 * ============================================================ */

.majlis-skeleton {
  background: linear-gradient(
    90deg,
    var(--majlis-bg-surface) 25%,
    rgba(212,168,67,0.08) 50%,
    var(--majlis-bg-surface) 75%
  );
  background-size: 200% 100%;
  animation: majlis-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--majlis-radius-md);
}

.majlis-skeleton--text {
  height: 1em;
  margin-bottom: var(--majlis-space-2);
}

.majlis-skeleton--heading {
  height: 1.5em;
  margin-bottom: var(--majlis-space-3);
}

.majlis-skeleton--avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--majlis-radius-full);
}

.majlis-skeleton--image {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: var(--majlis-radius-lg);
}

.majlis-skeleton--button {
  width: 120px;
  height: 40px;
  border-radius: var(--majlis-radius-lg);
}


/* ============================================================
 *  14. TOAST / NOTIFICATION
 * ============================================================ */

.majlis-toast-container {
  position: fixed;
  top: var(--majlis-space-6);
  inset-inline-end: var(--majlis-space-6);
  z-index: var(--majlis-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--majlis-space-3);
  pointer-events: none;
}

.majlis-toast {
  display: flex;
  align-items: center;
  gap: var(--majlis-space-3);
  padding: var(--majlis-space-4) var(--majlis-space-5);
  background: var(--majlis-bg-elevated);
  border: 1px solid rgba(212,168,67,0.2);
  border-radius: var(--majlis-radius-lg);
  box-shadow: var(--majlis-shadow-lg);
  min-width: 300px;
  max-width: 420px;
  pointer-events: auto;
  animation: majlis-slide-in 0.3s ease-out;
}

.majlis-toast--success {
  border-inline-start: 3px solid var(--majlis-emerald-400);
}

.majlis-toast--error {
  border-inline-start: 3px solid var(--majlis-red);
}

.majlis-toast--warning {
  border-inline-start: 3px solid var(--majlis-gold-400);
}

.majlis-toast__icon {
  flex-shrink: 0;
  font-size: var(--majlis-text-xl);
}

.majlis-toast__body {
  flex: 1;
}

.majlis-toast__title {
  font-family: var(--majlis-font-heading);
  font-size: var(--majlis-text-sm);
  font-weight: var(--majlis-font-semibold);
  color: var(--majlis-sand-100);
  margin-bottom: 2px;
}

.majlis-toast__message {
  font-size: var(--majlis-text-xs);
  color: var(--majlis-sand-300);
}

.majlis-toast__close {
  background: none;
  border: none;
  color: var(--majlis-sand-300);
  cursor: pointer;
  padding: var(--majlis-space-1);
  flex-shrink: 0;
}


/* ============================================================
 *  15. PROGRESS / SLIDER
 * ============================================================ */

.majlis-progress {
  width: 100%;
  height: 6px;
  background: var(--majlis-bg-primary);
  border-radius: var(--majlis-radius-full);
  overflow: hidden;
}

.majlis-progress__fill {
  height: 100%;
  background: linear-gradient(
    to left,
    var(--majlis-gold-500),
    var(--majlis-gold-400)
  );
  border-radius: var(--majlis-radius-full);
  transition: width var(--majlis-transition-slow);
}

/* Progress with emerald */
.majlis-progress--emerald .majlis-progress__fill {
  background: linear-gradient(
    to left,
    var(--majlis-emerald-500),
    var(--majlis-emerald-400)
  );
}

/* Slider / Range */
.majlis-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--majlis-bg-primary);
  border-radius: var(--majlis-radius-full);
  outline: none;
}

.majlis-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--majlis-gold-400);
  cursor: pointer;
  box-shadow: var(--majlis-shadow-gold);
  transition: transform var(--majlis-transition-fast);
}

.majlis-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.majlis-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--majlis-gold-400);
  cursor: pointer;
  border: none;
}


/* ============================================================
 *  16. VOICE / AUDIO PLAYER (for Social Voice Platform)
 * ============================================================ */

.majlis-voice-bar {
  display: flex;
  align-items: center;
  gap: var(--majlis-space-4);
  padding: var(--majlis-space-3) var(--majlis-space-4);
  background: var(--majlis-bg-surface);
  border: var(--majlis-border-thin);
  border-radius: var(--majlis-radius-full);
}

.majlis-voice-bar__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--majlis-gold-500), var(--majlis-gold-400));
  color: var(--majlis-bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--majlis-transition-bounce);
}

.majlis-voice-bar__btn:hover {
  transform: scale(1.1);
  box-shadow: var(--majlis-shadow-gold);
}

/* Voice waveform visualizer placeholder */
.majlis-voice-waveform {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
}

.majlis-voice-waveform__bar {
  flex: 1;
  background: var(--majlis-gold-400);
  border-radius: 2px;
  animation: majlis-waveform 1.2s ease-in-out infinite;
}

.majlis-voice-waveform__bar:nth-child(2)  { animation-delay: 0.1s; }
.majlis-voice-waveform__bar:nth-child(3)  { animation-delay: 0.2s; }
.majlis-voice-waveform__bar:nth-child(4)  { animation-delay: 0.3s; }
.majlis-voice-waveform__bar:nth-child(5)  { animation-delay: 0.4s; }
.majlis-voice-waveform__bar:nth-child(6)  { animation-delay: 0.5s; }
.majlis-voice-waveform__bar:nth-child(7)  { animation-delay: 0.6s; }
.majlis-voice-waveform__bar:nth-child(8)  { animation-delay: 0.7s; }
.majlis-voice-waveform__bar:nth-child(9)  { animation-delay: 0.8s; }
.majlis-voice-waveform__bar:nth-child(10) { animation-delay: 0.9s; }

.majlis-voice-bar__time {
  font-size: var(--majlis-text-xs);
  color: var(--majlis-sand-300);
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: center;
}


/* ============================================================
 *  17. ISLAMIC GEOMETRIC DECORATIVE PATTERNS (Pure CSS)
 * ============================================================ */

/* 8-pointed star pattern background — for hero sections */
.majlis-pattern-stars {
  position: relative;
  overflow: hidden;
}

.majlis-pattern-stars::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image:
    /* 8-pointed star using CSS gradients */
    repeating-conic-gradient(
      var(--majlis-gold-400) 0% 2%,
      transparent 2% 12.5%
    ),
    repeating-conic-gradient(
      var(--majlis-gold-400) 0% 2%,
      transparent 2% 12.5%
    );
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
  pointer-events: none;
  z-index: 0;
}

/* Geometric diamond lattice — for card backgrounds */
.majlis-pattern-lattice {
  position: relative;
  overflow: hidden;
}

.majlis-pattern-lattice::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image:
    linear-gradient(45deg, var(--majlis-gold-400) 1px, transparent 1px),
    linear-gradient(-45deg, var(--majlis-gold-400) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* Arabesque border frame — decorative corners */
.majlis-frame {
  position: relative;
  padding: var(--majlis-space-6);
  border: 1px solid rgba(212,168,67,0.15);
  border-radius: var(--majlis-radius-xl);
}

.majlis-frame::before,
.majlis-frame::after {
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  border-color: var(--majlis-gold-400);
  border-style: solid;
  opacity: 0.3;
}

.majlis-frame::before {
  top: -1px;
  inset-inline-start: -1px;
  border-width: 2px 0 0 2px;
  border-radius: var(--majlis-radius-sm) 0 0 0;
}

.majlis-frame::after {
  bottom: -1px;
  inset-inline-end: -1px;
  border-width: 0 2px 2px 0;
  border-radius: 0 0 var(--majlis-radius-sm) 0;
}

/* Crescent moon decorative element */
.majlis-crescent {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow:
    4px -2px 0 0 var(--majlis-gold-400);
  transform: rotate(-30deg);
  opacity: 0.6;
}


/* ============================================================
 *  18. LAYOUT HELPERS
 * ============================================================ */

/* Container */
.majlis-container {
  width: 100%;
  max-width: var(--majlis-max-width);
  margin-inline: auto;
  padding-inline: var(--majlis-space-6);
}

/* Flex layouts */
.majlis-flex { display: flex; }
.majlis-flex--col { flex-direction: column; }
.majlis-flex--center { align-items: center; justify-content: center; }
.majlis-flex--between { align-items: center; justify-content: space-between; }
.majlis-flex--wrap { flex-wrap: wrap; }
.majlis-flex--gap-sm { gap: var(--majlis-space-3); }
.majlis-flex--gap-md { gap: var(--majlis-space-5); }
.majlis-flex--gap-lg { gap: var(--majlis-space-8); }

/* Grid layouts */
.majlis-grid {
  display: grid;
  gap: var(--majlis-space-5);
}

.majlis-grid--2 { grid-template-columns: repeat(2, 1fr); }
.majlis-grid--3 { grid-template-columns: repeat(3, 1fr); }
.majlis-grid--4 { grid-template-columns: repeat(4, 1fr); }
.majlis-grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* Text alignment — RTL-aware */
.majlis-text-start  { text-align: start; }
.majlis-text-center { text-align: center; }
.majlis-text-end    { text-align: end; }

/* Text colors */
.majlis-text-gold     { color: var(--majlis-gold-400); }
.majlis-text-emerald  { color: var(--majlis-emerald-400); }
.majlis-text-sand     { color: var(--majlis-sand-300); }
.majlis-text-muted    { color: var(--majlis-sand-400); }
.majlis-text-error    { color: var(--majlis-red-light); }

/* Spacing utilities */
.majlis-mt-2  { margin-top: var(--majlis-space-2); }
.majlis-mt-4  { margin-top: var(--majlis-space-4); }
.majlis-mt-8  { margin-top: var(--majlis-space-8); }
.majlis-mb-2  { margin-bottom: var(--majlis-space-2); }
.majlis-mb-4  { margin-bottom: var(--majlis-space-4); }
.majlis-mb-8  { margin-bottom: var(--majlis-space-8); }
.majlis-p-4   { padding: var(--majlis-space-4); }
.majlis-p-6   { padding: var(--majlis-space-6); }

/* Truncate text */
.majlis-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Screen reader only */
.majlis-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* ============================================================
 *  19. ANIMATIONS / KEYFRAMES
 * ============================================================ */

/* Shimmer loading effect */
@keyframes majlis-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Toast slide in (from right in RTL) */
@keyframes majlis-slide-in {
  from {
    opacity: 0;
    transform: translateX(20px);  /* RTL: slides from left */
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in */
@keyframes majlis-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scale in (for modals, popups) */
@keyframes majlis-scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pulse glow — for live indicators, notifications */
@keyframes majlis-pulse-gold {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(212,168,67,0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(212,168,67,0);
  }
}

/* Waveform bars animation */
@keyframes majlis-waveform {
  0%, 100% { height: 8px;  }
  50%      { height: 32px; }
}

/* Rotate — for loading spinners */
@keyframes majlis-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Float — subtle floating animation for decorative elements */
@keyframes majlis-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}


/* ============================================================
 *  20. UTILITY ANIMATION CLASSES
 * ============================================================ */

.majlis-animate-fade-in {
  animation: majlis-fade-in 0.5s ease-out;
}

.majlis-animate-scale-in {
  animation: majlis-scale-in 0.3s ease-out;
}

.majlis-animate-pulse {
  animation: majlis-pulse-gold 2s infinite;
}

.majlis-animate-float {
  animation: majlis-float 3s ease-in-out infinite;
}

.majlis-animate-spin {
  animation: majlis-spin 1s linear infinite;
}

/* Stagger children animations */
.majlis-stagger > * {
  opacity: 0;
  animation: majlis-fade-in 0.4s ease-out forwards;
}

.majlis-stagger > *:nth-child(1)  { animation-delay: 0.05s; }
.majlis-stagger > *:nth-child(2)  { animation-delay: 0.1s;  }
.majlis-stagger > *:nth-child(3)  { animation-delay: 0.15s; }
.majlis-stagger > *:nth-child(4)  { animation-delay: 0.2s;  }
.majlis-stagger > *:nth-child(5)  { animation-delay: 0.25s; }
.majlis-stagger > *:nth-child(6)  { animation-delay: 0.3s;  }
.majlis-stagger > *:nth-child(7)  { animation-delay: 0.35s; }
.majlis-stagger > *:nth-child(8)  { animation-delay: 0.4s;  }
.majlis-stagger > *:nth-child(9)  { animation-delay: 0.45s; }
.majlis-stagger > *:nth-child(10) { animation-delay: 0.5s;  }


/* ============================================================
 *  21. RESPONSIVE — Mobile First Adjustments
 * ============================================================ */

/* Tablet: 640px - 1024px */
@media (max-width: 1024px) {
  :root {
    --majlis-nav-height: 56px;
  }

  /* Grid adjustments */
  .majlis-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .majlis-grid--3 { grid-template-columns: repeat(2, 1fr); }

  /* Container padding */
  .majlis-container {
    padding-inline: var(--majlis-space-4);
  }

  /* Navbar — show hamburger, hide links by default */
  .majlis-navbar__toggle {
    display: block;
  }

  .majlis-navbar__links {
    position: fixed;
    top: var(--majlis-nav-height);
    inset-inline-start: 0;
    width: 100%;
    flex-direction: column;
    background: var(--majlis-bg-elevated);
    backdrop-filter: blur(var(--majlis-glass-blur));
    padding: var(--majlis-space-6);
    gap: var(--majlis-space-4);
    border-bottom: 1px solid rgba(212,168,67,0.15);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all var(--majlis-transition-normal);
    z-index: var(--majlis-z-navbar);
  }

  .majlis-navbar__links--open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  /* Modal full-width */
  .majlis-modal {
    max-width: 90vw;
    margin: var(--majlis-space-4);
  }
}

/* Mobile: < 640px */
@media (max-width: 640px) {
  :root {
    --majlis-nav-height: 52px;
  }

  /* Typography scale down */
  h1 { font-size: var(--majlis-text-3xl); }
  h2 { font-size: var(--majlis-text-2xl); }
  h3 { font-size: var(--majlis-text-xl);  }

  /* Grid — single column */
  .majlis-grid--2,
  .majlis-grid--3,
  .majlis-grid--4 {
    grid-template-columns: 1fr;
  }

  .majlis-grid--auto {
    grid-template-columns: 1fr;
  }

  /* Container */
  .majlis-container {
    padding-inline: var(--majlis-space-3);
  }

  /* Modal full screen */
  .majlis-modal {
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
  }

  .majlis-modal-overlay {
    padding: 0;
  }

  /* Toast full width */
  .majlis-toast {
    min-width: auto;
    max-width: calc(100vw - var(--majlis-space-6) * 2);
  }

  .majlis-toast-container {
    inset-inline: var(--majlis-space-3);
  }

  /* Buttons full width on mobile */
  .majlis-btn--block-mobile {
    width: 100%;
  }

  /* Card adjustments */
  .majlis-card {
    padding: var(--majlis-space-4);
  }

  /* Voice bar */
  .majlis-voice-bar {
    flex-wrap: wrap;
    border-radius: var(--majlis-radius-lg);
  }

  .majlis-voice-bar__time {
    width: 100%;
    text-align: center;
  }
}

/* Desktop: > 1024px */
@media (min-width: 1025px) {
  /* Sidebar layout helper */
  .majlis-layout--sidebar {
    display: grid;
    grid-template-columns: var(--majlis-sidebar-width) 1fr;
    min-height: calc(100vh - var(--majlis-nav-height));
  }

  .majlis-sidebar {
    position: sticky;
    top: var(--majlis-nav-height);
    height: calc(100vh - var(--majlis-nav-height));
    overflow-y: auto;
    padding: var(--majlis-space-6);
    background: var(--majlis-bg-primary);
    border-inline-end: 1px solid rgba(212,168,67,0.1);
  }

  /* Hover-only effects (disabled on touch devices) */
  @media (hover: hover) {
    .majlis-card:hover {
      transform: scale(1.02);
    }

    .majlis-game-card:hover {
      transform: translateY(-4px);
    }
  }
}


/* ============================================================
 *  22. REDUCED MOTION (Accessibility)
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .majlis-card:hover {
    transform: none;
  }

  .majlis-btn:hover {
    transform: none;
  }
}


/* ============================================================
 *  23. PRINT STYLES
 * ============================================================ */

@media print {
  body {
    background: white;
    color: black;
  }

  .majlis-navbar,
  .majlis-modal-overlay,
  .majlis-toast-container {
    display: none !important;
  }

  .majlis-card {
    border: 1px solid #ccc;
    box-shadow: none;
    break-inside: avoid;
  }
}


/* ============================================================
 *  24. RTL SPECIFIC OVERRIDES
 *  (Fallback for browsers without full logical property support)
 * ============================================================ */

/* Direction override helper (use on containers that must stay LTR) */
.majlis-ltr {
  direction: ltr;
  text-align: left;
}

/* RTL-only: flip icons that should point left */
[dir="rtl"] .majlis-icon--flip {
  transform: scaleX(-1);
}

/* RTL: adjust transform origins */
[dir="rtl"] .majlis-animate-scale-in {
  transform-origin: right center;
}

/* End of Majlis Design System */