/* ============================================
   ملف CSS الرئيسي لمنصة ناقل - إصدار منظم
   تاريخ التحديث: [تاريخ اليوم]
   ============================================ */

/* ===== 1. المتغيرات والأساسيات ===== */
:root {
    /* الألوان الرئيسية حسب الهوية البصرية */
    --primary: #1E3A8A;      /* الأزرق الرئيسي - الثقة والاحترافية */
    --accent: #F97316;       /* البرتقالي المميز - الطاقة والحركة */
    --text: #374151;         /* لون النص الرئيسي */
    --light-gray: #E5E7EB;   /* رمادي فاتح للحدود والعناصر الفرعية */
    --white: #FFFFFF;        /* اللون الأبيض */
    --hover-bg: #F8FAFC;     /* خلفية العناصر عند التحويم */
    --goals-bg: #F0F7FF;     /* خلفية قسم الأهداف القديم */
    
    /* تدرجات لونية إضافية */
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, #2d4ba3 100%);
    --gradient-dark: radial-gradient(circle at 50% 50%, #1a365d 0%, #0f172a 100%);
}

/* إعادة الضبط الأساسية */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 1. جعل قسم اللوجو والقائمة يتحركان ككتلة واحدة طبيعية في البداية */
#sp-top-bar, #sp-header {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    top: auto !important;
}

/* 2. إخفاء الفجوة اللعينة تحت القائمة (Page Title) */
section#sp-page-title {
    display: none !important;
}

/* 3. جعل القائمة "تلتصق" فقط عندما تصل لأعلى الشاشة */
/* هذا الكود سيعمل حتى لو كان خيار Sticky Header معطلاً في القالب */
#sp-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 999;
    background: #ffffff; /* تأكد من وضع لون خلفية موقعك هنا */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* 4. تصفير المسافة تحت القائمة ليلتصق بها أول قسم (Hero) */
#sp-main-body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 5. إلغاء أي فراغ داخلي في أول قسم صممته بـ Page Builder */
#sp-main-body .sppb-section:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* إعدادات عامة للصفحة */
body {
    font-family: 'Tajawal', sans-serif;
    color: var(--text);
    background-color: #f9fafb;
    line-height: 1.6;
    font-size: 16px;
    direction: rtl;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== 2. أنماط الأقسام العامة المشتركة ===== */

/* تنسيقات العناصر المشتركة في جميع الأقسام */
section {
    padding: 80px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-title {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: 800;
}

.section-subtitle {
    font-size: 1.5rem;
    color: var(--accent);
    margin-bottom: 20px;
    font-weight: 700;
}

.section-description {
    font-size: 1.1rem;
    color: var(--text);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* تأثيرات الظهور */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== 3. قسم "كيف تعمل المنصة" ===== */
.how-it-works {
    background-color: var(--white);
}

.steps-category {
    margin-bottom: 60px;
}

.category-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
    padding-bottom: 10px;
    display: inline-block;
    position: relative;
}

/* خطوط تحت العناوين */
.category-title.shipper {
    color: var(--primary);
}

.category-title.shipper::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 3px;
    background-color: var(--accent);
}

.category-title.driver {
    color: var(--accent);
}

.category-title.driver::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary);
}

/* شبكة الخطوات */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* بطاقات الخطوات */
.step-card {
    background-color: var(--white);
    border-radius: 15px;
    padding: 30px 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    border: 2px solid var(--light-gray);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* تخصيص البطاقات لأصحاب البضائع */
.shipper-card {
    border-top: 4px solid var(--primary);
}

/* تخصيص البطاقات للسائقين */
.driver-card {
    border-top: 4px solid var(--accent);
}

/* تأثيرات التحويم */
.step-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    background-color: var(--hover-bg);
}

/* أرقام الخطوات */
.step-number {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    background-color: rgba(30, 58, 138, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--primary);
    transition: all 0.4s ease;
}

.driver-card .step-number {
    background-color: rgba(249, 115, 22, 0.1);
    color: var(--accent);
}

.step-card:hover .step-number {
    transform: scale(1.1);
    background-color: var(--primary);
    color: white;
}

.driver-card:hover .step-number {
    background-color: var(--accent);
}

/* الأيقونات */
.icon-container {
    width: 80px;
    height: 80px;
    background-color: rgba(30, 58, 138, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 20px;
    transition: all 0.4s ease;
}

.driver-card .icon-container {
    background-color: rgba(249, 115, 22, 0.1);
}

.step-card:hover .icon-container {
    transform: scale(1.1);
    background-color: rgba(30, 58, 138, 0.2);
}

.driver-card:hover .icon-container {
    background-color: rgba(249, 115, 22, 0.2);
}

.step-icon {
    font-size: 2.2rem;
    color: var(--primary);
    transition: all 0.4s ease;
}

.driver-card .step-icon {
    color: var(--accent);
}

.step-card:hover .step-icon {
    transform: scale(1.1);
}

/* عناوين ومحتوى الخطوات */
.step-title {
    font-size: 1.3rem;
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: 700;
}

.driver-card .step-title {
    color: var(--accent);
}

.step-description {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.6;
    flex-grow: 1;
}

/* ===== 4. قسم "أنواع الشحنات" ===== */
.shipment-types {
    background-color: #f8fafc;
}

.shipment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.shipment-card {
    background-color: var(--white);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    border: 2px solid var(--light-gray);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* خط علوي متحرك */
.shipment-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 5px;
    background-color: var(--primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease;
}

.shipment-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: rgba(30, 58, 138, 0.2);
    background-color: var(--hover-bg);
}

.shipment-card:hover::before {
    transform: scaleX(1);
}

.shipment-card .icon-container {
    width: 80px;
    height: 80px;
    background-color: rgba(30, 58, 138, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 0.4s ease;
}

.shipment-card:hover .icon-container {
    background-color: rgba(249, 115, 22, 0.1);
    transform: scale(1.1);
}

.shipment-icon {
    font-size: 2.5rem;
    color: var(--primary);
    transition: all 0.4s ease;
}

.shipment-card:hover .shipment-icon {
    color: var(--accent);
    transform: scale(1.1);
}

.shipment-name {
    font-size: 1.4rem;
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: 700;
}

.shipment-card:hover .shipment-name {
    color: var(--accent);
}

.shipment-description {
    font-size: 1rem;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}

/* رابط بحث عن سائق */
.driver-link {
    display: inline-flex;
    align-items: center;
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto;
}

.driver-link:hover {
    color: var(--primary);
    transform: translateX(-5px);
}

/* ===== 5. قسم "أهداف ناقل" القديم (قد يتم استبداله) ===== */
.goals-section {
    background-color: var(--goals-bg);
    padding: 80px 0;
    text-align: center;
}

.goals-header {
    margin-bottom: 50px;
}

.goals-header h2 {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 15px;
}

.goals-header p {
    font-size: 1.2rem;
    color: var(--text);
    max-width: 700px;
    margin: 0 auto;
}

.goals-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.goal-box {
    background-color: var(--white);
    border-radius: 15px;
    padding: 40px 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 2px solid var(--light-gray);
    transition: all 0.4s ease;
}

.goal-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--accent);
}

.goal-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 10px;
    display: block;
}

.goal-label {
    font-size: 1.2rem;
    color: var(--text);
    font-weight: 600;
}

.goal-note {
    font-size: 0.9rem;
    color: var(--accent);
    margin-top: 10px;
    font-weight: 500;
}

/* ===== 6. قسم "لماذا تختار ناقل" (النسخة الأساسية) ===== */
.why-naqel {
    background-color: var(--white);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.feature-box {
    background-color: var(--white);
    border-radius: 15px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    border: 2px solid var(--light-gray);
}

.feature-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--accent);
}

.feature-icon {
    width: 80px;
    height: 80px;
    background-color: rgba(30, 58, 138, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.4s ease;
}

.feature-box:hover .feature-icon {
    background-color: rgba(249, 115, 22, 0.1);
    transform: scale(1.1);
}

.feature-icon i {
    font-size: 2.5rem;
    color: var(--primary);
    transition: all 0.4s ease;
}

.feature-box:hover .feature-icon i {
    color: var(--accent);
}

.feature-title {
    font-size: 1.4rem;
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: 700;
}

/* ===== 7. قسم "لماذا ناقل" المتطور (بعمودين) ===== */
.why-naqel-advanced {
    padding: 80px 0;
    background-color: #f9fafb;
}

.why-naqel-advanced .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.why-naqel-advanced .section-title {
    text-align: center;
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 50px;
    font-weight: 800;
}

.why-naqel-advanced .accent-text {
    color: var(--accent);
}

.two-columns-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* العمود الأيمن: الميزات */
.features-column {
    padding-left: 20px;
}

.platform-title {
    font-size: 2.2rem;
    color: var(--primary);
    margin-bottom: 20px;
    line-height: 1.3;
}

.platform-description {
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: 40px;
    line-height: 1.7;
}

.features-grid-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.feature-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    align-items: flex-start;
    transition: transform 0.3s ease;
}

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

.feature-icon-small {
    width: 50px;
    height: 50px;
    background-color: rgba(30, 58, 138, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.feature-item:hover .feature-icon-small {
    background-color: rgba(249, 115, 22, 0.1);
    transform: scale(1.1);
}

.feature-icon-small i {
    font-size: 1.5rem;
    color: var(--primary);
    transition: all 0.3s ease;
}

.feature-item:hover .feature-icon-small i {
    color: var(--accent);
}

.feature-text h4 {
    font-size: 1.2rem;
    color: var(--primary);
    margin-bottom: 5px;
    font-weight: 700;
}

.feature-text p {
    font-size: 0.95rem;
    color: var(--text);
}

/* العمود الأيسر: الإحصائيات */
.stats-column {
    background: var(--gradient-primary);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 15px 40px rgba(30, 58, 138, 0.2);
    color: var(--white);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stats-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 700;
}

.stats-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.stat-item {
    margin-bottom: 15px;
}

.stat-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 1rem;
    font-weight: 500;
}

.stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
}

.progress-bar {
    height: 12px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background-color: var(--accent);
    border-radius: 6px;
    transition: width 1.5s ease-in-out;
    width: 0;
}

.counter-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.counter-stat:last-child {
    border-bottom: none;
}

.counter-value {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--white);
}

.counter-label {
    font-size: 1.1rem;
    font-weight: 500;
}

.counter-note {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 5px;
}

/* ===== 8. قسم "التطبيق" ===== */
.app-section {
    background: var(--gradient-primary);
    color: var(--white);
}

.app-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.app-preview {
    flex: 1;
    text-align: center;
}

.app-preview img {
    max-width: 300px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.app-info {
    flex: 1;
}

.app-info h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.app-info p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.download-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.download-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--white);
    color: var(--text);
    padding: 15px 25px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 180px;
}

.download-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.download-btn i {
    font-size: 1.8rem;
}

.btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.btn-text small {
    font-size: 0.8rem;
    opacity: 0.7;
}

.btn-text span {
    font-weight: 700;
    font-size: 1.1rem;
}

/* ===== 9. قسم "الأسئلة الشائعة" الأساسي ===== */
.faq-section {
    background-color: #f8fafc;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.faq-item {
    background-color: var(--white);
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-left: 4px solid var(--accent);
    transition: all 0.3s ease;
}

.faq-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.faq-item h3 {
    font-size: 1.2rem;
    color: var(--primary);
    margin-bottom: 10px;
}

/* ===== 10. قسم "الأسئلة الشائعة" المطوّر ===== */
.advanced-faq-section {
    padding: 80px 0;
    background-color: #f9fafb;
}

.advanced-faq-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.advanced-faq-section .section-header {
    text-align: center;
    margin-bottom: 50px;
}

.advanced-faq-section .section-title {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: 800;
}

.advanced-faq-section .section-subtitle {
    font-size: 1.5rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.advanced-faq-section .section-subtitle span {
    color: var(--accent);
}

.advanced-faq-section .section-description {
    font-size: 1.1rem;
    color: var(--text);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.faq-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 40px;
}

.faq-category {
    background-color: var(--white);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-top: 4px solid var(--accent);
}

.faq-category .category-title {
    font-size: 1.6rem;
    color: var(--primary);
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--light-gray);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.faq-category .category-title i {
    color: var(--accent);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-category .faq-item {
    border: 1px solid var(--light-gray);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-category .faq-item:hover {
    border-color: var(--accent);
    box-shadow: 0 5px 15px rgba(249, 115, 22, 0.1);
}

.faq-question {
    padding: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--white);
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background-color: var(--hover-bg);
}

.faq-question.active {
    background-color: var(--hover-bg);
    border-bottom: 1px solid var(--light-gray);
}

.faq-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(30, 58, 138, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-right: 15px;
}

.faq-question.active .faq-icon {
    background-color: rgba(249, 115, 22, 0.1);
    transform: rotate(180deg);
}

.faq-icon i {
    font-size: 0.9rem;
    color: var(--primary);
    transition: all 0.3s ease;
}

.faq-question.active .faq-icon i {
    color: var(--accent);
}

.question-text {
    flex: 1;
    margin-left: 10px;
}

.faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    background-color: var(--white);
    color: var(--text);
}

.faq-answer.active {
    padding: 20px;
    max-height: 500px;
}

.faq-answer p {
    margin-bottom: 15px;
    line-height: 1.7;
}

.highlight {
    background-color: rgba(249, 115, 22, 0.1);
    padding: 10px 15px;
    border-radius: 8px;
    border-right: 3px solid var(--accent);
    margin: 15px 0;
    font-weight: 500;
}

.note-box {
    background-color: rgba(30, 58, 138, 0.05);
    padding: 15px;
    border-radius: 8px;
    border-right: 3px solid var(--primary);
    margin-top: 20px;
    font-size: 0.95rem;
}

.note-box strong {
    color: var(--primary);
}

/* ===== 11. قسم "الأهداف المطوّر" (الجديد - بديل لقسم الأهداف القديم) ===== */
.advanced-goals-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    color: #ffffff;
    padding: 100px 0;
    background: radial-gradient(circle at 50% 50%, 
        #1a365d 0%,           /* أزرق داكن جداً في الأطراف */
        var(--primary) 40%,   /* اللون الأساسي */
        var(--primary) 60%,
        #0f172a 100%
    );
}

.advanced-goals-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

/* العنوان الرئيسي */
.advanced-goals-section .section-header {
    text-align: center;
    margin-bottom: 80px;
}

.advanced-goals-section .section-title {
    font-size: 3.2rem;
    font-weight: 800;
    margin-bottom: 15px;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.advanced-goals-section .section-subtitle {
    font-size: 1.3rem;
    color: #cbd5e1;
    font-weight: 400;
    opacity: 0.9;
}

.advanced-goals-section .accent {
    color: var(--accent);
    font-weight: 800;
    text-shadow: 0 0 10px rgba(249, 115, 22, 0.3);
}

/* ===== الصف الأول: الإحصائيات ===== */
.advanced-goals-section .stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

.advanced-goals-section .stat-column {
    text-align: center;
    padding: 30px 20px;
    transition: transform 0.3s ease;
}

.advanced-goals-section .stat-column:hover {
    transform: translateY(-5px);
}

.advanced-goals-section .stat-icon-wrapper {
    margin-bottom: 25px;
}

.advanced-goals-section .stat-icon-circle {
    width: 70px;
    height: 70px;
    background: rgba(249, 115, 22, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
}

.advanced-goals-section .stat-icon-circle::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: rgba(249, 115, 22, 0.1);
    z-index: -1;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.05); }
    100% { opacity: 0.6; transform: scale(1); }
}

.advanced-goals-section .stat-icon-circle i {
    font-size: 1.8rem;
    color: var(--accent);
}

.advanced-goals-section .stat-number {
    font-size: 3.5rem;
    font-weight: 900;
    margin: 15px 0;
    color: #ffffff;
    text-shadow: 0 4px 20px rgba(249, 115, 22, 0.3);
    letter-spacing: -1px;
}

.advanced-goals-section .stat-label {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #ffffff;
}

.advanced-goals-section .stat-description {
    font-size: 0.95rem;
    color: #cbd5e1;
    font-weight: 400;
    opacity: 0.8;
}

/* الخط الفاصل */
.advanced-goals-section .horizontal-divider {
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 100%
    );
    margin: 60px 0;
    width: 100%;
}

/* ===== الصف الثاني: المحتوى الرئيسي ===== */
.advanced-goals-section .content-row {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: start;
}

/* العمود الأيسر: شبكة البطاقات */
.advanced-goals-section .cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.advanced-goals-section .feature-card {
    background: linear-gradient(145deg, 
        rgba(30, 41, 59, 0.9) 0%,
        rgba(15, 23, 42, 0.95) 100%
    );
    border-radius: 16px;
    padding: 30px;
   transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border: none;
    height: 100%;
    backdrop-filter: blur(10px);
}

.advanced-goals-section .feature-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(249, 115, 22, 0.1),
        0 0 30px rgba(249, 115, 22, 0.1);
    background: linear-gradient(145deg, 
        rgba(30, 41, 59, 1) 0%,
        rgba(15, 23, 42, 1) 100%
    );
}

.advanced-goals-section .card-icon {
    width: 50px;
    height: 50px;
    background: rgba(249, 115, 22, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.advanced-goals-section .card-icon i {
    font-size: 1.4rem;
    color: var(--accent);
}

.advanced-goals-section .feature-card:hover .card-icon {
    background: rgba(249, 115, 22, 0.25);
    transform: scale(1.1);
}

.advanced-goals-section .card-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
}

.advanced-goals-section .card-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #cbd5e1;
    opacity: 0.9;
}

/* العمود الأيمن: الدعوة للإجراء */
.advanced-goals-section .cta-content {
    background: rgba(15, 23, 42, 0.7);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: none;
    height: 100%;
}

.advanced-goals-section .cta-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 25px;
    line-height: 1.3;
    color: #ffffff;
}

.advanced-goals-section .cta-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #e2e8f0;
    margin-bottom: 35px;
    opacity: 0.95;
}

/* الأزرار */
.advanced-goals-section .cta-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.advanced-goals-section .primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--accent) 0%, #ea580c 100%);
    color: #ffffff;
    padding: 18px 35px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 
        0 8px 25px rgba(249, 115, 22, 0.3),
        0 4px 0 rgba(234, 88, 12, 0.5);
    border: none;
    min-width: 200px;
}

.advanced-goals-section .primary-btn:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 12px 30px rgba(249, 115, 22, 0.4),
        0 6px 0 rgba(234, 88, 12, 0.5);
    background: linear-gradient(135deg, #fb923c 0%, var(--accent) 100%);
    color: #ffffff;
}

.advanced-goals-section .secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    color: #ffffff;
    padding: 18px 35px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    min-width: 200px;
}

.advanced-goals-section .secondary-btn:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-3px);
}

/* شريط الإحصائيات الصغير */
.advanced-goals-section .mini-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.advanced-goals-section .mini-stat {
    text-align: center;
}

.advanced-goals-section .mini-stat-number {
    font-size: 2.2rem;
    font-weight: 900;
    margin-bottom: 8px;
    text-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
}

.advanced-goals-section .mini-stat-label {
    font-size: 0.9rem;
    color: #cbd5e1;
    font-weight: 500;
    opacity: 0.9;
}

/* ===== 12. إصلاحات وإضافات مهمة ===== */

/* إصلاح ألوان العناوين في الأقسام الرئيسية */
.how-it-works .section-title,
.how-it-works .section-subtitle,
.how-it-works .category-title,
.how-it-works .step-title {
    color: var(--primary) !important;
}

.how-it-works .category-title.driver {
    color: var(--accent) !important;
}

.shipment-types .section-title,
.shipment-types .section-subtitle,
.shipment-types .shipment-name {
    color: var(--primary) !important;
}

.why-naqel .section-title,
.why-naqel .feature-title {
    color: var(--primary) !important;
}

/* إصلاح مشكلة الخطوط في قسم "كيف تعمل المنصة" */
.how-it-works .category-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100% !important;
    height: 3px;
}

.how-it-works .category-title.shipper::after {
    background-color: var(--accent) !important;
}

.how-it-works .category-title.driver::after {
    background-color: var(--primary) !important;
}

/* ===== 13. إصلاحات قسم "لماذا تختار ناقل" المتطور ===== */

/* 1. إصلاح شبكة الميزات */
.why-naqel-advanced .features-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
    margin-top: 40px !important;
}

.why-naqel-advanced .feature-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    padding: 20px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 2px solid #E5E7EB !important;
    transition: all 0.3s ease !important;
    margin-bottom: 0 !important;
}

.why-naqel-advanced .feature-item:hover {
    transform: translateY(-5px) !important;
    border-color: #F97316 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

/* 2. إصلاح الأيقونات */
.why-naqel-advanced .feature-icon {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    background: rgba(30, 58, 138, 0.1) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.why-naqel-advanced .feature-item:hover .feature-icon {
    background: rgba(249, 115, 22, 0.1) !important;
    transform: scale(1.1) !important;
}

.why-naqel-advanced .feature-icon i {
    font-size: 1.8rem !important;
    color: #1E3A8A !important;
    transition: all 0.3s ease !important;
}

.why-naqel-advanced .feature-item:hover .feature-icon i {
    color: #F97316 !important;
}

/* 3. إصلاح النصوص */
.why-naqel-advanced .feature-text h4 {
    font-size: 1.2rem !important;
    color: #1E3A8A !important;
    margin-bottom: 8px !important;
    font-weight: 700 !important;
}

.why-naqel-advanced .feature-text p {
    font-size: 0.95rem !important;
    color: #4B5563 !important;
    line-height: 1.6 !important;
}

/* 4. إصلاح العمود الإحصائي */
.why-naqel-advanced .stats-column {
    background: linear-gradient(135deg, #1E3A8A 0%, #2d4ba3 100%) !important;
    border-radius: 20px !important;
    padding: 40px 30px !important;
    color: white !important;
    box-shadow: 0 15px 40px rgba(30, 58, 138, 0.2) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* 5. إصلاح العدادات */
.why-naqel-advanced .counter-value {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

/* 6. إصلاح أشرطة التقدم */
.why-naqel-advanced .progress-bar {
    height: 12px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    margin-top: 8px !important;
}

.why-naqel-advanced .progress-fill {
    height: 100% !important;
    background: #F97316 !important;
    border-radius: 6px !important;
    transition: width 1.5s ease-in-out !important;
    width: 0 !important;
}

/* ===== 14. إصلاحات قسم "الإنجازات المطوّر" ===== */

/* 1. إصلاح الفئة الرئيسية */
.advanced-achievements-section {
    background: radial-gradient(circle at 50% 50%, 
        #1a365d 0%, 
        #1E3A8A 40%, 
        #1E3A8A 60%,
        #0f172a 100%
    ) !important;
    color: #ffffff !important;
    padding: 100px 0 !important;
    position: relative !important;
    min-height: 100vh !important;
    overflow: hidden !important;
}

/* 2. الحاوية */
.advanced-achievements-section .achievements-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 3. العناوين */
.advanced-achievements-section .section-title {
    font-size: 3.2rem !important;
    font-weight: 800 !important;
    margin-bottom: 15px !important;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

.advanced-achievements-section .section-subtitle {
    font-size: 1.3rem !important;
    color: #cbd5e1 !important;
    font-weight: 400 !important;
    opacity: 0.9 !important;
}

.advanced-achievements-section .accent {
    color: #F97316 !important;
    font-weight: 800 !important;
    text-shadow: 0 0 10px rgba(249, 115, 22, 0.3) !important;
}

/* 4. إصلاح شبكة الإحصائيات (الصف الأول) */
.advanced-achievements-section .stats-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 40px !important;
    margin-bottom: 60px !important;
}

.advanced-achievements-section .stat-column {
    text-align: center !important;
    padding: 30px 20px !important;
    transition: transform 0.3s ease !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.advanced-achievements-section .stat-column:hover {
    transform: translateY(-5px) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(249, 115, 22, 0.3) !important;
}

/* 5. الأيقونات في الإحصائيات */
.advanced-achievements-section .stat-icon-circle {
    width: 70px !important;
    height: 70px !important;
    background: rgba(249, 115, 22, 0.15) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 25px !important;
    position: relative !important;
}

.advanced-achievements-section .stat-icon-circle i {
    font-size: 1.8rem !important;
    color: #F97316 !important;
}

/* 6. الأرقام في الإحصائيات */
.advanced-achievements-section .stat-number {
    font-size: 3.5rem !important;
    font-weight: 900 !important;
    margin: 15px 0 !important;
    color: #ffffff !important;
    text-shadow: 0 4px 20px rgba(249, 115, 22, 0.3) !important;
    letter-spacing: -1px !important;
}

/* 7. الخط الفاصل */
.advanced-achievements-section .horizontal-divider {
    height: 1px !important;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 100%) !important;
    margin: 60px 0 !important;
    width: 100% !important;
}

/* 8. إصلاح الصف الثاني (المحتوى) */
.advanced-achievements-section .content-row {
    display: grid !important;
    grid-template-columns: 1.2fr 0.8fr !important;
    gap: 60px !important;
    align-items: start !important;
}

/* 9. إصلاح شبكة البطاقات */
.advanced-achievements-section .cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 25px !important;
}

/* 10. تصميم البطاقات */
.advanced-achievements-section .feature-card {
    background: linear-gradient(145deg, 
        rgba(30, 41, 59, 0.9) 0%,
        rgba(15, 23, 42, 0.95) 100%) !important;
    border-radius: 16px !important;
    padding: 30px !important;
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.03) !important;
    border: none !important;
    height: 100% !important;
    backdrop-filter: blur(10px) !important;
}

.advanced-achievements-section .feature-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(249, 115, 22, 0.1),
        0 0 30px rgba(249, 115, 22, 0.1) !important;
    background: linear-gradient(145deg, 
        rgba(30, 41, 59, 1) 0%,
        rgba(15, 23, 42, 1) 100%) !important;
}

/* 11. أيقونات البطاقات */
.advanced-achievements-section .card-icon {
    width: 50px !important;
    height: 50px !important;
    background: rgba(249, 115, 22, 0.15) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
}

.advanced-achievements-section .card-icon i {
    font-size: 1.4rem !important;
    color: #F97316 !important;
}

/* 12. تنسيق العمود الأيمن (الدعوة للإجراء) */
.advanced-achievements-section .cta-content {
    background: rgba(15, 23, 42, 0.7) !important;
    border-radius: 20px !important;
    padding: 40px !important;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: none !important;
    height: 100% !important;
}

.advanced-achievements-section .cta-title {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    margin-bottom: 25px !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
}

/* 13. الأزرار */
.advanced-achievements-section .primary-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: linear-gradient(135deg, #F97316 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    padding: 18px 35px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 
        0 8px 25px rgba(249, 115, 22, 0.3),
        0 4px 0 rgba(234, 88, 12, 0.5) !important;
    border: none !important;
    min-width: 200px !important;
    margin-right: 10px !important;
    margin-bottom: 10px !important;
}

.advanced-achievements-section .primary-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 
        0 12px 30px rgba(249, 115, 22, 0.4),
        0 6px 0 rgba(234, 88, 12, 0.5) !important;
    background: linear-gradient(135deg, #fb923c 0%, #F97316 100%) !important;
}

.advanced-achievements-section .secondary-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: transparent !important;
    color: #ffffff !important;
    padding: 18px 35px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    transition: all 0.3s ease !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    min-width: 200px !important;
}

.advanced-achievements-section .secondary-btn:hover {
    border-color: rgba(255, 255, 255, 0.4) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    transform: translateY(-3px) !important;
}

/* 14. الإحصائيات الصغيرة */
.advanced-achievements-section .mini-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
    margin-top: 40px !important;
    padding-top: 30px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.advanced-achievements-section .mini-stat-number {
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    margin-bottom: 8px !important;
    color: #F97316 !important;
}

/* ===== 15. التجاوب مع الأجهزة المحمولة ===== */

/* للأجهزة المتوسطة (تابلت) */
@media (max-width: 1100px) {
    .steps-grid, 
    .features-grid,
    .why-naqel-advanced .features-grid-compact {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .goals-grid, 
    .faq-grid,
    .faq-columns,
    .advanced-goals-section .stats-row,
    .advanced-goals-section .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .shipment-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .two-columns-layout,
    .advanced-goals-section .content-row,
    .advanced-achievements-section .content-row {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .features-column {
        padding-left: 0;
    }
    
    .platform-title {
        font-size: 1.8rem;
    }
    
    .section-title,
    .why-naqel-advanced .section-title,
    .advanced-goals-section .section-title,
    .advanced-achievements-section .section-title {
        font-size: 2rem;
    }
    
    .section-subtitle,
    .advanced-faq-section .section-subtitle {
        font-size: 1.3rem;
    }
    
    .advanced-goals-section .container,
    .achievements-container {
        padding: 0 30px;
    }
    
    .why-naqel-advanced .features-grid,
    .advanced-achievements-section .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* للأجهزة الصغيرة (موبايل) */
@media (max-width: 768px) {
    section {
        padding: 60px 0;
    }
    
    .advanced-goals-section,
    .advanced-achievements-section {
        padding: 60px 0;
    }
    
    .section-title,
    .why-naqel-advanced .section-title,
    .advanced-goals-section .section-title,
    .advanced-achievements-section .section-title {
        font-size: 2rem;
    }
    
    .section-subtitle,
    .advanced-faq-section .section-subtitle {
        font-size: 1.3rem;
    }
    
    .steps-grid, 
    .shipment-grid, 
    .goals-grid,
    .features-grid, 
    .faq-grid,
    .faq-columns,
    .advanced-goals-section .stats-row,
    .advanced-goals-section .cards-grid,
    .advanced-goals-section .mini-stats,
    .why-naqel-advanced .features-grid,
    .advanced-achievements-section .stats-row,
    .advanced-achievements-section .cards-grid,
    .advanced-achievements-section .mini-stats {
        grid-template-columns: 1fr;
    }
    
    .app-content {
        flex-direction: column;
    }
    
    .download-buttons,
    .advanced-goals-section .cta-buttons,
    .advanced-achievements-section .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .faq-category {
        padding: 20px;
    }
    
    .faq-question {
        padding: 15px;
        font-size: 1rem;
    }
    
    .faq-answer.active {
        padding: 15px;
    }
    
    .stats-column,
    .why-naqel-advanced .stats-column {
        padding: 30px 20px;
    }
    
    .feature-item {
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
    }
    
    .feature-icon-small {
        margin: 0 auto 10px;
    }
    
    .advanced-goals-section .stat-number,
    .advanced-achievements-section .stat-number {
        font-size: 2.8rem;
    }
    
    .advanced-goals-section .cta-title,
    .advanced-achievements-section .cta-title {
        font-size: 2rem;
    }
    
    .primary-btn,
    .secondary-btn,
    .advanced-goals-section .primary-btn,
    .advanced-goals-section .secondary-btn,
    .advanced-achievements-section .primary-btn,
    .advanced-achievements-section .secondary-btn {
        min-width: 100%;
    }
    
    .advanced-goals-section .container,
    .achievements-container {
        padding: 0 20px;
    }
    /* ==========================================================================
   NAQEL FINAL STABILIZATION PATCH (APPEND TO THE END OF YOUR 1959 LINES)
   ========================================================================== */

/* 1. إجبار الهوية البصرية (Override Layer) */
:root {
    --primary: #1E3A8A !important;
    --accent: #F97316 !important;
}

/* 2. إصلاح القائمة العلوية (STICKY MENU) - النسخة التي طلبتها وثبت نجاحها */
#sp-header {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* تعويض مساحة الهيدر لكي لا يختفي أول قسم تحته */
#sp-main-body { 
    padding-top: 100px !important; 
}

/* 3. حل مشكلة الالتصاق (SECTION SPACING ENGINE) */
/* هذا الكود يفصل الأقسام التي كانت ملتصقة ببعضها (لماذا ناقل، التطبيق، الأسئلة) */
section.sppb-section, 
.why-naqel-advanced, 
.shipment-types, 
#sp-main-body .sppb-section,
.app-section {
    margin-bottom: 100px !important; /* مسافة إجبارية للفصل */
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    clear: both !important;
    position: relative !important;
}

/* 4. تصغير قسم أهداف المرحلة الأولى (Resizing Fix) */
.advanced-goals-section {
    min-height: auto !important;
    height: auto !important;
    padding: 60px 0 !important;
}
.advanced-goals-section .section-title { font-size: 2.2rem !important; }
.advanced-goals-section .stat-number { font-size: 2.5rem !important; }

/* ============================================================
   تحويل SP Page Builder Form إلى هوية ناقل (Naqel Identity)
   ============================================================ */

/* 1. استهداف الحاوية الرئيسية عبر الكلاس الذي أضفناه */
.naqel-brand-form .sppb-addon-contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px; /* نفس المسافة في تصميمك */
}

/* 2. تحويل حقول الإدخال لتطابق تصميمك */
.naqel-brand-form input,
.naqel-brand-form textarea,
.naqel-brand-form select {
    padding: 16px !important;
    border: 2px solid #E5E7EB !important; /* رمادي فاتح */
    border-radius: 8px !important;
    font-family: 'Tajawal', sans-serif !important;
    font-size: 1.05rem !important;
    color: #374151 !important; /* لون النص الأساسي */
    background-color: #F9FAFB !important; /* خلفية فاتحة جداً */
    width: 100% !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    margin-bottom: 0 !important; /* إلغاء مسافات القالب الافتراضية */
}

/* تأثير التركيز (Focus) - الهوية الزرقاء */
.naqel-brand-form input:focus,
.naqel-brand-form textarea:focus,
.naqel-brand-form select:focus {
    outline: none !important;
    border-color: #1E3A8A !important; /* الأزرق الرئيسي */
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1) !important;
}

/* 3. زر الإرسال - تحويله لزر ناقل المميز */
.naqel-brand-form .sppb-btn-primary,
.naqel-brand-form button[type="submit"] {
    background-color: #1E3A8A !important;
    color: #ffffff !important;
    border: none !important;
    padding: 20px 30px !important;
    border-radius: 8px !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 15px !important;
    box-shadow: 0 6px 15px rgba(30, 58, 138, 0.3) !important;
    transition: all 0.3s ease !important;
}

/* تأثير الهوفر على الزر - البرتقالي */
.naqel-brand-form .sppb-btn-primary:hover,
.naqel-brand-form button[type="submit"]:hover {
    background-color: #F97316 !important; /* البرتقالي */
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 25px rgba(249, 115, 22, 0.4) !important;
}

/* 4. إخفاء التسميات (Labels) إذا كنت تريد الاعتماد على Placeholder فقط */
/* ملاحظة: SP Page Builder يضع Labels بشكل افتراضي، هذا الكود ينسقها لتشبه تصميمك */
.naqel-brand-form label {
    color: #1E3A8A !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    display: block !important;
    text-align: right !important; /* ضمان الاتجاه للعربية */
}

/* 5. تنسيق رسائل النجاح/الخطأ الخاصة بجملة */
.sppb-addon-contact-form-message {
    margin-top: 20px !important;
    padding: 15px !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    text-align: center !important;
}



/* 6. إصلاح تابات الأسئلة الشائعة (Scroll Fix) */
[id] {
    scroll-margin-top: 150px !important;
}
/* ============================================================
   NAQEL FORM OVERRIDE - تحويل نموذج جملة لتصميم ناقل
   ============================================================ */

/* ============================================================
   NAQEL FORM FORCE-STYLE (تصميم إجباري للنموذج)
   ============================================================ */

/* 1. استهداف الحاوية الرئيسية للفورم مباشرة */
.sppb-addon-contact-form {
    background: #ffffff !important;
    padding: 10px !important; /* مسافة داخلية خفيفة */
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* 2. تحويل حقول الإدخال (Inputs & Textarea) لتصميم ناقل */
.sppb-addon-contact-form input[type="text"],
.sppb-addon-contact-form input[type="email"],
.sppb-addon-contact-form input[type="tel"],
.sppb-addon-contact-form textarea,
.sppb-addon-contact-form select {
    padding: 16px !important;
    border: 2px solid #E5E7EB !important; /* رمادي فاتح */
    border-radius: 8px !important;
    font-family: 'Tajawal', sans-serif !important;
    font-size: 1.05rem !important;
    color: #374151 !important; /* لون النص */
    background-color: #F9FAFB !important; /* خلفية الحقل */
    width: 100% !important;
    box-shadow: none !important;
    margin: 0 !important;
    height: auto !important;
}

/* تأثير عند الكتابة داخل الحقل */
.sppb-addon-contact-form input:focus,
.sppb-addon-contact-form textarea:focus,
.sppb-addon-contact-form select:focus {
    outline: none !important;
    border-color: #1E3A8A !important; /* الأزرق الرئيسي */
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1) !important;
}

/* 3. تنسيق زر الإرسال (Send Button) */
.sppb-addon-contact-form .sppb-btn-primary,
.sppb-addon-contact-form button[type="submit"] {
    background-color: #1E3A8A !important;
    color: #ffffff !important;
    border: none !important;
    padding: 18px 30px !important;
    border-radius: 8px !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    width: 100% !important;
    margin-top: 10px !important;
    text-transform: none !important; /* منع تحويل الأحرف لكبيرة */
    box-shadow: 0 6px 15px rgba(30, 58, 138, 0.3) !important;
    transition: all 0.3s ease !important;
}

/* تأثير الماوس على الزر */
.sppb-addon-contact-form .sppb-btn-primary:hover,
.sppb-addon-contact-form button[type="submit"]:hover {
    background-color: #F97316 !important; /* البرتقالي */
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 25px rgba(249, 115, 22, 0.4) !important;
}

/* 4. تنسيق العناوين (Labels) - اختياري لضمان التناسق */
.sppb-addon-contact-form label {
    font-family: 'Tajawal', sans-serif !important;
    color: #1E3A8A !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: block !important;
    font-size: 1rem !important;
}

/* 5. إخفاء أي عناصر مزعجة قد يضيفها القالب */
.sppb-addon-contact-form-title {
    display: none !important; /* إخفاء عنوان الفورم الافتراضي */
}
}