/**
 * Hero Slider Styles
 * استایل‌های اسلایدر هیرو
 */

/* Hero Section - Both Single and Slider */
.intro {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll; /* پیش‌فرض scroll برای سازگاری */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 0; /* حذف margin پایین */
}

/* Single Hero (without slider) - CSS Fallback */
.intro:not(.hero-slider), 
.intro.hero-single {
    /* Fallback background for single hero if JavaScript fails */
    background-image: url('../../img/demo/1920x1080-bg-demo.webp');
}

/* Single Hero (without slider) */
.intro:not(.hero-slider)[data-bg-image],
.intro.hero-single[data-bg-image] {
    /* تصاویر از JavaScript اعمال می‌شوند */
}

/* Hero Slider Container */
.intro.hero-slider {
    position: relative;
    overflow: hidden;
    margin-bottom: 0; /* حذف margin پایین */
}

.hero-swiper {
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-swiper .swiper-wrapper {
    height: 100%;
}

.hero-swiper .swiper-slide {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* پیش‌فرض scroll برای سازگاری */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Parallax Effect - تغییر از fixed به scroll */
@media only screen and (min-width: 1200px) {
    .hero-swiper .swiper-slide[data-bg-image],
    .intro.hero-single[data-bg-image] {
        background-attachment: scroll !important; /* تغییر به scroll برای parallax */
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        will-change: background-position; /* بهینه‌سازی performance */
    }
}

/* اطمینان از لود شدن تصاویر در تمام حالات */
.hero-swiper .swiper-slide {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.hero-swiper .swiper-slide[data-bg-image] {
    /* تصاویر از JavaScript اعمال می‌شوند */
}

/* Parallax Effect for Hero */
.intro[data-bg-image],
.hero-swiper .swiper-slide[data-bg-image] {
    will-change: background-position;
    transform: translateZ(0); /* Hardware acceleration */
}

/* اطمینان از عدم وجود فاصله بین sections */
.intro + section,
.intro.hero-slider + section {
    position: relative;
    z-index: 2;
}

/* Swiper Slide Transitions */
.hero-swiper .swiper-slide {
    transition: transform 0.8s ease-out;
}

/* اطمینان از عدم نمایش header داخل slides */
.hero-swiper .swiper-slide .intro__header {
    display: none !important;
}

/* اطمینان از قرار گیری محتوا در وسط */
.hero-swiper .swiper-slide .intro__content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

/* موقعیت راست-وسط برای متن */
.hero-swiper .swiper-slide .intro__content--right-center {
    justify-content: flex-end;
    align-items: center;
    padding-right: 50px;
}

.hero-swiper .swiper-slide .intro__content .headline {
    width: 100%;
    text-align: center;
}

/* تراز راست برای headline */
.hero-swiper .swiper-slide .headline--right-aligned {
    text-align: right;
    max-width: 100%;
}

.hero-swiper .swiper-slide .headline--right-aligned .headline__subtitle,
.hero-swiper .swiper-slide .headline--right-aligned h1,
.hero-swiper .swiper-slide .headline--right-aligned p {
    text-align: right;
}

.hero-swiper .swiper-slide .headline--right-aligned .headline__btngroup {
    justify-content: flex-end;
    text-align: right;
}

/* Responsive برای موقعیت راست */
@media (max-width: 768px) {
    .hero-swiper .swiper-slide .intro__content--right-center {
        justify-content: center;
        padding-right: 20px;
        padding-left: 20px;
    }
    
    .hero-swiper .swiper-slide .headline--right-aligned {
        text-align: center;
    }
    
    .hero-swiper .swiper-slide .headline--right-aligned .headline__subtitle,
    .hero-swiper .swiper-slide .headline--right-aligned h1,
    .hero-swiper .swiper-slide .headline--right-aligned p {
        text-align: center;
    }
    
    .hero-swiper .swiper-slide .headline--right-aligned .headline__btngroup {
        justify-content: center;
        text-align: center;
    }
}

/* اطمینان از قرار گیری scroll button در پایین */
.hero-swiper .swiper-slide .intro__scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

/* Navigation Buttons - Removed */

/* Pagination Dots - بهبود یافته با رنگ‌های اصلی سایت */
.hero-slider-pagination,
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    height: 90px;
}

.hero-slider-pagination .swiper-pagination-bullet,
.swiper-pagination-bullet {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #805db6 !important; /* رنگ بنفش برای غیرفعال */
    opacity: 0.6 !important;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    border: 2px solid transparent !important;
    position: relative;
    outline: none;
    margin: 0 7px !important;
}

.hero-slider-pagination .swiper-pagination-bullet::before,
.swiper-pagination-bullet::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.hero-slider-pagination .swiper-pagination-bullet:hover,
.swiper-pagination-bullet:hover {
    background: #1fb8b3 !important; /* رنگ فیروزه‌ای روی hover */
    opacity: 0.8 !important;
    transform: scale(1.15) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.hero-slider-pagination .swiper-pagination-bullet:hover::before,
.swiper-pagination-bullet:hover::before {
    background: rgba(255, 255, 255, 0.8);
    transform: translate(-50%, -50%) scale(1.2);
}

.hero-slider-pagination .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
    background: #1fb8b3 !important; /* رنگ فیروزه‌ای برای فعال */
    opacity: 1 !important;
    transform: scale(1.3) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 15px rgba(31, 184, 179, 0.4) !important;
}

.hero-slider-pagination .swiper-pagination-bullet-active::before,
.swiper-pagination-bullet-active::before {
    background: rgba(255, 255, 255, 0.9);
    transform: translate(-50%, -50%) scale(1.4);
}

/* Dynamic Bullets - بهبود یافته */
.hero-slider-pagination .swiper-pagination-bullet-active-main,
.swiper-pagination-bullet-active-main {
    background: #1fb8b3 !important;
    box-shadow: 0 0 20px rgba(31, 184, 179, 0.6) !important;
}

.hero-slider-pagination .swiper-pagination-bullet-active-prev,
.hero-slider-pagination .swiper-pagination-bullet-active-next,
.swiper-pagination-bullet-active-prev,
.swiper-pagination-bullet-active-next {
    background: #805db6 !important; /* بنفش برای مجاور */
    opacity: 0.7 !important;
    transform: scale(1.1) !important;
}

.hero-slider-pagination .swiper-pagination-bullet-active-prev-prev,
.hero-slider-pagination .swiper-pagination-bullet-active-next-next,
.swiper-pagination-bullet-active-prev-prev,
.swiper-pagination-bullet-active-next-next {
    background: #805db6 !important; /* بنفش برای دورتر */
    opacity: 0.4 !important;
    transform: scale(0.9) !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hero-slider-pagination,
    .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
    .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
        bottom: 25px;
        gap: 12px;
        height: 80px;
    }
    
    .hero-slider-pagination .swiper-pagination-bullet,
    .swiper-pagination-bullet {
        width: 12px !important;
        height: 12px !important;
        margin: 0 6px !important;
    }
    
    .hero-slider-pagination .swiper-pagination-bullet::before,
    .swiper-pagination-bullet::before {
        width: 5px;
        height: 5px;
    }
    
    .hero-slider-pagination .swiper-pagination-bullet-active,
    .swiper-pagination-bullet-active {
        transform: scale(1.2) !important;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .hero-slider-pagination,
    .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
    .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
        bottom: 20px;
        gap: 10px;
        height: 70px;
    }
    
    .hero-slider-pagination .swiper-pagination-bullet,
    .swiper-pagination-bullet {
        width: 10px !important;
        height: 10px !important;
        margin: 0 5px !important;
    }
    
    .hero-slider-pagination .swiper-pagination-bullet::before,
    .swiper-pagination-bullet::before {
        width: 4px;
        height: 4px;
    }
    
    .hero-slider-pagination .swiper-pagination-bullet-active,
    .swiper-pagination-bullet-active {
        transform: scale(1.1) !important;
        box-shadow: 0 0 10px rgba(31, 184, 179, 0.3) !important;
    }
}

/* Large Desktop - Navigation Removed */

/* RTL Support - Navigation Removed */

/* Animation for slide content - ساده و مرکز */
.hero-swiper .swiper-slide .intro__content {
    opacity: 1;
    transform: translateY(0);
}

/* Logo animation only for first slide - ساده */
.hero-swiper .swiper-slide:first-child .intro__header {
    opacity: 1;
    transform: translateY(0);
}

/* Video background for slides */
.hero-swiper .swiper-slide .video-background,
.hero-swiper .swiper-slide .gif-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-swiper .swiper-slide .video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-swiper .swiper-slide .color-layer {
    z-index: 2;
}

.hero-swiper .swiper-slide .intro__header,
.hero-swiper .swiper-slide .intro__content,
.hero-swiper .swiper-slide .intro__scroll {
    position: relative;
    z-index: 3;
}

/* Loading state */
.hero-swiper.swiper-initialized {
    visibility: visible;
}

.hero-swiper:not(.swiper-initialized) {
    visibility: hidden;
}

/* Text Color Variations */
.hero-swiper .swiper-slide.text-light {
    color: white;
}

.hero-swiper .swiper-slide.text-light .headline__subtitle {
    color: rgba(255, 255, 255, 0.8);
}

/* Subtitle styling */
.headline__subtitle {  
    width: 100%;  
    display: block;  
}

.hero-swiper .swiper-slide.text-light .btn-solid-light {
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    border-color: rgba(255, 255, 255, 0.9);
}

.hero-swiper .swiper-slide.text-light .btn-outline-light {
    color: white;
    border-color: rgba(255, 255, 255, 0.7);
}

.hero-swiper .swiper-slide.text-dark {
    color: #333;
}

.hero-swiper .swiper-slide.text-dark h1,
.hero-swiper .swiper-slide.text-dark p {
    color: #333;
}

.hero-swiper .swiper-slide.text-dark .headline__subtitle {
    color: rgba(51, 51, 51, 0.8);
}

.hero-swiper .swiper-slide.text-dark .btn-solid-light {
    background-color: #333;
    color: white;
    border-color: #333;
}

.hero-swiper .swiper-slide.text-dark .btn-outline-light {
    color: #333;
    border-color: rgba(51, 51, 51, 0.7);
}

/* Custom Colors - اولویت دادن به رنگ‌های انتخابی */
.hero-swiper .swiper-slide h1[style*="color"],
.hero-swiper .swiper-slide .headline__subtitle[style*="color"],
.hero-swiper .swiper-slide p[style*="color"] {
    /* رنگ‌های inline style اولویت دارند */
}

.hero-swiper .swiper-slide .btn[style*="background-color"],
.hero-swiper .swiper-slide .btn[style*="border-color"] {
    /* رنگ‌های دکمه‌های custom */
    transition: all 0.3s ease;
}

.hero-swiper .swiper-slide .btn[style*="background-color"]:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.hero-swiper .swiper-slide .btn[style*="border-color"]:hover {
    opacity: 0.8;
}

/* Color Layer Variations */
.hero-swiper .swiper-slide .color-layer.color-layer-light {
    background: rgba(255, 255, 255, 0.3);
}

/* Parallax Effect for Slider */
.hero-swiper .swiper-slide {
    will-change: transform;
}

.hero-swiper .swiper-slide .color-layer.parallax-layer {
    will-change: transform;
}

/* Smooth transitions for background changes */
.hero-swiper .swiper-slide {
    transition: background-image 0.5s ease-in-out;
}

/* Global fixes for parallax gaps */
.intro,
.intro.hero-slider {
    margin-bottom: 0 !important;
    position: relative;
    z-index: 1;
}

/* Ensure smooth connection between sections */
section {
    margin-top: 0;
    position: relative;
}

section.clients-slider {
    position: relative;
    z-index: 10;
    /* کاهش padding بالا برای رفع gap */
    padding-top: 40px !important;
    /* افزایش padding پایین برای رفع فضای سفید */
    padding-bottom: 120px !important;
}

/* رفع gap در حالت های مختلف */
.intro + section,
.intro.hero-slider + section {
    margin-top: -20px;
}

/* Fix any potential white space issues */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* تنظیمات بیشتر برای hero */
.hero-swiper .swiper-slide {
    /* اطمینان از عدم وجود margin */
    margin: 0;
    padding: 0;
}

/* Smooth transition برای تغییرات transform */
section.clients-slider {
    will-change: transform;
}

/* رفع دقیق gap با negative margin */
.intro.hero-slider {
    margin-bottom: -10px !important;
}

.intro.hero-slider + section {
    position: relative;
    z-index: 5;
}

/* رفع gap بین demo sections و subscribe */
.demo.last-section {
  margin-bottom: 0;
  padding-bottom: 0;
}

.demo + .subscribe {
  margin-top: 0;
}

/* تنظیمات اضافی برای رفع gap */
section.demo:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
}

section.demo + div.subscribe {
  margin-top: 0;
}

/* تنظیم دقیق برای عدم جهش */
@media (min-width: 1200px) {
    .intro.hero-slider + section {
        transition: none;
    }
    
    /* Parallax فقط برای slides با تصویر */
    .hero-swiper .swiper-slide[style*="background-image"] {
        background-attachment: fixed !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
}

/* اطمینان از لود شدن تصاویر در تمام حالات */
.hero-swiper .swiper-slide[data-bg-image] {
    /* تصاویر از JavaScript اعمال می‌شوند */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Override Swiper Default Styles - اجباری */
.hero-swiper .swiper-pagination-bullet {
    background: #805db6 !important; /* بنفش غیرفعال */
    opacity: 0.6 !important;
}

.hero-swiper .swiper-pagination-bullet-active {
    background: #1fb8b3 !important; /* فیروزه‌ای فعال */
    opacity: 1 !important;
}

.hero-swiper .swiper-pagination-bullet-active-prev,
.hero-swiper .swiper-pagination-bullet-active-next {
    background: #805db6 !important; /* بنفش مجاور */
    opacity: 0.7 !important;
}

.hero-swiper .swiper-pagination-bullet-active-prev-prev,
.hero-swiper .swiper-pagination-bullet-active-next-next {
    background: #805db6 !important; /* بنفش دورتر */
    opacity: 0.4 !important;
}

/* Pagination - حالت single slide */
.intro.hero-single .hero-slider-pagination {
    display: none; /* مخفی کردن pagination برای single slide */
}

/* Debug - نمایش رنگ پس‌زمینه برای slides بدون تصویر */
.hero-swiper .swiper-slide:not([data-bg-image]):not([class*="has-video"]):not([class*="gif"]) {
    background-color: #0b0b0b;
}

/* Mobile browsers have dynamic viewport bars; avoid clipping hero content. */
@media (max-width: 767.98px) {
    .intro,
    .intro.hero-slider {
        height: auto;
        min-height: max(56rem, 100svh);
    }

    .hero-swiper .swiper-slide {
        height: auto;
        min-height: max(56rem, 100svh);
    }

    .hero-swiper .swiper-slide .intro__content {
        min-height: max(56rem, 100svh);
        padding-block: 8rem;
    }

    .intro.hero-slider { margin-bottom: 0 !important; }
    .intro + section,
    .intro.hero-slider + section { margin-top: 0; }
}

@media (max-width: 480px) {
    .intro,
    .intro.hero-slider,
    .hero-swiper .swiper-slide { min-height: max(52rem, 100svh); }

    .hero-swiper .swiper-slide .intro__content {
        min-height: max(52rem, 100svh);
        padding-block: 7rem;
    }
}