/* =========================================================================
 * نظام تصميم "مطبخ الهناء" — Alhana Kitchen Design System (Unified)
 * -------------------------------------------------------------------------
 * النسخة الموحّدة الوحيدة لكل صفحات الموقع (Vanilla CSS بدون أدوات بناء).
 * مستخرجة من الشعار:
 *   الأحمر    #ED1C24  → اللون الأساسي (Primary)
 *   السماوي   #45C4E8  → لون مساعد (الوصفات / ماذا أطبخ؟)
 *   البرتقالي #F7941E  → لون مساعد (التحديات والجوائز)
 *   الأخضر    #8DC63F  → لون مساعد (الطازج / الصحي)
 *   خلفية كريمية دافئة #FDFBF7 بدل الأبيض الصريح
 *
 * كل الألوان بصيغة oklch. الوضع الليلي جاهز عبر كلاس .dark على <html>.
 * الخطوط تُحمَّل عبر وسم <link> في includes/header.php.
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * 1) الوضع النهاري — التوكنات الأساسية
 * ---------------------------------------------------------------------- */
:root {
  --radius: 0.875rem;

  /* أساسات العلامة */
  --brand-red: oklch(0.578 0.235 27.5);
  --brand-cyan: oklch(0.773 0.109 220.5);
  --brand-orange: oklch(0.756 0.158 62.5);
  --brand-green: oklch(0.792 0.169 128);
  --brand-cream: oklch(0.988 0.006 85);

  /* أسطح ونصوص */
  --background: oklch(0.988 0.006 85);
  --foreground: oklch(0.232 0.018 40);
  --surface: oklch(0.967 0.011 80);
  --surface-foreground: oklch(0.232 0.018 40);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.232 0.018 40);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.232 0.018 40);

  /* أساسي */
  --primary: var(--brand-red);
  --primary-foreground: oklch(0.99 0.005 85);
  --primary-dark: oklch(0.478 0.198 27.5);
  --primary-glow: oklch(0.688 0.204 30);

  /* ثانوي / مكتوم / تمييز */
  --secondary: oklch(0.951 0.014 78);
  --secondary-foreground: oklch(0.318 0.024 35);
  --muted: oklch(0.955 0.011 80);
  --muted-foreground: oklch(0.548 0.021 42);
  --accent: oklch(0.949 0.031 220);
  --accent-foreground: oklch(0.352 0.062 232);

  /* حالات */
  --destructive: oklch(0.552 0.221 25);
  --destructive-foreground: oklch(0.99 0.005 85);
  --success: oklch(0.652 0.152 140);
  --success-foreground: oklch(0.99 0.005 85);
  --warning: oklch(0.756 0.158 62.5);
  --warning-foreground: oklch(0.252 0.048 55);
  --info: oklch(0.708 0.112 224);
  --info-foreground: oklch(0.232 0.048 232);

  /* حدود وحقول */
  --border: oklch(0.912 0.012 70);
  --input: oklch(0.902 0.014 70);
  --ring: var(--brand-red);

  /* مخططات */
  --chart-1: var(--brand-red);
  --chart-2: var(--brand-cyan);
  --chart-3: var(--brand-orange);
  --chart-4: var(--brand-green);
  --chart-5: var(--primary-dark);

  /* الشريط الجانبي */
  --sidebar: oklch(0.975 0.009 82);
  --sidebar-foreground: oklch(0.232 0.018 40);
  --sidebar-primary: var(--brand-red);
  --sidebar-primary-foreground: oklch(0.99 0.005 85);
  --sidebar-accent: oklch(0.941 0.016 76);
  --sidebar-accent-foreground: oklch(0.318 0.024 35);
  --sidebar-border: oklch(0.912 0.012 70);
  --sidebar-ring: var(--brand-red);

  /* تدرجات جاهزة */
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-glow));
  --gradient-warm: linear-gradient(135deg, var(--brand-orange), var(--brand-red));
  --gradient-fresh: linear-gradient(135deg, var(--brand-green), var(--brand-cyan));
  --gradient-hero: linear-gradient(
    160deg,
    color-mix(in oklab, var(--brand-cream) 92%, var(--brand-orange)) 0%,
    var(--brand-cream) 45%,
    color-mix(in oklab, var(--brand-cream) 88%, var(--brand-cyan)) 100%
  );
  --gradient-glass: linear-gradient(
    135deg,
    color-mix(in oklab, var(--card) 78%, transparent),
    color-mix(in oklab, var(--card) 45%, transparent)
  );

  /* ظلال متعددة الطبقات */
  --shadow-sm-token: 0 1px 2px color-mix(in oklab, var(--foreground) 6%, transparent),
    0 2px 8px -4px color-mix(in oklab, var(--foreground) 8%, transparent);
  --shadow-md-token: 0 4px 12px -4px color-mix(in oklab, var(--foreground) 10%, transparent),
    0 12px 28px -12px color-mix(in oklab, var(--foreground) 14%, transparent);
  --shadow-lg-token: 0 8px 24px -8px color-mix(in oklab, var(--foreground) 14%, transparent),
    0 32px 64px -24px color-mix(in oklab, var(--foreground) 20%, transparent);
  --shadow-glow-token: 0 10px 30px -8px color-mix(in oklab, var(--primary) 38%, transparent),
    0 0 0 1px color-mix(in oklab, var(--primary) 12%, transparent);

  /* حركة */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;

  /* نص سائل */
  --text-fluid-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);
  --text-fluid-sm: clamp(0.875rem, 0.83rem + 0.2vw, 1rem);
  --text-fluid-base: clamp(0.95rem, 0.9rem + 0.28vw, 1.125rem);
  --text-fluid-lg: clamp(1.075rem, 1rem + 0.4vw, 1.375rem);
  --text-fluid-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  --text-fluid-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);
  --text-fluid-3xl: clamp(1.875rem, 1.4rem + 1.9vw, 3rem);
  --text-fluid-4xl: clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
  --text-fluid-hero: clamp(2.5rem, 1.6rem + 4.2vw, 5.5rem);

  /* مسافات سائلة */
  --spacing-fluid-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.875rem);
  --spacing-fluid-sm: clamp(0.75rem, 0.6rem + 0.8vw, 1.25rem);
  --spacing-fluid-md: clamp(1rem, 0.8rem + 1.2vw, 2rem);
  --spacing-fluid-lg: clamp(1.5rem, 1.1rem + 2vw, 3.5rem);
  --spacing-fluid-xl: clamp(2rem, 1.4rem + 3vw, 6rem);

  /* الخطوط */
  --font-sans: "IBM Plex Sans Arabic", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Tajawal", "Alexandria", "IBM Plex Sans Arabic", ui-sans-serif, sans-serif;

  /* =========================================================================
   * جسر التوافق (Legacy Bridge)
   * -------------------------------------------------------------------------
   * أسماء متغيّرات قديمة كانت منتشرة في الصفحات — أصبحت كلها تشير إلى
   * هوية "مطبخ الهناء". لا تستخدمها في الكود الجديد؛ استخدم التوكنات أعلاه.
   * ====================================================================== */
  --brand: var(--primary);
  --primary-color: var(--primary);
  --primary-light: var(--primary-glow);
  --secondary-color: var(--brand-green);
  --accent-color: var(--brand-orange);
  --secondary-1: var(--brand-orange);
  --secondary-2: var(--brand-green);

  /* ألوان القطاعات القديمة → ألوان العلامة */
  --category-dairy: var(--brand-cyan);
  --category-foods: var(--brand-green);
  --category-juices: var(--brand-orange);
  --alhana-dairy-blue: var(--brand-cyan);
  --alhana-dairy-dark: color-mix(in oklab, var(--brand-cyan) 78%, black);
  --alhana-dairy-light: color-mix(in oklab, var(--brand-cyan) 8%, transparent);
  --alhana-food-green: var(--brand-green);
  --alhana-food-dark: color-mix(in oklab, var(--brand-green) 78%, black);
  --alhana-food-light: color-mix(in oklab, var(--brand-green) 10%, transparent);
  --alhana-juice-orange: var(--brand-orange);
  --alhana-juice-dark: color-mix(in oklab, var(--brand-orange) 78%, black);
  --alhana-juice-light: color-mix(in oklab, var(--brand-orange) 10%, transparent);

  /* محايدات قديمة */
  --alhana-white: var(--card);
  --alhana-off-white: var(--background);
  --alhana-black: var(--foreground);
  --alhana-grey-dark: var(--foreground);
  --alhana-grey-medium: var(--muted-foreground);
  --alhana-grey-light: var(--border);

  /* أسطح ونصوص قديمة */
  --background-primary: var(--card);
  --background-secondary: var(--surface);
  --background-card: var(--card);
  --text-primary: var(--foreground);
  --text-secondary: var(--muted-foreground);
  --text-tertiary: var(--muted-foreground);

  /* خلفيات ناعمة قديمة → درجات كريمية دافئة من الهوية */
  --bg-natural-1: color-mix(in oklab, var(--brand-cream) 96%, var(--brand-red));
  --bg-natural-2: color-mix(in oklab, var(--brand-cream) 94%, var(--brand-orange));
  --bg-natural-3: color-mix(in oklab, var(--brand-cream) 92%, var(--brand-orange));
  --bg-pattern-1: var(--bg-natural-2);
  --bg-pattern-2: color-mix(in oklab, var(--brand-cream) 97%, var(--surface));
  --bg-texture-1: var(--bg-natural-3);
  --bg-texture-2: color-mix(in oklab, var(--brand-cream) 86%, var(--brand-cyan));

  /* شارات المنتجات */
  --badge-hot: var(--primary);
  --badge-new: var(--brand-green);
  --badge-sale: var(--brand-orange);
  --badge-best: var(--brand-orange);

  /* ظلال ونصف أقطار قديمة */
  --sh-soft: var(--shadow-sm-token);
  --sh-medium: var(--shadow-md-token);
  --sh-glow-blue: 0 12px 30px color-mix(in oklab, var(--brand-cyan) 30%, transparent);
  --sh-glow-green: 0 12px 30px color-mix(in oklab, var(--brand-green) 32%, transparent);
  --sh-glow-orange: 0 12px 30px color-mix(in oklab, var(--brand-orange) 34%, transparent);
  --grad-white-glow: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 70%);
  --grad-dairy: var(--gradient-fresh);
  --rad-md: calc(var(--radius) + 6px);
  --rad-lg: calc(var(--radius) + 16px);
  --rad-full: 9999px;
}

/* ------------------------------------------------------------------------- */
.dark {
  --brand-cream: oklch(0.205 0.014 40);

  --background: oklch(0.178 0.014 40);
  --foreground: oklch(0.958 0.008 80);
  --surface: oklch(0.228 0.016 38);
  --surface-foreground: oklch(0.958 0.008 80);
  --card: oklch(0.232 0.017 38);
  --card-foreground: oklch(0.958 0.008 80);
  --popover: oklch(0.232 0.017 38);
  --popover-foreground: oklch(0.958 0.008 80);

  --primary: oklch(0.668 0.208 28.5);
  --primary-foreground: oklch(0.168 0.014 40);
  --primary-dark: oklch(0.548 0.222 27.5);
  --primary-glow: oklch(0.752 0.168 34);

  --secondary: oklch(0.288 0.018 38);
  --secondary-foreground: oklch(0.958 0.008 80);
  --muted: oklch(0.288 0.018 38);
  --muted-foreground: oklch(0.732 0.018 60);
  --accent: oklch(0.322 0.048 226);
  --accent-foreground: oklch(0.918 0.038 220);

  --destructive: oklch(0.688 0.196 25);
  --destructive-foreground: oklch(0.168 0.014 40);
  --success: oklch(0.732 0.146 142);
  --success-foreground: oklch(0.168 0.014 40);
  --warning: oklch(0.802 0.148 66);
  --warning-foreground: oklch(0.208 0.032 55);
  --info: oklch(0.782 0.104 222);
  --info-foreground: oklch(0.188 0.032 232);

  --border: oklch(1 0 0 / 11%);
  --input: oklch(1 0 0 / 16%);
  --ring: oklch(0.668 0.208 28.5);

  --chart-1: oklch(0.668 0.208 28.5);
  --chart-2: oklch(0.782 0.104 222);
  --chart-3: oklch(0.802 0.148 66);
  --chart-4: oklch(0.812 0.162 130);
  --chart-5: oklch(0.548 0.222 27.5);

  --sidebar: oklch(0.208 0.015 38);
  --sidebar-foreground: oklch(0.958 0.008 80);
  --sidebar-primary: oklch(0.668 0.208 28.5);
  --sidebar-primary-foreground: oklch(0.168 0.014 40);
  --sidebar-accent: oklch(0.288 0.018 38);
  --sidebar-accent-foreground: oklch(0.958 0.008 80);
  --sidebar-border: oklch(1 0 0 / 11%);
  --sidebar-ring: oklch(0.668 0.208 28.5);

  --gradient-hero: linear-gradient(
    160deg,
    color-mix(in oklab, var(--background) 88%, var(--primary)) 0%,
    var(--background) 55%,
    color-mix(in oklab, var(--background) 88%, var(--brand-cyan)) 100%
  );

  /* تحديث الجسر في الليلي */
  --alhana-white: var(--card);
  --alhana-off-white: var(--background);
  --alhana-black: var(--foreground);
  --alhana-grey-light: var(--border);
  --background-primary: var(--card);
  --background-secondary: var(--surface);
  --background-card: var(--card);
  --text-primary: var(--foreground);
  --bg-natural-1: color-mix(in oklab, var(--background) 94%, var(--primary));
  --bg-natural-2: var(--surface);
  --bg-natural-3: var(--surface);
  --bg-pattern-1: var(--surface);
  --bg-pattern-2: var(--background);
  --bg-texture-1: var(--surface);
  --bg-texture-2: color-mix(in oklab, var(--surface) 90%, var(--brand-cyan));
}

/* -------------------------------------------------------------------------
 * 3) الأساس (Base)
 * ---------------------------------------------------------------------- */
* {
  border-color: var(--border);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* حجم جذري سائل: 15px على 320px → 18px على 1920px+ */
  font-size: clamp(0.9375rem, 0.9rem + 0.22vw, 1.125rem);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  line-height: 1.75;
  /* لا تمرير أفقي على أي مقاس */
  overflow-x: hidden;
  min-height: 100svh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: var(--foreground);
}

/* عناوين متجاوبة تلقائيًا بدون نقاط كسر */
h1 { font-size: var(--text-fluid-4xl); }
h2 { font-size: var(--text-fluid-3xl); }
h3 { font-size: var(--text-fluid-2xl); }
h4 { font-size: var(--text-fluid-xl); }
h5 { font-size: var(--text-fluid-lg); }
h6 { font-size: var(--text-fluid-base); }

p { text-wrap: pretty; }

::selection {
  background-color: color-mix(in oklab, var(--primary) 22%, transparent);
  color: var(--foreground);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--muted);
}

::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--primary) 55%, var(--muted));
  border-radius: 999px;
  border: 2px solid var(--muted);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* وسائط لا تكسر التخطيط أبدًا */
img, picture, video, canvas, svg, iframe {
  display: block;
  max-width: 100%;
}

img, video {
  height: auto;
}

a {
  color: var(--primary);
  transition: color var(--duration-fast) var(--ease-out-soft);
}

a:hover {
  color: var(--primary-dark);
}

/* حقول الإدخال: 16px كحد أدنى لمنع تكبير iOS التلقائي */
input, select, textarea, button {
  font: inherit;
  font-size: max(1rem, 0.95em);
}

table {
  width: 100%;
  border-collapse: collapse;
}

/* الجوال أفقيًا: ضغط المسافات الرأسية */
@media (orientation: landscape) and (max-height: 30rem) {
  :root {
    --spacing-fluid-xl: 1.5rem;
    --spacing-fluid-lg: 1rem;
  }
}

/* الشاشات العريضة جدًا */
@media (min-width: 160rem) {
  html {
    font-size: 1.1875rem;
  }
}

/* ------------------------------------------------------------------------- 
 * 4) حركات خفيفة
 * ---------------------------------------------------------------------- */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.72; }
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s var(--ease-out-soft) both;
}

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

.animate-pulse-soft {
  animation: pulse-soft 3s ease-in-out infinite;
}

@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;
  }
}

/* -------------------------------------------------------------------------
 * 5) أدوات مخصّصة (Utilities) — استخدمها ككلاسات جاهزة
 * ---------------------------------------------------------------------- */

/* نص بتدرج لوني من الهوية */
.gradient-text {
  background-image: var(--gradient-primary);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.gradient-text-fresh {
  background-image: var(--gradient-fresh);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* خلفيات التدرجات */
.bg-gradient-primary { background-image: var(--gradient-primary); }
.bg-gradient-warm    { background-image: var(--gradient-warm); }
.bg-gradient-fresh   { background-image: var(--gradient-fresh); }
.bg-gradient-hero    { background-image: var(--gradient-hero); }

/* بطاقة زجاجية */
.glass-card {
  background-image: var(--gradient-glass);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
  border-radius: calc(var(--radius) + 10px);
  box-shadow: var(--shadow-md-token);
}

/* ارتفاع لطيف عند المرور */
.hover-lift {
  transition:
    transform var(--duration-base) var(--ease-out-soft),
    box-shadow var(--duration-base) var(--ease-out-soft);
}

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

/* حلقة تركيز موحّدة */
.focus-ring:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* مسافات الأقسام والحاوية */
.section-padding {
  padding-block: 4rem;
}

@media (min-width: 48rem) {
  .section-padding {
    padding-block: 5.5rem;
  }
}

@media (min-width: 80rem) {
  .section-padding {
    padding-block: 7rem;
  }
}

.container-app {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 48rem) {
  .container-app {
    padding-inline: 2rem;
  }
}

/* حاوية متجاوبة كاملة: هوامش تتوسّع تدريجيًا وحد أقصى يكبر على الشاشات الضخمة */
.container-fluid-alhana {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1rem; /* 320–359px */
  max-width: 100%;
}

@media (min-width: 22.5rem) { .container-fluid-alhana { padding-inline: 1.125rem; } }
@media (min-width: 30rem)   { .container-fluid-alhana { padding-inline: 1.5rem; } }

@media (min-width: 48rem) {
  .container-fluid-alhana {
    padding-inline: 2rem;
    max-width: 46rem;
  }
}

@media (min-width: 64rem) {
  .container-fluid-alhana {
    padding-inline: 2.5rem;
    max-width: 62rem;
  }
}

@media (min-width: 80rem)  { .container-fluid-alhana { max-width: 76rem; } }
@media (min-width: 90rem)  { .container-fluid-alhana { max-width: 84rem; } }
@media (min-width: 100rem) { .container-fluid-alhana { max-width: 92rem; } }
@media (min-width: 120rem) { .container-fluid-alhana { max-width: 104rem; } }
@media (min-width: 160rem) { .container-fluid-alhana { max-width: 120rem; } }

/* شبكات تتكيّف تلقائيًا بدون نقاط كسر (من 320px حتى Ultra-wide) */
.grid-auto-fit {
  display: grid;
  gap: var(--spacing-fluid-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.grid-auto-fit-sm {
  display: grid;
  gap: var(--spacing-fluid-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.grid-auto-fit-lg {
  display: grid;
  gap: var(--spacing-fluid-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

/* صف يحتوي نصًا + عناصر ثابتة: آمن على 320px */
.row-safe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 36rem) {
  .row-safe {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

/* مسافات أقسام سائلة */
.section-fluid {
  padding-block: var(--spacing-fluid-xl);
}

/* أحجام نص سائلة كأدوات جاهزة */
.text-fluid-hero {
  font-size: var(--text-fluid-hero);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.text-fluid-title {
  font-size: var(--text-fluid-3xl);
  line-height: 1.15;
}

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

/* هدف لمس لا يقل عن 44×44 (توصية الوصولية على الجوال) */
.tap-target {
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* مناطق آمنة لأجهزة ذات نتوء (iPhone) */
.safe-area {
  padding-inline: max(1rem, env(safe-area-inset-inline-start), env(safe-area-inset-inline-end));
  padding-block-start: env(safe-area-inset-top);
  padding-block-end: max(1rem, env(safe-area-inset-bottom));
}

.safe-bottom {
  padding-block-end: max(0.75rem, env(safe-area-inset-bottom));
}

/* منع تجاوز النص/العناصر أفقيًا على 320px */
.no-overflow {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* وسائط متجاوبة */
.media-fluid {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* تمرير أفقي بالسحب على الجوال */
.scroll-snap-x {
  display: flex;
  gap: var(--spacing-fluid-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.scroll-snap-x::-webkit-scrollbar {
  display: none;
}

.scroll-snap-x > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
 * 6) مكوّنات الموقع الموحّدة (محمولة من theme/alhana-modern القديمة)
 * ---------------------------------------------------------------------- */

/* ===== الأزرار الحديثة ===== */
.btn-alhana {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  border-radius: var(--rad-full);
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: none;
  cursor: pointer;
  text-decoration: none;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.btn-alhana:hover {
  transform: scale(1.05) translateY(-3px);
  color: var(--primary-foreground) !important;
}

.btn-alhana.primary {
  background: var(--gradient-primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-glow-token);
}

.btn-alhana.secondary {
  background: linear-gradient(135deg, var(--brand-green), var(--alhana-food-dark));
  color: var(--success-foreground);
  box-shadow: var(--sh-glow-green);
}

.btn-alhana.accent {
  background: linear-gradient(135deg, var(--brand-orange), var(--alhana-juice-dark));
  color: var(--warning-foreground);
  box-shadow: var(--sh-glow-orange);
}

.btn-alhana.sm {
  padding: 8px 20px;
  font-size: 13px;
}

/* ===== بطاقات الهناء ===== */
.alhana-card {
  background: var(--card);
  border-radius: var(--rad-lg);
  box-shadow: var(--sh-soft);
  border: 1px solid transparent;
  transition: all 0.5s ease;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.alhana-card.flat {
  display: block;
  height: auto;
}

.alhana-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-medium);
  border-color: color-mix(in oklab, var(--brand-cyan) 15%, transparent);
}

.card-img-wrap {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.alhana-card:hover .card-img-wrap img {
  transform: scale(1.1);
}

/* ===== هيرو الصفحة الرئيسية ===== */
.alhana-hero {
  min-height: 85vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: -1px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.alhana-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left,
    color-mix(in oklab, var(--primary) 88%, transparent),
    color-mix(in oklab, var(--primary-dark) 60%, transparent));
}

.alhana-hero__badge {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  font-weight: 600;
  display: inline-block;
}

.alhana-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.2;
}

.alhana-hero__lead {
  font-size: 1.25rem;
  max-width: 600px;
  line-height: 1.7;
}

@media (max-width: 991.98px) {
  .alhana-hero { min-height: 70vh; }
  .alhana-hero__lead { font-size: 1.05rem; }
}

/* ===== أشكال وخلفيات فاتحة ===== */
.organic-shape {
  position: relative;
  overflow: hidden;
}

.organic-shape::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  z-index: 0;
}

.blue-light  { background-color: var(--alhana-dairy-light); }
.green-light { background-color: var(--alhana-food-light); }
.orange-light { background-color: var(--alhana-juice-light); }

.bg-natural-soft {
  background: linear-gradient(to bottom, var(--bg-natural-1), var(--bg-natural-2), var(--bg-natural-3));
}

.bg-pattern-soft {
  background:
    url('../imgs/theme/Background_Pattern.png') repeat,
    radial-gradient(circle at top left, rgba(0, 0, 0, 0.02), transparent 60%),
    radial-gradient(circle at bottom right, rgba(0, 0, 0, 0.03), transparent 60%),
    linear-gradient(to bottom, var(--bg-pattern-2), var(--bg-pattern-1));
  background-size: auto, cover, cover, cover;
}

.dark .bg-pattern-soft {
  background:
    url('../imgs/theme/Background_Pattern.png') repeat,
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.02), transparent 60%),
    linear-gradient(to bottom, var(--bg-pattern-2), var(--bg-pattern-1));
  background-size: auto, cover, cover;
}

.bg-texture-soft {
  background:
    url('../imgs/theme/Background_Texture.png') repeat,
    linear-gradient(135deg, transparent, var(--bg-texture-2));
  background-size: auto, cover;
}

.card-texture,
.featured-card {
  background: linear-gradient(135deg, var(--bg-texture-1), var(--background-card));
  box-shadow: var(--shadow-sm-token);
}

/* ===== حركات الظهور عند التمرير ===== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1),
    transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.reveal-on-scroll.active {
  opacity: 1;
  transform: translateY(0);
}

/* ===== ترويسة لاصقة وشعار متوهج ===== */
.sticky-bar.stick {
  background: color-mix(in srgb, var(--card) 85%, transparent) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: var(--sh-soft) !important;
}

.brand-logo-glow {
  position: relative;
  display: inline-block;
}

.brand-logo-glow img {
  position: relative;
  z-index: 2;
}

.brand-logo-glow::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: var(--grad-white-glow);
  z-index: 1;
}

/* تصحيح محاذاة RTL */
.ml-auto {
  margin-right: auto !important;
  margin-left: unset !important;
}

.mr-auto {
  margin-left: auto !important;
  margin-right: unset !important;
}

/* ===== إحصائيات ===== */
.stat-item {
  padding: 20px;
  border-radius: var(--rad-md);
  text-align: center;
  transition: 0.3s;
}

.stat-item h4 {
  font-size: 0.9rem;
  color: var(--muted-foreground);
  margin-bottom: 5px;
}

.stat-item strong {
  font-size: 1.5rem;
  color: var(--primary);
  font-weight: 800;
}

/* ===== تحسينات صفحة الوصفة ===== */
.recipe-ing-section h5.recipe-ing-name {
  font-size: 1.1rem;
  position: relative;
  padding-bottom: 15px;
}

.recipe-ing-section h5.recipe-ing-name::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 3px;
  background: var(--primary);
  border-radius: 10px;
}

.step-item {
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.step-item:hover {
  border-color: color-mix(in oklab, var(--primary) 25%, transparent);
  transform: translateX(-5px);
  background: var(--card) !important;
  box-shadow: var(--sh-medium) !important;
}

.product-rate .fi-rs-star { font-size: 14px; }

.tag-cloud a {
  transition: all 0.3s ease;
  text-decoration: none;
}

.tag-cloud a:hover {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

/* ===== تحسينات التفاصيل المميزة ===== */
.detail-gallery-wrap { perspective: 1000px; }

.play-btn-premium {
  width: 70px;
  height: 70px;
  background: var(--card);
  color: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 15px 35px color-mix(in oklab, var(--primary) 35%, transparent);
  transition: 0.4s;
}

.play-btn-premium:hover {
  transform: scale(1.1) rotate(5deg);
  background: var(--primary);
  color: var(--primary-foreground);
}

.recipe-main-title {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--foreground);
}

.btn-premium-outline {
  padding: 10px 25px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  color: var(--foreground);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-premium-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 8%, transparent);
}

.premium-step-card { border: 1px solid transparent; }

.premium-step-card:hover {
  border-color: color-mix(in oklab, var(--primary) 18%, transparent);
}

/* ===== تنبيهات موحّدة حسب حالات النظام ===== */
.alert {
  border-radius: calc(var(--radius) - 3px);
  padding: 12px 16px;
  font-size: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--foreground);
}

.alert-success {
  border-color: color-mix(in oklab, var(--success) 45%, transparent);
  background: color-mix(in oklab, var(--success) 10%, var(--card));
  color: color-mix(in oklab, var(--success) 70%, black);
}

.alert-error,
.alert-danger {
  border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
  background: color-mix(in oklab, var(--destructive) 9%, var(--card));
  color: color-mix(in oklab, var(--destructive) 75%, black);
}

.alert-info {
  border-color: color-mix(in oklab, var(--info) 40%, transparent);
  background: color-mix(in oklab, var(--info) 10%, var(--card));
  color: color-mix(in oklab, var(--info) 65%, black);
}

.alert-warning {
  border-color: color-mix(in oklab, var(--warning) 50%, transparent);
  background: color-mix(in oklab, var(--warning) 12%, var(--card));
  color: var(--warning-foreground);
}

small.note { color: var(--muted-foreground); }

.captcha { margin-top: 12px; }

.captcha-note {
  background: color-mix(in oklab, var(--warning) 12%, var(--card));
  border: 1px solid color-mix(in oklab, var(--warning) 45%, transparent);
  color: var(--warning-foreground);
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 14px;
}

.captcha-label {
  display: block;
  margin: 6px 0;
  font-weight: 600;
}

.captcha-input input[type="text"] {
  width: 120px;
  padding: 8px 10px;
  border: 1px solid var(--input);
  border-radius: 8px;
  background: var(--card);
  color: var(--foreground);
}

/* ===== شريط المشاركة الاجتماعية =====
   ألوان المنصات نفسها هويات خارجية ثابتة ولا تتغير مع الثيم */
.share-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: calc(var(--radius) - 3px);
  background-color: var(--card);
  border: 1px solid var(--border);
}

.share-bar .share-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
}

.share-bar .share-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.share-icon i { line-height: 1; }

.share-icon img {
  width: 16px;
  height: 16px;
  display: block;
}

.share-icon:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  opacity: 0.95;
}

.share-bar.share-bar-sm { padding: 6px 10px; }
.share-bar.share-bar-sm .share-label { font-size: 12px; }

.share-bar.share-bar-sm .share-icon {
  width: 28px;
  height: 28px;
  font-size: 13px;
}

.share-icon-facebook  { background-color: #1877f2; }
.share-icon-twitter   { background-color: #1da1f2; }
.share-icon-whatsapp  { background-color: #25d366; }
.share-icon-email     { background-color: #6c757d; }
.share-icon-instagram { background: radial-gradient(circle at 30% 30%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.share-icon-youtube   { background-color: #ff0000; }

/* ===== الترويسة والتنقل ===== */
.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-style-1 .header-bottom-bg-color {
  background-color: var(--card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.header-style-1 .header-bottom-bg-color .main-menu > nav > ul > li > a {
  color: var(--foreground);
}

.header-style-1 .header-bottom-bg-color .main-menu > nav > ul > li > a:hover,
.header-style-1 .header-bottom-bg-color .main-menu > nav > ul > li > a.active {
  color: var(--primary);
}

.main.pages .page-content {
  background-color: var(--bg-natural-1);
}

.text-brand { color: var(--primary) !important; }
.bg-brand   { background-color: var(--primary) !important; }

/* أزرار القالب الأساسية */
.btn,
.button {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

.btn:hover,
.button:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--primary-foreground);
}

.btn-heading,
button.btn-heading[type="submit"] {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--primary-foreground);
}

.btn-heading:hover,
button.btn-heading[type="submit"]:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

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

.btn-outline {
  border: 1px solid var(--primary);
  color: var(--primary);
  background: transparent;
}

/* تعطيل أزرار CTA المعطلة */
.product-card-bottom .add-cart .add.disabled,
.product-card-bottom .add-cart a[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}

.product-cart-wrap .product-img-action-wrap { z-index: 1; }
.product-cart-wrap .product-content-wrap { position: relative; z-index: 2; }
.product-cart-wrap .product-card-bottom { position: relative; z-index: 3; }
.product-cart-wrap .product-card-bottom .add-cart a { position: relative; z-index: 4; display: inline-block; }

/* شارات المنتجات */
.product-cart-wrap .product-badges span.hot,
.vendor-wrap .product-badges.product-badges-position span.hot {
  background-color: var(--badge-hot) !important;
}

.product-cart-wrap .product-badges span.new,
.vendor-wrap .product-badges.product-badges-position span.new {
  background-color: var(--badge-new) !important;
}

.product-cart-wrap .product-badges span.sale,
.vendor-wrap .product-badges.product-badges-position span.sale {
  background-color: var(--badge-sale) !important;
}

.product-cart-wrap .product-badges span.best,
.vendor-wrap .product-badges.product-badges-position span.best {
  background-color: var(--badge-best) !important;
}

.text-hot  { color: var(--badge-hot) !important; }
.text-new  { color: var(--badge-new) !important; }
.text-sale { color: var(--badge-sale) !important; }
.text-best { color: var(--badge-best) !important; }

/* خلفية معرض الوصفة */
.detail-gallery .product-image-slider {
  background-color: var(--bg-natural-1);
}

/* ===== حقل اختيار المكونات (what_to_cook) ===== */
#ingredients-select + .select2.select2-container--default .select2-selection--multiple {
  min-height: 48px;
  border-radius: calc(var(--radius) - 3px);
  border: 1px solid var(--input);
  background: var(--card);
  padding-inline-start: 8px;
  padding-inline-end: 8px;
  display: flex;
  align-items: center;
}

#ingredients-select + .select2.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 12%, transparent);
}

#ingredients-select + .select2.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-block: 4px;
}

#ingredients-select + .select2.select2-container--default .select2-selection--multiple .select2-selection__choice {
  border-radius: 4px;
  border: 1px solid var(--primary-dark);
  background-color: var(--primary);
  color: var(--primary-foreground);
  padding: 2px 10px;
  font-size: 12px;
}

#ingredients-select + .select2.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--primary-foreground);
  margin-left: 4px;
}

#ingredients-select + .select2.select2-container--default .select2-selection--multiple .select2-search__field {
  margin-top: 2px;
  border: none !important;
  box-shadow: none !important;
}

/* ===== منصة المتصدرين (استجابة الجوال) ===== */
@media only screen and (max-width: 480px) {
  .podium-section {
    padding-top: 40px;
    padding-bottom: 50px;
  }

  .leaderboard-podium {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .podium-place {
    max-width: 100%;
    width: 100%;
  }

  .podium-place.silver { height: 200px; }
  .podium-place.gold   { height: 280px; }
  .podium-place.bronze { height: 160px; }

  .podium-place .user-avatar {
    width: 60px;
    height: 60px;
    margin-top: -50px;
  }

  .podium-place.gold .user-avatar {
    width: 80px;
    height: 80px;
    margin-top: -60px;
  }

  .podium-place h4 { font-size: 1.1rem; }
  .podium-place h5 { font-size: 1rem; }
  .podium-place .badge { font-size: 0.8rem; }
}

/* ===== شارة "قريبًا" ===== */
.soon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 8px;
  margin-right: 6px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand-orange) 14%, var(--card));
  border: 1px solid color-mix(in oklab, var(--brand-orange) 38%, transparent);
  color: color-mix(in oklab, var(--brand-orange) 55%, black) !important;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  vertical-align: middle;
  white-space: nowrap;
}

.soon-badge.soon-badge-hero {
  min-height: 26px;
  padding: 4px 12px;
  font-size: 13px;
}

/* =========================================================================
 * 7) مكونات الهوية البصرية المطورة لصفحات الموقع (Alhana Modern System v2)
 * ========================================================================= */

/* --- خلفيات وأنماط الهوية --- */
.bg-pattern-soft {
  background-color: var(--brand-cream);
  background-image: radial-gradient(color-mix(in oklab, var(--brand-orange) 8%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
}

.bg-texture-soft {
  background-color: var(--surface);
  background-image: linear-gradient(135deg, color-mix(in oklab, var(--brand-cream) 90%, var(--brand-orange)) 0%, var(--surface) 100%);
}

.bg-brand-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #ffffff;
}

.shadow-premium {
  box-shadow: 0 20px 45px -15px rgba(227, 30, 36, 0.12), 0 10px 25px -10px rgba(0, 0, 0, 0.06);
}

.border-radius-15 { border-radius: 15px !important; }
.border-radius-20 { border-radius: 20px !important; }
.border-radius-30 { border-radius: 30px !important; }

/* --- مكونات صفحة "من نحن" About Us --- */
.about-hero-v6 {
  padding: 60px 0 40px;
  position: relative;
}

.badge-v6 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 50px;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
  font-weight: 700;
  font-size: 14px;
  border: 1px solid color-mix(in oklab, var(--primary) 20%, transparent);
}

.badge-v6.secondary {
  background: color-mix(in oklab, var(--brand-cyan) 10%, transparent);
  color: var(--brand-cyan);
  border-color: color-mix(in oklab, var(--brand-cyan) 25%, transparent);
}

.about-stat-mini {
  padding: 12px 18px;
  min-width: 100px;
}

.about-stat-mini h2 {
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
}

.about-stat-mini.bordered-left {
  border-left: 1px solid var(--border);
}

.about-card-v6 {
  border-radius: 28px;
  border: 1px solid var(--border);
  background: var(--card);
}

.about-year-pill {
  font-size: 20px;
  font-weight: 900;
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  padding: 6px 18px;
  border-radius: 50px;
}

.about-kv-list {
  display: grid;
  gap: 14px;
}

.about-kv-list .kv-item {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.about-kv-list .kv-item .k {
  font-size: 12px;
  opacity: 0.85;
  font-weight: 600;
}

.about-kv-list .kv-item .v {
  font-size: 15px;
  font-weight: 700;
}

/* --- مكونات صفحة "ماذا أطبخ؟" What to Cook --- */
.wtc-hero {
  padding: 50px 0 30px;
}

.premium-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  padding: 6px 16px;
  border-radius: 50px;
}

.feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow-sm-token);
}

.feature-badge i {
  color: var(--primary);
}

.wtc-card {
  border-radius: 24px;
  transition: all 0.35s var(--ease-out-soft);
}

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

.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.tag-pill.available {
  background: color-mix(in oklab, var(--brand-green) 12%, transparent);
  color: var(--brand-green);
  border: 1px solid color-mix(in oklab, var(--brand-green) 25%, transparent);
}

.tag-pill.missing {
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
  border: 1px solid color-mix(in oklab, var(--primary) 20%, transparent);
}

/* --- مكونات صفحات المصادقة (Auth & Account) --- */
.auth-card-split {
  border-radius: 30px;
  background: var(--card);
  border: 1px solid var(--border);
}

.auth-logo {
  max-width: 140px;
  height: auto;
}

.form-group-v5 label {
  font-size: 14px;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 8px;
  display: block;
}

.input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon-wrap i {
  position: absolute;
  right: 16px;
  color: var(--muted-foreground);
  font-size: 18px;
  pointer-events: none;
  z-index: 2;
}

.input-icon-wrap input,
.input-icon-wrap select,
.input-icon-wrap textarea {
  width: 100%;
  padding: 14px 48px 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font-size: 15px;
  transition: all 0.25s ease;
  min-height: 48px;
}

.input-icon-wrap input:focus,
.input-icon-wrap select:focus,
.input-icon-wrap textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 12%, transparent);
}

.alert-auth-v5 {
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--primary) 25%, transparent);
  color: var(--foreground);
}

/* --- مكونات صفحات الاتصال والسياسات --- */
.contact-channel-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.contact-channel-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md-token);
}

.contact-channel-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}

.contact-ltr {
  direction: ltr !important;
  text-align: left !important;
  display: inline-block;
}

/* --- تحسينات التجاوب الشاملة لجميع المقاسات --- */
@media (max-width: 767px) {
  .section-padding { padding-block: 2.5rem; }
  .about-hero-v6 { padding: 30px 0 20px; }
  .about-stat-mini { padding: 8px 10px; min-width: 75px; }
  .auth-card-split .p-50 { padding: 24px !important; }
  .tap-target, .btn-alhana, .btn { min-height: 44px; }
  
  /* الحفاظ على عدم تجاوز أي عنصر أفقيًا */
  .container, .container-fluid, .row {
    max-width: 100%;
    overflow-x: hidden;
  }
}