@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap');
/* --- المتغيرات الأساسية --- */
:root {
    --main-color: #ff4500;
    --dark-bg: #121212;
    --white: #ffffff;
    --gray: #f4f4f4;
    --transition: 0.3s ease-in-out;
}

/* --- الإعدادات العامة --- */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
/* استبدال الخط القديم بخط كايرو */
    font-family: 'Cairo', sans-serif;}

/* تحسين العناوين بخط سميك */
h1, h2, h3, .logo {
    font-family: 'Cairo', sans-serif;
    font-weight: 700; /* يخلي العناوين واضحة وعريضة */
}

/* تحسين شكل الكلام في القوائم والسلة */
.nav-links li a, .dropbtn, .nav-item span, .price {
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
}
/* رفع طبقة التنبيهات لتكون فوق أي عنصر آخر */
.swal2-container {
    z-index: 99999 !important;
}

html { scroll-behavior: smooth; }

body { 
    background-color: var(--gray); 
    overflow-x: hidden; 
    direction: rtl; 
}

/* --- الهيدر (Desktop) --- */
.navbar {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 15px 5%; 
    background: var(--dark-bg); 
    color: white;
    position: sticky; 
    top: 0; 
    z-index: 1000;
}

.logo { font-size: 26px; font-weight: bold; }
.logo span { color: var(--main-color); }

.nav-links {
    display: flex;
    list-style: none;
    gap: 20px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    transition: var(--transition);
}

.nav-links a:hover { color: var(--main-color); }

.cart-icon { position: relative; cursor: pointer; font-size: 22px; }

.cart-count {
    position: absolute; 
    top: -8px; 
    right: -10px;
    background: var(--main-color); 
    color: white;
    font-size: 11px; 
    padding: 2px 6px; 
    border-radius: 50%;
}

/* --- قسم الـ Hero المطور لمتجر DriveX --- */
.hero-slider {
    position: relative;
    width: 100%;
    height: 60vh; /* يمكنك زيادتها لـ 70vh للكمبيوتر */
    overflow: hidden;
}

.slider-container {
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* تم التعديل هنا لتظهر الصورة كاملة ومطابقة للمقاس */
    background-size: 100% 100% !important; 
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    opacity: 0;
    transition: opacity 0.8s ease-in-out; 
    z-index: 1;
}

.slide.active {
    opacity: 1;
    z-index: 2;
}

.slide-content {
    color: white;
    padding: 20px;
    background: rgba(0, 0, 0, 0.4); 
    border-radius: 15px;
}

/* تنسيق النقاط (Dots) */
.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.dot.active {
    background-color: var(--main-color); 
    transform: scale(1.3);
}

.btn-main {
    background: var(--main-color); 
    color: white; 
    padding: 12px 30px;
    text-decoration: none; 
    border-radius: 5px; 
    font-weight: bold; 
    margin-top: 20px;
    display: inline-block;
    border: none;
    cursor: pointer;
}

/* ضبط التناسب للموبايل لضمان عدم تمطيط الصورة بشكل مبالغ فيه */
@media (max-width: 768px) {
    .hero-slider {
        height: 35vh; /* تقليل الارتفاع في الموبايل ليناسب أبعاد الصور العريضة */
    }
}
/* --- عنوان القسم --- */
.section-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.8rem;
    position: relative;
    padding-bottom: 10px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--main-color);
}

/* --- الكارت المطور لمتجر درايف اكس --- */
.product-card {
    background: var(--card-bg);
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--main-color);
    color: white;
    padding: 4px 10px;
    font-size: 10px;
    border-radius: 20px;
    z-index: 2;
}

/* الحاوية هي التي تضمن توحيد المقاس */
.img-container {
    width: 100%;
    height: 220px;       /* توحيد الارتفاع لكل الأقسام (ليدات وشاشات) */
    padding: 10px;       /* مساحة أمان عشان الصورة متخبطش في الحواف */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent; /* لا توجد خلفية بيضاء */
}

.product-card img {
    max-width: 100%;    /* الصورة تأخذ عرض الحاوية بحد أقصى */
    max-height: 100%;   /* الصورة تأخذ ارتفاع الحاوية بحد أقصى لضمان ظهورها كاملة */
    width: auto;        /* الحفاظ على أبعاد الصورة الأصلية */
    height: auto;       /* الحفاظ على أبعاد الصورة الأصلية */
    object-fit: contain; /* السر هنا: الصورة تظهر كاملة مهما كان مقاسها */
    transition: transform 0.5s ease;
    display: block;
}

.product-card:hover img {
    transform: scale(1.08); /* زووم أوضح للمنتج */
}

/* ضبط التناسب للموبايل */
@media (max-width: 768px) {
    .img-container {
        height: 160px; /* تقليل الارتفاع في الموبايل ليناسب عرض الشاشة */
        padding: 8px;
    }
}

.product-info {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.category {
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 5px;
}

.product-info h3 {
    font-size: 0.95rem;
    margin-bottom: 5px;
    line-height: 1.4;
    height: 2.8em; 
    overflow: hidden;
}

.price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--main-color);
    margin: auto 0; 
    padding: 10px 0;
}

.add-to-cart {
    background: var(--main-color);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.add-to-cart:hover {
    filter: brightness(1.2);
}

/* --- إعدادات السلايدر (النقاط تحت القسم) --- */
.led-slider {
    padding: 10px 5px 60px 5px !important; /* زيادة المسافة بالأسفل للنقاط */
    position: relative;
    overflow: hidden;
}

.screens-slider {
    padding: 10px 5px 60px 5px !important; /* زيادة المسافة بالأسفل للنقاط */
    position: relative;
    overflow: hidden;
}

.swiper-slide {
    height: auto;
    display: flex;
}

/* تخصيص شكل الدوتس (النقاط) */
.led-slider .swiper-pagination {
    bottom: 10px !important; /* مكان النقاط في أسفل الفراغ */
}

.swiper-pagination-bullet {
    background: #ccc;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: var(--main-color) !important;
    width: 25px; /* شكل مستطيل احترافي للنقطة النشطة */
    border-radius: 5px;
    transition: 0.3s;
}

@media (min-width: 768px) {
    .product-info h3 { font-size: 1.1rem; }
    .badge { font-size: 12px; }
}
/* --- السلة الجانبية (Cart Sidebar) --- */
.cart-sidebar {
    position: fixed; 
    top: 0; 
    right: -100%; 
    width: 350px; 
    height: 100%;
    background: white; 
    z-index: 3000; 
    transition: 0.3s ease-in-out;
    display: flex; 
    flex-direction: column;
}

.cart-sidebar.active { right: 0; }

.overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0,0,0,0.5); 
    display: none; 
    z-index: 2500;
}

.overlay.active { display: block; }

.cart-header { 
    padding: 20px; 
    background: var(--dark-bg); 
    color: white; 
    display: flex; 
    justify-content: space-between; 
}

.cart-body { flex: 1; padding: 20px; overflow-y: auto; }

.cart-footer { padding: 20px; border-top: 1px solid #ddd; }





.checkout-btn { 
    width: 100%; 
    padding: 15px; 
    background: #25d366; 
    color: white; 
    border: none; 
    cursor: pointer; 
    border-radius: 5px; 
    font-weight: bold; 
}

/* --- نافذة تسجيل الدخول (Login Modal) --- */
.modal {
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); 
    display: none; 
    justify-content: center; 
    align-items: center; 
    z-index: 4000;
}

.modal.active { display: flex; }

.modal-content {
    background: white; 
    padding: 30px; 
    border-radius: 15px; 
    width: 90%; 
    max-width: 400px; 
    text-align: center;
    position: relative;
}

.modal-content input {
    width: 100%; 
    padding: 12px; 
    margin: 10px 0; 
    border: 1px solid #ddd; 
    border-radius: 5px;
    text-align: right;
}

/* --- الناف بار السفلي (Mobile Bottom Nav) --- */
.mobile-bottom-nav {
    display: none; /* مخفي في الديسك توب */
}



/* --- التجاوب مع الموبايل (Responsive) --- */
@media (max-width: 768px) {
    /* 1. إخفاء السلة والروابط العلوية تماماً في الموبايل */
    .desktop-nav .cart-icon, 
    .desktop-nav .nav-links, 
    #login-btn-desktop { 
        display: none !important; 
    }

    /* 2. توسيط اللوجو فوق */
    .navbar { justify-content: center; }

    .hero h1 { font-size: 2.2rem; }
    .hero { height: 40vh; }

    /* 3. إظهار المنيو السفلية */
    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0; 
        left: 0;
        width: 100%;
        background: var(--dark-bg);
        padding: 10px 0;
        border-top: 2px solid var(--main-color);
        z-index: 2000;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    }

    .nav-item {
        color: white;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 11px;
        flex: 1;
        position: relative;
    }

    .nav-item i { font-size: 20px; margin-bottom: 3px; }

    /* 4. تعديل مكان عداد السلة في الموبايل */
    .nav-item .cart-count {
        top: -5px;
        right: 30%;
    }

    .cart-sidebar { width: 90%; }

    /* مساحة في الآخر عشان المنيو متغطيش المنتجات */
    body { padding-bottom: 80px; }
}

/* الألوان الأساسية للوضع الفاتح */
:root {
    --bg-color: #f4f4f4;
    --card-bg: #ffffff;
    --text-color: #121212;
}

/* الألوان عند تفعيل الوضع المظلم */
body.dark-theme {
    --bg-color: #0b0b0b;
    --card-bg: #1a1a1a;
    --text-color: #ffffff;
}

/* تطبيق الألوان على العناصر */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: 0.3s;
}

.product-card, .cart-sidebar, .modal-content {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* تصميم الزرار العائم */
.dark-toggle-btn {
    position: fixed;
    bottom: 85px; /* فوق المنيو السفلية بشوية */
    left: 20px;
    width: 50px;
    height: 50px;
    background: var(--main-color);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 3000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: 0.3s;
}

.dark-toggle-btn:hover {
    transform: scale(1.1);
}

-----
/* --- ستايل الكمبيوتر (Desktop Dropdown) --- */

/* --- منع السكرول عند فتح القائمة --- */
.no-scroll {
    overflow: hidden !important;
    height: 100vh !important;
    position: fixed !important;
    width: 100% !important;
}

/* --- منع السكرول بقوة --- */


/* --- تنسيق الكمبيوتر (Desktop Dropdown) --- */
.dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.dropdown-content {
    display: none;
    position: absolute;
    /* يظهر تحت السهم مباشرة عند نهاية الناف بار */
    top: calc(100% + 15px); 
    right: 0;
    background: var(--card-bg);
    min-width: 220px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border-radius: 12px;
    z-index: 3000;
    border: 1px solid rgba(255, 69, 0, 0.2);
    padding: 10px 0;
}

.dropdown-content.show {
    display: block;
}

.dropdown-content a {
    color: var(--text-color) !important;
    padding: 12px 20px;
    display: flex !important;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: 0.3s;
}

.dropdown-content a i {
    color: var(--main-color);
    width: 20px;
    text-align: center;
}

.dropdown-content a:hover {
    background: var(--main-color);
    color: white !important;
}

/* --- تنسيق الموبايل (Mobile Pop-up) --- */
.mobile-menu-content {
    display: none;
    position: fixed;
    bottom: 85px; /* يظهر فوق المنيو السفلية */
    left: 15px;
    right: 15px;
    background: var(--card-bg);
    border-radius: 20px;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.3);
    z-index: 4000;
    flex-direction: column;
    padding: 10px 0;
    border: 1px solid rgba(255, 69, 0, 0.1);
}

.mobile-menu-content.show {
    display: flex;
}

.mobile-menu-content a {
    padding: 18px 25px;
    color: var(--text-color);
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 15px;
}

.mobile-menu-content a i {
    color: var(--main-color);
    font-size: 18px;
    width: 25px;
}

/* --- قسم المميزات --- */
.features-section {
 padding: 10px 5px 60px 5px !important; 
    border-top: 1px solid #eee;
    margin-top: 20px;
}

/* دعم الدارك مود للقسم */
.dark-mode .features-section {
    background-color: #121212;
    border-top: 1px solid #222;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    text-align: center;
}

.feature-item {
    padding: 30px 20px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, background 0.3s;
}

/* دعم الدارك مود للكروت */
.dark-mode .feature-item {
    background: #1e1e1e;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.feature-item:hover {
    transform: translateY(-10px);
}

.icon-wrapper {
    width: 70px;
    height: 70px;
    background: rgba(255, 0, 0, 0.1); /* لون أحمر خفيف خلف الأيقونة */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.feature-item i {
    font-size: 30px;
    color: #ff0000; /* لون البراند */
}

.feature-item h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: #333;
    font-weight: 700;
}



.feature-item p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}



/* ضبط التجاوب للموبايل */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr); /* تظهر في شكل شبكة 2x2 */
        gap: 15px;
        padding: 0 10px;
    }
    .feature-item {
        padding: 20px 10px;
    }
    .icon-wrapper {
        width: 50px;
        height: 50px;
    }
    .feature-item i {
        font-size: 22px;
    }
    .feature-item h3 {
        font-size: 1rem;
    }
    .feature-item p {
        font-size: 0.8rem;
    }
}

/* --- تنسيقات الدارك مود لقسم المميزات --- */

/* الخلفية العامة للقسم في الدارك مود */
.dark-mode .features-section {
    background-color: #121212 !important; /* لون خلفية داكن */
    border-top: 1px solid #333 !important;
}

/* خلفية الكروت الداخلية */
.dark-mode .feature-item {
    background: #1e1e1e !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
}

/* ألوان النصوص */
.dark-mode .feature-item h3 {
    color: #ffffff !important;
}

.dark-mode .feature-item p {
    color: #bbbbbb !important;
}

/* تأثير الهوفر في الدارك مود */
.dark-mode .feature-item:hover {
    background: #252525 !important;
}

/* لون الأيقونات (يفضل بقاؤه أحمر أو تفتيحه قليلاً) */
.dark-mode .icon-wrapper {
    background: rgba(255, 69, 0, 0.2) !important;
}

.container {
    max-width: 1200px;    /* أقصى عرض للمحتوى في الكمبيوتر */
    margin: 0 auto;       /* لتوسيط المحتوى في نص الشاشة */
    padding: 0 20px;      /* مسافة أمان من الجانبين للموبايل والتابلت */
    width: 100%;          /* لضمان استجابة المحتوى */
    box-sizing: border-box; 
}

/* About Section */
.about-section { padding: 80px 0; background: #fff; }
.dark-mode .about-section { background: #121212; color: white; }
.about-content { display: flex; align-items: center; gap: 50px; flex-wrap: wrap; }
.about-text { flex: 1; min-width: 300px; }
.about-image img { width: 100%; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.about-list { list-style: none; margin-top: 20px; }
.about-list li { margin-bottom: 10px; font-weight: 600; color: var(--main-color); }

/* Footer Styling */
.main-footer { background: #1a1a1a; color: white; padding: 60px 0 20px; margin-top: 50px; }
.dark-mode .main-footer { background: #000; border-top: 1px solid #333; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; }
.footer-col h4 { margin-bottom: 25px; font-size: 1.2rem; position: relative; padding-bottom: 10px; }
.footer-col h4::after { content: ''; position: absolute; bottom: 0; right: 0; width: 50px; height: 2px; background: red; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a { color: #bbb; text-decoration: none; transition: 0.3s; }
.footer-col ul li a:hover { color: red; padding-right: 5px; }
.footer-bottom { text-align: center; margin-top: 50px; padding-top: 20px; border-top: 1px solid #333; color: #777; font-size: 0.9rem; }

/* --- تنسيق روابط التواصل الاجتماعي --- */
.social-links {
    display: flex;
    gap: 15px;         /* المسافة بين كل أيقونة والثانية */
    margin-top: 15px;
    justify-content: flex-start; /* تبدأ من اليمين في العربي */
}

.social-links a {
    width: 45px;        /* عرض الدائرة */
    height: 45px;       /* ارتفاع الدائرة */
    background: #333;   /* لون الخلفية الافتراضي */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* لجعلها دائرية تماماً */
    color: #fff;        /* لون الأيقونة */
    font-size: 20px;    /* مقاس الأيقونة */
    transition: all 0.3s ease;
    text-decoration: none;
}

/* تأثيرات الألوان عند الوقوف بالماوس (Hover) */
.social-links a:hover {
    transform: translateY(-5px); /* حركة خفيفة للأعلى */
}

/* ألوان مخصصة لكل منصة عند التفاعل */
.social-links a.fa-facebook:hover, 
.social-links a:has(.fa-facebook):hover { background: #1877F2; }

.social-links a.fa-instagram:hover, 
.social-links a:has(.fa-instagram):hover { background: #E4405F; }

.social-links a.fa-whatsapp:hover, 
.social-links a:has(.fa-whatsapp):hover { background: #25D366; }

/* ضبط الدارك مود للروابط */
.dark-mode .social-links a {
    background: #222;    /* خلفية أغمق في الوضع الليلي */
    color: #ddd;
    border: 1px solid #444;
}

.dark-mode .social-links a:hover {
    border-color: var(--main-color);
    color: #fff;
}

/* للموبايل: توسيط الروابط لو كان الفوتر متمركز في النص */
@media (max-width: 768px) {
    .social-links {
        justify-content: center; /* توسيط الأيقونات في الموبايل */
        gap: 20px;              /* زيادة المسافة قليلاً لسهولة الضغط بالإصبع */
    }
    
    .social-links a {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .about-content { text-align: center; }
    .about-list li { text-align: right; }
    .footer-col { text-align: center; }
    .footer-col h4::after { right: 50%; transform: translateX(50%); }
}

/* ============================================================
   نظام فاتورة DriveX المتجاوب بالكامل
   ============================================================ */

/* 1. الحاوية الخلفية وتوسيط الفاتورة */
#orderModal.modal {
    display: none; /* تأكد أنها none وليست flex */
    position: fixed; 
    inset: 0;
    z-index: 10000; 
    background: rgba(0, 0, 0, 0.7); 
    backdrop-filter: blur(8px);
    padding: 10px;
    /* التوسيط سيتم تفعيله عبر الـ JS عند الفتح */
    align-items: center; 
    justify-content: center;
}

/* 2. جسم الفاتورة (Invoice Style) */
.invoice-style {
    width: 100%;
    max-width: 420px; /* عرض مثالي للكمبيوتر والموبايل */
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0,0,0,0.4);
    animation: slideIn 0.3s ease-out;
    max-height: 95vh; /* تمنع خروجها عن الشاشة في الموبايلات القصيرة */
    overflow-y: auto; /* إضافة سكرول داخلي لو الشاشة صغيرة جداً */
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 3. هيدر الفاتورة */
.invoice-header {
    background: var(--main-color, #ff4500);
    color: white;
    padding: 20px;
    text-align: center;
}

.logo-invoice { font-size: 24px; font-weight: 900; }
.logo-invoice span { color: #222; }
.invoice-header p { font-size: 14px; margin-top: 5px; opacity: 0.9; }

/* 4. محتوى الفاتورة والمدخلات */
.invoice-body { padding: 20px; }

.input-box {
    position: relative;
    margin-bottom: 15px;
}

.input-box i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--main-color);
}

.input-box input {
    width: 100%;
    padding: 12px 40px 12px 10px; /* مسافة لليمين عشان الأيقونة */
    border-radius: 10px;
    border: 1.5px solid #eee;
    outline: none;
    font-size: 16px; /* مهم جداً لمنع الـ Zoom في الـ iPhone */
    font-family: 'Cairo', sans-serif;
    transition: 0.3s;
}

.input-box input:focus { border-color: var(--main-color); }

/* 5. خيارات الدفع (أزرار الراديو) */
.section-title {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 14px;
    color: #555;
}

.payment-options {
    display: grid;
    grid-template-columns: 1fr 1fr; /* جعلهم جنب بعض */
    gap: 10px;
}

.pay-card { cursor: pointer; }
.pay-card input { display: none; } /* إخفاء دائرة الراديو القديمة */

.card-content {
    border: 2px solid #f0f0f0;
    padding: 12px 5px;
    border-radius: 12px;
    text-align: center;
    transition: 0.3s;
    background: #f9f9f9;
}

.pay-card input:checked + .card-content {
    border-color: var(--main-color);
    background: rgba(255, 69, 0, 0.05);
}

.card-content i {
    display: block;
    font-size: 22px;
    margin-bottom: 5px;
    color: #777;
}

.instapay-logo-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    margin: 0 auto 5px;
    display: block;
    filter: grayscale(1);
    transition: 0.3s;
}

.pay-card input:checked + .card-content i,
.pay-card input:checked + .card-content .instapay-logo-img {
    color: var(--main-color);
    filter: grayscale(0);
}

.pay-card span { font-size: 13px; font-weight: 600; }

/* 6. الفوتر والأزرار */
.modal-footer {
    padding: 0 20px 25px;
    display: flex;
    gap: 10px;
}

.btn-confirm {
    flex: 2;
    background: var(--main-color);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    font-size: 15px;
}

.btn-cancel {
    flex: 1;
    background: #f0f0f0;
    color: #666;
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

/* 7. استجابة كاملة للموبايل (Mobile Responsive) */
@media (max-width: 480px) {
    .invoice-style {
        width: 95%; /* أخذ مساحة أكبر في الشاشات الصغيرة */
    }

    .payment-options {
        gap: 8px; /* تقليل المسافات */
    }
    
    .modal-footer {
        flex-direction: column; /* الأزرار فوق بعض لو الموبايل صغير جداً */
    }
}

/* 8. دعم الدارك مود (بناءً على كلاس body) */
.dark-mode .invoice-style { background: #1a1a1a; }
.dark-mode .invoice-body { background: #1a1a1a; }
.dark-mode .input-box input { background: #222; border-color: #333; color: white; }
.dark-mode .card-content { background: #222; border-color: #333; color: #ccc; }
.dark-mode .btn-cancel { background: #333; color: #ccc; }
.dark-mode .section-title { color: #bbb; }


/* تنسيق صفحة الدفع */
.checkout-page {
    background-color: #f7f7f7;
    color: #333;
}

.checkout-container {
    max-width: 1100px;
    margin: 30px auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 30px;
    padding: 0 20px;
}

.checkout-main {
    padding-bottom: 50px;
}

.checkout-header {
    margin-bottom: 30px;
}

.checkout-form-section {
    background: white;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #e1e1e1;
    margin-bottom: 20px;
}

.checkout-form-section h3 {
    margin-bottom: 20px;
    font-size: 18px;
    color: var(--main-color);
}

.input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.input-field {
    margin-bottom: 15px;
}

.input-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
}

.input-field input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    outline: none;
    transition: 0.3s;
}

.input-field input:focus {
    border-color: var(--main-color);
}

.payment-methods .pay-method {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 2px solid #eee;
    border-radius: 10px;
    cursor: pointer;
}

.payment-methods .pay-method.active {
    border-color: var(--main-color);
    background: #fff5f2;
}

.checkout-sidebar {
    position: sticky;
    top: 20px;
    height: fit-content;
}

.order-summary-card {
    background: white;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #e1e1e1;
}

.price-summary {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.price-row.total {
    font-size: 20px;
    font-weight: 900;
    color: var(--main-color);
    margin-top: 10px;
}

.btn-submit-order {
    width: 100%;
    background: var(--main-color);
    color: white;
    border: none;
    padding: 18px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 69, 0, 0.3);
}

/* التجاوب مع الموبايل */
@media (max-width: 900px) {
    .checkout-container {
        grid-template-columns: 1fr;
    }
    .checkout-sidebar {
        order: -1; /* يخلي ملخص الطلب يظهر في الأول فوق في الموبايل */
    }
    .input-grid {
        grid-template-columns: 1fr;
    }
}



/* --- نظام القوائم المنسدلة المطور (DriveX) --- */

/* 1. تنسيق الكمبيوتر (Desktop) - يبقى كما هو */
.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: var(--card-bg);
    min-width: 180px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.3);
    border-radius: 10px;
    z-index: 99999; 
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid var(--main-color);
}

/* 2. تنسيق الموبايل (Mobile) - التمركز في المنتصف فوق زر الدارك مود */
#mobile-user-dropdown {
    display: none;
    /* التمركز بناءً على الشاشة viewport لضمان المنتصف فوق زر الدارك مود */
    position: fixed; 
    bottom: 150px; /* المسافة فوق زر الدارك مود والمنيو السفلية */
    left: 50%; /* التحرك لمنتصف الشاشة من اليسار */
    transform: translateX(-50%) translateY(20px); /* توسيط حقيقي + إزاحة للأسفل قليلاً لحركة الأنيماشين */
    background: var(--card-bg);
    border-radius: 15px;
    z-index: 999999; /* طبقة عليا جداً ليتخطى كل شيء */
    width: 200px; /* عرض مناسب للقائمة في المنتصف */
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    border: 1px solid var(--main-color);
    overflow: hidden;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
    pointer-events: none; /* منع التفاعل وهي مخفية */
}

/* حالة التفعيل */
.dropdown-content.show {
    display: block !important;
    animation: desktopPopupSlide 0.3s ease-out;
}

#mobile-user-dropdown.active-menu {
    display: flex !important; /* استخدام flex لتنظيم الروابط بشكل طولي */
    flex-direction: column;
    transform: translateX(-50%) translateY(0); /* التوسيط الحقيقي مع إلغاء الإزاحة الرأسية */
    opacity: 1;
    pointer-events: auto; /* السماح بالتفاعل عند الظهور */
}

@keyframes desktopPopupSlide {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* تنسيق الروابط داخل القوائم */
.dropdown-content a, 
#mobile-user-dropdown a {
    color: var(--text-color);
    padding: 16px 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 700;
    transition: 0.3s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dropdown-content a:hover, 
#mobile-user-dropdown a:hover {
    background-color: var(--main-color);
    color: white !important;
}

/* تمييز زر تسجيل الخروج */
.logout-link-style {
    color: #ff4500 !important;
    background: rgba(255, 69, 0, 0.05);
}