/* === General Body & Header Enhancements === */
body {
    background: #f9faff;
    padding-top: 0; /* Managed by JS for mobile */
    overflow-x: hidden; /* Prevent horizontal scroll on mobile */
}

/* Custom CSS Variable for mobile header height */
body {
    --total-mobile-header-height: 0px; /* Default value, overridden by JS */
}

.main-header {
    background: linear-gradient(to right, #fdfdfd, #f9faff); /* Soft gradient for header */
    z-index: 1010;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07); /* Professional, softer shadow */
}

.main-header .search-form input[type=search] {
    background: #ffffff; /* Solid white background for search input */
    border: 1px solid #e0e0e0; /* Subtle border */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); /* Inner shadow for depth */
    transition: all 0.3s ease;
}

.main-header .search-form input[type=search]:focus {
    border-color: #ec5891; /* Highlight on focus */
    box-shadow: 0 0 0 3px rgba(236, 88, 145, 0.1); /* Soft glowing effect */
    background-color: #fff;
}

.separator.vertical {
    border-right: 2px solid rgba(0, 184, 184, 0.4) !important; /* Softer turquoise separator */
}

.main-header .search-form .search-results {
  border-radius: 8px; /* Rounded corners for search results */
  box-shadow: 0 10px 30px rgba(0,0,0,0.15), 0 5px 15px rgba(0,0,0,0.1); /* Deeper, more refined shadow */
  background-color: #fff;
}

.main-header .mini-cart-icon .count {
    background: #ec5891; /* Consistent with brand accent color */
    border: none;
    font-weight: bold;
    font-size: 0.9em;
    padding: 2px 6px;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* === Desktop Navigation Bar (#cat-menu) Enhancements === */
@media (min-width: 992px) {
    #cat-menu {
        display: block !important; /* Ensure desktop nav is visible on desktop */
        position: sticky;
        top: 0;
        width: 100%;
        background-color: #fcfcfc; /* Lighter background */
        border-bottom: 1px solid #e9e9e9; /* Lighter border */
        box-shadow: 0 1px 8px rgba(0,0,0,0.06); /* Lighter shadow */
        z-index: 1020; /* Ensures it stays above content and below mobile header if applicable */
        padding: 0 20px; /* Add some horizontal padding to the container */
    }

    #cat-menu .cat-menu {
        display: flex; /* Ensure it's a flex container */
        justify-content: center; /* Center main menu items */
        gap: 20px; /* Spacing between main menu items */
        list-style: none; /* Remove bullet points */
        margin: 0 !important; /* Reset margin */
        padding: 0 !important; /* Reset padding */
    }

    #cat-menu .cat-menu > li {
        position: relative;
        margin: 0 15px;
        padding: 15px 0;
        flex-shrink: 0;
        border: none !important;
    }

    #cat-menu .cat-menu > li > a {
        position: relative;
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #4a4a4a !important; /* Slightly darker text for better contrast */
        font-weight: 600; /* Medium bold */
        padding: 18px 0 !important; /* More vertical padding */
        transition: color 0.3s ease-out;
    }

    #cat-menu .cat-menu > li > a:hover {
        color: #ec5891 !important;
    }

    #cat-menu .cat-menu > li > a::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0px;
        left: 50%; /* Start from center */
        width: 0%; /* Hidden initially */
        height: 1.5px; /* <--- تنظیم خط نازک‌تر (قبلاً 3px بود) */
        background-color: #ec5891;
        transform: translateX(-50%); /* Center the line */
        transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Wider ease for animation */
    }

    #cat-menu .cat-menu > li > a:hover::after {
        width: 100%; /* Expand to full width on hover */
    }

    #cat-menu .cat-menu .sub-menu {
        display: none; /* Hidden by default for JS toggle */
        position: absolute;
        top: 100%; /* Position below the parent item */
        left: 0;
        background-color: rgba(255, 255, 255, 0.98); /* Less transparent for readability */
        backdrop-filter: blur(12px); /* Stronger blur effect */
        box-shadow: 0 15px 40px rgba(0,0,0,0.25), 0 5px 15px rgba(0,0,0,0.1); /* Enhanced shadow */
        border-radius: 14px; /* More rounded */
        padding: 20px 0; /* More padding */
        border: 1px solid #f0f0f0; /* Finer border */
        transform: translateY(15px); /* More subtle initial slide */
        opacity: 0; /* For fade-in animation */
        transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth animation */
        flex-direction: column; /* Ensure vertical list */
        white-space: normal; /* Allow text wrapping */
        list-style: none; /* Remove bullet points */
        margin: 0; /* Reset margin */
        min-width: 250px;
        z-index: 1001; /* Above main menu items */
    }

    #cat-menu .cat-menu > li.menu-item-has-children:hover > .sub-menu {
        display: flex; /* Show on hover */
        opacity: 1;
        transform: translateY(0);
    }

    /* Style for items within sub-menus (desktop) */
    #cat-menu .cat-menu .sub-menu li {
        padding: 12px 30px; /* More padding */
        margin: 0 !important;
        border: none !important;
    }

    /* Style for links within sub-menus (desktop) */
    #cat-menu .cat-menu .sub-menu li a {
        color: #444 !important;
        text-decoration: none;
        display: block !important;
        font-weight: normal;
        background-color: transparent !important;
        padding: 5px 10px !important; /* Padding for hover effect */
        border-radius: 6px;
    }

    #cat-menu .cat-menu .sub-menu li a:hover {
        background-color: #f5f5f5 !important; /* Lighter hover background */
        color: #ec5891 !important;
    }

    /* Style for nested sub-menus (level 2 and 3) - desktop */
    #cat-menu .cat-menu .sub-menu .sub-menu {
        left: 100%;
        top: 0;
    }

    #cat-menu .cat-menu .sub-menu li.menu-item-has-children:hover > .sub-menu {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }

    #cat-menu .cat-menu .menu-item-has-children > a::after {
        content: '▼';
        font-size: 10px;
        margin-left: 8px; /* More space for the arrow */
        transition: transform 0.3s ease;
    }
    #cat-menu .cat-menu .menu-item-has-children:hover > a::after {
        transform: rotate(180deg);
    }

    /* Hide all hamburger toggles in header and bottom nav on desktop */
    .cat-menu-toggle,
    .main-header .main-header-cols .col-logo .cat-menu-toggle,
    .bottom-nav {
        display: none !important;
    }

    /* Hide the redundant logo item in the main navigation bar */
    #cat-menu .cat-menu .menu-item.logo {
        display: none !important;
    }

    /* Adjust main content padding on desktop */
    main#main {
        padding-top: 0px; /* Default, JS will override */
    }

    /* Ensure mobile sidebar is hidden on desktop */
    .mobile-category-sidebar {
        display: none !important; /* Explicitly hide mobile sidebar on desktop */
    }
}

/* === Mobile Specific Styles (max-width: 991px) === */
@media (max-width: 991px) {
    .main-header {
        position: fixed !important;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1030 !important; /* Highest for mobile header */
        background-color: #f9faff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Clearer shadow for mobile */
    }

    body {
        padding-top: var(--total-mobile-header-height) !important;
        padding-bottom: 60px !important; /* For bottom fixed nav */
        overflow-y: scroll; /* Allow vertical scroll */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    /* Hide desktop nav on mobile */
    #cat-menu {
        display: none !important;
    }

    /* Mobile Category Sidebar */
    .mobile-category-sidebar {
        position: fixed;
        top: 0; /* Ensures it starts from the very top of the viewport */
        right: 0;
        width: 100vw;
        max-width: 320px;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(15px);
        z-index: 1020 !important;
        box-shadow: -8px 0 30px rgba(0,0,0,0.25);
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        overflow-y: auto;
        padding: 25px 20px;
        display: flex;
        flex-direction: column;
        direction: rtl; /* RTL layout */
        text-align: right;
        box-sizing: border-box;
    }

    .mobile-category-sidebar.show {
        transform: translateX(0); /* Slide into view */
    }

    .mobile-category-sidebar .sidebar-header {
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
        padding-bottom: 20px;
        border-bottom: 1px solid #f0f0f0; /* Lighter border */
    }

    .mobile-category-sidebar .sidebar-title {
        font-size: 1.6em;
        font-weight: 700; /* Bolder title */
        color: #333;
    }

    .mobile-category-sidebar .close-sidebar {
        font-size: 2em; /* Larger close icon */
        cursor: pointer;
        color: #888;
        transition: color 0.2s ease;
    }
    .mobile-category-sidebar .close-sidebar:hover {
        color: #ec5891;
    }

    .mobile-category-sidebar .sidebar-menu ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .mobile-category-sidebar .sidebar-menu ul li {
        padding: 12px 0;
        border-bottom: 1px dashed #f5f5f5; /* Subtle dashed separator */
    }
    .mobile-category-sidebar .sidebar-menu ul li:last-child {
        border-bottom: none;
    }

    .mobile-category-sidebar .sidebar-menu ul li a {
        display: flex;
        align-items: center;
        justify-content: flex-end; /* Align content to the right for RTL */
        text-decoration: none;
        color: #555;
        font-size: 1.1em;
        transition: color 0.2s ease;
        flex-direction: row-reverse; /* Reverses order of flex items for RTL: icon, title, then arrow */
        width: 100%; /* Ensure link takes full width for consistent alignment */
        box-sizing: border-box; /* Include padding/border in width calculation */
    }

    .mobile-category-sidebar .sidebar-menu ul li a .item-icon {
        order: 3; /* Image at the very beginning (right) */
        margin-right: 0; /* Reset default */
        margin-left: 12px; /* Space between text and icon */
        opacity: 0.8;
        flex-shrink: 0; /* Prevent icon from shrinking */
    }

    .mobile-category-sidebar .sidebar-menu ul li a .title {
        order: 2; /* Title next */
        flex-grow: 1; /* Allow title to take available space */
        text-align: right; /* Explicitly right-align the text itself */
    }

    /* For items that DO NOT have children (no toggle arrow) */
    .mobile-category-sidebar .sidebar-menu ul li:not(.menu-item-has-children) > a {
        padding-right: calc(20px + 20px); /* Adjust padding for consistency with toggle arrow space */
        /* This padding roughly equals the space taken by the arrow for items without children (20px width + 20px right padding if needed) */
    }

    /* For items that HAVE children (with toggle arrow) */
    .mobile-category-sidebar .sidebar-menu ul li.menu-item-has-children > a::after {
        content: '+'; /* Default toggle icon */
        order: 1; /* Toggle icon at the very end (left) */
        margin-right: auto; /* Push it to the left end */
        margin-left: 0; /* Reset default margin */
        font-size: 1.5em; /* Larger toggle icon */
        color: #999;
        transition: transform 0.3s ease, color 0.2s ease;
        line-height: 1; /* For better vertical alignment */
        flex-shrink: 0; /* Prevent icon from shrinking */
        width: 20px; /* Fixed width for toggle icon area */
        text-align: center;
    }

    .mobile-category-sidebar .sidebar-menu ul li.menu-item-has-children.open > a::after {
        content: '-';
        transform: rotate(0deg); /* No rotation needed for + to - */
        color: #ec5891;
    }

    /* Overlay for mobile sidebar */
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.0);
        z-index: -1;
        transition: background-color 0.4s ease, z-index 0s 0.4s; /* Delay z-index change on close */
    }
    .overlay.show {
        background-color: rgba(0,0,0,0.6) !important; /* Darker overlay */
        z-index: 1015 !important; /* Above content, below sidebar */
        transition: background-color 0.4s ease, z-index 0s 0s; /* Instant z-index change on open */
    }

    /* Prevent body scroll when mobile sidebar is open */
    body.no-scroll {
        overflow: hidden;
    }
}

/* === Footer Enhancements === */
.main-footer .menus .menu-wrapper .menu-title {
    cursor: pointer; /* Indicate clickable */
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Align title to the right */
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 15px;
    color: #4a4a4a;
    font-weight: 700;
    font-size: 1.2em;
}

.main-footer .menus .menu-wrapper .menu-title svg {
    margin-left: 8px; /* Space between title and icon */
    transform: rotate(-90deg); /* Initial state: chevron pointing left for RTL closed state */
    transition: transform 0.3s ease-out;
    fill: #888;
}

.main-footer .menus .menu-wrapper.open .menu-title svg {
    transform: rotate(0deg); /* Open state: chevron pointing down */
    fill: #ec5891;
}

.main-footer .menus .menu-wrapper .menu {
    list-style: none;
    padding: 0;
    margin: 0;
    transition: max-height 0.4s ease-in-out; /* Smooth slide transition */
    overflow: hidden; /* Hide overflow during transition */
}
/* Ensure menu is always visible on desktop, hidden by default on mobile */
@media (min-width: 992px) {
    .main-footer .menus .menu-wrapper .menu {
        display: block !important;
        max-height: none !important; /* Override mobile max-height */
    }
    .main-footer .menus .menu-wrapper .menu-title svg {
        display: none !important; /* Hide toggle icon on desktop */
    }
    .main-footer .menus .menu-wrapper .menu-title {
        cursor: default; /* No pointer on desktop */
        justify-content: flex-end; /* Keep alignment */
        border-bottom: none; /* No border for desktop */
        margin-bottom: 0; /* Reset margin */
        padding-bottom: 0; /* Reset padding */
    }
}
@media (max-width: 991px) {
    .main-footer .menus .menu-wrapper .menu {
        display: none; /* Hidden by default on mobile, toggled by JS */
        max-height: 0; /* Initial state for slide effect */
    }
    .main-footer .menus .menu-wrapper.open .menu {
        display: block; /* Show menu */
        max-height: 500px; /* Adjust as needed for content */
    }
}

.main-footer .apps {
    background-color: #f7f7f7;
    color: #333;
    border-top: 1px solid #eee;
    padding: 20px 0;
}

.main-footer .apps-title img {
    opacity: 0.8;
}

.main-footer .partners {
    background-color: #fcfcfc;
    border-top: 1px solid #eee;
    padding: 20px 0;
}

.main-footer .copyright {
    background-color: #f0f0f0;
    color: #666;
    padding: 15px 0;
    font-size: 0.9em;
}

/* === Other Minor Tweaks === */
.price .discount {
    background-color: #ec5891; /* Consistent accent color for discounts */
    box-shadow: 0 4px 12px rgba(236, 88, 145, 0.3); /* Softer shadow */
    animation: fadeInScale 0.6s ease-out forwards, subtleFloat 2s ease-in-out infinite alternate;
}
.price .discount::after {
    content: " تخفیف";
}

.product .price .discount:hover,
.container-single-product .price .discount:hover {
    background-color: #d14a82; /* Slightly darker on hover */
    box-shadow: 0 6px 18px rgba(236, 88, 145, 0.4);
}

.countdown-timer .countdown-digit {
    color: #ec5891; /* Consistent accent color for countdown */
}
.countdown-timer .dot {
    color: #ec5891;
}