/* ============================================================== */
/* 1. الحاوية الأساسية للسلايدر الرئيسي */
/* ============================================================== */
.hero-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: var(--mt-pc, 0);
    margin-bottom: var(--mb-pc, 0);
}
@media(max-width:768px){
    .hero-slider-wrapper { margin-top: var(--mt-mob, 0); margin-bottom: var(--mb-mob, 0); }
    .hide-slider-on-mobile { display: none !important; }
}

/* ============================================================== */
/* 2. ميزة التداخل مع الهيدر الشفاف */
/* ============================================================== */
.overlap-header-active {
    margin-top: calc(-1 * var(--header-height, 80px));
}
.overlap-header-active .hero-slide-item {
    padding-top: var(--header-height, 80px);
}

/* ============================================================== */
/* 3. وضع ملء الشاشة */
/* ============================================================== */
.hero-slider-wrapper.is-fullscreen .hero-slide-item {
    height: 100vh !important;
}

/* ============================================================== */
/* 4. الشرائح والطبقة الشفافة */
/* ============================================================== */
.hero-slider-container {
    position: relative;
    width: 100%;
    height: 100%;
}
.hero-slide-item {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s;
    display: flex;
    z-index: 1;
}
.hero-slide-item.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 2;
}
.hero-slide-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0;
}

/* ============================================================== */
/* 5. مواقع النص الـ 9 (Text Positions via CSS Grid) */
/* ============================================================== */
.hero-slide-content-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    display: grid;
    height: 100%;
}

.pos-top-left { align-items: start; justify-content: start; text-align: start; }
.pos-top-center { align-items: start; justify-content: center; text-align: center; }
.pos-top-right { align-items: start; justify-content: end; text-align: end; }
.pos-center-left { align-items: center; justify-content: start; text-align: start; }
.pos-center { align-items: center; justify-content: center; text-align: center; }
.pos-center-right { align-items: center; justify-content: end; text-align: end; }
.pos-bottom-left { align-items: end; justify-content: start; text-align: start; }
.pos-bottom-center { align-items: end; justify-content: center; text-align: center; }
.pos-bottom-right { align-items: end; justify-content: end; text-align: end; }

html[dir="rtl"] .pos-top-left, html[dir="rtl"] .pos-center-left, html[dir="rtl"] .pos-bottom-left { justify-content: end; text-align: end; }
html[dir="rtl"] .pos-top-right, html[dir="rtl"] .pos-center-right, html[dir="rtl"] .pos-bottom-right { justify-content: start; text-align: start; }

/* ============================================================== */
/* 6. تنسيقات النصوص الداخلية */
/* ============================================================== */
.hero-slide-content-box {
    max-width: 700px;
    opacity: 0;
}
.hero-badge { display: inline-block; padding: 4px 12px; border: 1px solid; border-radius: 30px; font-size: 0.85em; font-weight: bold; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.hero-title { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 800; margin: 0 0 20px 0; line-height: 1.2; }
.hero-desc { font-size: clamp(1rem, 2vw, 1.2rem); margin: 0 0 30px 0; line-height: 1.6; }
.hero-btn { display: inline-block; padding: 12px 30px; font-weight: bold; border-radius: 4px; text-decoration: none; transition: transform 0.3s; }
.hero-btn:hover { transform: translateY(-3px); }

/* ============================================================== */
/* 7. حركات الدخول (Animations) */
/* ============================================================== */
.hero-slide-item.active .hero-slide-content-box.anim-fade { animation: animFade 1s forwards 0.3s; }
.hero-slide-item.active .hero-slide-content-box.anim-slide-up { animation: animSlideUp 1s forwards 0.3s; }
.hero-slide-item.active .hero-slide-content-box.anim-slide-down { animation: animSlideDown 1s forwards 0.3s; }
.hero-slide-item.active .hero-slide-content-box.anim-slide-left { animation: animSlideLeft 1s forwards 0.3s; }
.hero-slide-item.active .hero-slide-content-box.anim-slide-right { animation: animSlideRight 1s forwards 0.3s; }
.hero-slide-item.active .hero-slide-content-box.anim-zoom-in { animation: animZoomIn 1s forwards 0.3s; }

@keyframes animFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes animSlideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes animSlideDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes animSlideLeft { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes animSlideRight { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes animZoomIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

/* ============================================================== */
/* 8. نقاط الترقيم (Pagination) */
/* ============================================================== */
.hero-slider-pagination {
    position: absolute; bottom: 20px; left: 0; width: 100%;
    display: flex; justify-content: center; gap: 10px; z-index: 10;
}
.hero-dot {
    width: 12px; height: 12px; background: rgba(255,255,255,0.5);
    border: none; border-radius: 50%; cursor: pointer; transition: all 0.3s; padding:0;
}
.hero-dot.active { background: #ffffff; width: 35px; border-radius: 6px; }