/* یک ریست ساده برای box-sizing به عنوان یک best practice */
*, *::before, *::after {
    box-sizing: border-box;
}

/* استایل های بنر روزانه */
.daily-banner {
    width: 98%;
    margin: 1.2vw 1%;
    border-radius: 1vw;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.banner-image {
    width: 100%;
    object-fit: cover; 
    display: block;
    border-radius: 1vw;
}

/* استایل های اسلایدر - شامل تغییرات جدید و بهبود یافته */
.slider-container {
    position: relative; 
    width: 98%;
    height: 42vw; 
    margin: 1.7vw 1%;
    overflow: hidden;
    border-radius: 1vw;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    touch-action: pan-y; /* اجازه اسکرول عمودی را می دهد اما افقی را برای اسلایدر رزرو می کند */
}

/* هر تگ <a> که اسلاید را شامل می شود */
.slider-container > a {
    position: absolute; /* هر لینک را مطلق قرار می دهیم */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* تنظیمات اولیه برای اسلایدهای غیرفعال */
    opacity: 0;
    visibility: hidden; /* پنهان کردن از نظر بصری و از نظر تعامل */
    pointer-events: none; /* جلوگیری از دریافت رویدادهای لمسی/کلیک */
    z-index: 1; /* لایه پایه برای اسلایدهای غیرفعال */
    
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; /* انیمیشن نرم */
}

/* اسلاید فعال */
.slider-container > a.active {
    opacity: 1;
    visibility: visible; /* نمایش اسلاید فعال */
    pointer-events: auto; /* فعال کردن تعامل برای اسلاید فعال */
    z-index: 2; /* بالاترین لایه برای اسلاید فعال */
}

/* div.slide داخل تگ <a> - فقط برای محتوا */
.slide {
    width: 100%;
    height: 100%;
    /* نیازی به position: absolute در اینجا نیست چون والد (<a>) خودش مطلق است */
    /* display: block به صورت پیش فرض است، نیازی به override نیست */
}

.slide img {
    width: 100%;
    height: 100%; /* تصویر 100% ارتفاع و عرض اسلاید را بگیرد */
    object-fit: cover; /* برای پوشش کامل فضای اسلاید بدون تغییر نسبت تصویر */
    display: block;
}

/* استایل های جدید برای عنوان اسلایدر (قاب سیاه شفاف و وسط چین) */
.slider-title {
    position: absolute;
    bottom: 0;
    left: 50%; 
    transform: translateX(-50%); 
    width: 100% ;
    padding: 10px 15px; 
    background: rgba(0, 0, 0, 0.95);
    color: #fff; 
    text-align: center;
    font-size: clamp(8px,1.5vw,20px);
    line-height: 1.4;
    z-index: 7; 
    box-sizing: border-box;
}

/* استایل برای دکمه های قبلی و بعدی */
.slider-btn {
    position: absolute;
    top: 47%;
    transform: translateY(-50%);
    background-color: transparent; 
    border: none;
    color: white; 
    width: 50px; 
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 50%; 
    z-index: 999; /* افزایش z-index برای اطمینان از کلیک پذیری */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: none;
    box-sizing: border-box; /* اطمینان از کنترل ابعاد */
}

.slider-btn:hover {
    background-color: rgba(0, 0, 0, 0.2); 
    transform: translateY(-50%) scale(1.1); 
    box-shadow: 0 2px 8px rgba(0,0,0,0.3); 
}

/* استایل برای آیکون SVG درون دکمه */
.slider-btn svg {
    width: 32px; 
    height: 32px;
    fill: white; 
    filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.7));
}

.prev-btn {
    left: 0; 
}

.next-btn {
    right: 0; 
}

/* استایل برای کانتینر نقاط ناوبری */
.slider-dots {
    position: absolute;
    bottom: clamp(6px, 1vw, 10px);
    left: 50%;
    transform: translateX(-50%); 
    display: flex; 
    gap: 1vw; 
    z-index: 999; /* افزایش z-index برای اطمینان از کلیک پذیری */
}

/* استایل برای هر نقطه */
.dot {
    width: clamp(8px, 1vw, 15px);
    height: clamp(8px, 1vw, 15px);
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%; 
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.2); 
}

/* استایل برای نقطه فعال */
.dot.active {
    background-color: #007bff;
    transform: scale(1.2);
    border-color: #007bff;
}

/* استایل برای بخش index-page */
.index-page {
    height: 60vh;
    background-color: white;
}