/* =========================================================================
 * ৩টা সুইচেবল Site Menu স্টাইল — Style ১ (flyout) style.css-এই আছে
 * (.cat__flyout/.cat__list/.cat__panel), এখানে শুধু Style ২ ও Style ৩-এর
 * isolated/namespaced CSS। .cat__panel-এর বেস markup/CSS (কলাম লেআউট,
 * শ্যাডো, টাইটেল-স্টাইল ইত্যাদি) reuse হচ্ছে, শুধু positioning এই
 * namespaced wrapper ক্লাসের ভেতরে scoped override করা হয়েছে।
 * ========================================================================= */

/* ===== Style 2 — Header Horizontal Hover Dropdown ===== */
.menu-style-2-item {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
}
.menu-style-2-list {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
}
.menu-style-2-link {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 6px;
    height: 48px;
    padding: 0 12px;
    color: #fff;
    font-size: 15px;
    text-transform: capitalize;
    white-space: nowrap;
}
.menu-style-2-link .cat__item__name {
    color: #fff;
}
.menu-style-2-link:hover,
.menu-style-2-item:hover .menu-style-2-link .cat__item__name {
    color: var(--primary-color);
}
.menu-style-2-item .cat__item__arrow,
.menu-style-2-arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-style: solid;
    border-color: transparent #fff #fff transparent;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    flex-shrink: 0;
    font-size: 0;
    line-height: 0;
}
.menu-style-2-arrow::before {
    content: none !important;
}

/* Style 1-এর .cat__panel বেস CSS (left:100%; top:0;) এখানে override — প্যানেল এখন
   হোভার করা হেডার-আইটেমটার ঠিক নিচ থেকে (top-down) খুলবে। */
.menu-style-2-item .cat__panel {
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    min-height: 0;
    z-index: 9999;
    width: max-content;
    min-width: 280px;
    max-width: 900px;
}
.menu-style-2-item:hover .cat__panel {
    display: block;
}

/* ===== Style 3 — Classic Click-Through Menu ===== */
.menu-style-3-item {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
}
.menu-style-3-list {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
}
.menu-style-3-link {
    display: flex;
    align-items: center;
    column-gap: 6px;
    height: 48px;
    padding: 0 12px;
    color: #fff;
    font-size: 15px;
    text-transform: capitalize;
    white-space: nowrap;
}
.menu-style-3-link:hover {
    color: var(--primary-color);
}
.menu-style-3-arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-style: solid;
    border-color: transparent #fff #fff transparent;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    flex-shrink: 0;
    font-size: 0;
    line-height: 0;
}
.menu-style-3-arrow::before {
    content: none !important;
}
.menu-style-3-dropdown {
    position: fixed;
    left: 0;
    top: 0;
    min-width: 220px;
    max-width: 300px;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: #f7f7f8;
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    padding: 8px;
    box-sizing: border-box;
    display: none;
    z-index: 9999;
}
.menu-style-3-item:hover .menu-style-3-dropdown {
    display: block;
}
.menu-style-3-dropdown > li {
    display: block;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 6px;
    margin-bottom: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: 0.18s border-color, 0.18s box-shadow;
}
.menu-style-3-dropdown > li:last-child {
    margin-bottom: 0;
}
.menu-style-3-dropdown > li:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.menu-style-3-dropdown li a {
    display: block;
    padding: 9px 12px;
    font-size: 13.5px;
    line-height: 1.4;
    color: #222 !important;
    text-transform: capitalize;
}
.menu-style-3-dropdown li a:hover {
    color: var(--primary-color) !important;
}

/* Style 3 — nested child submenu (subcategory hover হলে ডানপাশে child items) */
.menu-style-3-subitem {
    position: relative;
}
.menu-style-3-sublink {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    column-gap: 6px;
}
.menu-style-3-subarrow {
    font-size: 9px;
    color: #999;
    flex-shrink: 0;
}
.menu-style-3-childlist {
    position: fixed;
    left: 0;
    top: 0;
    min-width: 190px;
    max-width: 300px;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: #f7f7f8;
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    padding: 8px;
    box-sizing: border-box;
    display: none;
    z-index: 10000;
}
.menu-style-3-subitem:hover > .menu-style-3-childlist {
    display: block;
}
.menu-style-3-childlist > li {
    display: block;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 6px;
    margin-bottom: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: 0.18s border-color, 0.18s box-shadow;
}
.menu-style-3-childlist > li:last-child {
    margin-bottom: 0;
}
.menu-style-3-childlist > li:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.menu-style-3-childlist li a {
    display: block;
    padding: 9px 12px;
    font-size: 13.5px;
    line-height: 1.4;
    color: #222 !important;
    text-transform: capitalize;
}
.menu-style-3-childlist li a:hover {
    color: var(--primary-color) !important;
}

@media (max-width: 1200px) {
    .menu-style-2-link,
    .menu-style-3-link {
        padding: 0 8px;
        font-size: 14px;
    }
}
/* ===== End Style 2 / Style 3 ===== */

/* =========================================================================
 * Fiverr-স্টাইল মেনু স্ক্রল এ্যারো — শুধু Style 2 (header_dropdown) এবং Style 3 (classic)
 * এর জন্য। .catagory_menu wrapper-এ `has-menu-scroll-arrows` ক্লাস থাকলেই শুধু এই CSS
 * সক্রিয় হয় (master.blade.php দ্রষ্টব্য) — Style 1 (flyout)-এ এই ক্লাস থাকে না।
 * ========================================================================= */
.menu-scroll-wrap {
    position: relative;
}
.has-menu-scroll-arrows .heder__category {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    flex-wrap: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.has-menu-scroll-arrows .heder__category::-webkit-scrollbar {
    display: none;
    height: 0;
}
.menu-scroll-arrow {
    display: none;
    position: absolute;
    top: 0;
    height: 48px;
    width: 32px;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    z-index: 6;
    cursor: pointer;
    border: 0;
    padding: 0;
}
.menu-scroll-arrow-left {
    left: 0;
    background: linear-gradient(to right, var(--secondary-color) 55%, transparent);
    justify-content: flex-start;
    padding-left: 4px;
}
.menu-scroll-arrow-right {
    right: 0;
    background: linear-gradient(to left, var(--secondary-color) 55%, transparent);
    justify-content: flex-end;
    padding-right: 4px;
}
.menu-scroll-wrap.show-scroll-left .menu-scroll-arrow-left,
.menu-scroll-wrap.show-scroll-right .menu-scroll-arrow-right {
    display: flex;
}
.menu-scroll-wrap.show-scroll-left .heder__category {
    padding-left: 30px;
}
.menu-scroll-wrap.show-scroll-right .heder__category {
    padding-right: 30px;
}
@media (max-width: 767px) {
    .menu-scroll-arrow {
        display: none !important;
    }
}
/* ===== End Menu Scroll Arrows ===== */

/* =========================================================================
 * Style 4 — Always-Open Left Sidebar
 * এই style-এ "সবসময়় খোলা, বাম পাশে" কাজটা করে হোমপেজের আলাদা sidebar
 * (.home-category-menu, resources/views/frontEnd/layouts/pages/index.blade.php
 * দ্রষ্টব্য) — সেটা normal document-flow-এ थাকে বলে হেডারের অন্য আইটেম
 * (Home/Hotdeals/Contact/Login) এর উপরে উঠে কিছু ঢেকে দেয়় না। তাই হেডারের "ALL
 * CATEGORIES" flyout (.cat__flyout, position:absolute) এখানে ইচ্ছাকৃতভাবে Style 1-এর
 * মতোই শুধু hover-triggered রাখা হলো (কোনো override নেই) — নাহলে এটা হোমপেজে
 * সরাসরি sidebar-এর উপরে একই জায়়গায়় উঠে ওভারল্যাপ করতো (এই বাগটা ঠিক করা হলো)।
 * ========================================================================= */
/* ===== Style 4 — ভিতরের পেজে ALL CATEGORIES hover dropdown। হোমপেজের sidebar-menu-এর একই markup/CSS
   (sidebar-menu/sidebar-submenu/sidebar-childmenu, style.css দ্রষ্টব্য) রিইউজ করে single-column
   hover-cascade দেখায় — Style 1 (flyout)-এর দুই-কলাম cat__flyout/cat__panel নয়। ===== */
.style4__dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    width: 290px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 999;
    transition: 0.2s all;
}
.menu-style-style4 li.all__category__list:hover .style4__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.style4__dropdown .sidebar-menu {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}
/* .catagory_menu ul li a { color:#fff } এই legacy রুলটার specificity (.catagory_menu
   1টা class + ul/li/a 3টা tag) .sidebar-menu li a এর চেয়ে বেশি হওয়ায় টেক্স্ট সাদা হয়ে যায় সাদা
   ব্যাকগ্রাউন্ডে — (ঠিক flyout.blade.php এর .cat__flyout .cat__item__link override এর মতোই) এখানেও
   বেশি specificity দিয়ে override করা হলো। */
.style4__dropdown .sidebar-menu li a {
    color: #222;
}
/* ===== Style 4 — হোমপেজ সাইডবার (.home-category-menu) এর প্রস্থ হেডারের "ALL CATEGORIES" বক্সের
   (li.all__category__list, style.css দ্রষ্টব্য width:289px) সাথে মিলিয়ে না — আগে sidebarটা
   col-sm-3 (25% গ্রিড) এর প্রস্থ পেত, যা বেশিরভাগ স্ক্রিনে 289px এর চেয়ে চৌড়া হয়ে যায়
   বলে দুইটা বেমানান দেখায়ে। এখন সরাসরি হেডারের বক্সের সমান ফিক্সড 289px দেওয়া হলো। ===== */
.home-category-menu {
    width: 289px;
}
/* ===== End Style 4 Dropdown ===== */