/* ======================================================
   ملف التصميم الخاص بصفحة الباقات والمسارات (packages.css)
   المسار: assets/css/packages.css
====================================================== */

/* --- 1. تنسيق القسم العلوي (الهيدر الترحيبي) --- */
.header-section { 
    text-align: center; /* توسيط النص */
    padding: 80px 20px 100px 20px; /* المسافات الداخلية (فوق، يمين، تحت، يسار) */
    /* تدرج لوني للخلفية من البنفسجي الفاتح للغامق */
    background: linear-gradient(135deg, var(--primary-purple) 0%, #2e0854 100%); 
    color: white; 
    clip-path: ellipse(150% 100% at 50% 0%); /* قطع الخلفية بشكل بيضاوي من الأسفل لمظهر جمالي */
    margin-bottom: 50px;
}

.header-section h1 { 
    color: var(--secondary-gold); /* استخدام اللون الذهبي من المتغيرات العامة */
    margin-bottom: 15px; 
    font-size: 45px; 
    font-weight: 900; /* جعل الخط عريض جداً */
    text-shadow: 0 5px 15px rgba(0,0,0,0.3); /* إضافة ظل خفيف للنص ليبرز فوق الخلفية */
}

.header-section p {
    font-size: 18px; 
    color: rgba(255,255,255,0.9); /* أبيض مع شفافية 10% */
    max-width: 700px; /* تحديد أقصى عرض للنص ليكون مريحاً للقراءة */
    margin: 0 auto; /* توسيط الكتلة النصية في المنتصف */
    line-height: 1.8; /* المسافة بين السطور */
}

/* --- 2. الحاوية الرئيسية لخطوات الاختيار --- */
.wizard-container { 
    max-width: 1000px; 
    margin: -50px auto 50px auto; /* سحب الحاوية للأعلى قليلاً لتتداخل مع الهيدر البيضاوي */
    padding: 0 20px; 
    position: relative; 
    z-index: 10; /* إبقاء الحاوية فوق الخلفية */
}

/* تنسيق الصندوق الخاص بكل خطوة (الدولة، المسار، المادة) */
.step-section { 
    background: white; 
    border-radius: 20px; 
    padding: 35px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* ظل ناعم للصندوق */
    margin-bottom: 25px; 
    transition: all 0.5s ease; /* نعومة الحركة عند التغيير */
    /* إخفاء الخطوات التالية افتراضياً حتى يختار المستخدم */
    opacity: 0; 
    transform: translateY(20px); 
    display: none; 
}

/* الفئة التي سيتم إضافتها برمجياً (بالجافاسكريبت) لإظهار الخطوة */
.step-section.active { 
    opacity: 1; 
    transform: translateY(0); 
    display: block; 
    animation: fadeInUp 0.5s ease; /* حركة الظهور للأعلى */
}

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

/* --- 3. تصميم البطاقات (الدول، المواد) --- */
.options-grid { 
    display: grid; /* استخدام نظام الشبكة لترتيب البطاقات */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* جعل البطاقات متجاوبة مع الشاشات */
    gap: 15px; /* المسافة بين البطاقات */
}

.option-card { 
    border: 2px solid #e0e0e0; 
    border-radius: 15px; 
    padding: 20px 15px; 
    text-align: center; 
    cursor: pointer; /* تغيير شكل الماوس ليدل على أنه قابل للضغط */
    transition: 0.3s; 
    background: white; 
}

/* تأثير مرور الماوس على البطاقة */
.option-card:hover { 
    border-color: var(--primary-purple); 
    transform: translateY(-5px); /* رفع البطاقة لأعلى قليلاً */
    box-shadow: 0 8px 15px rgba(74, 20, 140, 0.1); 
}

/* شكل البطاقة عند تحديدها (سيتم تفعيلها بالجافاسكريبت) */
.option-card.selected { 
    border-color: var(--primary-purple); 
    background: #fdfaf6; 
    box-shadow: 0 0 0 2px var(--secondary-gold); 
}

/* --- 4. تصميم بطاقة السعر النهائية --- */
.final-package-card { 
    background: linear-gradient(135deg, #ffffff, #fdfbf7); 
    border-radius: 25px; 
    padding: 40px; 
    text-align: center; 
    border: 3px solid var(--secondary-gold); 
    box-shadow: 0 15px 40px rgba(0,0,0,0.1); 
    position: relative; 
    overflow: hidden; 
}

.price-box { 
    background: rgba(74, 20, 140, 0.05); 
    padding: 30px; 
    border-radius: 20px; 
    margin-bottom: 30px; 
}

.price-amount { 
    font-size: 55px; 
    font-weight: 900; 
    color: var(--primary-purple); 
    line-height: 1; 
    transition: 0.3s; 
}

/* أزرار التحكم في عدد الحصص (+ و -) */
.btn-ctrl { 
    background: white; 
    border: 2px solid var(--primary-purple); 
    color: var(--primary-purple); 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    cursor: pointer; 
    font-size: 18px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    transition: 0.3s; 
    font-weight:bold; 
}

.btn-ctrl:hover { 
    background: var(--primary-purple); 
    color: var(--secondary-gold); 
    transform: scale(1.1); /* تكبير الزر قليلاً عند مرور الماوس */
}

/* زر الاشتراك النهائي */
.btn-subscribe { 
    display: block; 
    width: 100%; 
    padding: 20px; 
    background: linear-gradient(135deg, var(--primary-purple), #2e0854); 
    color: var(--secondary-gold); 
    font-size: 22px; 
    font-weight: 900; 
    border: none; 
    border-radius: 15px; 
    cursor: pointer; 
    transition: 0.3s; 
}

.btn-subscribe:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 15px 25px rgba(74, 20, 140, 0.4); 
}