/* ==========================================================
   service-slider — سيكشن لكل خدمة (عنوان Ribbon + سلايدر منتجات)
   يبدأ بـ 5 كروت ثم 4 ثم 3 ثم 2 ثم 1 في الموبايل، مع إظهار جزء من الكارد السابق والتالي
   ========================================================== */

:root {
    --ebmnt1-service-slider-background-mint: var(--ebmnt1-color-helper-mint);
    --ebmnt1-service-slider-background-sky: var(--ebmnt1-color-helper-sky);
    --ebmnt1-service-slider-stripe-color: rgba(255, 255, 255, 0.45);
    --ebmnt1-service-slider-edge-color: var(--ebmnt1-color-page-background);
    --ebmnt1-service-slider-arrow-background: var(--ebmnt1-color-white);
    --ebmnt1-service-slider-arrow-icon-color: var(--ebmnt1-color-helper-mint-strong);
    --ebmnt1-service-slider-arrow-background-hover: var(--ebmnt1-color-helper-mint-strong);
    --ebmnt1-service-slider-arrow-icon-color-hover: var(--ebmnt1-color-white);
    --ebmnt1-service-slider-arrow-shadow-color: var(--ebmnt1-color-shadow);
    --ebmnt1-service-slider-dot-background: var(--ebmnt1-color-helper-mint-strong);
    --ebmnt1-service-slider-dot-active-background: var(--ebmnt1-color-primary);
    --ebmnt1-service-slider-visible: 1;
}

.ebmnt1-service-slider {
    background-image:
        radial-gradient(circle at 50% 0, var(--ebmnt1-service-slider-edge-color) 0 1.15rem, transparent 1.2rem),
        repeating-linear-gradient(90deg, var(--ebmnt1-service-slider-stripe-color) 0 2px, transparent 2px 7px);
    background-size: 2.6rem 1.3rem, auto;
    background-repeat: repeat-x, repeat;
    background-position: center top, 0 0;
}

.ebmnt1-service-slider--mint { background-color: var(--ebmnt1-service-slider-background-mint); }
.ebmnt1-service-slider--sky { background-color: var(--ebmnt1-service-slider-background-sky); }

.ebmnt1-service-slider__inner {
    gap: 1.8em;
    --ebmnt1-slider-visible: var(--ebmnt1-service-slider-visible);
    --ebmnt1-slider-peek: 2.2rem;
    --ebmnt1-slider-gap: 0.8rem;
}

.ebmnt1-service-slider__root {
    width: 100%;
}

/* لو عدد المنتجات أقل من المعروض: توسيط الكروت بدل تكتلها في طرف */
.ebmnt1-service-slider .ebmnt1-slider__track {
    justify-content: safe center;
}

.ebmnt1-service-slider .ebmnt1-slider__slide .ebmnt1-product-card {
    flex: none;
    width: 100%;
    max-width: none;
}

/* أسهم نصف دائرية بيضاء ملتصقة بالحواف (مثل المرجع) */
.ebmnt1-service-slider .ebmnt1-slider__button {
    width: 1.8rem;
    height: 3.6rem;
    background-color: var(--ebmnt1-service-slider-arrow-background);
    box-shadow: 0 0.2em 0.6em var(--ebmnt1-service-slider-arrow-shadow-color);
}

.ebmnt1-service-slider .ebmnt1-slider__button i {
    color: var(--ebmnt1-service-slider-arrow-icon-color);
    font-size: 0.85rem;
}

.ebmnt1-service-slider .ebmnt1-slider__button:hover {
    background-color: var(--ebmnt1-service-slider-arrow-background-hover);
    transform: translateY(-50%);
}

.ebmnt1-service-slider .ebmnt1-slider__button:hover i {
    color: var(--ebmnt1-service-slider-arrow-icon-color-hover);
}

.ebmnt1-service-slider .ebmnt1-slider__button--prev {
    right: 0;
    border-radius: 3.6rem 0 0 3.6rem;
}

.ebmnt1-service-slider .ebmnt1-slider__button--next {
    left: 0;
    border-radius: 0 3.6rem 3.6rem 0;
}

.ebmnt1-service-slider .ebmnt1-slider__dot {
    background-color: var(--ebmnt1-service-slider-dot-background);
}

.ebmnt1-service-slider .ebmnt1-slider__dot.ebmnt1-is-active {
    background-color: var(--ebmnt1-service-slider-dot-active-background);
}

@media (min-width: 425px) {
    :root { --ebmnt1-service-slider-visible: 2; }
}

@media (min-width: 768px) {
    :root { --ebmnt1-service-slider-visible: 3; }
}

@media (min-width: 1024px) {
    :root { --ebmnt1-service-slider-visible: 4; }
}

@media (min-width: 1440px) {
    :root { --ebmnt1-service-slider-visible: 5; }
}