.ecla-bottom-nav,
.ecla-mobile-modal,
.ecla-modal-backdrop {
    display : none;
}
@media (max-width: 768px) {
    .ecla-bottom-nav {
        display : flex;
        position : fixed;
        bottom : 10px;
        left : 50%;
        transform : translateX(-50%);
        width : 95%;
        max-width : 400px;
        z-index : 99998;
        border-radius : 20px;
        overflow : hidden;
        background : rgba(46, 125, 50, 0.92);
        backdrop-filter : blur(10px);
        -webkit-backdrop-filter : blur(10px);
        box-shadow : 0 4px 20px rgba(0, 0, 0, 0.25);
        border : 1px solid rgba(255, 255, 255, 0.15);
        transition : transform 0.28s ease, opacity 0.28s ease;
    }
    .ecla-bottom-nav.ecla-bottom-nav--hidden {
        transform : translate(-50%, calc(100% + 20px));
        opacity : 0;
        pointer-events : none;
    }
    .ecla-nav-btn {
        flex : 1;
        padding : 8px 5px;
        min-height : 48px;
        background : none;
        border : none;
        cursor : pointer;
        font-size : 11px;
        display : flex;
        flex-direction : column;
        align-items : center;
        justify-content : center;
        gap : 2px;
        position : relative;
        color : rgba(255, 255, 255, 0.90);
        font-weight : 600;
        transition : color 0.15s, background 0.15s;
    }
    .ecla-nav-btn:hover,
    .ecla-nav-btn:focus-visible {
        background : rgba(255, 255, 255, 0.12);
        color : #fff;
    }
    .ecla-nav-icon {
        font-size : 18px;
    }
    .ecla-filter-indicator {
        position : absolute;
        top : 5px;
        right : 15px;
        width : 8px;
        height : 8px;
        background-color : var(--primary-color, #ff9900);
        border-radius : 50%;
        display : none;
        border : 1.5px solid rgba(255,255,255,0.8);
    }
    .ecla-filter-indicator.active {
        display : block;
    }
    .ecla-modal-backdrop {
        display : none;
        position : fixed;
        top : 0;
        left : 0;
        width : 100%;
        height : 100%;
        background : rgba(0, 0, 0, 0.5);
        z-index : 99997;
    }
    .ecla-modal-backdrop.is-visible {
        display : block;
    }
    .ecla-mobile-modal {
        display : block;
        position : fixed;
        bottom : -100vh;
        left : 0;
        width : 100%;
        max-height : 65vh;
        background : #fff;
        z-index : 99999;
        transition : bottom 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        overflow-y : auto;
        overflow-x : hidden;
        border-top-left-radius : 20px;
        border-top-right-radius : 20px;
        box-shadow : 0 -5px 20px rgba(0, 0, 0, 0.15);
        -webkit-overflow-scrolling : touch;
    }
    .ecla-mobile-modal.is-open {
        bottom : 0;
    }
    .ecla-mobile-modal > .ecla-filter-group:first-child h4,
    .ecla-mobile-modal .ecla-filter-group h4 {
        color : var(--header-bg, #2e7d32);
        font-size : 0.85rem;
        text-transform : uppercase;
        letter-spacing : 0.04em;
        font-weight : 700;
        border-bottom : 2px solid var(--header-bg, #2e7d32);
        padding-bottom : 6px;
        margin-bottom : 12px;
    }
    .ecla-mobile-modal::before {
        content : '';
        display : block;
        width : 40px;
        height : 4px;
        background : #ccc;
        border-radius : 2px;
        margin : 10px auto 16px;
        flex-shrink : 0;
    }
    .ecla-mobile-modal .ecla-filter-group {
        padding : 0 20px 16px;
        margin : 0;
    }
    .ecla-mobile-modal select {
        width : 100%;
        max-width : 100%;
        padding : 10px 12px;
        border : 1.5px solid #c5d8f0;
        border-radius : 8px;
        font-size : 16px;
        background : #f5faff;
        color : #333;
        appearance : none;
        -webkit-appearance : none;
        background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232e7d32' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
        background-repeat : no-repeat;
        background-position: right 12px center;
        padding-right : 36px;
        box-sizing : border-box;
    }
    .ecla-mobile-modal select:focus {
        outline : none;
        border-color : var(--header-bg, #2e7d32);
        box-shadow : 0 0 0 3px rgba(46,125,50,0.18);
    }
    .ecla-mobile-modal input[type="checkbox"] {
        width : 18px;
        height : 18px;
        accent-color : var(--header-bg, #2e7d32);
        margin-right : 8px;
        vertical-align: middle;
        cursor : pointer;
    }
    .ecla-mobile-modal .ecla-specific-filters label,
    .ecla-mobile-modal .ecla-scrollable-list label {
        display : flex;
        align-items : center;
        gap : 8px;
        padding : 8px 0;
        font-size : 14.5px;
        border-bottom: 1px solid #f0f0f0;
        cursor : pointer;
    }
    .ecla-mobile-modal .ecla-specific-filters label:last-child,
    .ecla-mobile-modal .ecla-scrollable-list label:last-child {
        border-bottom: none;
    }
    .ecla-mobile-modal input[type="number"],
    .ecla-mobile-modal input[type="range"] {
        width : 100%;
        box-sizing : border-box;
        font-size : 16px;
    }
    .ecla-mobile-modal .ecla-price-inputs {
        display : flex;
        gap : 10px;
    }
    .ecla-mobile-modal .ecla-price-inputs input {
        flex : 1;
        padding : 9px 10px;
        border : 1.5px solid #c5d8f0;
        border-radius : 6px;
        background : #f5faff;
        min-width : 0;
        box-sizing : border-box;
    }
    .ecla-sort-modal .ecla-sort-options {
        display : flex;
        flex-direction : column;
    }
    .ecla-sort-option {
        display : flex;
        align-items : center;
        justify-content : space-between;
        gap : 10px;
        width : 100%;
        min-height : 48px;
        padding : 10px 12px;
        border : none;
        border-bottom : 1px solid #f0f0f0;
        border-radius : 8px;
        background : none;
        color : #333;
        font-size : 15px;
        font-family : inherit;
        text-align : left;
        cursor : pointer;
        box-sizing : border-box;
    }
    .ecla-sort-option:last-child {
        border-bottom : none;
    }
    .ecla-sort-option.is-active {
        background : rgba(46, 125, 50, 0.10);
        color : var(--header-bg, #2e7d32);
        font-weight : 700;
    }
    .ecla-sort-option-check {
        flex-shrink : 0;
        color : var(--header-bg, #2e7d32);
        font-weight : 700;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ecla-mobile-modal {
        transition : none;
    }
}