/* 
   WEPSHOP Elementor Hero Slider Stylesheet
*/
:root {
    --wep-navy: #0A0F2C;
    --wep-burgundy: #A31636;
    --wep-white: #FFFFFF;
    --wep-gray-text: #4B5563;
    --wep-glass-bg: rgba(255, 255, 255, 0.7);
    --wep-glass-border: rgba(255, 255, 255, 0.5);
    --transition-primary: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wep-hero-wrap {
    position: relative !important;
    width: 100% !important;
    height: calc(100vh - 80px) !important;
    min-height: 700px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    background: #F3F4F6 !important;
    font-family: 'Cairo', sans-serif !important;
    direction: rtl !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure Elementor parents don't constrain the height or overflow unexpectedly */
.elementor-widget-wepshop_hero_slider, 
.elementor-widget-wepshop_hero_slider .elementor-widget-container {
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

/* Base resets inside the widget */
.wep-hero-wrap * {
    box-sizing: border-box;
}

/* Massive Abstract Blurred Blobs for depth */
.wep-ambient-blob-1 {
    position: absolute; width: 600px; height: 600px;
    background: var(--wep-burgundy); opacity: 0.08;
    border-radius: 50%; filter: blur(120px);
    top: -100px; right: -100px;
    animation: wepDrift1 20s infinite alternate ease-in-out;
    pointer-events: none; z-index: 0;
}
.wep-ambient-blob-2 {
    position: absolute; width: 800px; height: 800px;
    background: var(--wep-navy); opacity: 0.05;
    border-radius: 50%; filter: blur(150px);
    bottom: -200px; left: -200px;
    animation: wepDrift2 25s infinite alternate ease-in-out;
    pointer-events: none; z-index: 0;
}

@keyframes wepDrift1 { 100% { transform: translate(-100px, 100px); } }
@keyframes wepDrift2 { 100% { transform: translate(150px, -100px); } }

/* The Main Container */
.wep-container {
    width: 100%; max-width: 1600px;
    margin: 0 auto; padding: 0 40px;
    height: 90%;
    display: flex; gap: 40px;
    position: relative; z-index: 5;
}

/* ── RIGHT MAIN SLIDER ── */
.wep-main-slider {
    flex: 1; height: 100%;
    border-radius: 30px;
    background: var(--wep-glass-bg);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--wep-glass-border);
    box-shadow: 0 20px 50px rgba(0,0,0,0.03), inset 0 0 0 1px rgba(255,255,255,1);
    overflow: hidden;
    position: relative;
}

.wep-main-slide-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 100%; padding: 0 60px;
}

/* Text Side */
.wep-text-col {
    width: 50%; max-width: 650px;
    padding: 40px 0;
    position: relative; z-index: 10;
}

.wep-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(163, 22, 54, 0.08); 
    color: var(--wep-burgundy);
    font-size: 14px; font-weight: 800;
    padding: 8px 20px; border-radius: 50px;
    margin-bottom: 25px; border: 1px solid rgba(163, 22, 54, 0.2);
    letter-spacing: 0.5px;
}
.wep-badge span {
    width: 8px; height: 8px; background: var(--wep-burgundy);
    border-radius: 50%; display: block;
    animation: wepPulseMini 2s infinite;
}
@keyframes wepPulseMini { 0% { box-shadow: 0 0 0 0 rgba(163,22,54,0.4); } 100% { box-shadow: 0 0 0 6px rgba(163,22,54,0); } }

.wep-title {
    font-size: 58px; font-weight: 900; color: var(--wep-navy);
    line-height: 1.15; margin-bottom: 20px; letter-spacing: -1.5px;
}

.wep-desc {
    font-size: 19px; color: var(--wep-gray-text); font-weight: 500;
    line-height: 1.7; margin-bottom: 35px; max-width: 90%;
}

.wep-price-wrap {
    display: flex; align-items: center; gap: 20px; margin-bottom: 40px;
    background: rgba(255,255,255,0.6); padding: 15px 30px; border-radius: 20px;
    width: max-content; border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}
.wep-price-new { font-size: 40px; font-weight: 900; color: var(--wep-burgundy); line-height: 1; }
.wep-price-old-col { display: flex; flex-direction: column; }
.wep-price-old { font-size: 18px; color: #9CA3AF; text-decoration: line-through; font-weight: 700; margin-bottom: 4px; }
.wep-price-save { font-size: 13px; font-weight: 800; color: #10B981; background: #D1FAE5; padding: 2px 8px; border-radius: 4px; }

.wep-btn {
    display: inline-flex; align-items: center; gap: 12px;
    background: var(--wep-burgundy); color: #fff;
    padding: 12px 28px; border-radius: 12px;
    font-size: 16px; font-weight: 800; text-decoration: none;
    transition: var(--transition-primary);
    box-shadow: 0 10px 25px rgba(163, 22, 54, 0.3);
    white-space: nowrap; width: max-content;
}
.wep-btn:hover {
    background: var(--wep-navy); box-shadow: 0 15px 35px rgba(10, 15, 44, 0.25);
    transform: translateY(-4px); color: #fff;
}
.wep-btn svg { width: 16px; height: 16px; transition: transform 0.3s; }
.wep-btn:hover svg { transform: translateX(-8px); }

/* Image Side */
.wep-img-col {
    width: 50%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    position: relative; z-index: 5;
}
.wep-pedestal {
    position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%) rotateX(70deg);
    width: 80%; height: 250px; border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.06) 0%, transparent 60%);
    z-index: 1; pointer-events: none;
}
.wep-product-img {
    max-width: 95%; max-height: 85%; object-fit: contain;
    mix-blend-mode: multiply; z-index: 2; position: relative;
    animation: wepMajesticFloat 6s ease-in-out infinite;
}

/* Bundle Package CSS */
.wep-bundle-wrap {
    position: relative; width: 100%; height: 85%;
    display: flex; align-items: center; justify-content: center; z-index: 3;
}
.wep-bundle-item {
    position: absolute; transition: all 0.5s ease;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.1));
    mix-blend-mode: multiply;
}
.wep-b-center { width: 50%; max-height: 90%; z-index: 4; animation: wepMajesticFloat 6s infinite alternate; animation-delay: 0s; }
.wep-b-right { width: 35%; max-height: 70%; right: 5%; bottom: 10%; z-index: 3; animation: wepMajesticFloat 6s infinite alternate; animation-delay: 1s; }
.wep-b-left { width: 38%; max-height: 70%; left: 0%; bottom: 5%; z-index: 2; animation: wepMajesticFloat 6s infinite alternate; animation-delay: 2s; }

.wep-bundle-plus {
    position: absolute; width: 32px; height: 32px; background: rgba(255,255,255,0.9);
    color: var(--wep-burgundy); font-weight: 900; font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
    z-index: 5; padding-bottom: 2px; border: 1px solid rgba(163,22,54,0.1);
}
.wep-plus-1 { right: 35%; bottom: 40%; }
.wep-plus-2 { left: 40%; bottom: 35%; }

@keyframes wepMajesticFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Swiper Main Animations */
.wep-main-slider .swiper-slide .wep-badge, .wep-main-slider .swiper-slide .wep-title, 
.wep-main-slider .swiper-slide .wep-desc, .wep-main-slider .swiper-slide .wep-price-wrap, 
.wep-main-slider .swiper-slide .wep-btn { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; }

.wep-main-slider .swiper-slide .wep-product-img, .wep-main-slider .swiper-slide .wep-bundle-wrap { opacity: 0; transform: scale(0.9) translateX(-40px); transition: all 0.8s ease; }

.wep-main-slider .swiper-slide-active .wep-badge { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.wep-main-slider .swiper-slide-active .wep-title { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.wep-main-slider .swiper-slide-active .wep-desc { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.wep-main-slider .swiper-slide-active .wep-price-wrap { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.wep-main-slider .swiper-slide-active .wep-btn { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
.wep-main-slider .swiper-slide-active .wep-product-img, .wep-main-slider .swiper-slide-active .wep-bundle-wrap { opacity: 1; transform: scale(1) translateX(0); transition-delay: 0.2s; }

/* ── LEFT THUMBS SLIDER (Glass Pills) ── */
.wep-thumbs-slider {
    width: 330px; height: 100%;
    padding: 30px 10px !important;
}

.wep-thumb-pill {
    display: flex; align-items: center; gap: 15px;
    background: var(--wep-glass-bg);
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 15px; border-radius: 20px;
    cursor: pointer; position: relative; overflow: hidden;
    transition: var(--transition-primary);
    height: 120px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    transform-origin: right center;
}
.wep-thumb-pill:hover { background: #fff; transform: translateX(5px); }

.wep-thumb-num {
    font-size: 24px; font-weight: 900; color: #D1D5DB;
    writing-mode: vertical-rl; transform: rotate(180deg); opacity: 0.5;
    transition: var(--transition-primary);
}

.wep-thumb-image {
    width: 80px; height: 80px; background: #fff;
    border-radius: 14px; display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 2; padding: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    border: 1px solid #F3F4F6;
}
.wep-thumb-image img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.wep-thumb-meta { flex: 1; z-index: 2; }
.wep-thumb-title-sm { font-size: 16px; font-weight: 800; color: var(--wep-navy); line-height: 1.3; margin-bottom: 4px; transition: color 0.3s; }
.wep-thumb-cat-sm { font-size: 12px; color: var(--wep-gray-text); font-weight: 600; }

.wep-thumbs-slider .swiper-slide-thumb-active .wep-thumb-pill {
    background: #fff;
    border: 2px solid var(--wep-burgundy);
    box-shadow: 0 15px 40px rgba(163, 22, 54, 0.15);
    transform: scale(1.05) translateX(10px);
}
.wep-thumbs-slider .swiper-slide-thumb-active .wep-thumb-num {
    color: var(--wep-burgundy); opacity: 0.1; font-size: 60px;
    position: absolute; right: 10px; top: 10px; z-index: 0;
}
.wep-thumbs-slider .swiper-slide-thumb-active .wep-thumb-title-sm { color: var(--wep-burgundy); }

/* Navigation Arrows (Hidden on Desktop by default if user wants thumbs, but let's hide here) */
.wep-nav-arrows {
    display: none;
}

/* ── Responsive Mobile Constraint (400px Strict Height) ── */
@media (max-width: 1300px) {
    .wep-title { font-size: 46px; }
    .wep-thumbs-slider { width: 300px; }
}

@media (max-width: 992px) {
    .wep-hero-wrap {
        height: 400px !important;
        min-height: 400px !important;
        max-height: 400px !important;
        padding: 0;
        background: #fff; /* Solid background on mobile for clarity */
    }

    .wep-ambient-blob-1, .wep-ambient-blob-2 { display: none; }
    
    .wep-container {
        flex-direction: column;
        gap: 0;
        height: 100%;
        padding: 0 10px;
    }

    .wep-main-slider {
        width: 100%;
        height: 100%;
        border-radius: 12px;
        background: var(--wep-glass-bg);
    }

    .wep-main-slide-inner {
        flex-direction: column-reverse;
        justify-content: flex-end; /* Text at bottom */
        padding: 15px 15px 25px;
        text-align: center;
        height: 100%;
        position: relative;
    }

    /* Text Column forced to bottom */
    .wep-text-col {
        width: 100%;
        max-width: 100%;
        padding: 0;
        z-index: 10;
        margin-top: auto; /* push to bottom */
    }

    .wep-badge { margin-bottom: 8px; padding: 4px 12px; font-size: 11px; }
    .wep-title { font-size: 22px; margin-bottom: 8px; line-height: 1.2; letter-spacing: 0; }
    .wep-desc { display: none; /* Hidden on mobile to save space */ }

    .wep-price-wrap {
        margin: 0 auto 15px;
        padding: 8px 15px;
        gap: 12px;
        background: #fff;
    }
    .wep-price-new { font-size: 20px; }
    .wep-price-old { font-size: 12px; margin-bottom: 0; }
    .wep-price-save { font-size: 10px; padding: 2px 6px; }

    .wep-btn { margin: 0 auto; padding: 10px 20px; font-size: 14px; }
    .wep-btn svg { width: 14px; height: 14px; }

    /* Image Column forced to top absolute to prevent pushing text out */
    .wep-img-col {
        width: 100%;
        height: 160px; /* strict mobile image height */
        position: absolute;
        top: 20px;
        left: 0;
        right: 0;
        z-index: 5;
    }
    .wep-pedestal { height: 60px; bottom: 0; width: 60%; }
    
    .wep-product-img { max-height: 140px; }
    
    /* Bundle scaling for mobile */
    .wep-bundle-wrap { height: 140px; }
    .wep-b-center { width: 35%; }
    .wep-b-right { width: 25%; }
    .wep-b-left { width: 25%; }
    .wep-bundle-plus { width: 24px; height: 24px; font-size: 16px; font-weight: 700; padding-bottom: 1px;}
    .wep-plus-1 { bottom: 20%; right: 28%;}
    .wep-plus-2 { bottom: 15%; left: 32%;}

    /* Hide Thumbs completely on mobile as requested */
    .wep-thumbs-slider { display: none !important; }

    /* Show Arrows on Mobile */
    .wep-nav-arrows {
        display: flex !important;
        position: absolute;
        top: 35%; /* align vertically centered with image */
        left: 0; right: 0;
        width: 100%;
        justify-content: space-between;
        z-index: 20;
        pointer-events: none;
        padding: 0 10px;
        transform: translateY(-50%);
    }
    .wep-swiper-nav {
        pointer-events: auto;
        width: 36px; height: 36px;
        background: #fff;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        color: var(--wep-burgundy);
        cursor: pointer;
    }
    .wep-swiper-nav svg { width: 18px; height: 18px; }
}