@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');
/* =================================== */
/* ======   تنسيقات الخطوط والنصوص   ====== */
/* =================================== */

/* تحديد حجم الخط الأساسي ولون الفقرات */
p, label, .form-text, .card-text {
    font-size: 1rem; /* حجم الخط الأساسي */
    color: #d1d1d1;  /* لون رمادي فاتح لسهولة القراءة بدلاً من الأبيض الناصع */
    line-height: 1.7; /* تباعد الأسطر لراحة العين */
}

/* تنسيق خاص للروابط */
a {
    color: #8ab4f8; /* لون أزرق مميز للروابط */
    text-decoration: none; /* إزالة الخط تحت الرابط */
    transition: color 0.2s;
}
a:hover {
    color: #a7c5f9; /* تفتيح اللون عند مرور الماوس */
}

/* تنسيق العناوين الرئيسية h1, h2, h3 */
h1, h2, h3 {
    font-family: 'Cairo', sans-serif;
    font-weight: 700; /* استخدام الوزن العريض (Bold) للعناوين */
    color: #e8eaed; /* لون أبيض مائل للرمادي للعناوين الرئيسية */
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* تنسيق العناوين الفرعية h4, h5, h6 (مثل عناوين المنتجات) */
h4, h5, h6, .card-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700; /* استخدام الوزن العريض */
    color: #ffffff;
}

/* تنسيق خاص لأسعار المنتجات */
.price {
    font-size: 1.5rem; /* حجم أكبر للسعر */
    font-weight: 700;
    color: #FFF; /* لون مميز للسعر */
}
/* === الإعدادات العامة للجسم والخطوط === */
body {
    background-color: #1a1a1a; /* لون الخلفية: أسود مائل للرمادي */
    color: #fff; /* لون الخط الأساسي: أبيض */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Cairo', sans-serif; /* استخدام خط مناسب للغة العربية */
}

main {
    flex: 1; /* يضمن أن المحتوى يملأ المساحة المتاحة لدفع الفوتر للأسفل */
}


/* === تنسيقات القائمة العلوية (Navbar) === */
.navbar {
    background-color: #000;
    border-bottom: 1px solid #555555; /* خط سفلي رمادي */
}

.navbar .nav-link {
    color: #fff;
    transition: color 0.3s;
}

.navbar .nav-link:hover, .navbar .nav-link.active {
    color: #cccccc; /* لون أفتح عند مرور الماوس أو عندما يكون الرابط نشطًا */
}


/* === تنسيقات العناوين === */
h1, h2, h3 {
    color: #cccccc; /* لون رمادي فاتح للعناوين */
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* ======================================================= */
/* ======   التصميم الجديد لصفحة تفاصيل المنتج   ====== */
/* ======================================================= */
/* تنسيق خاص لتكبير السعر النهائي في ملخص الطلب */
.grand-total-price {
    font-size: 1.75rem; /* حجم الخط الجديد (أكبر من h5) */
    color: #8ab4f8;   /* استخدام لون مميز لجذب الانتباه */
}
.product-hero-container {
    position: relative; /* أساسي لتثبيت العناصر فوق بعضها */
    width: 100%;
    min-height: 80vh; /* اجعل ارتفاع القسم 80% من ارتفاع الشاشة */
    display: flex;
    align-items: center; /* توسيط مربع التفاصيل عمودياً */
    padding: 2rem;
    border-radius: 15px;
    overflow: hidden; /* لإخفاء أي أجزاء زائدة من الصورة */
    background-color: #1a1a1a; /* لون احتياطي في حالة عدم تحميل الصورة */
}

.product-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* يجعل الصورة تملأ المساحة دون تشويه */
    z-index: 1; /* يضع الصورة في الطبقة الخلفية */
    filter: brightness(0.6); /* يجعل الصورة معتمة قليلاً ليبرز النص فوقها */
}

.product-details-overlay {
    position: relative; /* لرفعه فوق الخلفية */
    z-index: 2; /* يضع مربع التفاصيل في الطبقة الأمامية */
    max-width: 550px; /* تحديد أقصى عرض لمربع التفاصيل */
    
    /* التأثير الزجاجي الشفاف */
    background-color: rgba(26, 26, 26, 0.75); /* لون رمادي غامق مع شفافية 75% */
    backdrop-filter: blur(10px); /* تأثير ضبابي على ما يظهر خلف المربع */
    -webkit-backdrop-filter: blur(10px); /* لدعم متصفح سفاري */
    
    padding: 2.5rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار خفيف */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* ظل لإعطاء عمق */
}

/* تعديل بسيط على الخطوط داخل المربع لتكون أوضح */
.product-details-overlay h2 {
    border-bottom: none; /* إزالة الخط تحت العنوان الرئيسي */
    font-size: 2.5rem;
}

.product-details-overlay .description-scroll-box {
    background-color: transparent; /* إزالة الخلفية من مربع الوصف */
    border: none; /* إزالة الإطار من مربع الوصف */
    padding: 0;
    max-height: 150px; /* تعديل الارتفاع ليتناسب مع التصميم الجديد */
}
.card {
    background-color: rgba(43, 43, 43, 0.7); /* لون خلفية البطاقة: رمادي غامق شبه شفاف (0.7 يعني 70% شفافية) */
    border: 1px solid #555555; /* إطار رمادي للبطاقة */
    /* إضافة تأثير الضبابية للخلفية التي تظهر من خلال الشفافية */
    backdrop-filter: blur(5px); /* قيمة 5px للضبابية، يمكنك تعديلها */
    -webkit-backdrop-filter: blur(5px); /* لدعم متصفح سفاري */
    transition: transform 0.2s, box-shadow 0.2s; /* تعديل مدة الانتقال لتبدو طبيعية أكثر (0.2s بدل 5.2s) */
    position: relative; /* مهم لترتيب الطبقات إذا كانت الصورة خلفية لعنصر داخلي */
    overflow: hidden; /* لإخفاء أي جزء من الصورة يخرج عن حدود البطاقة */
}

/* إذا كنت تستخدم صورة كـ background-image للـ .card-body مثلاً */
/* أو إذا كانت لديك صورة داخل البطاقة كطبقة خلفية */
.card-img-overlay { /* افترض أن لديك هذا العنصر للنص فوق الصورة */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* لجعل المحتوى النصي في المنتصف أو ترتيبه */
    flex-direction: column;
    justify-content: center; /* توسيط عمودي */
    align-items: center; /* توسيط أفقي */
    color: #f5f5f5; /* لون النص ليكون واضحاً */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8); /* إضافة ظل للنص لزيادة وضوحه */
    z-index: 2; /* لضمان ظهور النص فوق الصورة */
}

.card-img { /* إذا كانت صورة المنتج هي ببساطة img داخل البطاقة */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* لتغطية المساحة بالكامل */
    z-index: 1; /* لضمان ظهور الصورة خلف المحتوى */
}

/* مثال على ما قد تحتاجه لجعل محتوى البطاقة يظهر فوق الصورة */
.card-body {
    position: relative; /* لجعل المحتوى الداخلي فوق الصورة والخلفية الشفافة */
    z-index: 2; /* لضمان ظهور الـ card-body فوق الصورة */
    background-color: transparent; /* تأكد أن الـ card-body نفسه ليس له خلفية صلبة */
}


.card:hover {
    transform: translateY(-5px); /* تأثير رفع بسيط عند المرور */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.card-title {
    color: #ffffff; /* لون عنوان المنتج */
}

.card-img-top {
    width: 100%;
    height: 200px; /* ارتفاع ثابت للصورة */
    object-fit: cover; /* يضمن أن الصورة تملأ المساحة دون تشويه */
}

.price {
    font-size: 1.25rem;
    color: #cccccc; /* لون السعر */
}


/* === تنسيقات الأزرار (Buttons) === */
.btn-primary {
    background-color: #555555;
    border-color: #777777;
    color: #ffffff;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background-color: #666666;
    border-color: #888888;
}


/* === تنسيقات الفوتر (Footer) === */
.footer {
    background-color: #000000;
    color: #ffffff;
    border-top: 2px solid #555555; /* خط علوي رمادي */
}


/* === تنسيقات النماذج (Forms) === */
.form-control, .form-select {
    background-color: #333;
    color: #fff;
    border-color: #888888;
}

.form-control:focus {
    background-color: #444;
    color: #fff;
    border-color: #aaaaaa;
    box-shadow: 0 0 0 0.25rem rgba(150, 150, 150, 0.25);
}
/* === Full-Width Slider Container === */
/* === كود جعل السلايدر بعرض الشاشة الكامل (النسخة المحسنة) === */
.full-width-container {
    width: 100vw;       /* العرض = 100% من عرض الشاشة */
    position: relative;
    left: 50%;
    transform: translateX(-50%); /* يضمن التوسيط الأفقي بشكل دقيق */
    margin-bottom: 3rem; /* يضيف مسافة أسفل السلايدر */
}

/* --- الجزء الجديد والمهم لتحسين التجاوب --- */
/* هذا الكود يتحكم في صور السلايدر نفسها */
/* --- الجزء الجديد والمهم لتحسين التجاوب --- */
/* هذا الكود يتحكم في صور السلايدر نفسها */
#heroSlider .carousel-item img {
    /* 1. تحديد أقصى ارتفاع للصورة */
    max-height: 55vh; /* <<-- القيمة الجديدة المقترحة */
    
    /* 2. ضمان أن الصورة تملأ المساحة دون تشويه */
    object-fit: cover;
    
    /* 3. ضمان عرض الصورة بنسبة 100% من الحاوية */
    width: 100%;
}
 
 /* تنسيق مربع التفاصيل القابل للتمرير */
.description-scroll-box {
    max-height: 200px; /* تحديد أقصى ارتفاع للمربع */
    overflow-y: auto; /* إضافة شريط تمرير رأسي عند الحاجة */
    padding: 15px;
    border: 1px solid #444;
    border-radius: 5px;
    background-color: #2b2b2b;
}

/* تنسيق الصور المصغرة للسلايدر */
.thumbnail-button {
    background-color: transparent;
    border: 2px solid #555;
    border-radius: 5px;
    padding: 3px;
    margin: 0 5px;
    width: 60px;
    height: 60px;
    opacity: 0.6;
    transition: all 0.2s ease;
}
.thumbnail-button:hover, .thumbnail-button.active {
    border-color: #007bff; /* أو أي لون أساسي */
    opacity: 1;
}
.thumbnail-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* =================================== */
/* تنسيقات الفوتر الجديد        */
/* =================================== */

.footer-distributed {
    background-color: #000;
    border-top: 3px solid #555;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 55px 50px;
    color: #f5f5f5;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right {
    display: inline-block;
    vertical-align: top;
}

.footer-distributed .footer-left { width: 40%; }
.footer-distributed h3 {
    color: #ffffff;
    font-size: 36px;
    margin: 0;
}
.footer-distributed .footer-links {
    color: #ffffff;
    margin: 20px 0 12px;
    padding: 0;
}
.footer-distributed .footer-links a {
    display: inline-block;
    line-height: 1.8;
    text-decoration: none;
    color: inherit;
    margin-right: 15px;
}
.footer-distributed .footer-company-name {
    color: #8f9296;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
}

.footer-distributed .footer-center { width: 35%; }
.footer-distributed .footer-center i {
    background-color: #33383b;
    color: #ffffff;
    font-size: 25px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-align: center;
    line-height: 42px;
    margin: 10px 15px;
    vertical-align: middle;
}
.footer-distributed .footer-center p {
    display: inline-block;
    color: #ffffff;
    vertical-align: middle;
    margin: 0;
}
.footer-distributed .footer-center p span {
    display: block;
    font-weight: normal;
    font-size: 14px;
    line-height: 2;
}
.footer-distributed .footer-center p a {
    color: #5383d3;
    text-decoration: none;
}

.footer-distributed .footer-right { width: 25%; }
.footer-distributed .footer-company-about {
    line-height: 20px;
    color: #92999f;
    font-size: 13px;
    font-weight: normal;
    margin: 0;
}
.footer-distributed .footer-company-about span {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 20px;
}
.footer-distributed .footer-icons { margin-top: 25px; }
.footer-distributed .footer-icons a {
    display: inline-block;
    width: 35px;
    height: 35px;
    cursor: pointer;
    background-color: #33383b;
    border-radius: 2px;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    line-height: 35px;
    margin-right: 3px;
    margin-bottom: 5px;
}
.footer-distributed .footer-newsletter form {
    display: flex;
    margin-top: 20px;
}
.footer-distributed .footer-newsletter input {
    flex-grow: 1;
    padding: 8px;
    border: none;
    border-radius: 3px 0 0 3px;
}
.footer-distributed .footer-newsletter button {
    padding: 8px 12px;
    border: none;
    background-color: #5383d3;
    color: white;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 880px) {
    .footer-distributed { font: bold 14px sans-serif; }
    .footer-distributed .footer-left,
    .footer-distributed .footer-center,
    .footer-distributed .footer-right {
        display: block;
        width: 100%;
        margin-bottom: 40px;
        text-align: center;
    }
    .footer-distributed .footer-center i { margin-left: 0; }
}
/* ======================================================= */
/* ======   التصميم المخصص لتنبيه فودافون كاش   ====== */
/* ======================================================= */

.vodafone-alert {
    background-color: #ffe5e5; /* خلفية حمراء فاتحة جدًا */
    border: 2px solid #e60000; /* إطار أحمر قوي بلون فودافون */
    border-radius: 8px;
    padding: 1rem;
    position: relative;
    padding-left: 65px; /* مساحة لوضع الشعار على اليسار */
}

/* تنسيق شعار فودافون داخل المربع */
.vodafone-alert .vodafone-logo {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; /* حجم الشعار */
    height: auto;
}

/* تنسيق الخطوط والنصوص داخل المربع */
.vodafone-alert p, .vodafone-alert label {
    color: #a30000; /* لون أحمر داكن للنصوص لسهولة القراءة */
    font-weight: bold;
}

/* تنسيق خاص لرقم الهاتف ليكون بارزاً */
.vodafone-alert strong {
    color: #e60000; /* لون أحمر فودافون الصريح */
    font-size: 1.1rem;
}

/* تنسيق الخط الفاصل */
.vodafone-alert hr {
    border-top: 1px solid #ff8c8c; /* خط فاصل بلون أحمر فاتح */
}

/* تنسيق أيقونة عرض الفيديو في صفحة المنتج */
.video-icon {
    font-size: 2.5rem; /* حجم الأيقونة */
    color: #e60000;   /* لون أحمر يوتيوب */
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
    line-height: 1; /* لمحاذاة الأيقونة مع النص */
    cursor: pointer;
}

.video-icon:hover {
    color: #ff3333; /* تفتيح اللون عند مرور الماوس */
    transform: scale(1.1); /* تكبير بسيط للأيقونة */
}/* تنسيق أيقونة عرض الفيديو في صفحة المنتج */
.video-icon {
    font-size: 2.5rem; /* حجم الأيقونة */
    color: #e60000;   /* لون أحمر يوتيوب */
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
    line-height: 1; /* لمحاذاة الأيقونة مع النص */
    cursor: pointer;
}

.video-icon:hover {
    color: #ff3333; /* تفتيح اللون عند مرور الماوس */
    transform: scale(1.1); /* تكبير بسيط للأيقونة */
}