/* توسيط صفحة تسجيل الدخول بشكل صحيح */
body, html {
  height: 100%;
  margin: 0;
}

/* توسيط النموذج عموديًا وأفقيًا */
.d-flex {
  display: flex;
}

.justify-content-center {
  justify-content: center;
}

.align-items-center {
  align-items: center;
}

.vh-100 {
  height: 100vh; /* 100% من ارتفاع نافذة المتصفح */
}

/* جعل عنوان "تسجيل الدخول" يظهر فوق النموذج بشكل متناسق */
h1.text-center {
  margin-bottom: 30px; /* توفير تباعد بين العنوان والنموذج */
}

/* تخصيص المسافة بين نموذج تسجيل الدخول ورابط "إنشاء حساب" */
.mt-3.text-center {
  margin-top: 15px;
}

/* ----------------- الألوان العامة ----------------- */
:root{
  --bg:#f7f9fb;
  --text:#0f172a;
  --surface:#ffffff;
  --primary:#2563eb;
  --muted:#64748b;
}

body.theme-dark{
  --bg:#0b1220;
  --text:#e5e7eb;
  --surface:#111827;
  --primary:#60a5fa;
  --muted:#94a3b8;
}

/* ----------------- الأساسيات ----------------- */
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Cairo', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
}

a{ color: var(--primary); }
a:hover{ opacity:.9; }

/* مكوّنات بخلفية السطح */
.navbar, .card, footer{ background:var(--surface); }

/* بطاقات عامة */
.card{
  border:none;
  box-shadow:0 10px 30px rgba(2,6,23,.06);
  border-radius:18px;
}
.theme-dark .card{ box-shadow:0 12px 34px rgba(255,255,255,.04); }

/* أسعار المنتجات */
.product-card .price{ font-weight:700; }
.product-card img{ object-fit:cover; height:180px; }

/* الهيرو */
.hero{ display:grid; grid-template-columns:1.3fr 1fr; gap:28px; align-items:center; padding:48px 0; position:relative; }
.hero .banner{ border-radius:16px; overflow:hidden; }
.hero::before{
  content:''; position:absolute; inset:-20px -40px auto -40px; height:60%;
  background:
    radial-gradient(1200px 500px at 90% -10%, rgba(99,102,241,.25), transparent 60%),
    radial-gradient(800px 400px at 10% 0%,   rgba(16,185,129,.2),  transparent 60%);
  filter: blur(10px);
  z-index:-1;
}

/* شارة ناعمة */
.badge-soft{
  background:rgba(37,99,235,.08);
  color:#2563eb;
  border-radius:999px;
  padding:.35rem .7rem;
  font-weight:600
}

/* ----------------- أزرار عامة ----------------- */
.btn{ border-radius:14px; padding:.55rem 1rem; }

/* ----------------- شريط التنقل (تفاعلي) ----------------- */
.navbar{ backdrop-filter:saturate(140%) blur(6px); border-bottom:1px solid rgba(100,116,139,.15); }

.navbar .navbar-brand{ color:var(--text); font-weight:800; }

.navbar .nav-link{
  color:var(--text);
  border-radius:999px;
  padding:.45rem .9rem;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{
  color:#fff !important;
  background:var(--primary);
  box-shadow:0 6px 16px rgba(37,99,235,.18);
}

/* زر الثيم في الشريط */
#themeToggle{ border-radius:999px; }

/* إصلاح الشريط في الوضع الليلي (بدلاً من bg-white الافتراضي) */
.theme-dark .navbar.bg-white,
.theme-dark .navbar{
  background-color: var(--surface) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.theme-dark .navbar .navbar-brand,
.theme-dark .navbar .nav-link{
  color: var(--text) !important;
}

/* ----------------- حقول الإدخال (الوضع الليلي) ----------------- */
.theme-dark .form-control{
  background-color:#0f172a;
  color:var(--text);
  border-color:rgba(255,255,255,.14);
}
.theme-dark .form-control::placeholder{ color: rgba(229,231,235,.6); }

/* أزرار مخططة في الليلي */
.theme-dark .btn-outline-primary{
  color:var(--text);
  border-color:rgba(229,231,235,.35);
}
.theme-dark .btn-outline-primary:hover{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}

/* ----------------- الفوتر ----------------- */
footer{ border-top:1px solid rgba(100,116,139,.2); }

/* ----------------- تحسينات إضافية ----------------- */
/* تباعد بسيط أعلى الصفحة حتى لا يغطي الشريط المنطقة الأولى */
.hero{ padding-top:28px; }

/* توازن ألوان النصوص الثانوية */
.text-muted{ color: var(--muted) !important; }
.theme-dark .text-muted{ color: rgba(229,231,235,.7) !important; }

/* ===== توحيد لون النصوص حسب الثيم (أسود/أبيض) ===== */

/* 1) اضبط قيمة المتغيّر الأساسي للنص */
:root{
  --text: #000; /* أسود في النهاري */
}
body.theme-dark{
  --text: #fff; /* أبيض في الليلي */
}

/* 2) اجعل النص الافتراضي يعتمد var(--text) */
body { color: var(--text); }

/* 3) عناصر المحتوى والبطاقات والجداول… */
h1,h2,h3,h4,h5,h6,
p,small,span,strong,em,
ul,ol,li,dl,dt,dd,
label,legend,caption,
table,thead,tbody,tfoot,tr,th,td,
.card,.card-title,.card-text,
.product-card,.product-card .price,
footer, footer * {
  color: var(--text);
}

/* 4) الروابط العادية تتبع لون النص (ما عدا الأزرار وروابط الشريط العلوي) */
a:not(.btn):not(.nav-link) { color: var(--text); }

/* 5) نصوص داخل بطاقات المنتجات (عناوين/روابط) */
.product-card a { color: var(--text) !important; }

/* 6) أوسمة/بادجات ونصوص "muted" تصبح بنفس لون النص المطلوب */
.badge, .badge-soft, .text-muted { color: var(--text) !important; }

/* ===== تفاعلية البطاقات ===== */

/* 1) إضافة تأثيرات للبطاقات */
.card, .product-card {
  border: none; /* إزالة الحدود لتظهر بشكل ناعم */
  border-radius: 16px; /* إضافة تقويس للأركان */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* إضافة ظل بسيط */
  transition: transform 0.2s ease, box-shadow 0.3s ease; /* تأثير سلس */
}

/* 2) عند المرور على البطاقة، تظهر تأثيرات */
.card:hover, .product-card:hover {
  transform: translateY(-8px); /* رفع البطاقة قليلاً */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); /* زيادة الظل */
}

/* 3) لجعل البطاقات الصغيرة (product-card) بشكل خاص أكثر تفاعلًا */
.product-card {
  cursor: pointer; /* إظهار شكل المؤشر على البطاقة */
}

/* 4) التأثير عند الضغط على البطاقة */
.card:active, .product-card:active {
  transform: translateY(0); /* العودة إلى مكانها الطبيعي عند الضغط */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* الظل الطبيعي */
}