/* ==========================================================================
   Hedrh Utilities (No external libs) - v1.0
   Notes:
   - RTL-friendly where applicable.
   - Implements only classes actually used in the provided HTML.
   - Replace <i class="fas ..."> with inline SVGs; see .icon utility.
   ========================================================================== */

/* CSS Reset (light) */
*, *::before, *::after { box-sizing: border-box; }
html, body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; display: block; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Root variables (brand + slate) */
:root{
  --brand-50:#ecfeff; --brand-100:#cffafe; --brand-200:#a5f3fc; --brand-300:#67e8f9;
  --brand-400:#22d3ee; --brand-500:#06b6d4; --brand-600:#0891b2; --brand-700:#0e7490;
  --brand-800:#155e75; --brand-900:#164e63;

  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1f2937; --slate-900:#0f172a;

  --white:#fff; --black:#000;
}

/* Typography */
.font-ar{
  font-family: "Almarai", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  font-weight: 400; /* الافتراضي */
}

.text-black{ color:#000; }
.text-white{ color:#fff; }
.text-slate-900{ color: var(--slate-900); }
.text-slate-700{ color: var(--slate-700); }
.text-slate-600{ color: var(--slate-600); }
.text-slate-500{ color: var(--slate-500); }
.text-brand-700{ color: var(--brand-700); }
.text-brand-600{ color: var(--brand-600); }
.text-orange-500{ color:#f97316; }
.text-xs{ font-size: .75rem; line-height: 1rem; }
.text-sm{ font-size: .875rem; line-height: 1.25rem; }
.text-lg{ font-size: 1.125rem; line-height: 1.75rem; }
.text-xl{ font-size: 1.25rem; line-height: 1.75rem; }
.font-bold{ font-weight:700; }
.leading-8{ line-height:2rem; }
.text-center{ text-align:center; }
.text-right{ text-align:right; }

/* Backgrounds */
.bg-white{ background:#fff; }
.bg-slate-50{ background: var(--slate-50); }
.bg-slate-100{ background: var(--slate-100); }
.bg-brand-50{ background: var(--brand-50); }
.bg-brand-100{ background: var(--brand-100); }
.bg-brand-500{ background: var(--brand-500); }
.bg-brand-600{ background: var(--brand-600); }
.bg-brand-700{ background: var(--brand-700); }
.bg-black\/20{ background: rgba(0,0,0,.2); }
.bg-green-500{ background:#22c55e; }
.bg-orange-500{ background:#f97316; }

/* Gradients used in page */
.bg-gradient-to-r{ background-image: linear-gradient(to right, var(--white), transparent); }
.bg-gradient-to-l{ background-image: linear-gradient(to left, var(--white), transparent); }
.from-white{ --from: #fff; }
.to-transparent{ --to: transparent; } /* helpers for semantics only */

/* Borders & radius */
.border{ border:1px solid var(--slate-200); }
.border-b{ border-bottom:1px solid var(--slate-200); }
.border-t{ border-top:1px solid var(--slate-200); }
.border-s{ border-inline-start:1px solid var(--slate-200); }
.border-slate-200{ border-color: var(--slate-200); }
.border-brand-700\/30{ border-color: rgba(14,116,144,.3); }
.rounded{ border-radius:.5rem; }
.rounded-lg{ border-radius:.75rem; }
.rounded-xl{ border-radius:1rem; }
.rounded-2xl{ border-radius:1.25rem; }
.rounded-full{ border-radius:9999px; }

/* Shadows */
.shadow-sm{ box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.shadow-md{ box-shadow: 0 4px 6px rgba(0,0,0,.1); }

/* Layout: display & positioning */
.block{ display:block; }
.inline-block{ display:inline-block; }
.flex{ display:flex; }
.grid{ display:grid; }
.hidden{ display:none; }
.relative{ position:relative; }
.absolute{ position:absolute; }
.fixed{ position:fixed; }
.sticky{ position:sticky; }
.top-0{ top:0; }
.bottom-0{ bottom:0; }
.left-0{ left:0; }
.right-0{ right:0; }
.inset-0{ top:0; right:0; bottom:0; left:0; }
.inset-y-0{ top:0; bottom:0; }

/* Z-index */
.z-30{ z-index:30; }
.z-40{ z-index:40; }
.z-50{ z-index:50; }

/* Sizing */
.w-full{ width:100%; }
.w-72{ width:18rem; }
.w-80{ width:20rem; }
.w-8{ width:2rem; }
.w-10{ width:2.5rem; }
.w-12{ width:3rem; }
.w-16{ width:4rem; }
.h-full{ height:100%; }
.h-14{ height:3.5rem; }
.h-32{ height:8rem; }
.h-8{ height:2rem; }
.h-10{ height:2.5rem; }
.h-12{ height:3rem; }

/* Spacing */
.mx-auto{ margin-inline:auto; }
.ms-auto{ margin-inline-start:auto; } /* RTL-aware logical margin-start */
.mt-3{ margin-top:.75rem; }
.mb-1{ margin-bottom:.25rem; }
.mb-2{ margin-bottom:.5rem; }
.mb-3{ margin-bottom:.75rem; }
.mb-4{ margin-bottom:1rem; }
.me-2{ margin-inline-end:.5rem; } /* if needed */
.p-2{ padding:.5rem; }
.p-3{ padding:.75rem; }
.p-4{ padding:1rem; }
.px-3{ padding-inline:.75rem; }
.px-4{ padding-inline:1rem; }
.py-1{ padding-block:.25rem; }
.py-2{ padding-block:.5rem; }
.py-3{ padding-block:.75rem; }
.pb-4{ padding-bottom:1rem; }
.pt-4{ padding-top:1rem; }
.ps-10{ padding-inline-start:2.5rem; }
.pe-3{ padding-inline-end:.75rem; }

/* Gaps */
.gap-1{ gap:.25rem; }
.gap-2{ gap:.5rem; }
.gap-3{ gap:.75rem; }
.gap-4{ gap:1rem; }

/* Containers */
.max-w-5xl{ max-width:64rem; }

/* Grids */
.grid-cols-1{ grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

/* Flex utilities */
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.flex-1{ flex:1 1 0%; }

/* Text decoration & hover */
.hover\:underline:hover{ text-decoration:underline; }
.hover\:bg-slate-100:hover{ background: var(--slate-100); }
.hover\:bg-brand-100:hover{ background: var(--brand-100); }
.hover\:bg-brand-700\/40:hover{ background: rgba(14,116,144,.4); }
.hover\:text-brand-700:hover{ color: var(--brand-700); }

/* Buttons */
button{ cursor:pointer; border:0; background:none; }
.rounded-btn{ padding:.5rem .75rem; border-radius:.75rem; background:var(--slate-100); }
.rounded-btn:hover{ background:var(--slate-200); }

/* Forms */
input{ border:0; }
input:focus{ outline: none; }
.outline-none{ outline:none; }
.focus\:bg-white:focus{ background:#fff; }
.focus\:ring-2:focus{ box-shadow: 0 0 0 2px var(--brand-300); }
.focus\:ring-brand-300:focus{ box-shadow: 0 0 0 2px var(--brand-300); }
.w-72{ width:18rem; }

/* Rounding helpers already defined */

/* Position helpers used on icons */
.right-3{ right:.75rem; }
.top-2\.5{ top:.625rem; }

/* Object fit */
.object-cover{ object-fit:cover; }

/* Opacity */
.opacity-70{ opacity:.7; }

/* Backdrop (approx; works where supported) */
.backdrop-blur{ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Transforms & transitions */
.transition, .transition-colors, .transition-shadow, .transition-transform{
  transition: all .2s ease-in-out;
}
.translate-x-full{ transform: translateX(100%); }
.-translate-x-full{ transform: translateX(-100%); }
.will-change-transform{ will-change: transform; }

/* Sticky helper already defined */

/* Ring / Focus handled above */

/* Rounded badge and chips */
.rounded-full{ border-radius:9999px; }
.rounded-xl{ border-radius:1rem; }

/* Utility for council horizontal scroll (hide scrollbar) */
.council-scroll{ overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.council-scroll::-webkit-scrollbar{ display:none; }

/* Cards */
.card{ background:#fff; border:1px solid var(--slate-200); border-radius:1rem; box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* Animations */
.fade-in{ animation: fadeIn .5s ease-in; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform: none;} }
.voice-wave{
  background: linear-gradient(90deg, var(--brand-500) 0%, var(--brand-400) 50%, var(--brand-300) 100%);
  background-size: 200% 100%;
  animation: wave 2s infinite linear;
}
@keyframes wave{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* Heights & widths used for avatars/badges already covered */

/* Pointer events */
.pointer-events-none{ pointer-events:none; }

/* Position helpers for gradients */
.left-0{ left:0; } .right-0{ right:0; } .top-0{ top:0; } .bottom-0{ bottom:0; }

/* Border radius 'rounded' already done */

/* RTL-safe start/end paddings */
.ms-auto{ margin-inline-start:auto; }

/* Utility chips */
.bg-brand-700, .text-white{ /* already declared, keep for clarity */ }

/* Visibility */
.md\:hidden{} /* placeholder, overridden in media query */
.md\:flex{}   /* placeholder */
.md\:block{}  /* placeholder */
.md\:col-span-8{} /* placeholder */
.md\:col-span-4{} /* placeholder */
.md\:grid-cols-12{} /* placeholder */

/* Grid gap */
.gap-4{ gap:1rem; }

/* Container padding for page */
.p-4{ padding:1rem; }

/* --- Responsive (md = 768px) --- */
@media (min-width:768px){
  .md\:hidden{ display:none !important; }
  .md\:flex{ display:flex !important; }
  .md\:block{ display:block !important; }
  .md\:grid-cols-12{ grid-template-columns: repeat(12, minmax(0,1fr)); }
  .md\:col-span-8{ grid-column: span 8 / span 8; }
  .md\:col-span-4{ grid-column: span 4 / span 4; }
  .md\:pb-6{ padding-bottom:1.5rem; }
  .md\:h-32{ height:8rem; }
}

/* Utilities not strictly Tailwind but helpful */
.cursor-pointer{ cursor:pointer; }
.overflow-hidden{ overflow:hidden; }
.overflow-y-auto{ overflow-y:auto; }

/* Badges */
.badge{ display:inline-flex; align-items:center; gap:.25rem; font-size:.75rem; padding:.125rem .5rem; border-radius:.5rem; }

/* Icon helper (replace Font Awesome) */
.icon{ width:1em; height:1em; display:inline-block; vertical-align:middle; }

/* Extra helpers for bottom nav & headers */
.border-brand { border-color: var(--brand-600); }

/* Utility widths for council gradient masks */
.w-6{ width:1.5rem; }
.h-6{ height:1.5rem; }

/* Extra utilities used in markup */
.text-brand-700{ color:var(--brand-700); }
.text-brand-500{ color:var(--brand-500); }
.bg-brand-700{ background:var(--brand-700); }
.bg-brand-600{ background:var(--brand-600); }
.bg-brand-500{ background:var(--brand-500); }

/* Buttons (semantic presets) */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:.5rem .75rem; border-radius:.75rem; border:1px solid transparent; }
.btn-primary{ background:var(--brand-600); color:#fff; }
.btn-primary:hover{ background:var(--brand-700); }
.btn-ghost{ background:var(--slate-100); }
.btn-ghost:hover{ background:var(--slate-200); }

/* Utilities for aspect ratio (simple) */
.aspect-16x9{ position:relative; padding-top:56.25%; }
.aspect-16x9 > *{ position:absolute; inset:0; width:100%; height:100%; }

/* Hide focus ring on mouse users but keep accessibility for keyboard */
:focus:not(:focus-visible){ box-shadow:none !important; }
/* ===== Fix mobile bottom nav icon alignment ===== */
nav.fixed.bottom-0 .grid a{
  display:flex;                 /* أيقونة فوق والنص تحت */
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1.1;              /* يقلّل فجوة baseline */
  gap:.125rem;                  /* مسافة صغيرة بين الأيقونة والنص */
}

/* الأيقونة نفسها كـ block عشان ما تعتمد baseline */
nav.fixed.bottom-0 .grid a .icon{
  width:1.25rem;                /* ≈ text-lg */
  height:1.25rem;
  display:block;                /* يلغي مشكلة النزول تحت */
  margin-bottom:.125rem;        /* بديل آمن لـ mb-1 */
}

/* لو بقي فرق بسيط على بعض الأجهزة، ادفعها شعرة فوق */
@supports (transform: translateY(0)){
  nav.fixed.bottom-0 .grid a .icon{
    transform: translateY(-1px);
  }
}

/* حجم هدف لمسي مريح */
nav.fixed.bottom-0 .grid a{ min-height: 3rem; } /* ~ 48px مع الـpadding */

    /* خلفية متدرجة باستخدام متغيراتك */
    .bg-page{
      min-height:100vh;
      background: linear-gradient(to bottom, var(--slate-50), var(--slate-100));
    }
    /* تخطيط عمودين من md+ (نستخدم ميديا 768px مثل نظامك) */
    .two-col{ display:grid; grid-template-columns: 1fr; min-height:100vh; }
    @media (min-width:768px){
      .two-col{ grid-template-columns: 1fr 1fr; }
    }
    /* حاوية نموذج مريحة */
    .card-lg{ border-radius:1.5rem; } /* أكبر قليلًا من rounded-2xl */
    /* صور المعاينة */
    .preview-img{ border-radius:1.5rem; box-shadow: 0 20px 40px rgba(0,0,0,.15); }
    /* تبويبات تسجيل الدخول / إنشاء حساب */
    .tabs{ display:flex; gap:.5rem; background:var(--slate-100); padding:.25rem; border-radius:1.25rem; }
    .tab{ flex:1; padding:.5rem .75rem; border-radius:1.25rem; text-align:center; }
    .tab.active{ background:#fff; color:var(--slate-900); font-weight:700; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
    .tab.inactive{ color:var(--slate-600); }
    /* مدخلات */
    .input{ width:100%; padding:.5rem .75rem; border:1px solid var(--slate-200); border-radius:1rem; }
    .input:focus{ box-shadow: 0 0 0 2px var(--brand-300); background:#fff; outline:none; }
    .select{ width:100%; padding:.5rem .75rem; border:1px solid var(--slate-200); border-radius:1rem; background:#fff; }
    /* زر أساسي وثانوي (يعتمد على .btn عندك) */
    .btn-block{ width:100%; padding:.5rem .75rem; border-radius:1rem; }
    .btn-outline{ background:#fff; border:1px solid var(--slate-200); }
    .btn-outline:hover{ background: var(--slate-50); }
    /* زر إظهار/إخفاء كلمة المرور */
    .toggle-eye{ position:absolute; inset-inline-start:.5rem; top:.55rem; color:var(--slate-500); }
    /* رابط الرجوع */
    .back-link{ color:var(--slate-600); }
    .back-link:hover{ color:var(--slate-700); text-decoration:underline; }
    /* عناوين */
    .h1{ font-size:1.875rem; line-height:2.25rem; font-weight:700; color:var(--slate-800); }
    .lead{ margin-top:.75rem; color:var(--slate-600); line-height:2rem; }
    /* مسافات عامة لهذه الصفحة */
    .section-pad{ padding:1.5rem; }
    @media (min-width:768px){ .section-pad{ padding:2.5rem; } }