/*
این فایل برای جداسازی استایل‌های سفارشی (مانند متغیرهای رنگی و انیمیشن‌های Modal)
از فایل HTML استفاده می‌شود.
*/

:root {
    --primary: #3B9C74; /* herbal green */
    --accent: #6EE7B7; /* light turquoise */
    --bg: #F9FAFB;
    --text: #1F2937;
}

.sticky-header {
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
}

.product-card:hover {
    transform: translateY(-6px);
}

/* انیمیشن‌های Modal مرکزی (برای سبد خرید و لایه پس‌زمینه) */
.modal-enter { opacity: 0; }
.modal-enter-active { opacity: 1; transition: opacity 300ms ease-out; }
.modal-exit { opacity: 0; transition: opacity 300ms ease-out; }


/* محتوای Modal مرکزی (باکس سبد خرید) */
.modal-content-enter { transform: translateY(30px); opacity: 0; }
.modal-content-enter-active {
    transform: translateY(0);
    opacity: 1;
    transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 300ms ease-out;
}
.modal-content-exit {
    transform: translateY(30px);
    opacity: 0;
    transition: transform 300ms ease-out, opacity 300ms ease-out;
}


/* انیمیشن‌های Modal راست (برای منوی همبرگری) - فعال شده */

/* استایل اولیه محتوای منو (خارج از صفحه) */
.modal-content-right {
    transform: translateX(100%);
    transition: transform 300ms ease-out; /* یک مقدار پیش فرض برای شروع انیمیشن */
}

/* ورودی (از راست به چپ) */
.modal-content-enter-active-right {
    transform: translateX(0); /* پایان در موقعیت اصلی */
    transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* خروجی (از چپ به راست) */
.modal-content-exit-right {
    transform: translateX(100%); /* حرکت به بیرون صفحه */
    transition: transform 300ms ease-out;
}

/* برای اطمینان از اینکه منوی همبرگری در دسکتاپ دیده نمی‌شود */
@media (min-width: 768px) { /* md breakpoint in Tailwind CSS */
    #mobile-menu-modal {
        display: none !important;
    }
}