/**
 * ErbilOriginal — Hero Slider Styles (Premium RTL Design)
 *
 * Elegant cosmetics e-commerce slider:
 * - Rounded container with soft shadow
 * - Content absolutely positioned on the RIGHT (RTL)
 * - Huge bold title, elegant description
 * - White pill badge with pink text
 * - Premium pink pill button with arrow
 * - Custom capsule-style pagination
 *
 * @package ErbilOriginal
 */

/* ============================================================
   SWIPER CORE — Critical for fade effect & layout
   ============================================================ */

.erbil-slider-swiper {
    position: relative;
    width: 100%;
    max-width: 1300px;
    margin: 30px auto;
    height: 420px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    background: #f7f4f6;
}

.erbil-slider-swiper .swiper-wrapper {
    height: 100% !important;
}

.erbil-slider-swiper .swiper-slide {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* ============================================================
   SLIDER CONTAINER — Rounded corners, soft shadow
   ============================================================ */

.erbil-hero-slider {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
    direction: rtl;
}

/* ============================================================
   SLIDE
   ============================================================ */

.erbil-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 28px;
    direction: rtl;
}

/* Background image — fills entire slide */
.erbil-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Responsive <picture> background — desktop image by default, with an
   optional dedicated mobile image served via <source media="(max-width:768px)">. */
.erbil-slide-picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    overflow: hidden;
}

.erbil-slide-bg-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* SEO image (visually hidden) */
.erbil-slide-img-seo {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    visibility: hidden;
    overflow: hidden;
}

/* Soft light overlay on the RIGHT so dark text stays readable.
   Kept subtle so it never reads as a solid white box. */
.erbil-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    border-radius: 28px;
    background: linear-gradient(
        to left,
        rgba(255, 255, 255, 0.72) 0%,
        rgba(255, 255, 255, 0.45) 28%,
        rgba(255, 255, 255, 0.12) 52%,
        rgba(255, 255, 255, 0) 72%
    );
}

/* ============================================================
   SLIDE CONTENT — Absolutely positioned on the RIGHT (RTL)
   ============================================================ */

.erbil-slide-content {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    /* width:auto (not 100%) prevents the box from overflowing the
       container when combined with the right:5% offset. */
    width: auto;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
    direction: rtl;
    padding: 0;
    box-sizing: border-box;
    background: transparent;
}

/* --- Badge — white pill with pink text --- */

.erbil-slide-badge {
    display: inline-block;
    font-family: 'Vazirmatn', 'IRANSans', Tahoma, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: #c2185b;
    background: #ffffff;
    padding: 9px 20px;
    border-radius: 50px;
    margin: 0 0 22px 0;
    letter-spacing: -0.2px;
    box-shadow: 0 6px 18px rgba(194, 24, 91, 0.14);
}

/* --- Main Title — huge, bold, dark --- */

.erbil-slide-title {
    font-family: 'Vazirmatn', 'IRANSans', Tahoma, sans-serif;
    font-size: 48px;
    font-weight: 900;
    color: #1a1a2e;
    line-height: 1.22;
    letter-spacing: -0.5px;
    margin: 0 0 18px 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* --- Description — elegant, readable --- */

.erbil-slide-desc {
    font-family: 'Vazirmatn', 'IRANSans', Tahoma, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #5a5a6e;
    line-height: 1.9;
    margin: 0 0 34px 0;
    max-width: 460px;
}

/* ============================================================
   BUTTONS — Premium pill-shaped
   ============================================================ */

.erbil-slide-actions {
    display: flex;
    flex-direction: row;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.erbil-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: 'Vazirmatn', 'IRANSans', Tahoma, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    padding: 16px 34px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    border: 2px solid transparent;
    white-space: nowrap;
}

/* Primary Button — bright pink premium pill */
.erbil-btn-primary {
    background: #f44c80;
    color: #ffffff;
    border-color: #f44c80;
    box-shadow: 0 10px 26px rgba(244, 76, 128, 0.35);
}

.erbil-btn-primary:hover {
    background: #e63b6d;
    border-color: #e63b6d;
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(244, 76, 128, 0.45);
}

/* Arrow icon inside primary button — points left in RTL */
.erbil-btn-primary .btn-arrow {
    display: inline-flex;
    width: 16px;
    height: 16px;
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.erbil-btn-primary:hover .btn-arrow {
    transform: rotate(180deg) translateX(3px);
}

/* Ghost Button — white pill with dark text */
.erbil-btn-ghost {
    background: #ffffff;
    color: #1a1a2e;
    border-color: #ffffff;
    box-shadow: 0 6px 18px rgba(26, 26, 46, 0.1);
}

.erbil-btn-ghost:hover {
    background: #fdf2f6;
    color: #c2185b;
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(26, 26, 46, 0.14);
}

/* ============================================================
   PAGINATION — Small horizontal pill at bottom center
   ============================================================ */

.erbil-slider-swiper .swiper-pagination {
    position: absolute !important;
    bottom: 15px !important;
    left: 50% !important;
    top: auto !important; /* CRITICAL: kills vertical stretching */
    right: auto !important;
    transform: translateX(-50%) !important;
    display: inline-flex !important;
    flex-direction: row !important; /* CRITICAL: prevents vertical stacking */
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.9) !important;
    padding: 8px 16px !important;
    border-radius: 50px !important;
    width: auto !important;
    height: auto !important; /* CRITICAL */
    max-width: 200px !important; /* CRITICAL */
    max-height: 40px !important; /* CRITICAL */
    margin: 0 !important;
    z-index: 20 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.erbil-slider-swiper .swiper-pagination-bullet {
    margin: 0 4px;
    width: 8px;
    height: 8px;
    background: #c9c9d4;
    opacity: 1;
    border-radius: 50%;
    transition: all 0.35s ease;
}

.erbil-slider-swiper .swiper-pagination-bullet-active {
    width: 26px;
    height: 8px;
    background: #f44c80;
    border-radius: 50px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media screen and (max-width: 1200px) {
    .erbil-hero-slider {
        margin: 24px auto;
    }

    .erbil-slider-swiper,
    .erbil-slide {
        height: 400px;
    }

    .erbil-slide-content {
        right: 6%;
        max-width: 500px;
    }

    .erbil-slide-title {
        font-size: 40px;
    }
}

@media screen and (max-width: 992px) {
    .erbil-slider-swiper,
    .erbil-slide {
        height: 380px;
    }

    .erbil-slide-overlay {
        background: linear-gradient(
            to left,
            rgba(255, 255, 255, 0.97) 0%,
            rgba(255, 255, 255, 0.9) 35%,
            rgba(255, 255, 255, 0.5) 60%,
            rgba(255, 255, 255, 0.1) 85%
        );
    }

    .erbil-slide-content {
        right: 6%;
        max-width: 440px;
    }

    .erbil-slide-title {
        font-size: 34px;
    }

    .erbil-slide-desc {
        font-size: 15px;
    }
}

@media screen and (max-width: 768px) {
    /* ROOT CAUSE FIX:
       A block with width:100% PLUS horizontal margins occupies
       100% + margins, which overflows the viewport. In an RTL layout that
       overflow shifts the whole slider sideways (gap on one side, clipped
       on the other). Use padding instead of side margins so the section
       always fits exactly inside the viewport. */
    .erbil-hero-slider {
        width: 100% !important;
        max-width: 100% !important;
        margin: 16px auto !important;
        padding: 0 16px !important;
        box-sizing: border-box;
    }

    /* Swiper fills the padded section — no side margins, no overflow.
       A portrait aspect-ratio (4:4.5) with a 340px floor gives the mobile
       banner a tall, product-focused frame. */
    .erbil-slider-swiper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        height: auto !important;
        aspect-ratio: 4 / 4.5;
        min-height: 340px;
        border-radius: 12px;
    }

    .erbil-slide {
        border-radius: 12px;
    }

    /* Lighter overlay on mobile so the product photography stays crisp and
       vibrant. A soft vertical wash keeps the centered text readable without
       washing out the banner. */
    .erbil-slide-overlay {
        border-radius: 12px;
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.28) 0%,
            rgba(255, 255, 255, 0.08) 42%,
            rgba(255, 255, 255, 0.42) 100%
        );
    }

    /* Content spans the full slide width with safe padding, centered. */
    .erbil-slide-content {
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        text-align: center !important;
        align-items: center !important;
        transform: translateY(-50%) !important;
        box-sizing: border-box;
    }

    .erbil-slide-title {
        font-size: 20px !important;
        margin-bottom: 12px;
        /* Soft white halo keeps the title legible over the lighter overlay. */
        text-shadow: 0 1px 6px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(255, 255, 255, 0.95);
    }

    /* Hide the long description on mobile for a cleaner banner. */
    .erbil-slide-desc {
        display: none !important;
    }

    .erbil-slide-badge {
        font-size: 11px;
        padding: 7px 14px;
        margin-bottom: 12px;
    }

    .erbil-slide-actions {
        justify-content: center;
    }

    /* CTA buttons hug their text — never stretch to full width. */
    .erbil-btn {
        width: auto !important;
        max-width: fit-content !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 10px 28px !important;
        margin: 0 auto !important;
        font-size: 13px;
    }

    .erbil-slider-swiper .swiper-pagination {
        bottom: 12px !important;
        padding: 6px 12px;
    }
}

@media screen and (max-width: 480px) {
    /* Keep the portrait aspect-ratio + 340px floor on small phones too. */
    .erbil-slider-swiper {
        height: auto !important;
        aspect-ratio: 4 / 4.5;
        min-height: 340px;
    }

    .erbil-slide-content {
        padding: 0 12px !important;
    }

    .erbil-slide-title {
        font-size: 18px !important;
    }

    /* Keep the CTA pill hugging its label instead of stretching full-width. */
    .erbil-slide-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .erbil-btn {
        width: auto !important;
        max-width: fit-content !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 10px 28px !important;
        margin: 0 auto !important;
    }
}