/* ===========================================================================
   Category menu styles — multilevel (with real flyout submenus) and mega menu
   (sidebar + featured panel). Selectors are scoped under the wrapper LIs so
   they only target our menus, not generic site dropdowns. We use !important
   on layout properties to defeat aggressive legacy rules in style.css.
   =========================================================================== */

:root {
    --catmenu-accent: var(--site-brand);
    --catmenu-accent-rgb: 196, 1, 203;
    --catmenu-text: #1a1a1a;
    --catmenu-muted: #6b6b6b;
    --catmenu-border: #eaeaea;
    --catmenu-bg-soft: #f7f7f8;
    --catmenu-bg: #ffffff;
    --catmenu-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
    --catmenu-radius: 10px;
}

/* The nav row becomes the positioning context for the mega menu so the
   panel spans its full width and never overflows the viewport. */
.navigation .nav {
    position: relative !important;
}

/* Trigger arrow shared by both modes */
.category-multilevel-wrapper > .dropdown-toggle,
.category-mega-menu-wrapper > .dropdown-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.category-multilevel-wrapper > .dropdown-toggle .menu-icon,
.category-mega-menu-wrapper > .dropdown-toggle .menu-icon {
    position: static !important;
    color: var(--catmenu-accent);
    font-size: 12px;
    transition: transform 0.2s ease;
}

.category-multilevel-wrapper.show > .dropdown-toggle .menu-icon,
.category-mega-menu-wrapper.show > .dropdown-toggle .menu-icon {
    transform: rotate(180deg);
}

/* ===========================================================================
   MULTI-LEVEL DROPDOWN
   =========================================================================== */

.category-multilevel-wrapper {
    position: relative !important;
}

.category-multilevel-wrapper > .dropdown-menu.category-multilevel-menu {
    min-width: 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px 0 !important;
    margin-top: 6px !important;
    border: 1px solid var(--catmenu-border) !important;
    border-radius: var(--catmenu-radius) !important;
    box-shadow: var(--catmenu-shadow) !important;
    background: var(--catmenu-bg) !important;
}

.category-multilevel-menu li {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
}

.category-multilevel-menu .dropdown-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px !important;
    color: var(--catmenu-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.category-multilevel-menu .dropdown-item:hover,
.category-multilevel-menu li:hover > .dropdown-item {
    background: rgba(var(--catmenu-accent-rgb), 0.06) !important;
    color: var(--catmenu-accent) !important;
}

/* Chevron indicator — FontAwesome glyph (not bidi-mirrored), flipped via
   transform in RTL. `direction: ltr` + `unicode-bidi: isolate` prevents the
   browser from auto-mirroring the codepoint, which would otherwise undo our
   transform-flip in RTL contexts. */
.category-multilevel-menu li.has-children > .dropdown-item::after {
    content: '\f105'; /* fa-angle-right */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome', sans-serif;
    font-weight: 900;
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
    font-size: 14px;
    line-height: 1;
    color: var(--catmenu-muted);
    transition: color 0.15s ease, transform 0.15s ease;
}

.category-multilevel-menu li.has-children:hover > .dropdown-item::after {
    color: var(--catmenu-accent);
    transform: translateX(2px);
}

/* Real flyout submenu — works at any depth */
.category-multilevel-menu .dropdown-submenu {
    position: absolute !important;
    top: -8px !important;
    left: 100% !important;
    min-width: 240px !important;
    max-width: 280px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px 0 !important;
    margin: 0 0 0 4px !important;
    background: var(--catmenu-bg) !important;
    border: 1px solid var(--catmenu-border) !important;
    border-radius: var(--catmenu-radius) !important;
    box-shadow: var(--catmenu-shadow) !important;
    list-style: none !important;
    display: none !important;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 1100 !important;
}

.category-multilevel-menu li:hover > .dropdown-submenu {
    display: block !important;
    opacity: 1;
    transform: translateX(0);
}

/* ===========================================================================
   MEGA MENU — spans the full nav row, no overflow
   =========================================================================== */

/* Higher-specificity selector — beats `.navigation .nav li { position: relative !important; }`
   in style.css so the wrapper LI becomes static and the menu uses .nav as its
   positioning context instead of the wrapper. */
.navigation .nav li.category-mega-menu-wrapper,
.category-mega-menu-wrapper {
    position: static !important;
}

.category-mega-menu-wrapper > .dropdown-menu.category-mega-menu {
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 8px 0 0 !important;
    transform: none !important;
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
    border: 1px solid var(--catmenu-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--catmenu-shadow) !important;
    background: var(--catmenu-bg) !important;
    z-index: 1050 !important;
}

.category-mega-menu__inner {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 380px;
    border-radius: inherit;
    overflow: hidden;
}

/* Left rail */
.category-mega-menu__sidebar {
    background: var(--catmenu-bg-soft);
    border-right: 1px solid var(--catmenu-border);
    margin: 0;
    padding: 10px 0;
    max-height: 460px;
    overflow-y: auto;
}

.category-mega-menu__sidebar-item {
    position: relative;
    margin: 0 !important;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.category-mega-menu__sidebar-item + .category-mega-menu__sidebar-item {
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.category-mega-menu__sidebar-item:hover,
.category-mega-menu__sidebar-item.is-active {
    background: var(--catmenu-bg);
    border-left-color: var(--catmenu-accent);
}

.category-mega-menu__sidebar-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px !important;
    color: var(--catmenu-text) !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 14px !important;
    line-height: 1.3;
}

.category-mega-menu__sidebar-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-mega-menu__sidebar-link:hover,
.category-mega-menu__sidebar-item.is-active .category-mega-menu__sidebar-link {
    color: var(--catmenu-accent) !important;
}

.category-mega-menu__chevron {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    color: var(--catmenu-muted);
    transition: color 0.15s ease, transform 0.15s ease;
    flex-shrink: 0;
}

.category-mega-menu__sidebar-item:hover .category-mega-menu__chevron,
.category-mega-menu__sidebar-item.is-active .category-mega-menu__chevron {
    color: var(--catmenu-accent);
    transform: translateX(2px);
}

/* Right panel — header + card grid */
.category-mega-menu__panels {
    position: relative;
    padding: 20px 24px;
    max-height: 460px;
    overflow-y: auto;
    background: linear-gradient(180deg, var(--catmenu-bg) 0%, #fafafb 100%);
}

.category-mega-menu__panel {
    display: none;
    animation: catmenuFade 0.18s ease both;
}

.category-mega-menu__panel.is-active {
    display: block;
}

@keyframes catmenuFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.category-mega-menu__panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--catmenu-border);
}

.category-mega-menu__panel-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--catmenu-text);
    margin: 0;
    line-height: 1.2;
}

.category-mega-menu__view-all {
    font-size: 13px;
    font-weight: 600;
    color: var(--catmenu-accent) !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

.category-mega-menu__view-all:hover {
    opacity: 0.8;
}

.category-mega-menu__view-all i {
    margin-left: 4px;
    display: inline-block;
    transition: transform 0.15s ease;
}

/* Card grid — uniform thumbnails */
.category-mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

.category-mega-menu__card {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 10px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: var(--catmenu-bg);
    color: var(--catmenu-text) !important;
    text-decoration: none !important;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.category-mega-menu__card:hover {
    border-color: rgba(var(--catmenu-accent-rgb), 0.25);
    background: var(--catmenu-bg);
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.category-mega-menu__card:hover .category-mega-menu__thumb {
    transform: scale(1.05);
}

.category-mega-menu__thumb {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--catmenu-bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), inset 0 0 0 2px #fff;
    transition: transform 0.2s ease;
}

.category-mega-menu__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.category-mega-menu__thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Default fallback; per-card hue is applied inline via style attribute */
    background: linear-gradient(135deg, rgba(var(--catmenu-accent-rgb), 0.85), rgba(var(--catmenu-accent-rgb), 0.55));
    color: #fff;
    font-weight: 700;
    font-size: 24px;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 0.5px;
}

.category-mega-menu__card-name {
    font-size: 13.5px;
    font-weight: 600;
    color: inherit;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.category-mega-menu__card:hover .category-mega-menu__card-name {
    color: var(--catmenu-accent);
}

.category-mega-menu__card-count {
    font-size: 11px;
    color: var(--catmenu-muted);
    margin-top: 4px;
}

.category-mega-menu__empty {
    padding: 30px 0;
    text-align: center;
}

.category-mega-menu__empty-link {
    color: var(--catmenu-accent) !important;
    font-weight: 600;
    text-decoration: none !important;
    font-size: 14px;
}

.category-mega-menu__empty-link:hover {
    opacity: 0.8;
}

/* ===========================================================================
   RTL OVERRIDES
   =========================================================================== */

/* Multi-level flyout flips to the left */
[dir="rtl"] .category-multilevel-menu .dropdown-submenu {
    left: auto !important;
    right: 100% !important;
    margin: 0 4px 0 0 !important;
    transform: translateX(-6px);
}

[dir="rtl"] .category-multilevel-menu li:hover > .dropdown-submenu {
    transform: translateX(0);
}

/* Flip the chevron character via transform — never rely on Unicode mirroring */
[dir="rtl"] .category-multilevel-menu li.has-children > .dropdown-item::after {
    transform: scaleX(-1);
}

[dir="rtl"] .category-multilevel-menu li.has-children:hover > .dropdown-item::after {
    transform: scaleX(-1) translateX(2px);
}

/* Mega menu sidebar mirrors */
[dir="rtl"] .category-mega-menu__sidebar {
    border-right: 0;
    border-left: 1px solid var(--catmenu-border);
}

[dir="rtl"] .category-mega-menu__sidebar-item {
    border-left: 0;
    border-right: 3px solid transparent;
}

[dir="rtl"] .category-mega-menu__sidebar-item:hover,
[dir="rtl"] .category-mega-menu__sidebar-item.is-active {
    border-right-color: var(--catmenu-accent);
}

[dir="rtl"] .category-mega-menu__chevron {
    transform: scaleX(-1);
}

[dir="rtl"] .category-mega-menu__sidebar-item:hover .category-mega-menu__chevron,
[dir="rtl"] .category-mega-menu__sidebar-item.is-active .category-mega-menu__chevron {
    transform: scaleX(-1) translateX(2px);
}

[dir="rtl"] .category-mega-menu__view-all i {
    margin-left: 0;
    margin-right: 4px;
    transform: scaleX(-1);
}

/* ===========================================================================
   Bootstrap dropdown .show toggle — make our menus respond to it
   =========================================================================== */

.category-multilevel-wrapper.show > .dropdown-menu.category-multilevel-menu,
.category-mega-menu-wrapper.show > .dropdown-menu.category-mega-menu {
    display: block !important;
}

/* Responsive: tablet shrinks sidebar */
@media (max-width: 1199.98px) {
    .category-mega-menu__inner {
        grid-template-columns: 200px 1fr;
    }
    .category-mega-menu__panels {
        padding: 20px;
    }
    .category-mega-menu__grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 14px;
    }
    .category-mega-menu__thumb {
        width: 68px;
        height: 68px;
    }
}

/* Mobile — hide the desktop dropdowns entirely (mobile uses the offcanvas) */
@media (max-width: 991.98px) {
    .category-mega-menu-wrapper > .dropdown-menu.category-mega-menu,
    .category-multilevel-wrapper > .dropdown-menu.category-multilevel-menu {
        display: none !important;
    }
}

/* ===========================================================================
   Mobile offcanvas accordion (mega style on small screens)
   =========================================================================== */

.category-mega-accordion {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-mega-accordion .mega-accordion-item + .mega-accordion-item {
    border-top: 1px solid var(--catmenu-border);
}

.category-mega-accordion .mega-accordion-header {
    cursor: pointer;
    padding: 6px 0;
}

.category-mega-accordion .mega-accordion-thumb {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
    vertical-align: middle;
}

[dir="rtl"] .category-mega-accordion .mega-accordion-thumb {
    margin-right: 0;
    margin-left: 10px;
}

.category-mega-accordion .mega-accordion-caret {
    transition: transform 0.2s ease;
    padding: 0 12px;
    color: var(--catmenu-muted);
}

.category-mega-accordion .mega-accordion-header[aria-expanded="true"] .mega-accordion-caret {
    transform: rotate(180deg);
}

.category-mega-accordion .mega-accordion-children {
    padding-left: 22px;
}

[dir="rtl"] .category-mega-accordion .mega-accordion-children {
    padding-left: 0;
    padding-right: 22px;
}