/* public/js/front/pages/brand-index.css
   Extracted from resources/js/index/pages/brand/index.vue <style scoped> block —
   CDN build has no SFC scoping, so these rules are plain global CSS scoped only by
   the class names themselves (same as every other extracted page/component stylesheet). */
.mobile-filter-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 1px solid #d9dce3;
    border-radius: 14px;
    padding: 0.9rem 1rem;
    background: #fff;
    color: #253046;
    font-weight: 700;
}

.mobile-filter-button__icon {
    transition: transform 0.2s ease;
}

.mobile-filter-button__icon.is-open {
    transform: rotate(180deg);
}

@media (max-width: 991.98px) {
    .mobile-filter-panel {
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        padding: 0 1rem;
        margin: 0;
        border: 1px solid transparent;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
        transition:
            max-height 0.3s ease,
            opacity 0.2s ease,
            padding 0.2s ease,
            margin 0.2s ease,
            border-color 0.2s ease;
        pointer-events: none;
    }

    .mobile-filter-panel.is-open {
        max-height: 5000px;
        opacity: 1;
        padding: 1rem;
        margin-bottom: 1rem;
        border-color: #e5e7eb;
        pointer-events: auto;
    }
}

@media (min-width: 992px) {
    .mobile-filter-panel {
        max-height: none;
        opacity: 1;
        padding: 0;
        margin: 0;
        border: 0;
        box-shadow: none;
        pointer-events: auto;
    }
}