/* Add custom CSS styles below */ 
/* الخلفية الشفافة المغبشة */
.selia-bottom-nav {
    background: rgba(255, 255, 255, 0.70) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
}

.selia-bottom-nav-items {
    background: transparent !important;
}

/* الأيقونات والنصوص أسود */
.selia-bottom-nav .selia-bottom-nav-button,
.selia-bottom-nav .selia-bottom-nav-button > a,
.selia-bottom-nav .selia-bottom-nav-icon,
.selia-bottom-nav .selia-bottom-nav-icon i,
.selia-bottom-nav .selia-bottom-nav-button > span,
.selia-bottom-nav .user-icon,
.selia-bottom-nav .user-icon i,
.selia-bottom-nav .header-btn,
.selia-bottom-nav .header-btn i,
.selia-bottom-nav .s-cart-summary-wrapper,
.selia-bottom-nav #s-cart-icon,
.selia-bottom-nav #s-cart-icon i {
    color: #000 !important;
}

/* عداد السلة يظل أحمر */
.selia-bottom-nav .s-cart-summary-count {
    background: #e53935 !important;
    color: #fff !important;
}
/* مبلغ السلة بالأسود */
.selia-bottom-nav .s-cart-summary-total,
.selia-bottom-nav .s-cart-summary-total i {
    color: #000 !important;
}/* ══════════════════════════════════════════════════════════════
   Trio — Advanced Slider
   كود السكشن الأصلي (مستخرج من app.css الخاص بثيم Selia) + التعديل
   المتغيّر: 5 أسطر فقط، كلها معلّمة بـ  ← معدّل / ← مضاف
   لم يُمسّ: ارتفاع السلايدر، الفيديو، الخطوط، الأحجام،
             الألوان، الأنيميشن (fadeInDown)، تأثير الزر hover
   ══════════════════════════════════════════════════════════════ */


/* ---------- 1) الحاوية الخارجية للنص ---------- */
/* الأصلي: align-items:center  →  توسيط عمودي في منتصف السلايد */
.advanced-slider__caption{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 2;
    align-items: flex-end;              /* ← معدّل: كان center */
}
/* ملاحظة: opacity:0 و .swiper-slide-active{opacity:1} تُركت للثيم
   عمداً — لا تضفها هنا وإلا تعطّل ظهور/اختفاء السلايدات */


/* ---------- 2) رفع الكتلة عن قاع السلايد ---------- */
.advanced-slider__caption > .container{
    padding-bottom: 56px;              /* ← مضاف */
}


/* ---------- 3) كتلة النص → عمودين ---------- */
/* الأصلي: display:block و max-width:60% فوق 991px */
.advanced-slider__caption__inner__content{
    width: 100%;                       /* ← مضاف */
    display: grid;                     /* ← مضاف */
    grid-template-columns: 1fr auto;   /* يمين: النص | يسار: الزر */
    align-items: end;
    column-gap: 24px;
}

@media (min-width: 991px){
    .advanced-slider__caption__inner__content{
        max-width: 100%;               /* ← معدّل: كان 60% */
    }
}


/* ---------- 4) توزيع العناصر الثلاثة ---------- */
.advanced-slider__caption__inner__content__heading{
    grid-column: 1;
    grid-row: 1;
}

.advanced-slider__caption__inner__content__text{
    grid-column: 1;
    grid-row: 2;
}

.advanced-slider__caption__inner__content__button{
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;                 /* end في RTL = اليسار */
    align-self: end;
    margin-top: 0;                     /* ← معدّل: كان 1rem/1.5rem/2rem */
}


/* ---------- 5) الجوال ---------- */
@media (max-width: 767px){
    .advanced-slider__caption > .container{
        padding-bottom: 34px;
    }
    .advanced-slider__caption__inner__content{
        column-gap: 12px;