/**
 * KS Mega Categories - Frontend Stylesheet
 * Works with Orchid Store theme's .category-navigation container
 */

/* -----------------------------------------------
   RESET: Hide Orchid's original list
----------------------------------------------- */
.category-navigation-list {
    display: none !important;
}

/* -----------------------------------------------
   ENSURE .category-navigation is ALWAYS visible
   when KS Mega Categories is active.
   Overrides KS Shop Customizer's display:none rule
   on .tax-product_cat and .single-product pages.
----------------------------------------------- */
.category-navigation {
    position: relative !important;
    display: block !important;
}

.category-navigation .cat-nav-trigger {
    position: relative;
    z-index: 2;
}

/* -----------------------------------------------
   MEGA DROPDOWN CONTAINER
   Uses opacity + visibility + pointer-events for animation
   (NOT display:none - that breaks transitions)
----------------------------------------------- */
.ksmc-mega-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 9999;

    min-width: 640px;
    max-width: 920px;
    width: max-content;

    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);

    padding: 16px;
    box-sizing: border-box;

    /* Hidden by default via opacity + pointer-events */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

/* When open - triggered by JS adding .ksmc-open */
.ksmc-mega-dropdown.ksmc-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* -----------------------------------------------
   GRID LAYOUT
   Default 3 columns - overridden by Customizer dynamic CSS
----------------------------------------------- */
.ksmc-mega-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

/* -----------------------------------------------
   CATEGORY ITEM
----------------------------------------------- */
.ksmc-cat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    text-decoration: none;
    color: #333333;
    background-color: #f8f8f8;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    cursor: pointer;
    min-width: 0;
}

.ksmc-cat-item:hover {
    background-color: #f0f0f0;
    color: #e85d04;
    transform: translateX(2px);
    text-decoration: none;
}

/* -----------------------------------------------
   CATEGORY IMAGE
----------------------------------------------- */
.ksmc-cat-image-wrap {
    flex-shrink: 0;
    width: 50px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ksmc-cat-image {
    width: 100%;
    height: 60px;
    object-fit: contain;
    border-radius: 4px;
    display: block;
}

.ksmc-cat-placeholder {
    width: 50px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #efefef;
    border-radius: 4px;
}

.ksmc-placeholder-icon {
    width: 24px;
    height: 24px;
    color: #bbb;
}

/* -----------------------------------------------
   CATEGORY NAME & COUNT
----------------------------------------------- */
.ksmc-cat-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
}

.ksmc-cat-count {
    font-size: 11px;
    color: #999;
    flex-shrink: 0;
    white-space: nowrap;
}

.ksmc-cat-arrow {
    font-size: 12px;
    color: #ccc;
    flex-shrink: 0;
    transition: color 0.15s ease, transform 0.15s ease;
}

.ksmc-cat-item:hover .ksmc-cat-arrow {
    color: #e85d04;
    transform: translateX(2px);
}

/* -----------------------------------------------
   RESPONSIVE
----------------------------------------------- */
@media (max-width: 1024px) {
    .ksmc-mega-dropdown {
        min-width: 480px;
        max-width: calc(100vw - 32px);
    }
    .ksmc-mega-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .ksmc-mega-dropdown {
        min-width: 280px;
        max-width: calc(100vw - 16px);
    }
    .ksmc-mega-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .ksmc-cat-image-wrap {
        display: none;
    }
}