/**
 * MUAADH CATEGORY — Category browsing UI (catalog landing)
 * Single source extracted from muaadh-core.css in Phase 13 Wave 16.
 * Owns: .muaadh-category-img, .muaadh-category-catalogItems-*, etc.
 */


/* ============================================================================
 * APPENDED (Phase 13 Wave 16 — 2026-05-13): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-category-catalogItems-scroll {
    position: relative;
    min-height: 200px;
    /* Phase G' (2026-05-10): merged the responsive override layer's
     * `height: clamp(450px, 60vh, 700px)` into this canonical block.
     * Was duplicated at the bottom of the file. */
    height: clamp(450px, 60vh, 700px);
    overflow-y: auto;
    padding: var(--space-4);
    scrollbar-width: thin;
    scrollbar-color: var(--action-primary) var(--surface-secondary);
    transition: opacity var(--chassis-duration-quick) ease;
}

.muaadh-category-catalogItems-scroll.muaadh-is-loading {
    pointer-events: none;
    opacity: 0.5;
}

.muaadh-category-catalogItems-scroll.muaadh-is-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 10;
}

.muaadh-category-catalogItems-scroll.muaadh-is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--size-control-lg);
    height: var(--size-control-lg);
    margin: -20px 0 0 -20px;
    border: var(--chassis-border-thick) solid var(--border-light);
    border-top-color: var(--action-primary);
    border-radius: var(--chassis-radius-circle);
    animation: m-spinner-border 0.8s linear infinite;
    z-index: 11;
}

.muaadh-category-catalogItems-box {
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: var(--chassis-border-thin) solid var(--theme-card-border);
    border-radius: var(--chassis-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.muaadh-category-catalogItems-scroll::-webkit-scrollbar {
    width: 12px;
}

.muaadh-category-catalogItems-scroll::-webkit-scrollbar-track {
    background: var(--surface-secondary);
    border-radius: var(--chassis-radius-sm);
}

.muaadh-category-catalogItems-scroll::-webkit-scrollbar-thumb {
    background: var(--action-primary);
    border-radius: var(--chassis-radius-sm);
}

.muaadh-category-catalogItems-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--action-primary-hover);
}

.muaadh-category-catalogItems-pagination {
    padding: var(--space-2);
    border-top: var(--chassis-border-thin) solid var(--border-light);
    background: var(--surface-card);
}

/* Dark mode override (Phase 13 Wave 29, 2026-05-13) */
@media (prefers-color-scheme: dark) {
    .muaadh-category-catalogItems-scroll.muaadh-is-loading::before {
        background: var(--theme-overlay-heavy);
    }
}