/* Add custom CSS styles below */ 

.details-slider .s-slider-thumbs img,
.s-product-card-image-cover {
    object-fit: fill;
}

custom-salla-product-card.s-product-card-fit-height .s-product-card-image {
    max-height: 20rem;
}

@media (min-width: 640px) {
    custom-salla-product-card.s-product-card-vertical.s-product-card-fit-height .s-product-card-image {
        height: 20rem;
        flex-basis: 20rem;
    }
}

@media (max-width: 639px) {
    custom-salla-product-card.s-product-card-vertical.s-product-card-fit-height .s-product-card-image {
        height: 14rem;
        flex-basis: 14rem;
    }
}

@media (max-width: 480px) {
    custom-salla-product-card.s-product-card-vertical.s-product-card-fit-height .s-product-card-image {
        height: 11rem;
        flex-basis: 11rem;
    }
}

salla-slider.details-slider .s-slider-container {
    background-color: white;
    border: 0px solid;
}

/* ========================================= */
/* --- أكواد خريطة زوهو لمنع الانكماش --- */
/* ========================================= */
#zoho-storelocator-container {
    width: 100% !important;
    min-height: 650px !important;
    display: block !important;
}

#zoho-storelocator-container > div,
#zoho-storelocator-container iframe,
#zoho-storelocator-container .zs-storelocator-container,
#zoho-storelocator-container .maplibregl-map {
    min-height: 600px !important;
    height: 600px !important;
}

/* ========================================= */
/* --- تأثيرات التحول الشاملة (مدعومة 100% لجميع الأجهزة) --- */
/* ========================================= */

html {
    scroll-behavior: smooth;
}

/* 1. تأثير التحول عند مرور الماوس (Hover) لبطاقات المميزات والمنتجات */
.feature-item,
.s-feature-card,
.s-block-features .s-grid-item,
.s-block--features .s-grid-item,
.s-block-features .swiper-slide,
[class*="feature-card"],
[class*="feature-item"],
custom-salla-product-card {
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, opacity 0.8s ease !important;
    will-change: transform, box-shadow, opacity;
    border-radius: 12px;
}

.feature-item:hover,
.s-feature-card:hover,
.s-block-features .s-grid-item:hover,
.s-block--features .s-grid-item:hover,
.s-block-features .swiper-slide:hover,
[class*="feature-card"]:hover,
[class*="feature-item"]:hover,
custom-salla-product-card:hover {
    transform: translateY(-12px) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important;
    z-index: 10;
}

/* 2. تحضير العناصر لتأثير الظهور عند النزول (يتم تفعيله بواسطة JS) */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(50px);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.slide-from-right {
    opacity: 0;
    transform: translateX(150px);
    transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.9s ease !important;
    will-change: transform, opacity;
}

.slide-from-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}
/* --- تأثيرات التحول لباقات الصيانة (Packages Transformation) --- */

/* حالة البداية (مخفية ومصغرة ومسحوبة للأسفل) */
.package-card-transform {
    opacity: 0;
    transform: translateY(80px) scale(0.9);
    /* استخدام منحنى (Cubic-bezier) يعطي تأثير ارتداد (Bouncy) فخم جداً */
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
    will-change: transform, opacity;
}

/* حالة الوصول للقسم أثناء النزول (ظهور كامل) */
.package-card-transform.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* تأثير التفاعل عند تمرير الماوس على الباقة (Hover) */
.package-card-transform.is-visible:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 45px rgba(236, 200, 26, 0.15) !important; /* ظل أصفر فخم يطابق لون الباقات */
    border-color: #ecc81a !important;
    z-index: 10;
}