/* ==========================================================
   design-system.css — نظام التصميم الطباعي والبصري لمنصة سفرة
   ==========================================================
   يُضمَّن بعد كل ملفات CSS الأخرى فيوَلّد طبقة تجاوزات (override layer)
   تطبّق نظام الخطوط المزدوج + البصمات البصرية الفريدة + التفاعلات الدقيقة.

   نظام الخطوط:
     • Cairo   → النص الأساسي، الأزرار، النماذج، التفاصيل
     • Tajawal → العناوين الكبيرة، الـHero، بطاقات المحتوى
     • Reem Kufi → البصمات المميزة: أرقام Hero، البراندينج °
   ========================================================== */

/* ============= [1] لوحة الألوان الدافئة المحسّنة ============= */
:root {
    /* البرتقالي — الهوية الأساسية (محفوظ) */
    --primary:        #E67E22;
    --primary-dark:   #B8590E;
    --primary-darker: #8C3F08;
    --primary-light:  #FFF3E6;
    --primary-tint:   #FFFAF3;

    /* الكحلي الدافئ — بديل أنيق للرمادي البارد */
    --secondary:        #1E2A38;
    --secondary-dark:   #0F1A26;
    --secondary-tint:   #2C3E50;

    /* خلفيات ونصوص */
    --bg-cream:         #FFFAF3;
    --bg-warm-surface:  #FFFFFF;
    --bg-warm-muted:    #F7EFE6;

    --text-strong:      #1A1A1A;
    --text-body:        #2D2D2D;
    --text-muted:       #6B6B6B;
    --text-soft:        #959595;

    --border-warm:      #F1E4D4;
    --border-warm-soft: #F7EFE6;

    /* حالات */
    --success: #16A34A;
    --success-bg: #DCFCE7;
    --danger:  #DC2626;
    --danger-bg: #FEE2E2;
    --info:    #0EA5E9;
    --info-bg: #E0F2FE;
    --warning: #F59E0B;
    --warning-bg: #FEF3C7;

    /* ظلال دافئة (بدل الرمادي البارد) */
    --shadow-sm: 0 2px 8px rgba(180, 100, 50, 0.06);
    --shadow-md: 0 8px 24px rgba(180, 100, 50, 0.10);
    --shadow-lg: 0 18px 50px rgba(180, 100, 50, 0.14);
    --shadow-glow: 0 0 0 4px rgba(230, 126, 34, 0.18);

    /* نصف قطر أنعم */
    --radius-sm: 8px;
    --radius:    14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    /* مدّة الحركة */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-fast: all 0.18s var(--ease-out);
    --transition:       all 0.30s var(--ease-out);
    --transition-slow: all 0.50s var(--ease-out);
}

/* ============= [2] تطبيق الخطوط والقراءة على الجسم ============= */
/* خط Cairo على الجسم فقط — لا على كل عنصر */
body {
    font-family: var(--font-body);
}

/* ضمان أن أيقونات FontAwesome لا تتأثر */
i.fas, i.far, i.fab, i.fa, i.fal,
[class*="fa-"], [class^="fa-"] {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome' !important;
    font-weight: 900;
}
i.far { font-weight: 400; }
i.fab { font-family: 'Font Awesome 6 Brands', 'Font Awesome 5 Brands', 'FontAwesome' !important; font-weight: 400; }

/* العناوين الكبيرة تأخذ Tajawal */
h1, h2, h3,
.section-title h2, .hero h1, .form-header h2,
.store-hero h1, .menu-content h3,
.content-card > h2, .panel-brand-name,
.footer-column h3, .verify-card h1, .cta-band h2,
.dash-title, .stat-num, .stat-item .num,
.step-card h3, .feature-card h3, .restaurant-body h3,
.dashboard-title {
    font-family: var(--font-heading) !important;
    letter-spacing: -0.012em;
    -webkit-font-smoothing: antialiased;
}

/* النقاط البصرية المميزة: البراندينج ° وأرقام الإحصائيات */
.logo, .verify-brand,
.stat-num, .stat-item .num,
.step-num, .hero-num,
.platform-brand .platform-brand-name {
    font-family: var(--font-display);
}

/* تحسين البدابة (kerning) للنصوص العربية */
body {
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
    letter-spacing: 0;
    word-spacing: 0.05em;
}

/* تحسين المسافة بين الأسطر للنصوص الطويلة */
p, li { line-height: 1.85; }

/* ============= [3] السلم الطباعي الموحّد ============= */
h1 { font-size: clamp(1.9rem, 4.5vw, 3.2rem); font-weight: 800; line-height: 1.15; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 700; line-height: 1.2;  }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.35; }
h4 { font-size: 1.05rem; font-weight: 700; }
p  { font-size: 0.97rem; }
small, .text-sm { font-size: 0.85rem; }

/* العناوين داخل البطاقات تأخذ وزناً أكبر وتفصيلاً أفضل */
.card h3, .stat-card h3, .feature-card h3, .step-card h3 {
    color: var(--secondary) !important;
    margin-bottom: 0.5rem;
}

/* ============= [4] بصمة بصرية: خط برتقالي تحت العناوين ============= */
.section-title h2,
.dash-title {
    position: relative;
    display: inline-block;
    padding-bottom: 0.6rem;
}
.section-title h2::after,
.dash-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    width: 48px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    border-radius: 4px;
}

/* نفس البصمة للعناوين الجانبية داخل البطاقات */
.content-card > h2 {
    position: relative;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--border-warm-soft);
}
.content-card > h2::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    border-radius: 3px;
}

/* ============= [5] إصلاح تباين صفحات الدخول (المشكلة الأصلية) ============= */

/* خلفية الجسم: تدرّج دافئ فوق صورة الخلفية لضمان تباين النص الأبيض */
body.auth-bg::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        linear-gradient(135deg,
            rgba(15, 26, 38, 0.78) 0%,
            rgba(184, 89, 14, 0.65) 100%);
    z-index: 0;
    pointer-events: none;
}
body.auth-bg > * { position: relative; z-index: 1; }

/* قسم البرانديج: طبقة داكنة دافئة فوق أي خلفية لضمان وضوح النص */
.auth-branding-section {
    position: relative;
    background:
        linear-gradient(135deg,
            rgba(15, 26, 38, 0.92) 0%,
            rgba(184, 89, 14, 0.78) 60%,
            rgba(230, 126, 34, 0.65) 100%) !important;
    overflow: hidden;
}
/* لمسة زخرفية: نقشة هندسية خفيفة بالـ CSS فقط (بدون صور) */
.auth-branding-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.05) 0%, transparent 40%);
    pointer-events: none;
}
.auth-branding-section > * { position: relative; z-index: 2; }

/* تحسين شعار سفرة في قسم البرانديج */
.auth-branding-section .logo {
    font-family: var(--font-display) !important;
    font-size: 3rem !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFE4C4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 20px rgba(0,0,0,0.3);
    margin-bottom: 0.5rem;
}
.auth-branding-section .logo span {
    color: var(--primary) !important;
    -webkit-text-fill-color: var(--primary);
    display: inline-block;
    animation: pulse 2.5s var(--ease-out) infinite;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.85; }
}

.auth-branding-section p {
    font-size: 1.15rem !important;
    max-width: 320px !important;
    line-height: 1.8;
    color: rgba(255,255,255,0.95) !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    font-weight: 500;
}

/* بطاقة الدخول نفسها: تظليل أنعم وحواف مدوّرة أكثر */
.auth-wrapper {
    border-radius: var(--radius-xl) !important;
    box-shadow: 0 30px 80px rgba(0,0,0,0.28), 0 8px 24px rgba(184,89,14,0.18) !important;
}
.auth-form-section {
    background: var(--bg-warm-surface) !important;
}

/* تحسين نوعية العناوين داخل النماذج */
.form-header h2 {
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    color: var(--secondary) !important;
    font-size: 1.85rem !important;
}
.form-header p {
    color: var(--text-muted) !important;
    font-size: 0.95rem;
    margin-top: 0.4rem;
}

/* تحسين حقول الإدخال: حدود دافئة + توهّج عند التركيز */
.form-control, .form-control:focus {
    border-color: var(--border-warm) !important;
    background: var(--primary-tint) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-body) !important;
    font-size: 0.97rem;
    padding: 11px 16px !important;
    transition: var(--transition) !important;
}
.form-control:focus {
    background: #FFFFFF !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(230, 126, 34, 0.16), 0 2px 8px rgba(230,126,34,0.10) !important;
    outline: none;
}
.form-control::placeholder { color: #C9B8A4; font-weight: 500; }

/* تحسين الأزرار */
.btn, .pbtn {
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    transition: var(--transition) !important;
    position: relative;
    overflow: hidden;
}
.btn:hover, .pbtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(230, 126, 34, 0.32);
}
.btn:active, .pbtn:active { transform: translateY(0); }
.btn:focus-visible, .pbtn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(230, 126, 34, 0.25);
}

/* توهّج داخلي خفيف عند المرور */
.btn::before, .pbtn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s var(--ease-out);
}
.btn:hover::before, .pbtn:hover::before {
    transform: translateX(100%);
}

/* ============= [6] رسائل Flash: شريط تقدّم تلقائي + حركة انزلاق ============= */
.flash {
    border-radius: var(--radius) !important;
    padding: 14px 22px !important;
    box-shadow: var(--shadow-md) !important;
    position: relative;
    overflow: hidden;
    border: none !important;
    border-right: 5px solid;
    animation: flashSlideIn 0.4s var(--ease-spring) !important;
}
.flash::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 3px;
    width: 100%;
    background: rgba(0,0,0,0.18);
    animation: flashProgress 4.5s linear forwards;
}
@keyframes flashSlideIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes flashProgress {
    from { width: 100%; }
    to   { width: 0%; }
}

/* ============= [7] تحسين بطاقات المحتوى ============= */
.content-card,
.menu-item,
.restaurant-card,
.step-card,
.feature-card,
.stat-card {
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: var(--transition) !important;
    border: 1px solid var(--border-warm-soft);
}

.content-card:hover,
.menu-item:hover,
.restaurant-card:hover,
.step-card:hover,
.feature-card:hover,
.stat-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md) !important;
    border-color: var(--primary-light);
}

/* شريط برتقالي يظهر من الأسفل عند المرور */
.menu-item::after,
.restaurant-card::after,
.step-card::after,
.feature-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s var(--ease-out);
}
.menu-item:hover::after,
.restaurant-card:hover::after,
.step-card:hover::after,
.feature-card:hover::after {
    transform: scaleX(1);
}

/* ضمان position: relative للبطاقات */
.menu-item, .restaurant-card, .step-card, .feature-card { position: relative; }

/* ============= [8] Hero: تحسين طباعة العنوان الرئيسي ============= */
.hero h1, .store-hero h1 {
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em;
    line-height: 1.1 !important;
}
.hero h1 span {
    background: linear-gradient(135deg, #FFB37A 0%, #E67E22 50%, #FFD89B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* ============= [9] أرقام الإحصائيات بـ Reem Kufi ============= */
.stat-item .num, .stat-num, .hero-num {
    font-family: var(--font-display) !important;
    font-weight: 700;
    background: linear-gradient(135deg, #FFD89B 0%, #E67E22 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
}

/* ============= [10] القائمة الجانبية للوحات ============= */
.side-nav a.nav-item {
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    transition: var(--transition-fast) !important;
}
.side-nav a.nav-item:hover {
    background: rgba(230, 126, 34, 0.10) !important;
    transform: translateX(-3px);
}
.side-nav a.nav-item.active {
    font-weight: 800 !important;
    background: linear-gradient(90deg, rgba(230, 126, 34, 0.20), rgba(230, 126, 34, 0.05)) !important;
    border-right-color: var(--primary) !important;
    border-right-width: 4px;
    border-right-style: solid;
}

/* ============= [11] شارات الحالة: طباعة أنيقة ============= */
.status-badge {
    font-family: var(--font-body);
    font-weight: 700;
    padding: 0.35rem 1rem;
    border-radius: 50px;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

/* ============= [12] الحالات الفارغة ============= */
.empty-state i {
    background: linear-gradient(135deg, var(--primary-light), #FFE8D1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1.2rem !important;
    font-size: 3.4rem !important;
}
.empty-state h3 {
    font-family: var(--font-heading);
    color: var(--secondary) !important;
    margin-bottom: 0.6rem;
}
.empty-state p { color: var(--text-muted); }

/* ============= [13] حقول النسخ ============= */
.copy-field input {
    font-family: 'Courier New', monospace;
    background: var(--primary-tint) !important;
    border-color: var(--border-warm) !important;
    font-size: 0.86rem;
    letter-spacing: 0;
}
.copy-field button {
    background: var(--secondary) !important;
    transition: var(--transition) !important;
}
.copy-field button:hover {
    background: var(--primary) !important;
    transform: scale(1.05);
}

/* ============= [14] روابط التنقّل في الهيدر ============= */
.nav-links a, .store-brand-name, .panel-brand-name {
    font-family: var(--font-body);
}
.nav-links a {
    font-weight: 600 !important;
    letter-spacing: 0.005em;
    transition: var(--transition-fast) !important;
}
.nav-links a:hover {
    color: var(--primary) !important;
}

/* ============= [15] فوتر ============= */
.footer {
    background: linear-gradient(180deg, var(--secondary) 0%, var(--secondary-dark) 100%) !important;
}
.footer-column h3 {
    font-family: var(--font-heading) !important;
    color: var(--primary) !important;
    margin-bottom: 1.4rem;
    position: relative;
    padding-bottom: 0.7rem;
}
.footer-column h3::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background: var(--primary);
    border-radius: 3px;
}
.footer-links a, .contact-info li {
    transition: var(--transition-fast);
}
.footer-links a:hover {
    color: var(--primary) !important;
    padding-right: 6px;
}

/* ============= [16] حركات دخول الصفحة (fade-up) ============= */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
main, .auth-wrapper, .verify-card, .panel-layout, .checkout-wrap {
    animation: fadeUp 0.6s var(--ease-out);
}

/* تأخير متدرّج للبطاقات المتتابعة */
.menu-item:nth-child(1), .restaurant-card:nth-child(1),
.step-card:nth-child(1), .feature-card:nth-child(1) {
    animation: fadeUp 0.6s var(--ease-out) 0.05s both;
}
.menu-item:nth-child(2), .restaurant-card:nth-child(2),
.step-card:nth-child(2), .feature-card:nth-child(2) {
    animation: fadeUp 0.6s var(--ease-out) 0.10s both;
}
.menu-item:nth-child(3), .restaurant-card:nth-child(3),
.step-card:nth-child(3), .feature-card:nth-child(3) {
    animation: fadeUp 0.6s var(--ease-out) 0.15s both;
}
.menu-item:nth-child(4), .restaurant-card:nth-child(4),
.step-card:nth-child(4), .feature-card:nth-child(4) {
    animation: fadeUp 0.6s var(--ease-out) 0.20s both;
}
.menu-item:nth-child(5), .restaurant-card:nth-child(5),
.step-card:nth-child(5), .feature-card:nth-child(5) {
    animation: fadeUp 0.6s var(--ease-out) 0.25s both;
}
.menu-item:nth-child(6), .restaurant-card:nth-child(6),
.step-card:nth-child(6), .feature-card:nth-child(6) {
    animation: fadeUp 0.6s var(--ease-out) 0.30s both;
}

/* احترام تفضيل المستخدم: تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============= [17] تحسين العناصر داخل الـauth الخاصة بالشيكبوكس ============= */
.check-group {
    border-radius: var(--radius) !important;
    background: linear-gradient(135deg, var(--primary-light), #FFE8D1) !important;
    border: 2px dashed var(--primary) !important;
    transition: var(--transition) !important;
}
.check-group:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230, 126, 34, 0.18);
}
.check-group .check-title {
    font-family: var(--font-body);
    color: var(--secondary) !important;
}

/* ============= [18] تلميحات صغيرة: الـprefix أسفل حقل الرابط ============= */
.slug-input-wrap .prefix {
    color: var(--text-muted) !important;
    font-size: 0.78rem !important;
    margin-top: 0.4rem;
}

/* ============= [19] عناوين الأقسام الفرعية داخل النماذج ============= */
.form-section-title {
    color: var(--primary-dark) !important;
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    border-bottom-color: var(--primary-light) !important;
}

/* ============= [20] تحسين الفواصل ============= */
.auth-divider {
    color: var(--text-soft) !important;
    font-family: var(--font-body);
    letter-spacing: 0.05em;
}

/* ============= [21] روابط نصية ============= */
.auth-link a, .store-brand-sub a, .footer-links a {
    font-weight: 700;
    transition: var(--transition-fast);
}
.auth-link a:hover, .footer-links a:hover {
    color: var(--primary-dark) !important;
}

/* ============= [22] استجابة الجوال ============= */
@media (max-width: 768px) {
    h1 { font-size: clamp(1.7rem, 6vw, 2.2rem); }
    h2 { font-size: clamp(1.4rem, 5vw, 1.8rem); }
    .auth-branding-section .logo { font-size: 2.4rem !important; }
    .auth-branding-section p { font-size: 1rem !important; }
    body.auth-bg { padding: 0.5rem; }
    .auth-form-section { padding: 1.5rem !important; }
}