/* ==========================================================================
   ۱. تنظیمات پایه و متغیرها (Variables & Reset)
   ========================================================================== */
:root {
    /* --- پالت اصلی شما --- */
    --color-primary: #1c931c;       /* سبز تیره و غنی */
    --color-secondary: #F6C90E;     /* زرد آفتابگردان */
    --color-accent: #FF0000;        /* قرمز */
    --color-light: #FFFFFF;         /* سفید */
    --color-dark: #1d3557;          /* سرمه‌ای تیره */
    --color-neutral-bg: #FFFFFF;    /* خاکستری بسیار روشن */

    /* --- ۹ رنگ اصیل و معروف ایرانی (Persian Colors) --- */
    --color-persian-blue: #1C39BB;  /* آبی پرشین (لاجوردی) */
    --color-persian-red: #CC3333;   /* قرمز پرشین (رنگ روناسی/فرش) */
    --color-persian-green: #00A693; /* سبز پرشین (فیروزه‌ای تیره) */
    --color-persian-orange: #D99058;/* نارنجی پرشین (اخرایی) */
    --color-persian-pink: #F77FBE;  /* صورتی پرشین (صورتی ایرانی) */
    --color-persian-rose: #FE28A2;  /* رز پرشین (سرخابی) */
    --color-persian-plum: #701C1C;  /* آلویی پرشین (عنابی تیره) */
    --color-persian-indigo: #32127A;/* نیلی پرشین (بنفش تیره) */
    --color-persian-yellow: #E9D66B;/* زرد پرشین (زرد زعفرانی) */
}
body {
    background-color: var(--color-neutral-bg);
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    direction: rtl;
    text-align: right;
}

/* ==========================================================================
   ۲. المان‌های عمومی و کامپوننت‌ها (UI Components)
   ========================================================================== */
/* کارت‌ها (Cards) */
.card {
    border-radius: 18px;
    overflow: hidden;
}
.card img {
    height: 320px;
    object-fit: cover;
}

/* دکمه‌ها (Buttons) */
.btn-warning {
    background-color: var(--color-secondary);
    border: none;
    border-radius: 12px;
    font-weight: bold;
    transition: 0.2s;
}
.btn-warning:hover {
    transform: translateY(-2px);
}

/* فرم‌ها (Forms) */
.form-control,
.form-select {
    border-radius: 12px;
    padding: 12px;
}

/* منوهای دراپ‌داون عمومی (Dropdowns) */
.dropdown-menu {
    border: none !important;
    border-radius: 18px !important;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    min-width: 220px;
}
.dropdown-item {
    border-radius: 12px;
    padding: 10px 15px;
    transition: 0.2s;
}
.dropdown-item:hover {
    background-color: #f8f9fa;
}
.no-caret::after {
    display: none !important;
}

/* هدرهای جانبی (Offcanvas) */
.offcanvas {
    border: none;
}
.offcanvas-header {
    background: var(--color-primary);
    color: #fff;
}
.offcanvas-body a {
    font-weight: 600;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}
.offcanvas-body a:hover {
    color: var(--color-primary) !important;
}

/* ==========================================================================
   ۳. هدر و ناوبری (Navbar & Cart Dropdown)
   ========================================================================== */
.modern-navbar{
    background:#fff;
    min-height:90px;
    border-bottom:1px solid rgba(0,0,0,.06);
    box-shadow:0 4px 20px rgba(0,0,0,.04);
}

.modern-navbar .navbar-brand{
    color:var(--color-primary);
    font-size:2rem;
    font-weight:900;
    text-decoration:none;
}

.modern-navbar .navbar-brand:hover{
    color:var(--color-secondary);
}

.modern-navbar .btn{
    color:var(--color-dark);
}

.modern-navbar .btn:hover{
    color:var(--color-primary);
}

/* 🌻 استایل‌های اختصاصی هدر آفتابگردانی زردونه 🌻 */
.modern-navbar {
    background-color: var(--color-light);
    border-bottom: 3px solid var(--color-secondary); /* خط زرد آفتابگردان زیر هدر */
    padding-top: 20px !important;    /* پهن‌تر شدن هدر از بالا */
    padding-bottom: 20px !important; /* پهن‌تر شدن هدر از پایین */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* رنگ برند زردونه */
.navbar-brand {
    font-weight: 900 !important;
    font-size: 1.6rem !important;
    color: var(--color-primary) !important;
    transition: color 0.3s ease;
}
.navbar-brand:hover {
    color: var(--color-secondary) !important;
}

/* استایل‌های نوار دسته‌بندی و لینک‌های ثابت زیر هدر */
.category-strip {
    background-color: var(--color-primary) !important;
    padding: 10px 0;
}

.category-strip-link {
    color: var(--color-light) !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 8px 16px;
    border-radius: 12px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* افکت هاور دکمه‌های دسته‌بندی با تم زرد آفتابگردان */
.category-strip-link:hover {
    background-color: var(--color-secondary) !important;
    color: var(--color-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(246, 201, 14, 0.3);
}

/* مینی‌کارت و منوی پروفایل هماهنگ با تم */
.mini-cart, .dropdown-menu {
    border-top: 4px solid var(--color-secondary) !important; /* خط بالای منوها */
}

/* تغییر رنگ آیکون‌های منوی همبرگری و هدر به سبز طبیعت یا سرمه‌ای */
.bi-list {
    color: var(--color-primary) !important;
}
.cart-wrapper .bi-bag, .bi-person-circle {
    color: var(--color-dark) !important;
    transition: color 0.3s;
}
.cart-wrapper .cart-btn:hover .bi-bag, .profile-btn:hover .bi-person-circle {
    color: var(--color-primary) !important; /* تغییر رنگ آیکون‌ها به سبز در هاور */
}

/* بج تعداد سبد خرید */
.small-cart-badge {
    background-color: var(--color-accent) !important; /* قرمز جذاب برای جلب توجه */
    color: white;
    border-radius: 50%;
    padding: 3px 7px;
    font-size: 0.75rem;
    position: absolute;
    top: 0;
    right: 0;
}

/* وسط هدر */
.navbar-center{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    max-width:none;
    margin:0 40px;
}

/* سرچ */
.navbar-search{
    flex:1;
    max-width:650px;
}

.navbar-search input{
    width:100%;
    height:52px;
    border-radius:50px;
    border:1px solid #ddd;
    background:#f8f9fa;
    padding:0 25px;
    text-align:center;
    font-size:.95rem;
    transition:.25s;
}

.navbar-search input:focus{
    background:#fff;
    border-color:var(--color-secondary);
    box-shadow: 0 0 0 4px rgba(246,201,14,.15);
    outline:none;
}

/* دسته بندی در نوبار قدیمی */
.category-dropdown {
    position: relative;
}
.category-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0;
    z-index: 999;
}
.category-dropdown:hover > .dropdown-menu {
    display: block;
}

/* سبد خرید در هدر */
.cart-wrapper {
    position: relative;
    display: inline-block;
}
.cart-btn {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-weight: bold;
    position: relative;
    box-shadow: none !important;
}
.cart-btn i {
    color: #212529;
    transition: color 0.2s;
}
.cart-btn:hover i {
    color: #ffc107;
}

/* مینی کارت سبد خرید */
.mini-cart {
    position: absolute;
    top: 110%;
    left: 0;
    width: 320px;
    background: #fff;
    border-radius: 18px;
    padding: 15px;
    display: none;
    z-index: 9999;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 15px 35px rgba(0,0,0,.12);
}

/* بج‌های سبد خرید */
.navbar-cart-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    background: red;
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.small-cart-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-secondary);
    color: #000;
    font-size: .75rem;
    font-weight: 700;
    border-radius: 50%;
}

/* ==========================================================================
   ۴. آرشیو محصولات و صفحات دسته‌بندی (Product Grid & Category Cards)
   ========================================================================== */
.product-card {
    border-radius: 18px;
    overflow: hidden;
    transition: 0.25s;
    background-color: white;
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}
.product-image-wrapper {
    position: relative;
    overflow: hidden;
    display: block;
    z-index: 1;
}
.product-image,
.primary-image,
.hover-image {
    width: 100%;
    height: 340px;
    object-fit: cover;
    transition: 0.3s;
}
.hover-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.product-card:hover .hover-image {
    opacity: 1;
}
.product-card:hover .primary-image {
    opacity: 0;
}
.product-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 0.8rem;
    padding: 8px 10px;
    border-radius: 10px;
}

/* کارت‌های دسته‌بندی اصلی (Category Section) */
.category-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    cursor: pointer;
}
.category-image {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: .4s;
}
.category-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.4rem;
    font-weight: 700;
    background: rgba(0,0,0,.25);
}
.category-card:hover .category-image {
    transform: scale(1.05);
}

/* ==========================================================================
   ۵. صفحه جزئیات محصول (Product Single / Details)
   ========================================================================== */
.product-main-image{
    width:100%;
    height:650px;
    object-fit:cover;
    border-radius:20px;
    transition:.3s;
}

.product-main-image:hover{
    transform:scale(1.02);
}

.gallery-thumb{
    width:90px;
    height:90px;
    object-fit:cover;
    border-radius:14px;
    cursor:pointer;
    border:2px solid transparent;
    transition:.3s;
}

.gallery-thumb:hover{
    transform:translateY(-3px);
}

.active-thumb{
    border-color:var(--color-secondary);
}

/* دکمه علاقه‌مندی‌ها (Wishlist) */
.wishlist-btn {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #999;
    font-size: 2.0rem;
    cursor: pointer;
    z-index: 20;
    transition: transform .25s ease, color .25s ease;
}
.wishlist-btn:hover {
    color: #dc3545 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    animation: heartBeat 1s infinite;
}
.wishlist-btn:focus,
.wishlist-btn:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #dc3545 !important;
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.15); }
    40% { transform: scale(1); }
    60% { transform: scale(1.18); }
    100% { transform: scale(1); }
}


.quick-view-btn {
    position: absolute;
    top: 50px;
    left: 5px;
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    color: #999;
    font-size: 2rem;
    text-decoration: none;
    cursor: pointer;
    z-index: 20;

    opacity: 1;      /* همیشه نمایش */
    transform: none; /* حذف انیمیشن ورود */
    transition: color .25s ease;
}



/* تغییرات جذاب بخش هوور و افکت پلک زدن */
.quick-view-btn:hover {
    color: #f7b500; /* رنگ زرد جذاب هنگام هاور */
    /* فعال شدن انیمیشن پلک زدن: مدت زمان 0.4 ثانیه و تکرار بی‌نهایت */
    animation: blink-and-pulse 1.5s ease-in-out infinite alternate;
}

/* تعریف انیمیشن چشمک‌زن (پلک زدن + کمی تغییر مقیاس هوور) */
@keyframes blink-and-pulse {
    0% {
        opacity: 1;
        transform: scale(1.1); /* دکمه یکم بزرگتر و عمیق‌تر میشه */
    }
    40% {
        opacity: 0.2; /* چشمک زدن و کم شدن دید (پلک زدن اول) */
    }
    60% {
        opacity: 1; /* باز شدن سریع چشم */
    }
    100% {
        opacity: 1;
        transform: scale(1); /* برگشت به سایز عادی */
    }
}

/* ==========================================================================
   ۶. المان‌های شناور و ریسپانسیو (Floating Elements & Media Queries)
   ========================================================================== */
/* سبد خرید شناور */
.floating-cart-btn {
    position: fixed;
    bottom: 25px;
    left: 25px;
    width: 60px;
    height: 60px;
    background: var(--color-accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    z-index: 999;
    transition: 0.3s;
}
.floating-cart-btn:hover {
    transform: scale(1.08);
    color: white;
}
.floating-cart-btn .cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--color-secondary);
    color: black;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ریسپانسیو عمومی موبایل */
@media (max-width: 768px) {
    .product-image, 
    .primary-image, 
    .hover-image {
        height: 240px;
    }
    .product-main-image {
        height: 420px;
    }
}

/* =========================
   CATEGORY STRIP
========================= */
.category-strip-link{
    position:relative;
}

.category-strip-link::after{
    content:'';
    position:absolute;
    right:0;
    bottom:-8px;
    width:0;
    height:3px;
    background:var(--color-secondary);
    transition:.25s;
}

.category-strip-link:hover::after{
    width:100%;
}

.color-circle{
    width:55px;
    height:55px;
    border-radius:50%;
    border:3px solid #ddd;
    cursor:pointer;
    transition:.3s;
    display:block;
}

input[name="color"]:checked + .color-circle{
    border:3px solid var(--color-secondary);
    transform:scale(1.15);
}

/* ==========================
   Size Selector
========================== */
.size-box{
    min-width:70px;
    height:48px;
    padding:0 16px;
    border:2px solid #ddd;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-weight:700;
    font-size:.95rem;
    transition:.25s;
    background:#fff;
}

.size-box:hover{
    border-color:var(--color-primary);
    transform:translateY(-2px);
}

input[name="size"]:checked + .size-box{
    background:var(--color-primary);
    color:#fff;
    border-color:var(--color-primary);
}

/* سایز ناموجود */
.size-disabled{
    opacity:.45;
    background:#f5f5f5;
    color:#888;
    border-color:#e0e0e0;
    text-decoration:line-through;
    cursor:not-allowed;
    pointer-events:none;
}

/* تعداد */
.quantity-box{
    width:90px;
    text-align:center;
    font-weight:700;
}

/* ==========================================================================
   MOVED FROM base.html
   ========================================================================== */
html { scroll-behavior: smooth; }

.nav-category-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--color-light);
    min-width: 220px;
    padding: 10px 0;
    list-style: none;
    z-index: 1050;
    border-top: 4px solid var(--color-secondary) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 0 0 12px 12px;
}
.nav-category-menu li a {
    display: block;
    padding: 10px 20px;
    color: var(--color-dark);
    text-decoration: none;
    font-weight: bold;
    transition: background 0.2s, color 0.2s;
}
.nav-category-menu li a:hover {
    background-color: #f8f9fa;
    color: var(--color-primary);
}

/* 📱 استایل دکمه همبرگری موبایل */
@media (max-width: 991.98px) {
    .modern-navbar .bi-list {
        color: var(--color-dark) !important;
        font-size: 2rem !important;
        transition: color 0.3s ease;
    }
}

/* باز شدن منوی آبشاری با هوور ماوس (فقط دسکتاپ) */
@media (min-width: 992px) {
    .custom-hover-dropdown:hover .dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .custom-hover-dropdown .dropdown-menu {
        display: none !important;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-in-out;
        margin-top: 0 !important;
    }
}

/* 📱 استایل‌های جدید برای منوی پایینی چسبان در موبایل (Mobile Bottom Nav) */
@media (max-width: 991.98px) {
    .mobile-bottom-nav {
        background-color: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px);
        box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.08) !important;
        border-radius: 20px 20px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 10px) !important;
    }
    .mobile-bottom-nav a {
        transition: all 0.2s ease;
        color: #555 !important;
    }
    .mobile-bottom-nav a:active,
    .mobile-bottom-nav a:focus {
        color: var(--color-primary) !important;
        transform: scale(1.05);
    }
    /* بج تعداد سبد خرید در منوی پایین */
    .mobile-bottom-nav .badge {
        font-size: 9px !important;
        padding: 4px 6px !important;
        top: 2px !important;
    }
}
/* مخفی کردن دکمه سبد خرید شناور و زشت قدیمی در حالت موبایل */
@media (max-width: 991.98px) {
    .floating-cart-btn {
        display: none !important;
    }
}

@media (max-width: 991.98px) {

    .navbar-center {
        margin: 0 auto !important;
    }

    .back-btn {
        position: absolute !important;
        left: 10px !important;
        right: unset !important;
        top: 50%;
        transform: translateY(-50%);
        z-index: 9999;
        padding: 0;
    }

    .back-btn i {
        font-size: 32px;
        color: var(--color-primary);
        transition: .2s;
    }

    .back-btn:hover i {
        color: var(--color-secondary);
    }
}



.back-btn i{
    font-size:32px;
    color:var(--color-primary);
    scale:1 !important;
    transition:.2s;
}

.back-btn:hover i{
    color:var(--color-secondary);
}


#desktopProfileTabs .nav-link.active {
    background-color: #ffc107 !important;
    color: #212529 !important;
}
.transition-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.transition-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

<style>
/* استایل اصلاحی برای جلوگیری از بیرون زدن منوی پروفایل در دسکتاپ */
.custom-hover-dropdown .dropdown-menu {
    right: 0 !important;
    left: auto !important;
    transform: translateX(10px); /* تنظیم دقیق جهت تراز شدن با لبه صفحه */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    border: 1px solid #eee !important;
}
.transition-hover:hover {
    background-color: #f8f9fa !important;
    transform: translateY(-2px);
    transition: all 0.2s ease;
}
</style>

.moving {
    opacity: 0;
    transform: scale(0.95);
    transition: 0.3s;
}


/* متمایز کردن ظاهر دایره رنگ انتخاب شده */
.color-option input[type="radio"]:checked + div {
    border-color: #0d6efd !important; /* رنگ اصلی بوت‌استرپ */
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.3) !important;
    transform: scale(1.1);
    transition: all 0.2s ease;
}

/* ۱. افزایش اندازه پنجره */
.modal-dialog {
    max-width: 1000px !important; /* پهنای دلخواه */
}

/* ۲. شیشه‌ای کردن (Glassmorphism) */
.modal-content {
    background: rgba(255, 255, 255, 0.7) !important; /* پس‌زمینه شفاف */
    backdrop-filter: blur(15px) !important; /* محو کردن پشت پنجره */
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

/* انیمیشن محو شدن و بالا آمدن محصولات */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-products {
    animation: fadeInUp 0.5s ease-in-out forwards;
}

/* استایل دکمه‌های دسته‌بندی */
.category-btn {
    margin: 0 10px;
    padding: 5px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s;
}

.category-btn.active {
    color: #717fe0;
    border-bottom: 2px solid #717fe0;
}





/* ========================================= */
/* ۱. تنظیم عرض تمام‌صفحه برای اسلایدر */
/* ========================================= */
#heroCarousel {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    transition: background-color 0.8s ease-in-out;
}

/* * راز رفع مشکل بلنک (خالی شدن صفحه): 
 * زمان فید شدن کل اسلاید را بالا می‌بریم و اسلاید جدید را روی اسلاید قدیم می‌اندازیم
 */
#heroCarousel.carousel-fade .carousel-item {
    transition: opacity 1s ease-in-out !important; /* زمان ترکیب دو اسلاید */
    z-index: 1; 
}
#heroCarousel.carousel-fade .carousel-item.active {
    z-index: 2; /* اسلاید جدید روی اسلاید قدیم می‌آید */
}

/* ۲. پنهان کردن کارت‌ها در ابتدا برای شروع انیمیشن */
#heroCarousel .carousel-item .hero-product-card {
    opacity: 0;
    transform: translateY(50px);
}

/* ========================================= */
/* ۳. تعریف انیمیشن‌های متنوع (Keyframes) */
/* ========================================= */

/* ظاهر شدن از پایین */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ظاهر شدن با زوم (بزرگ شدن) */
@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* ظاهر شدن از سمت راست */
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ظاهر شدن از سمت چپ */
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

/* --- انیمیشن جدید برای رفتن (خروج) عکس‌های قبلی --- */
@keyframes fadeOutDown {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(30px) scale(0.95); }
}

/* ========================================= */
/* ۴. کلاس‌های اختصاصی برای اعمال انیمیشن‌ها */
/* ========================================= */
.anim-fade-up { animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.anim-zoom-in { animation: zoomIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.anim-fade-right { animation: fadeInRight 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.anim-fade-left { animation: fadeInLeft 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* تنظیم تاخیر انیمیشن‌ها هنگام ورود (کارت اول، دوم و سوم) */
#heroCarousel .carousel-item .row > div:nth-child(1) .hero-product-card {
    animation-delay: 0.1s;
}
#heroCarousel .carousel-item .row > div:nth-child(2) .hero-product-card {
    animation-delay: 0.3s;
}
#heroCarousel .carousel-item .row > div:nth-child(3) .hero-product-card {
    animation-delay: 0.5s;
}

/* * اعمال انیمیشن خروج به کارت‌های اسلایدی که در حال رفتن است 
 * این بخش باعث می‌شود کارت‌های قدیمی همزمان با آمدن کارت‌های جدید به نرمی غیب شوند
 */
#heroCarousel .carousel-item.active.carousel-item-start .hero-product-card,
#heroCarousel .carousel-item.active.carousel-item-end .hero-product-card {
    animation: fadeOutDown 0.6s ease both !important; /* اجرای انیمیشن خروج */
    animation-delay: 0s !important; /* تاخیر را صفر می‌کنیم که سریع شروع به رفتن کنند */
}

/* ========================================= */
/* ۵. افکت هاور هنگام رفتن موس روی کل کارت */
/* ========================================= */
.hero-product-card {
    transition: transform 0.3s ease;
    cursor: pointer;
}

.hero-product-card:hover {
    transform: translateY(-8px) scale(1.02);
}

.hero-product-card:hover .hero-img-wrapper img {
    box-shadow: 0 15px 35px rgba(0,0,0,0.6) !important;
}

/* =================================================== */
/* کدهای جادویی برای حل مشکل کلیک و لینک اسلایدر */
/* =================================================== */

/* ۱. اولویت (z-index) کانتینر اصلی اسلاید را بالا می‌بریم */
#heroCarousel .carousel-item.active .container {
    z-index: 10;
}

/* ۲. غیرفعال کردن مناطق مخفی Prev و Next بوت‌استرپ */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
    display: none !important; 
    pointer-events: none !important; 
}

/* ۳. اختیاری: فقط برای اینکه مطمئن شویم خود لینک‌ها z-index بالایی دارند */
.hero-product-card {
    position: relative;
    z-index: 20;
}

#mobile-categories-section .col-3 a:hover img {
    transform: scale(1.1);
}

#mobile-categories-section .col-3 a div {
    transition: all 0.3s ease;
}

/* بدنه اصلی دکمه: مستطیل با سر مثلثی، چسبیده به کف صفحه */
    .btn-to-top-ribbon {
        position: fixed;
        bottom: 0;           /* چسبیده به پایین‌ترین نقطه */
        right: 30px;         /* قرارگیری در سمت راست */
        width: 45px;         /* عرض دکمه */
        height: 55px;        /* ارتفاع دکمه */
        background-color: #c70505; /* رنگ سبز شما */
        border: none;
        
        /* 🔥 این خط جادویی، مربع را به مستطیلی با سر مثلثی تبدیل می‌کند */
        clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0% 100%, 0% 25%);
        
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 8px;    /* هول دادن فلش کمی به پایین تا در نوک مثلث گیر نکند */
        cursor: pointer;
        z-index: 9999;
        
        /* تنظیمات مخفی بودن در حالت عادی */
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px); /* موقع ظاهر شدن از پایین میاد بالا */
        transition: all 0.4s ease-in-out;
    }

    /* کلاسی که جاوااسکریپت موقع اسکرول به دکمه اضافه می‌کند */
    .btn-to-top-ribbon.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* افکت هاور (اختیاری: موقعی که موس میره روش قدش یکم بلندتر میشه) */
    .btn-to-top-ribbon:hover {
        background-color: #157315;
        height: 65px;
    }

    /* 🔥 استایل پیکان زرد و انیمیشن خاموش/روشن شدن */
    .btn-to-top-ribbon .arrow-icon {
        color: #ffc107;      /* رنگ زرد هشدار/زردونه */
        font-size: 1.8rem;
        /* اتصال انیمیشن چشمک‌زن */
        animation: slow-blink 2s infinite ease-in-out;
    }

    /* انیمیشن آهسته خاموش و روشن شدن (Pulse) */
    @keyframes slow-blink {
        0% { opacity: 0.2; }
        50% { opacity: 1; text-shadow: 0 0 10px rgba(255, 193, 7, 0.8); } /* در اوج روشنی یک هاله زرد هم می‌گیرد */
        100% { opacity: 0.2; }
    }

    /* مخفی کردن دکمه بازگشت به بالا در موبایل و تبلت‌های کوچک */
    @media (max-width: 991.98px) {
        .btn-to-top-ribbon {
            display: none !important;
        }
    }



/* ====================================================
   🔥 سیستم لایت‌باکس (بزرگنمایی) فوق مدرن
   ==================================================== */

/* ===================================
   FULLSCREEN LIGHTBOX
=================================== */

#custom-lightbox {
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, .92);

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    visibility: hidden;

    transition: .25s ease;

    z-index: 999999;
}

#custom-lightbox.show {
    opacity: 1;
    visibility: visible;
}

#custom-lightbox.d-none {
    display: none !important;
}

.lightbox-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, .92);
    backdrop-filter: blur(5px);
}

.lightbox-content {
    position: relative;

    width: 100vw;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 100000;
}

#lightbox-main-img {
    max-width: 95vw;
    max-height: 95vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 10px;
}

/* ===================================
   CLOSE BUTTON
=================================== */

.lightbox-close {
    position: fixed !important;

    top: 15px;
    left: 50%;

    transform: translateX(-50%);

    background: transparent !important;
    border: none !important;

    color: rgba(255, 255, 255, .85);

    font-size: 4rem;
    line-height: 1;

    cursor: pointer;

    z-index: 100002;

    padding: 0;

    transition: all .25s ease;
}

.lightbox-close:hover {
    color: #ff4d4d;
    transform: translateX(-50%) scale(1.15);
}

/* ===================================
   NAVIGATION BUTTONS
=================================== */

.lightbox-prev,
.lightbox-next {
    position: fixed !important;

    top: 50%;

    background: transparent !important;
    border: none !important;

    color: rgba(255, 255, 255, .75);

    font-size: 7rem;

    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    padding: 0;

    z-index: 100002;

    transform: translateY(-50%);

    transition: all .25s ease;
}

/* فلش قبلی - سمت راست */
.lightbox-prev {
    right: 15px !important;
    left: auto !important;
}

/* فلش بعدی - سمت چپ */
.lightbox-next {
    left: 15px !important;
    right: auto !important;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    color: #1c7d1f;
}

.lightbox-prev:hover {
    transform: translateY(-50%) scale(1.2);
}

.lightbox-next:hover {
    transform: translateY(-50%) scale(1.2);
}

/* ===================================
   MOBILE
=================================== */

@media (max-width:768px) {

    #lightbox-main-img {
        max-width: 100vw;
        max-height: 90vh;
    }

    .lightbox-close {
        top: 10px;
        font-size: 3rem;
    }

    .lightbox-prev,
    .lightbox-next {
        font-size: 4rem;
    }

    .lightbox-prev {
        right: 5px !important;
    }

    .lightbox-next {
        left: 5px !important;
    }
}



/* ====================================================
   کلاس اختصاصی برای تنظیم عکس محصولات بدون پس‌زمینه
   این کلاس هیچ تداخلی با سایر بخش‌های قالب ندارد
==================================================== */
.fit-product-img {
    object-fit: contain !important; /* عکس کامل در کادر جا می‌شود و برش نمی‌خورد */
    padding: 0px !important; /* ایجاد حاشیه امن از لبه‌ها تا عکس نچسبد */
    box-sizing: border-box !important;
    background-color: transparent !important; /* بک‌گراند سفید برای پر کردن پشت عکس */
}