/**
 * Alhijaz FC — Brand Theme Tokens
 * Extracted from the official club crest.
 * These values are the default theme; administrators can override them via the dashboard.
 */

:root {
  /* ── Club identity ── */
  --club-name-en: "Alhijaz FC";
  --club-name-ar: "نادي الحجاز";
  --club-founded: 1980;

  /* ── Primary palette (green from shield) ── */
  --color-primary: #1a7a3a;
  --color-primary-light: #22a04a;
  --color-primary-dark: #0f5a2a;
  --color-primary-rgb: 26, 122, 58;

  /* ── Secondary & accent (white + yellow from crest) ── */
  --color-secondary: #ffffff;
  --color-accent: #ffd100;
  --color-accent-light: #ffe566;
  --color-accent-dark: #d4a800;

  /* ── Neutrals ── */
  --color-background: #fafafa;
  --color-background-dark: #0a1f12;
  --color-surface: #ffffff;
  --color-surface-dark: #142818;
  --color-text: #1a1a1a;
  --color-text-inverse: #ffffff;
  --color-text-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-border-metallic: #ffd100;

  /* ── Semantic ── */
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error: #dc2626;

  /* ── Gradients (logo green + yellow accents) ── */
  --gradient-primary: radial-gradient(
    ellipse at center,
    #22a04a 0%,
    #1a7a3a 45%,
    #0f5a2a 100%
  );
  --gradient-primary-linear: linear-gradient(
    135deg,
    #22a04a 0%,
    #1a7a3a 50%,
    #0f5a2a 100%
  );
  --gradient-shield-border: linear-gradient(
    180deg,
    #ffe566 0%,
    #ffd100 25%,
    #d4a800 50%,
    #ffd100 75%,
    #ffe566 100%
  );
  --gradient-hero-overlay: linear-gradient(
    180deg,
    rgba(15, 90, 42, 0.3) 0%,
    rgba(15, 90, 42, 0.85) 100%
  );
  --gradient-match-day: linear-gradient(
    135deg,
    #0f5a2a 0%,
    #1a7a3a 40%,
    #22a04a 100%
  );

  /* ── Typography ── */
  --font-heading-en: "Montserrat", "Segoe UI", sans-serif;
  --font-body-en: "Inter", "Segoe UI", sans-serif;
  --font-accent-en: "Segoe UI", sans-serif;
  --font-heading-ar: "Tajawal", "Segoe UI", sans-serif;
  --font-body-ar: "Noto Sans Arabic", "Segoe UI", sans-serif;
  --font-accent-ar: "Tajawal", "Segoe UI", sans-serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ── Spacing & layout ── */
  --spacing-section-sm: 3rem;
  --spacing-section-md: 5rem;
  --spacing-section-lg: 7rem;
  --content-max-width: 1280px;

  /* ── Border radius (shield-inspired) ── */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-shield: 0.5rem 0.5rem 2rem 2rem;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px -5px rgba(var(--color-primary-rgb), 0.15);
  --shadow-shield: 0 4px 0 var(--color-accent-dark), 0 8px 20px rgba(0, 0, 0, 0.25);
  --shadow-glow: 0 0 20px rgba(34, 160, 74, 0.4);

  /* ── Logo paths ── */
  --logo-main: url("/brand/logo.png");
  --logo-light-bg: url("/brand/logo.png");

  /* ── Component tokens ── */
  --header-bg: var(--color-primary);
  --header-text: var(--color-text-inverse);
  --footer-bg: var(--color-primary-dark);
  --footer-text: var(--color-text-inverse);
  --button-primary-bg: var(--color-primary);
  --button-primary-text: var(--color-text-inverse);
  --button-primary-hover: var(--color-primary-light);
  --button-secondary-bg: transparent;
  --button-secondary-text: var(--color-primary);
  --button-secondary-border: var(--color-primary);
  --card-bg: var(--color-surface);
  --card-border: var(--color-border-metallic);
  --link-color: var(--color-primary);
  --link-hover: var(--color-primary-light);

  /* ── Animation ── */
  --animation-intensity: 1;
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* Dark section variant (for hero / match-day areas) */
.theme-dark {
  --color-background: var(--color-background-dark);
  --color-surface: var(--color-surface-dark);
  --color-text: var(--color-text-inverse);
  --color-text-muted: #9ca3af;
  --color-border: #374151;
}

/* Match-day celebration theme */
.theme-match-day {
  --header-bg: var(--gradient-match-day);
  --button-primary-bg: var(--color-primary-light);
  --shadow-glow: 0 0 30px rgba(34, 160, 74, 0.6);
}

/* Championship celebration theme */
.theme-celebration {
  --header-bg: linear-gradient(135deg, #ffd100 0%, #1a7a3a 50%, #0f5a2a 100%);
  --shadow-glow: 0 0 30px rgba(255, 209, 0, 0.45);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --animation-intensity: 0;
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}

/**
 * Alhijaz FC Design System — Extended Tokens
 * All values map to CSS custom properties for admin theme override.
 */

:root {
  /* ── Neutral scale ── */
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e7eb;
  --neutral-300: #d1d5db;
  --neutral-400: #9ca3af;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #374151;
  --neutral-800: #1f2937;
  --neutral-900: #111827;
  --neutral-950: #0d0d0d;

  /* ── Semantic extended ── */
  --color-success-light: #dcfce7;
  --color-success-dark: #15803d;
  --color-warning-light: #fef3c7;
  --color-warning-dark: #b45309;
  --color-error-light: #fee2e2;
  --color-error-dark: #b91c1c;
  --color-info: #2563eb;
  --color-info-light: #dbeafe;
  --color-info-dark: #1d4ed8;

  /* ── Surface extended ── */
  --color-surface-elevated: #ffffff;
  --color-surface-elevated-dark: #262626;
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-overlay-light: rgba(255, 255, 255, 0.9);

  /* ── Typography extended ── */
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
  --font-size-6xl: 3.75rem;
  --font-weight-black: 900;
  --line-height-tight: 1.2;
  --line-height-snug: 1.375;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;

  /* ── Spacing scale ── */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --spacing-section-xl: 9rem;
  --content-narrow: 768px;
  --content-wide: 1440px;
  --gutter: 1.5rem;
  --gutter-lg: 2rem;

  /* ── Component spacing ── */
  --card-padding: 1.25rem;
  --card-padding-lg: 1.75rem;
  --input-padding-x: 0.875rem;
  --input-padding-y: 0.625rem;
  --nav-height: 4rem;
  --nav-height-mobile: 3.5rem;
  --sidebar-width: 16rem;

  /* ── Breakpoints (for reference in JS; use media queries in CSS) ── */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ── Grid ── */
  --grid-columns: 12;
  --grid-gap: 1.5rem;
  --grid-gap-sm: 1rem;
  --grid-gap-lg: 2rem;

  /* ── Animation extended ── */
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ── Icon sizes ── */
  --icon-size-xs: 0.875rem;
  --icon-size-sm: 1rem;
  --icon-size-md: 1.25rem;
  --icon-size-lg: 1.5rem;
  --icon-size-xl: 2rem;
  --icon-size-2xl: 2.5rem;

  /* ── Z-index scale ── */
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-fixed: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* ── Form tokens ── */
  --input-bg: var(--color-surface);
  --input-border: var(--color-border);
  --input-border-focus: var(--color-primary);
  --input-text: var(--color-text);
  --input-placeholder: var(--neutral-400);
  --input-radius: var(--radius-md);
  --input-shadow-focus: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);

  /* ── Table tokens ── */
  --table-header-bg: var(--neutral-100);
  --table-row-hover: var(--neutral-50);
  --table-border: var(--color-border);
  --table-stripe: var(--neutral-50);

  /* ── Tab tokens ── */
  --tab-active-bg: var(--color-primary);
  --tab-active-text: var(--color-text-inverse);
  --tab-inactive-text: var(--color-text-muted);
  --tab-border: var(--color-border);

  /* ── Dialog tokens ── */
  --dialog-bg: var(--color-surface);
  --dialog-radius: var(--radius-xl);
  --dialog-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* ── Notification tokens ── */
  --toast-success-bg: var(--color-success-light);
  --toast-success-text: var(--color-success-dark);
  --toast-warning-bg: var(--color-warning-light);
  --toast-warning-text: var(--color-warning-dark);
  --toast-error-bg: var(--color-error-light);
  --toast-error-text: var(--color-error-dark);
  --toast-info-bg: var(--color-info-light);
  --toast-info-text: var(--color-info-dark);

  /* ── Badge tokens ── */
  --badge-primary-bg: var(--color-primary);
  --badge-primary-text: var(--color-text-inverse);
  --badge-neutral-bg: var(--neutral-200);
  --badge-neutral-text: var(--neutral-700);

  /* ── Card variant tokens ── */
  --match-card-bg: var(--gradient-match-day);
  --player-card-aspect: 3 / 4;
  --product-card-aspect: 1 / 1;
  --news-card-aspect: 16 / 9;
}

.theme-dark {
  --input-bg: var(--color-surface-dark);
  --table-header-bg: var(--neutral-800);
  --table-row-hover: var(--neutral-800);
  --table-stripe: var(--neutral-900);
  --dialog-bg: var(--color-surface-dark);
  --badge-neutral-bg: var(--neutral-700);
  --badge-neutral-text: var(--neutral-200);
}

/**
 * Alhijaz FC Design System — Typography
 */

/* ── Paragraph styles ── */
.text-lead {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
}

.text-body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.text-small {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}

.text-caption {
  font-size: var(--font-size-xs);
  line-height: 1.4;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
}

.text-muted {
  color: var(--color-text-muted);
}

.text-inverse {
  color: var(--color-text-inverse);
}

.text-primary {
  color: var(--color-primary);
}

.text-center { text-align: center; }
.text-start { text-align: start; }
.text-end { text-align: end; }

/* ── Heading utilities ── */
.heading-display {
  font-family: var(--font-heading-en);
  font-size: clamp(var(--font-size-4xl), 5vw, var(--font-size-6xl));
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

[dir="rtl"] .heading-display {
  font-family: var(--font-heading-ar);
  text-transform: none;
  letter-spacing: 0;
}

.heading-section {
  font-family: var(--font-heading-en);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

[dir="rtl"] .heading-section {
  font-family: var(--font-heading-ar);
  text-transform: none;
}

.heading-subsection {
  font-family: var(--font-heading-en);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

[dir="rtl"] .heading-subsection {
  font-family: var(--font-heading-ar);
  text-transform: none;
}

.heading-overline {
  font-family: var(--font-heading-en);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
}

[dir="rtl"] .heading-overline {
  font-family: var(--font-heading-ar);
  letter-spacing: 0.05em;
  text-transform: none;
}

/* ── English typography block ── */
.typography-en {
  font-family: var(--font-body-en);
}

.typography-en h1,
.typography-en h2,
.typography-en h3,
.typography-en h4,
.typography-en h5,
.typography-en h6 {
  font-family: var(--font-heading-en);
  text-transform: uppercase;
}

/* ── Arabic typography block ── */
.typography-ar {
  font-family: var(--font-body-ar);
  line-height: calc(var(--line-height-normal) * 1.15);
}

.typography-ar h1,
.typography-ar h2,
.typography-ar h3,
.typography-ar h4,
.typography-ar h5,
.typography-ar h6 {
  font-family: var(--font-heading-ar);
  text-transform: none;
  letter-spacing: 0;
}

/* ── Prose (article content) ── */
.prose {
  max-width: 65ch;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.prose p + p {
  margin-top: var(--space-4);
}

.prose h2,
.prose h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.prose ul,
.prose ol {
  margin: var(--space-4) 0;
  -webkit-padding-start: var(--space-6);
          padding-inline-start: var(--space-6);
}

.prose li + li {
  margin-top: var(--space-2);
}

.prose blockquote {
  -webkit-border-start: 4px solid var(--color-primary);
          border-inline-start: 4px solid var(--color-primary);
  -webkit-padding-start: var(--space-4);
          padding-inline-start: var(--space-4);
  margin: var(--space-6) 0;
  font-style: italic;
  color: var(--color-text-muted);
}

.prose a {
  color: var(--link-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover {
  color: var(--link-hover);
}

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

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/**
 * Alhijaz FC Design System — Layout, Grid & Spacing
 */

/* ── Grid system ── */
.ds-grid {
  display: grid;
  grid-gap: var(--grid-gap);
  gap: var(--grid-gap);
}

.ds-grid--sm { gap: var(--grid-gap-sm); }
.ds-grid--lg { gap: var(--grid-gap-lg); }

.ds-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.ds-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ds-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .sm\:ds-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:ds-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:ds-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:ds-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:ds-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:ds-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:ds-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:ds-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ── Flex utilities ── */
.ds-flex { display: flex; }
.ds-flex-col { flex-direction: column; }
.ds-flex-wrap { flex-wrap: wrap; }
.ds-items-center { align-items: center; }
.ds-items-start { align-items: flex-start; }
.ds-items-end { align-items: flex-end; }
.ds-justify-center { justify-content: center; }
.ds-justify-between { justify-content: space-between; }
.ds-justify-end { justify-content: flex-end; }
.ds-gap-1 { gap: var(--space-1); }
.ds-gap-2 { gap: var(--space-2); }
.ds-gap-3 { gap: var(--space-3); }
.ds-gap-4 { gap: var(--space-4); }
.ds-gap-6 { gap: var(--space-6); }
.ds-gap-8 { gap: var(--space-8); }

/* ── Container variants ── */
.container {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  width: 100%;
}

.container-narrow {
  max-width: var(--content-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
  width: 100%;
}

.container-wide {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--gutter-lg);
  width: 100%;
}

/* ── Spacing utilities ── */
.p-0 { padding: var(--space-0); }
.p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.px-4 { padding-inline: var(--space-4); }
.px-6 { padding-inline: var(--space-6); }
.py-4 { padding-block: var(--space-4); }
.py-6 { padding-block: var(--space-6); }
.py-8 { padding-block: var(--space-8); }
.m-0 { margin: var(--space-0); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* ── Section spacing ── */
.section-sm { padding-block: var(--spacing-section-sm); }
.section-md { padding-block: var(--spacing-section-md); }
.section-lg { padding-block: var(--spacing-section-lg); }
.section-xl { padding-block: var(--spacing-section-xl); }

.section {
  padding: var(--spacing-section-md) var(--gutter);
}

/* ── Metallic divider (logo border accent) ── */
.divider-metallic {
  height: 3px;
  background: var(--gradient-shield-border);
  border: none;
  border-radius: 2px;
}

/* ── Motion lines (logo decorative element) ── */
.motion-lines {
  position: relative;
  height: 40px;
  overflow: hidden;
}

.motion-lines::before,
.motion-lines::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

.motion-lines::before {
  top: 30%;
  transform: scaleX(0.9);
}

.motion-lines::after {
  top: 60%;
  transform: scaleX(0.7);
}

/* ── Stack (vertical rhythm) ── */
.stack {
  display: flex;
  flex-direction: column;
}

.stack-2 > * + * { margin-top: var(--space-2); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-8 > * + * { margin-top: var(--space-8); }

/* ── Aspect ratios ── */
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-player { aspect-ratio: 3 / 4; }

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

.hidden { display: none; }

@media (max-width: 767px) {
  .mobile-hidden { display: none !important; }
}

@media (min-width: 768px) {
  .desktop-hidden { display: none !important; }
}

/**
 * Alhijaz FC Design System — Animation Rules
 */

@keyframes ds-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ds-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ds-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ds-slide-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes ds-slide-in-left {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes ds-spin {
  to { transform: rotate(360deg); }
}

@keyframes ds-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes ds-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes ds-bounce-subtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ── Animation utilities ── */
.animate-fade-in {
  animation: ds-fade-in var(--duration-base) var(--ease-out) both;
}

.animate-fade-up {
  animation: ds-fade-up var(--duration-slow) var(--ease-out) both;
}

.animate-scale-in {
  animation: ds-scale-in var(--duration-base) var(--ease-spring) both;
}

.animate-slide-in-right {
  animation: ds-slide-in-right var(--duration-base) var(--ease-out) both;
}

.animate-slide-in-left {
  animation: ds-slide-in-left var(--duration-base) var(--ease-out) both;
}

.animate-spin {
  animation: ds-spin var(--duration-slower) linear infinite;
}

.animate-pulse {
  animation: ds-pulse 1.5s var(--ease-in-out) infinite;
}

.animate-bounce-subtle {
  animation: ds-bounce-subtle 2s var(--ease-in-out) infinite;
}

/* Stagger children */
.stagger-children > * {
  animation: ds-fade-up var(--duration-slow) var(--ease-out) both;
}

.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 75ms; }
.stagger-children > *:nth-child(3) { animation-delay: 150ms; }
.stagger-children > *:nth-child(4) { animation-delay: 225ms; }
.stagger-children > *:nth-child(5) { animation-delay: 300ms; }
.stagger-children > *:nth-child(6) { animation-delay: 375ms; }

/* ── Transition utilities ── */
.transition-fast {
  transition: all var(--duration-fast) var(--ease-default);
}

.transition-base {
  transition: all var(--duration-base) var(--ease-default);
}

.transition-slow {
  transition: all var(--duration-slow) var(--ease-default);
}

.transition-colors {
  transition:
    color var(--duration-fast) var(--ease-default),
    background-color var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default);
}

.transition-transform {
  transition: transform var(--duration-base) var(--ease-default);
}

/* ── Hover lift (cards, buttons) ── */
.hover-lift {
  transition:
    transform var(--duration-base) var(--ease-default),
    box-shadow var(--duration-base) var(--ease-default);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ── Focus ring ── */
.focus-ring:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-primary);
  outline-offset: var(--focus-ring-offset);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-fade-up,
  .animate-scale-in,
  .animate-slide-in-right,
  .animate-slide-in-left,
  .animate-spin,
  .animate-pulse,
  .animate-bounce-subtle,
  .stagger-children > * {
    animation: none !important;
  }

  .hover-lift:hover {
    transform: none;
  }
}

/**
 * Alhijaz FC Design System — Icon System
 * Uses inline SVG or icon font; sized via CSS custom properties.
 */

.ds-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  stroke: currentColor;
  fill: none;
  vertical-align: middle;
}

.ds-icon svg {
  width: 100%;
  height: 100%;
}

.ds-icon--xs { width: var(--icon-size-xs); height: var(--icon-size-xs); }
.ds-icon--sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.ds-icon--md { width: var(--icon-size-md); height: var(--icon-size-md); }
.ds-icon--lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }
.ds-icon--xl { width: var(--icon-size-xl); height: var(--icon-size-xl); }
.ds-icon--2xl { width: var(--icon-size-2xl); height: var(--icon-size-2xl); }

.ds-icon--muted { color: var(--color-text-muted); }
.ds-icon--primary { color: var(--color-primary); }
.ds-icon--inverse { color: var(--color-text-inverse); }
.ds-icon--success { color: var(--color-success); }
.ds-icon--warning { color: var(--color-warning); }
.ds-icon--error { color: var(--color-error); }

.ds-icon--spin {
  animation: ds-spin var(--duration-slower) linear infinite;
}

/* Icon button */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}

.icon-btn:hover {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
}

.icon-btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-primary);
  outline-offset: var(--focus-ring-offset);
}

.icon-btn--sm {
  width: 2rem;
  height: 2rem;
}

.icon-btn--lg {
  width: 3rem;
  height: 3rem;
}

/* Icon with label */
.icon-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.icon-label .ds-icon {
  flex-shrink: 0;
}

/**
 * Section heading styles inspired by alentelaq.sa
 * (spaced-letter treatment for match sections: "N e x t", "T i m e")
 * Used sparingly — only for upcoming match and countdown blocks.
 */

.section-heading-stylized {
  font-family: var(--font-heading-en);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-3xl);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-align: center;
  line-height: 1.4;
}

[dir="rtl"] .section-heading-stylized {
  font-family: var(--font-heading-ar);
  letter-spacing: 0.15em;
}

.section-heading-stylized--inverse {
  color: var(--color-text-inverse);
}

.section-heading-stylized--light {
  color: var(--color-accent-light);
}

.section-subheading {
  font-family: var(--font-body-ar, var(--font-body-en));
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 0.25rem;
  letter-spacing: 0;
  text-transform: none;
}

[dir="rtl"] .section-subheading {
  font-family: var(--font-body-ar);
}

/* Footer club name treatment (like "A l - E N T E L A Q") */
.footer-club-name {
  font-family: var(--font-heading-en);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-2xl);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
}

[dir="rtl"] .footer-club-name {
  font-family: var(--font-heading-ar);
  letter-spacing: 0.1em;
  text-transform: none;
}

/**
 * Alhijaz FC Design System — Buttons & Links
 */

/* ── Button variants ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--input-padding-y) var(--space-7);
  font-family: var(--font-heading-en);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  border: 2px solid transparent;
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base);
}

[dir="rtl"] .btn {
  font-family: var(--font-heading-ar);
  letter-spacing: 0.02em;
  text-transform: none;
}

.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-primary-light);
  outline-offset: var(--focus-ring-offset);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: var(--color-primary, #1a7a3a);
  color: var(--color-text-inverse, #fff);
  border-color: var(--color-primary, #1a7a3a);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-light, #22a04a);
  border-color: var(--color-primary-light, #22a04a);
}

.btn-secondary {
  background: var(--color-surface, #fff);
  color: var(--color-primary, #1a7a3a);
  border-color: var(--color-primary, #1a7a3a);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-primary, #1a7a3a);
  color: var(--color-text-inverse, #fff);
  border-color: var(--color-primary, #1a7a3a);
}

.btn-outline-light {
  background: transparent;
  color: var(--color-text-inverse, #fff);
  border-color: rgba(255, 255, 255, 0.75);
}

.btn-outline-light:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
  background: rgba(var(--color-primary-rgb), 0.08);
}

.btn-danger {
  background: var(--color-error);
  color: var(--color-text-inverse);
  border-color: var(--color-error);
}

.btn-danger:hover:not(:disabled) {
  background: var(--color-error-dark);
  border-color: var(--color-error-dark);
}

.btn-success {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border-color: var(--color-success);
}

.btn-success:hover:not(:disabled) {
  background: var(--color-success-dark);
  border-color: var(--color-success-dark);
}

.btn-glow {
  box-shadow: none;
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-xs);
}

.btn-lg {
  padding: var(--space-4) var(--space-10);
  font-size: var(--font-size-base);
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-icon {
  padding: var(--space-3);
  aspect-ratio: 1;
}

.btn-group {
  display: inline-flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ── Link variants ── */
.link {
  color: var(--link-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.link:hover {
  color: var(--link-hover);
}

.link:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-primary);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.link-underline {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-muted {
  color: var(--color-text-muted);
}

.link-muted:hover {
  color: var(--color-primary);
}

.link-inverse {
  color: var(--color-text-inverse);
}

.link-inverse:hover {
  color: var(--color-accent-light);
}

.link-nav {
  font-family: var(--font-heading-en);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
}

[dir="rtl"] .link-nav {
  font-family: var(--font-heading-ar);
  letter-spacing: 0;
  text-transform: none;
}

.link-nav:hover,
.link-nav.is-active {
  color: var(--color-primary-light);
  background: rgba(255, 255, 255, 0.08);
}

.link-breadcrumb {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.link-breadcrumb:hover {
  color: var(--color-primary);
}

.link-breadcrumb-separator {
  color: var(--neutral-400);
  margin-inline: var(--space-2);
}

/**
 * Alhijaz FC Design System — Form Controls
 */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.form-label-required::after {
  content: " *";
  color: var(--color-error);
}

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.form-error {
  font-size: var(--font-size-xs);
  color: var(--color-error);
}

/* ── Input base ── */
.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  padding: var(--input-padding-y) var(--input-padding-x);
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--input-text);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--input-placeholder);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--neutral-400);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--neutral-100);
}

.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error {
  border-color: var(--color-error);
}

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

.form-textarea {
  min-height: 6rem;
  resize: vertical;
}

.form-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  -webkit-padding-end: var(--space-10);
          padding-inline-end: var(--space-10);
}

[dir="rtl"] .form-select {
  background-position: left var(--space-3) center;
}

/* ── Input with icon ── */
.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-group .form-input {
  -webkit-padding-start: var(--space-10);
          padding-inline-start: var(--space-10);
}

.input-group-icon {
  position: absolute;
  inset-inline-start: var(--space-3);
  color: var(--color-text-muted);
  pointer-events: none;
}

/* ── Checkbox & Radio ── */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
}

.form-check-input {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.form-check-label {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  cursor: pointer;
}

/* ── Switch ── */
.form-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.form-switch-track {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  background: var(--neutral-300);
  border-radius: 999px;
  transition: background var(--transition-fast);
}

.form-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-secondary);
  border-radius: 50%;
  transition: transform var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.form-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form-switch input:checked + .form-switch-track {
  background: var(--color-primary);
}

.form-switch input:checked + .form-switch-track::after {
  transform: translateX(1.25rem);
}

[dir="rtl"] .form-switch input:checked + .form-switch-track::after {
  transform: translateX(-1.25rem);
}

.form-switch input:focus-visible + .form-switch-track {
  outline: var(--focus-ring-width) solid var(--color-primary);
  outline-offset: var(--focus-ring-offset);
}

/* ── File upload ── */
.form-file {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--neutral-50);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.form-file:hover {
  border-color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.03);
}

.form-file input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* ── Form row / grid ── */
.form-row {
  display: grid;
  grid-gap: var(--space-4);
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .form-row--2 { grid-template-columns: repeat(2, 1fr); }
  .form-row--3 { grid-template-columns: repeat(3, 1fr); }
}

.form-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

.form-actions--end {
  justify-content: flex-end;
}

/* ── Quantity stepper (store) ── */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.qty-stepper button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  background: var(--neutral-100);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.qty-stepper button:hover {
  background: var(--neutral-200);
}

.qty-stepper input {
  width: 2.5rem;
  height: 2.25rem;
  border: none;
  border-inline: 1px solid var(--color-border);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  -moz-appearance: textfield;
}

.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/**
 * Alhijaz FC Design System — Cards
 * Standard, match, player, product, news
 */

/* ── Base card ── */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

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

.card-body {
  padding: var(--card-padding);
}

.card-body-lg {
  padding: var(--card-padding-lg);
}

.card-header {
  padding: var(--space-4) var(--card-padding);
  border-bottom: 1px solid var(--color-border);
  font-weight: var(--font-weight-semibold);
}

.card-footer {
  padding: var(--space-4) var(--card-padding);
  border-top: 1px solid var(--color-border);
  background: var(--neutral-50);
}

.card-image {
  width: 100%;
  object-fit: cover;
  display: block;
}

.card-title {
  font-family: var(--font-heading-en);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}

[dir="rtl"] .card-title {
  font-family: var(--font-heading-ar);
}

.card-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Shield card (club crest inspired) ── */
.shield-card {
  background: var(--gradient-primary);
  border: 3px solid;
  border-image: var(--gradient-shield-border) 1;
  border-radius: var(--radius-shield);
  box-shadow: var(--shadow-shield);
  color: var(--color-text-inverse);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
}

.shield-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 30%,
    rgba(255, 255, 255, 0.08) 0%,
    transparent 60%
  );
  pointer-events: none;
}

/* ── Match card ── */
.match-card {
  background: var(--match-card-bg);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.match-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: rgba(0, 0, 0, 0.2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.match-card-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  grid-gap: var(--space-4);
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.match-card-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.match-card-crest {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.match-card-team-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

.match-card-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.match-card-score-value {
  font-family: var(--font-heading-en);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-black);
  letter-spacing: 0.05em;
}

.match-card-score-vs {
  font-size: var(--font-size-xs);
  opacity: 0.7;
  letter-spacing: 0.15em;
}

.match-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(0, 0, 0, 0.15);
  font-size: var(--font-size-xs);
}

.match-card--upcoming .match-card-score-value {
  font-size: var(--font-size-xl);
}

.match-card--live {
  box-shadow: var(--shadow-glow);
}

.match-card--live .match-card-header::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--color-error);
  border-radius: 50%;
  -webkit-margin-end: var(--space-2);
          margin-inline-end: var(--space-2);
  animation: ds-pulse 1.5s infinite;
}

/* ── Player card ── */
.player-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  aspect-ratio: var(--player-card-aspect);
}

.player-card-image {
  width: 100%;
  height: 75%;
  object-fit: cover;
  object-position: top center;
}

.player-card-body {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  padding: var(--space-4);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  color: var(--color-text-inverse);
}

.player-card-number {
  position: absolute;
  top: var(--space-3);
  inset-inline-end: var(--space-3);
  font-family: var(--font-heading-en);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-black);
  color: var(--color-text-inverse);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  opacity: 0.9;
}

.player-card-name {
  font-family: var(--font-heading-en);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

[dir="rtl"] .player-card-name {
  font-family: var(--font-heading-ar);
  text-transform: none;
}

.player-card-position {
  font-size: var(--font-size-xs);
  color: var(--color-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Product card ── */
.product-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.product-card-image-wrap {
  position: relative;
  aspect-ratio: var(--product-card-aspect);
  overflow: hidden;
  background: var(--neutral-100);
}

.product-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.product-card:hover .product-card-image {
  transform: scale(1.05);
}

.product-card-badge {
  position: absolute;
  top: var(--space-3);
  inset-inline-start: var(--space-3);
}

.product-card-body {
  padding: var(--card-padding);
}

.product-card-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
  line-height: 1.3;
}

.product-card-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.product-card-price-current {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.product-card-price-original {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.product-card-actions {
  margin-top: var(--space-3);
}

/* ── News card ── */
.news-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.news-card-image {
  width: 100%;
  aspect-ratio: var(--news-card-aspect);
  object-fit: cover;
}

.news-card-body {
  padding: var(--card-padding);
}

.news-card-category {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.news-card-title {
  font-family: var(--font-heading-en);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  margin-bottom: var(--space-2);
}

[dir="rtl"] .news-card-title {
  font-family: var(--font-heading-ar);
}

.news-card-excerpt {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-snug);
  margin-bottom: var(--space-3);
}

.news-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.news-card--featured {
  grid-column: span 2;
}

.news-card--featured .news-card-image {
  aspect-ratio: 21 / 9;
}

@media (prefers-reduced-motion: reduce) {
  .card:hover,
  .product-card:hover,
  .news-card:hover {
    transform: none;
  }

  .product-card:hover .product-card-image {
    transform: none;
  }
}

/**
 * Alhijaz FC Design System — Tables, Tabs, Pagination, Filters
 */

/* ── Tables ── */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--table-border);
  border-radius: var(--radius-lg);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  text-align: start;
  border-bottom: 1px solid var(--table-border);
}

.table th {
  background: var(--table-header-bg);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

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

.table tbody tr:hover {
  background: var(--table-row-hover);
}

.table--striped tbody tr:nth-child(even) {
  background: var(--table-stripe);
}

.table--striped tbody tr:nth-child(even):hover {
  background: var(--table-row-hover);
}

.table--compact th,
.table--compact td {
  padding: var(--space-2) var(--space-3);
}

.table-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* Standings table variant */
.standings-table .table td:first-child,
.standings-table .table th:first-child {
  width: 2.5rem;
  text-align: center;
}

.standings-table .team-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-medium);
}

.standings-table .team-cell img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

.standings-table .highlight-row {
  background: rgba(var(--color-primary-rgb), 0.06);
  font-weight: var(--font-weight-semibold);
}

/* ── Tabs ── */
.tabs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tabs-list {
  display: flex;
  gap: var(--space-1);
  border-bottom: 2px solid var(--tab-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tab-trigger {
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-heading-en);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tab-inactive-text);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);
}

[dir="rtl"] .tab-trigger {
  font-family: var(--font-heading-ar);
  letter-spacing: 0;
  text-transform: none;
}

.tab-trigger:hover {
  color: var(--color-primary);
}

.tab-trigger.is-active {
  color: var(--tab-active-bg);
  border-bottom-color: var(--tab-active-bg);
}

.tab-trigger:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-primary);
  outline-offset: var(--focus-ring-offset);
}

.tabs-pills .tabs-list {
  border-bottom: none;
  gap: var(--space-2);
  background: var(--neutral-100);
  padding: var(--space-1);
  border-radius: var(--radius-lg);
}

.tabs-pills .tab-trigger {
  border-bottom: none;
  margin-bottom: 0;
  border-radius: var(--radius-md);
}

.tabs-pills .tab-trigger.is-active {
  background: var(--tab-active-bg);
  color: var(--tab-active-text);
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block;
  animation: ds-fade-in var(--duration-base) var(--ease-out);
}

/* ── Pagination ── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.pagination-btn:hover:not(:disabled) {
  background: var(--neutral-100);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pagination-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-ellipsis {
  padding: 0 var(--space-2);
  color: var(--color-text-muted);
}

.pagination-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-inline: var(--space-4);
}

/* ── Filters ── */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  background: var(--neutral-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 140px;
}

.filter-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.filter-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.filter-chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.filter-chip-remove {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  font-size: 0.625rem;
  line-height: 1;
}

.filters-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.filter-section-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.filter-range {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.filter-range .form-input {
  width: 5rem;
}

.filters-clear {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/**
 * Alhijaz FC Design System — Notifications, Badges, Empty/Loading/Error States
 */

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  border-radius: 999px;
  white-space: nowrap;
}

.badge-primary {
  background: var(--badge-primary-bg);
  color: var(--badge-primary-text);
}

.badge-neutral {
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-text);
}

.badge-success {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.badge-warning {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
}

.badge-error {
  background: var(--color-error-light);
  color: var(--color-error-dark);
}

.badge-info {
  background: var(--color-info-light);
  color: var(--color-info-dark);
}

.badge-outline {
  background: transparent;
  border: 1px solid currentColor;
}

.badge-live {
  background: var(--color-error);
  color: var(--color-text-inverse);
  animation: ds-pulse 1.5s infinite;
}

.badge-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ── Notifications / Toasts ── */
.toast-container {
  position: fixed;
  top: var(--space-4);
  inset-inline-end: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 24rem;
  width: calc(100% - var(--space-8));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: ds-slide-in-right var(--duration-base) var(--ease-out);
}

.toast-success {
  background: var(--toast-success-bg);
  color: var(--toast-success-text);
}

.toast-warning {
  background: var(--toast-warning-bg);
  color: var(--toast-warning-text);
}

.toast-error {
  background: var(--toast-error-bg);
  color: var(--toast-error-text);
}

.toast-info {
  background: var(--toast-info-bg);
  color: var(--toast-info-text);
}

.toast-content {
  flex: 1 1;
  min-width: 0;
}

.toast-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-0-5);
}

.toast-message {
  font-size: var(--font-size-sm);
  opacity: 0.9;
}

.toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  padding: var(--space-1);
  color: inherit;
}

.toast-close:hover {
  opacity: 1;
}

/* ── Alert banners ── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--font-size-sm);
}

.alert-success {
  background: var(--color-success-light);
  color: var(--color-success-dark);
  border-color: var(--color-success);
}

.alert-warning {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
  border-color: var(--color-warning);
}

.alert-error {
  background: var(--color-error-light);
  color: var(--color-error-dark);
  border-color: var(--color-error);
}

.alert-info {
  background: var(--color-info-light);
  color: var(--color-info-dark);
  border-color: var(--color-info);
}

/* ── Empty states ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-6);
  color: var(--color-text-muted);
}

.empty-state-icon {
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--space-4);
  color: var(--neutral-300);
}

.empty-state-title {
  font-family: var(--font-heading-en);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

[dir="rtl"] .empty-state-title {
  font-family: var(--font-heading-ar);
}

.empty-state-description {
  font-size: var(--font-size-sm);
  max-width: 24rem;
  margin-bottom: var(--space-6);
  line-height: var(--line-height-relaxed);
}

/* ── Loading states ── */
.loading-spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--neutral-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: ds-spin var(--duration-slower) linear infinite;
}

.loading-spinner--sm {
  width: 1.25rem;
  height: 1.25rem;
  border-width: 2px;
}

.loading-spinner--lg {
  width: 3rem;
  height: 3rem;
  border-width: 4px;
}

.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-overlay-light);
  z-index: 10;
}

.loading-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  gap: var(--space-4);
  color: var(--color-text-muted);
}

.loading-skeleton {
  background: linear-gradient(
    90deg,
    var(--neutral-200) 25%,
    var(--neutral-100) 50%,
    var(--neutral-200) 75%
  );
  background-size: 200% 100%;
  animation: ds-shimmer 1.5s linear infinite;
  border-radius: var(--radius-md);
}

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

.skeleton-text--sm { width: 60%; }
.skeleton-text--md { width: 80%; }
.skeleton-text--lg { width: 100%; }

.skeleton-image {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.skeleton-card {
  padding: var(--card-padding);
}

.skeleton-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

/* ── Error states ── */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-6);
}

.error-state-code {
  font-family: var(--font-heading-en);
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-black);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.error-state-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}

.error-state-description {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  max-width: 28rem;
  margin-bottom: var(--space-6);
}

.error-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-error-light);
  color: var(--color-error-dark);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

@media (prefers-reduced-motion: reduce) {
  .loading-spinner,
  .loading-skeleton,
  .badge-live {
    animation: none;
  }
}

/**
 * Alhijaz FC Design System — Menus, Dialogs, Search
 */

/* ── Navigation menu ── */
.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
}

.nav-menu-item {
  position: relative;
}

.nav-menu-link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-heading-en);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
}

[dir="rtl"] .nav-menu-link {
  font-family: var(--font-heading-ar);
  letter-spacing: 0;
  text-transform: none;
}

.nav-menu-link:hover,
.nav-menu-link.is-active {
  color: var(--color-accent-light);
  background: rgba(255, 255, 255, 0.08);
}

/* Dropdown submenu */
.nav-dropdown {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 12rem;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    visibility var(--transition-fast);
  z-index: var(--z-dropdown);
}

.nav-menu-item:hover .nav-dropdown,
.nav-menu-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.nav-dropdown-link:hover {
  background: var(--neutral-100);
  color: var(--color-primary);
}

/* Mobile menu */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
}

.mobile-menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--transition-base);
}

@media (max-width: 767px) {
  .mobile-menu-toggle {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    inset: var(--nav-height-mobile) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-4);
    background: var(--header-bg);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: var(--z-fixed);
    overflow-y: auto;
  }

  [dir="rtl"] .nav-menu {
    transform: translateX(-100%);
  }

  .nav-menu.is-open {
    transform: translateX(0);
  }

  .nav-menu-link {
    padding: var(--space-4);
    font-size: var(--font-size-base);
  }

  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: rgba(0, 0, 0, 0.15);
    margin-top: var(--space-1);
  }
}

/* ── Dialog / Modal ── */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  z-index: var(--z-modal-backdrop);
  animation: ds-fade-in var(--duration-fast) var(--ease-out);
}

.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - var(--space-8));
  max-width: 32rem;
  max-height: calc(100vh - var(--space-8));
  background: var(--dialog-bg);
  border-radius: var(--dialog-radius);
  box-shadow: var(--dialog-shadow);
  z-index: var(--z-modal);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: ds-scale-in var(--duration-base) var(--ease-spring);
}

.dialog--lg {
  max-width: 48rem;
}

.dialog--full {
  max-width: calc(100vw - var(--space-8));
  max-height: calc(100vh - var(--space-8));
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.dialog-title {
  font-family: var(--font-heading-en);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

[dir="rtl"] .dialog-title {
  font-family: var(--font-heading-ar);
}

.dialog-body {
  padding: var(--space-6);
  overflow-y: auto;
  flex: 1 1;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--neutral-50);
}

/* Drawer variant */
.drawer {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  width: min(24rem, 100vw);
  height: 100vh;
  background: var(--dialog-bg);
  box-shadow: var(--dialog-shadow);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  animation: ds-slide-in-right var(--duration-base) var(--ease-out);
}

[dir="rtl"] .drawer {
  animation-name: ds-slide-in-left;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.drawer-body {
  flex: 1 1;
  overflow-y: auto;
  padding: var(--space-5);
}

/* ── Search ── */
.search-bar {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 28rem;
}

.search-input {
  width: 100%;
  padding: var(--space-2-5) var(--space-4);
  -webkit-padding-start: var(--space-10);
          padding-inline-start: var(--space-10);
  font-size: var(--font-size-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--input-shadow-focus);
}

.search-icon {
  position: absolute;
  inset-inline-start: var(--space-3);
  color: var(--color-text-muted);
  pointer-events: none;
}

.search-bar--header .search-input {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--color-text-inverse);
}

.search-bar--header .search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.search-bar--header .search-icon {
  color: rgba(255, 255, 255, 0.6);
}

.search-results-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-height: 20rem;
  overflow-y: auto;
  z-index: var(--z-dropdown);
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--transition-fast);
}

.search-result-item:hover {
  background: var(--neutral-100);
}

.search-result-type {
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

.search-result-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.search-empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ── Breadcrumbs ── */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  padding: var(--space-3) 0;
}

.breadcrumbs-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.breadcrumbs-current {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

/**
 * Alhijaz FC Design System — Gallery Components
 */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-gap: var(--grid-gap);
  gap: var(--grid-gap);
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4 / 3;
  background: var(--neutral-200);
}

.gallery-item img,
.gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.gallery-item:hover img,
.gallery-item:hover video {
  transform: scale(1.05);
}

.gallery-item-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-4);
  background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.7));
  color: var(--color-text-inverse);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.gallery-item:hover .gallery-item-overlay {
  opacity: 1;
}

.gallery-item-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.gallery-item-type {
  font-size: var(--font-size-xs);
  opacity: 0.8;
  margin-top: var(--space-1);
}

.gallery-item-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  color: var(--color-text-inverse);
}

/* Masonry variant */
.gallery-masonry {
  columns: 3;
  column-gap: var(--grid-gap);
}

.gallery-masonry .gallery-item {
  page-break-inside: avoid;
  break-inside: avoid;
  margin-bottom: var(--grid-gap);
  aspect-ratio: auto;
}

@media (max-width: 1023px) {
  .gallery-masonry {
    columns: 2;
  }
}

@media (max-width: 639px) {
  .gallery-masonry {
    columns: 1;
  }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  animation: ds-fade-in var(--duration-fast) var(--ease-out);
}

.lightbox-content {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: var(--space-4);
  inset-inline-end: var(--space-4);
  color: var(--color-text-inverse);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-inverse);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev {
  inset-inline-start: var(--space-4);
}

.lightbox-next {
  inset-inline-end: var(--space-4);
}

.lightbox-caption {
  position: absolute;
  bottom: var(--space-6);
  inset-inline: var(--space-6);
  text-align: center;
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
}

/* Album / category filter */
.gallery-filters {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item:hover img,
  .gallery-item:hover video {
    transform: none;
  }
}

/**
 * Alhijaz FC Design System — Sponsor Components
 */

.sponsors-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-4);
}

.sponsor-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  opacity: 0.7;
  filter: grayscale(100%);
  transition:
    opacity var(--transition-base),
    filter var(--transition-base),
    transform var(--transition-base);
}

.sponsor-logo img {
  max-height: 100%;
  max-width: 8rem;
  object-fit: contain;
}

.sponsor-logo:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.05);
}

.sponsors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-gap: var(--grid-gap);
  gap: var(--grid-gap);
}

.sponsor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.sponsor-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.sponsor-card-logo {
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sponsor-card-logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.sponsor-card-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.sponsor-card-tier {
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Tier sections */
.sponsors-tier {
  margin-bottom: var(--space-10);
}

.sponsors-tier-title {
  font-family: var(--font-heading-en);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-primary);
}

[dir="rtl"] .sponsors-tier-title {
  font-family: var(--font-heading-ar);
  text-transform: none;
}

.sponsors-tier--platinum .sponsor-card {
  padding: var(--space-8);
}

.sponsors-tier--platinum .sponsor-card-logo {
  height: 5rem;
}

.sponsors-tier--gold .sponsors-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.sponsors-tier--silver .sponsor-logo {
  height: 2.5rem;
}

.sponsors-tier--silver .sponsor-logo img {
  max-width: 6rem;
}

/* Hero sponsor badge */
.sponsor-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-inverse);
}

.sponsor-hero-badge img {
  height: 1.25rem;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .sponsor-logo:hover {
    transform: none;
  }
}

/**
 * Alhijaz FC Design System — Dark & Light Sections
 */

/* ── Light sections ── */
.section-light {
  background: var(--color-background);
  color: var(--color-text);
}

.section-light-alt {
  background: var(--neutral-100);
  color: var(--color-text);
}

.section-white {
  background: var(--color-surface);
  color: var(--color-text);
}

/* ── Dark sections ── */
.section-dark {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
}

.section-dark a {
  color: var(--color-accent-light);
}

.section-dark a:hover {
  color: var(--color-secondary);
}

.section-dark-deep {
  background: var(--color-background-dark);
  color: var(--color-text-inverse);
}

.section-dark-gradient {
  background: var(--gradient-primary-linear);
  color: var(--color-text-inverse);
}

/* Match-day themed section */
.section-match-day {
  background: var(--gradient-match-day);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}

.section-match-day::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 30% 0%,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 50%
  );
  pointer-events: none;
}

/* Hero section */
.section-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-inverse);
  overflow: hidden;
}

.section-hero-bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.section-hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--gradient-hero-overlay);
}

.section-hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--content-max-width);
  padding: var(--space-8) var(--gutter);
}

/* Section with metallic divider */
.section-divided {
  position: relative;
}

.section-divided::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 3px;
  background: var(--gradient-shield-border);
  border-radius: 2px;
}

/* Section header block */
.section-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.section-header .heading-overline {
  margin-bottom: var(--space-2);
}

.section-header .heading-section {
  margin-bottom: var(--space-3);
}

.section-header .text-lead {
  max-width: 40rem;
  margin-inline: auto;
  color: var(--color-text-muted);
}

.section-dark .section-header .text-lead,
.section-dark-deep .section-header .text-lead,
.section-match-day .section-header .text-lead {
  color: rgba(255, 255, 255, 0.8);
}

/* CTA band */
.section-cta {
  background: var(--color-primary-dark);
  color: var(--color-text-inverse);
  text-align: center;
  padding: var(--spacing-section-sm) var(--gutter);
}

.section-cta-title {
  font-family: var(--font-heading-en);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extrabold);
  margin-bottom: var(--space-4);
}

[dir="rtl"] .section-cta-title {
  font-family: var(--font-heading-ar);
}

/* Footer section styling */
.section-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: var(--spacing-section-sm) var(--gutter);
}

.section-footer a {
  color: var(--color-accent-light);
}

.section-footer a:hover {
  color: var(--color-secondary);
}

/* Theme context classes (apply to parent) */
.theme-dark {
  --color-background: var(--color-background-dark);
  --color-surface: var(--color-surface-dark);
  --color-text: var(--color-text-inverse);
  --color-text-muted: var(--neutral-400);
  --color-border: var(--neutral-700);
  --card-bg: var(--color-surface-dark);
  --card-border: var(--neutral-700);
}

.theme-light {
  --color-background: var(--color-background);
  --color-surface: var(--color-surface);
  --color-text: var(--color-text);
  --color-text-muted: var(--neutral-500);
  --color-border: var(--neutral-200);
}

/**
 * Alhijaz FC Design System — Mobile Components
 */

/* ── Mobile bottom navigation ── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  height: 3.5rem;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  z-index: var(--z-fixed);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (max-width: 767px) {
  .mobile-bottom-nav {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
  }

  .has-mobile-nav {
    padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0));
  }
}

.mobile-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1;
  gap: var(--space-0-5);
  padding: var(--space-1);
  font-size: 0.625rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.mobile-bottom-nav-item.is-active {
  color: var(--color-primary);
}

.mobile-bottom-nav-item .ds-icon {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

/* ── Mobile header ── */
.mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height-mobile);
  padding: 0 var(--space-4);
  background: var(--header-bg);
  color: var(--header-text);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

@media (max-width: 767px) {
  .mobile-header {
    display: flex;
  }
}

.mobile-header-logo {
  height: 2rem;
  object-fit: contain;
}

.mobile-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Mobile card stack ── */
.mobile-card-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .mobile-card-stack {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: var(--grid-gap);
    gap: var(--grid-gap);
  }
}

/* ── Mobile horizontal scroll ── */
.mobile-scroll-row {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2);
  scrollbar-width: none;
}

.mobile-scroll-row::-webkit-scrollbar {
  display: none;
}

.mobile-scroll-row > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: min(85vw, 320px);
}

@media (min-width: 768px) {
  .mobile-scroll-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    overflow: visible;
    scroll-snap-type: none;
  }

  .mobile-scroll-row > * {
    width: auto;
  }
}

/* ── Mobile sticky CTA ── */
.mobile-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0));
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
  z-index: var(--z-fixed);
}

@media (max-width: 767px) {
  .mobile-sticky-cta {
    display: block;
  }

  .has-sticky-cta {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0));
  }
}

/* ── Mobile filter sheet ── */
.mobile-filter-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  transform: translateY(100%);
  transition: transform var(--transition-base);
}

.mobile-filter-sheet.is-open {
  transform: translateY(0);
}

.mobile-filter-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.mobile-filter-sheet-body {
  flex: 1 1;
  overflow-y: auto;
  padding: var(--space-4);
}

.mobile-filter-sheet-footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0));
}

/* ── Touch-friendly targets ── */
@media (max-width: 767px) {
  .btn,
  .form-input,
  .form-select,
  .pagination-btn,
  .filter-chip {
    min-height: 44px;
  }

  .form-check-input {
    width: 1.375rem;
    height: 1.375rem;
  }
}

/* ── Mobile match card compact ── */
@media (max-width: 767px) {
  .match-card-body {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .match-card-team {
    flex-direction: row;
    justify-content: center;
  }

  .match-card-crest {
    width: 2.5rem;
    height: 2.5rem;
  }

  .match-card-score-value {
    font-size: var(--font-size-2xl);
  }
}

/* ── Pull to refresh indicator ── */
.pull-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/**
 * Alhijaz FC — Visual Design System
 * Phase 4: Master stylesheet entry point.
 * All tokens use CSS custom properties for admin theme override.
 */

/* ── Google Fonts ── */
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700;800;900&family=Noto+Sans+Arabic:wght@400;500;600;700&family=Tajawal:wght@600;700;800&display=swap");

/* ── Reset & base ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-body-en);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

[dir="rtl"] body {
  font-family: var(--font-body-ar);
}

/* ── Typography ── */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading-en);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
  font-family: var(--font-heading-ar);
  text-transform: none;
}

h1 {
  font-size: var(--font-size-5xl);
}
h2 {
  font-size: var(--font-size-4xl);
}
h3 {
  font-size: var(--font-size-3xl);
}
h4 {
  font-size: var(--font-size-2xl);
}

.accent-script {
  font-family: var(--font-accent-en);
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: 0.05em;
}

[dir="rtl"] .accent-script {
  font-family: var(--font-accent-ar);
}

/* ── Links (base element; variants in design-system) ── */
a {
  color: var(--link-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--link-hover);
}

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Header / Footer (site shell) ── */
.site-header {
  background-color: #ffffff;
  background-image: none;
  color: var(--color-text, #1a1a1a);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.site-header a {
  color: inherit;
}

.site-header a:hover {
  color: var(--color-primary);
}

/* ── Footer ── */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: var(--spacing-section-sm) 0;
}

.site-footer a {
  color: var(--color-accent-light);
}

.site-footer a:hover {
  color: var(--color-secondary);
}

/* ── Logo display ── */
.club-logo {
  display: block;
  height: auto;
  max-height: 80px;
  width: auto;
  object-fit: contain;
}

.club-logo-lg {
  max-height: 160px;
}

.club-logo-sm {
  max-height: 48px;
}

/* ── Badge / founded year ── */
.founded-badge {
  font-family: var(--font-heading-en);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  letter-spacing: 0.15em;
  color: var(--color-text-inverse);
}