/* ────────────────────────────────────────────────────────────────
   طبقة توحيد الهوية — تجعل إطار صفحات Django (هيدر/فوتر/أزرار/بطاقات)
   مطابقاً لتصميم React النظيف. تُحمّل أخيراً لتفوز على الطبقات السابقة.
   لا تمسّ لوحة التحكم (Unfold admin) — تُحمّل فقط عبر base.html العام.
   ──────────────────────────────────────────────────────────────── */
:root {
  --tq-royal-50:  #F7F3FB;
  --tq-royal-100: #EEE6F7;
  --tq-royal-200: #DDC9EE;
  --tq-royal-400: #A56FCE;
  --tq-royal-600: #5E2B98;
  --tq-royal-700: #4B217B;
  --tq-plum:      #0B183E;
  --tq-plum-deep: #050D25;
  --tq-pearl:     #F6F4FA;
  --tq-pearl-line:#E7E2F0;
  --tq-gold:      #8144B5;
  --tq-gold-deep: #5E2B98;
  --tq-gold-ink:  #38195D;
  --tq-card-shadow:       0 1px 2px rgba(11,24,62,.04), 0 8px 24px -12px rgba(11,24,62,.10);
  --tq-card-shadow-hover: 0 2px 4px rgba(11,24,62,.06), 0 20px 40px -16px rgba(94,43,152,.22);
}

/* ═══ 1) الهيدر — نظيف أبيض بأسلوب React ═══ */
.global-topbar {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--tq-pearl-line) !important;
  box-shadow: none !important;
  min-height: 4.75rem;
}

.global-brand-copy strong {
  font-family: 'Alexandria', 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 700;
  color: var(--tq-plum) !important;
  font-size: 1.05rem;
}
.global-brand-copy small {
  color: var(--tq-royal-400) !important;
  letter-spacing: 0.18em;
  font-size: 0.62rem;
  font-weight: 500;
}
.global-brand-mark {
  background: transparent !important;
  box-shadow: none !important;
}
.global-brand-lockup {
  display: block;
  width: 212px;
  max-width: 42vw;
  height: auto;
  object-fit: contain;
}
.global-brand-lockup-frame {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(11, 24, 62, .12);
}

.global-topbar-link,
.global-nav-trigger {
  color: rgba(11,24,62, 0.72) !important;
  border-radius: 0.6rem !important;
  font-weight: 500;
  transition: background-color .18s ease, color .18s ease;
}
.global-topbar-link:hover,
.global-nav-trigger:hover,
.global-topbar-link.is-active {
  color: var(--tq-royal-700) !important;
  background: var(--tq-royal-50) !important;
}

.global-nav-dropdown {
  background: #fff !important;
  border: 1px solid var(--tq-pearl-line) !important;
  border-radius: 1rem !important;
  box-shadow: 0 12px 32px -8px rgba(11,24,62,.16) !important;
}
.global-nav-dropdown a { color: rgba(11,24,62,.8) !important; border-radius: .7rem; }
.global-nav-dropdown a:hover { background: var(--tq-royal-50) !important; color: var(--tq-royal-700) !important; }

/* أزرار أيقونية (بحث/سلة/إشعارات) */
.global-icon-btn,
.global-install-btn {
  color: rgba(11,24,62,.62) !important;
  border-radius: 0.7rem !important;
  border-color: var(--tq-pearl-line) !important;
  background: transparent !important;
}
.global-icon-btn:hover,
.global-install-btn:hover {
  color: var(--tq-royal-700) !important;
  background: var(--tq-royal-50) !important;
}
.global-icon-badge { background: var(--tq-royal-600) !important; color: #fff !important; }

/* شريط البحث في الهيدر */
.global-topbar-search input {
  background: var(--tq-pearl) !important;
  border: 1px solid var(--tq-pearl-line) !important;
  border-radius: 0.75rem !important;
  color: var(--tq-plum) !important;
}
.global-topbar-search input:focus { border-color: var(--tq-royal-400) !important; background: #fff !important; }

/* قائمة المستخدم */
.global-user-menu,
.global-user-dropdown {
  background: #fff !important;
  border: 1px solid var(--tq-pearl-line) !important;
  border-radius: 1rem !important;
  box-shadow: 0 12px 32px -8px rgba(11,24,62,.16) !important;
}
.global-user-avatar {
  background: var(--tq-royal-100) !important;
  color: var(--tq-royal-700) !important;
}

/* روابط الدخول/التسجيل في الهيدر */
.global-auth-link {
  color: var(--tq-royal-700) !important;
  font-weight: 600;
}

/* ═══ 2) الأزرار — بأسلوب React ═══ */
.btn-primary,
.btn-3d,
.btn-hero,
.btn-3d-gold {
  border-radius: 0.75rem !important;
  font-weight: 600 !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
  transform: none !important;
}
.btn-primary,
.btn-3d {
  background: var(--tq-royal-600) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--tq-card-shadow) !important;
}
.btn-primary:hover,
.btn-3d:hover {
  background: var(--tq-royal-700) !important;
  box-shadow: var(--tq-card-shadow-hover) !important;
  transform: translateY(-1px) !important;
}
.btn-outline {
  border: 1px solid var(--tq-royal-600) !important;
  color: var(--tq-royal-600) !important;
  background: #fff !important;
  border-radius: 0.75rem !important;
  font-weight: 600 !important;
}
.btn-outline:hover { background: var(--tq-royal-50) !important; }

.btn-gold,
.btn-3d-gold,
.btn-hero {
  background: var(--tq-gold) !important;
  color: var(--tq-plum) !important;
  border: none !important;
}
.btn-gold:hover,
.btn-3d-gold:hover,
.btn-hero:hover {
  background: var(--tq-gold-deep) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}
.btn-ghost:hover { background: var(--tq-royal-50) !important; color: var(--tq-royal-700) !important; }
.btn-destructive { border-radius: 0.75rem !important; }

/* ═══ 3) البطاقات — بأسلوب React ═══ */
.card,
.card-elevated,
.card-3d,
.card-premium,
.card-3d-premium,
.stat-card,
.kpi-3d {
  border-radius: 1rem !important;
  border: 1px solid var(--tq-pearl-line) !important;
  background: #fff !important;
  box-shadow: var(--tq-card-shadow) !important;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease !important;
}
.card-3d:hover,
.card-3d-premium:hover,
.card-interactive:hover,
.card-hover:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--tq-card-shadow-hover) !important;
  border-color: var(--tq-royal-200) !important;
}
/* شريط علوي زخرفي في البطاقات المميّزة → ذهبي/بنفسجي موحّد */
.card-premium::before,
.card-3d-premium::before {
  background: var(--tq-gold) !important;
}

/* ═══ 4) الفوتر — بأسلوب React (برقوقي داكن + عناوين ذهبية) ═══ */
.global-footer,
.global-footer-modern {
  background: var(--tq-plum-deep) !important;
  color: rgba(255,255,255,.6) !important;
}
.global-footer h5,
.global-footer-brand strong,
.global-footer .global-footer-section-head h5 {
  color: var(--tq-gold) !important;
}
.global-footer a { color: rgba(255,255,255,.55) !important; transition: color .18s ease; }
.global-footer a:hover { color: var(--tq-gold) !important; }
.global-footer .global-brand-mark { color: var(--tq-gold) !important; }
.global-footer-bottom { border-top-color: rgba(255,255,255,.1) !important; }

/* واتساب العائم — يبقى أخضر، لكن نوحّد الحواف */
.floating-whatsapp-icon { border-radius: 999px !important; }

/* ═══ 5) توافق القوالب القديمة — نفس لوحة ألوان الموقع الجديد ═══
   ما زالت بعض الصفحات التشغيلية تستخدم أسماء Tailwind القديمة (navy).
   نترجمها هنا إلى البرقوقي/البنفسجي الحالي بدلاً من إبقاء نظام ألوان ثانٍ. */
.bg-navy { background-color: var(--tq-plum) !important; }
.bg-navy-deep { background-color: var(--tq-plum-deep) !important; }
.bg-navy-soft { background-color: #39264f !important; }
.bg-navy-tint { background-color: var(--tq-royal-100) !important; }
.text-navy, .text-navy-deep { color: var(--tq-plum) !important; }
.text-navy-soft { color: #39264f !important; }
.border-navy { border-color: var(--tq-royal-600) !important; }
.border-navy-deep { border-color: var(--tq-plum-deep) !important; }
.from-navy { --tw-gradient-from: var(--tq-plum) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(11 24 62 / 0) var(--tw-gradient-to-position) !important; }
.via-navy { --tw-gradient-via: var(--tq-plum) var(--tw-gradient-via-position) !important; --tw-gradient-to: rgb(11 24 62 / 0) var(--tw-gradient-to-position) !important; }
.to-navy { --tw-gradient-to: var(--tq-plum) var(--tw-gradient-to-position) !important; }
.from-navy-deep { --tw-gradient-from: var(--tq-plum-deep) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(5 13 37 / 0) var(--tw-gradient-to-position) !important; }
.to-navy-deep { --tw-gradient-to: var(--tq-plum-deep) var(--tw-gradient-to-position) !important; }
.from-navy-soft { --tw-gradient-from: #39264f var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(27 42 82 / 0) var(--tw-gradient-to-position) !important; }
.to-navy-soft { --tw-gradient-to: #39264f var(--tw-gradient-to-position) !important; }
.badge-navy, .badge-gold { background: var(--tq-royal-100) !important; color: var(--tq-royal-700) !important; border-color: var(--tq-royal-200) !important; box-shadow: none !important; }
.shadow-3d, .shadow-3d-sm, .shadow-3d-lg { box-shadow: var(--tq-card-shadow) !important; }

/* ═══ 6) الإطار العام الموحد — لا نستخدم topbar/footer الموروثين ═══ */
.site-v2-header { position: sticky; top: 0; z-index: 40; min-height: 76px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--tq-pearl-line); backdrop-filter: blur(16px); }
.site-v2-header-inner { width: min(100% - 40px, 1280px); min-height: 76px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-v2-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--tq-plum); text-decoration: none; flex-shrink: 0; }
.site-v2-brand img.site-v2-brand-lockup { width: 212px; max-width: 38vw; height: auto; object-fit: contain; }
.site-v2-brand span { display: grid; gap: 3px; }
.site-v2-brand strong { font-family: 'Alexandria', sans-serif; font-size: 16px; font-weight: 800; line-height: 1; }
.site-v2-brand small { color: var(--tq-royal-400); font-size: 9px; font-weight: 700; letter-spacing: .17em; line-height: 1; }
.site-v2-nav { display: flex; align-items: center; gap: 3px; margin-inline-start: auto; }
.site-v2-nav a, .site-v2-dashboard-link { color: rgba(11,24,62,.66); text-decoration: none; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.site-v2-nav a:hover, .site-v2-dashboard-link:hover { background: var(--tq-royal-50); color: var(--tq-royal-700); }
.site-v2-actions { display: flex; align-items: center; gap: 8px; }
.site-v2-icon-button { width: 40px; height: 40px; display: grid; place-items: center; color: rgba(11,24,62,.62); border-radius: 12px; text-decoration: none; }
.site-v2-icon-button:hover { background: var(--tq-royal-50); color: var(--tq-royal-700); }
.site-v2-cart-count { position: absolute; top: -3px; inset-inline-end: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center; background: var(--tq-royal-600); color: #fff; font-size: 9px; font-weight: 800; }
.site-v2-login-link, .site-v2-start-link, .site-v2-user-link { padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.site-v2-login-link { color: var(--tq-royal-600); border: 1px solid var(--tq-royal-600); }
.site-v2-login-link:hover { background: var(--tq-royal-50); }
.site-v2-start-link { color: #fff; background: var(--tq-royal-600); }
.site-v2-start-link:hover { color: #fff; background: var(--tq-royal-700); }
.site-v2-user-link { color: var(--tq-royal-700); background: var(--tq-royal-50); max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.site-v2-footer { margin-top: auto; background: var(--tq-plum-deep); color: #fff; padding: 56px max(20px, calc((100vw - 1280px) / 2)) 20px; }
.site-v2-footer-grid { display: grid; grid-template-columns: 1.45fr repeat(4, 1fr); gap: 36px; max-width: 1280px; margin: 0 auto; }
.site-v2-footer h2 { color: var(--tq-gold); font-size: 14px; font-weight: 800; margin: 0 0 16px; }
.site-v2-footer a { display: block; color: rgba(255,255,255,.58); text-decoration: none; font-size: 13px; margin: 0 0 10px; transition: color .18s ease; }
.site-v2-footer a:hover { color: #fff; }
.site-v2-footer .site-v2-brand { color: #fff; }
.site-v2-footer .site-v2-brand-on-dark { padding: 9px 12px; border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(5,13,37,.2); }
.site-v2-footer .site-v2-brand small { color: rgba(255,255,255,.48); }
.site-v2-footer-brand p { margin: 16px 0 0; max-width: 280px; color: rgba(255,255,255,.56); font-size: 13px; line-height: 1.9; }
.site-v2-footer-contact { display: grid; gap: 2px; margin-top: 14px; }
.site-v2-footer-contact a { width: fit-content; margin-bottom: 4px; }
.site-v2-footer-bottom { display: flex; justify-content: space-between; gap: 16px; max-width: 1280px; margin: 38px auto 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.4); font-size: 12px; }
.site-v2-footer-bottom p { margin: 0; }
.site-v2-footer-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; }
.site-v2-footer-domain { margin: 0 !important; color: rgba(255,255,255,.48) !important; letter-spacing: .14em; }
.site-v2-footer a.footer-jodfy-credit, .footer-jodfy-credit { display: inline-flex; direction: rtl; align-items: center; gap: 10px; min-height: 54px; margin: 0; padding: 5px 6px 5px 13px; border: 1px solid rgba(196,159,224,.2); border-radius: 16px; background: linear-gradient(135deg, rgba(129,68,181,.2), rgba(255,255,255,.035)); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 12px 30px rgba(5,13,37,.18); color: inherit; text-decoration: none; transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.site-v2-footer a.footer-jodfy-credit:hover, .footer-jodfy-credit:hover { transform: translateY(-2px); border-color: rgba(196,159,224,.42); background: linear-gradient(135deg, rgba(129,68,181,.3), rgba(255,255,255,.06)); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 16px 34px rgba(5,13,37,.25); color: inherit; }
.footer-jodfy-credit > img { display: block; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; object-fit: cover; box-shadow: 0 6px 16px rgba(5,13,37,.24); }
.footer-jodfy-credit-copy { display: grid; gap: 1px; text-align: start; line-height: 1.2; }
.footer-jodfy-credit-copy small { color: rgba(255,255,255,.48); font-size: 10px; font-weight: 600; }
.footer-jodfy-credit-copy strong { color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .08em; }
@media (max-width: 1023px) { .site-v2-brand img.site-v2-brand-lockup { width: 168px; max-width: 44vw; } .site-v2-nav { display: none; } .site-v2-header-inner { width: min(100% - 28px, 1280px); } .site-v2-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .global-brand-lockup { width: 164px; max-width: 48vw; } .site-v2-brand img.site-v2-brand-lockup { width: 154px; max-width: 46vw; } .site-v2-dashboard-link, .site-v2-user-link, .site-v2-login-link { display: none; } .site-v2-header-inner { min-height: 68px; } .site-v2-header { min-height: 68px; } .site-v2-footer-grid { grid-template-columns: 1fr; } .site-v2-footer-bottom { flex-direction: column; } .site-v2-footer-meta { width: 100%; justify-content: space-between; } }