.mobile-filter .modal-content {
    background: #f7f7f7;
    /* background: rgba(255, 255, 255, 0.08); */
    backdrop-filter: blur(18px);
    border-radius: 20px 20px 0 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.mobile-filter .modal-body {
    /* padding: 20px; */
    font-size: 1rem;
    /* line-height: 1.6; */
    background: linear-gradient(
        145deg,
        rgba(0, 0, 0, 0.2),
        rgba(255, 255, 255, 0.05)
    );
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.mobile-filter .modal-header {
    background: linear-gradient(135deg, #dedfda, #dfe0dc, #bfc1b7, #e4e5e1);
    backdrop-filter: blur(12px);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    padding: 10px 20px;
    border-radius: 16px 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-filter .modal-footer {
    background: rgba(255, 255, 255, 0.2);
    /* background: linear-gradient(135deg, #dedfda, #dfe0dc, #bfc1b7, #e4e5e1); */
    backdrop-filter: blur(12px);
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    /* padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center; */
    padding: 0;
    margin: 0;
}

.mobile-filter .modal-header .modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
    letter-spacing: 0.5px;
    font-family: "Poppins", sans-serif;
}

.mobile-filter .close-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* font-size: 18px; */
    color: #fff;
    transition: all 0.4s ease;
    backdrop-filter: blur(8px);
    cursor: pointer;
}

.mobile-filter .close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    color: rgba(0, 0, 0, 0.7);
    transform: rotate(90deg) scale(1.1);
}

.mobile-filter ul {
    list-style-type: disc;
}

.mobile-filter ul li {
    display: block;
}

.mobile-filter .modal-body label {
    position: relative;
    padding-left: 10px;
    cursor: pointer;
}

.mobile-filter .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
}

/* .mobile-filter .modal.fade .modal-dialog {
            padding-top : 20%;
        } */

.mobile-filter .modal.fade.slide-up .modal-dialog {
    transform: translateY(100%);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.mobile-filter .modal.fade.show .modal-dialog {
    transform: translateY(0);
}

.mobile-filter .option-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-filter .option-list .option-item {
    background: rgba(255, 255, 255, 0.5);
    padding: 12px 0;
    margin-bottom: 10px;
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.125rem 0.25rem rgba(161, 172, 184, 0.4);
}

.mobile-filter .option-list .option-item:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.03);
}

@media (min-width: 768px) {
    .mobile-header {
        display: none !important;
    }
}

.mobile-filter .modal.fade .mob-share {
    margin-top: 50% !important;
}

.mobile-filter-nav .btn {
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    color: var(--bs-dark);
    background: none;
    border: none;
}

.mobile-filter-nav .btn:focus {
    box-shadow: none;
}

.mobile-filter-nav .d-flex::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) {
    .mobile-filter-nav {
        display: none !important;
    }
}

.mobile-filter .modal-dialog-scrollable .modal-body {
    max-height: 78vh !important;
    /* overflow-y: auto */
}

/* Parent Label */
.mobile-filter .radio-options .option-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
    color: var(--bs-dark);
    cursor: pointer;
    position: relative;
    width: 100%;
    user-select: none;
    padding: 6px 10px;
    border-radius: 12px;
    transition: background 0.3s ease;
    backdrop-filter: blur(8px);
}

/* Hover background highlight */
.mobile-filter .radio-options .option-label:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Hide default radio */
.mobile-filter .radio-options .option-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Glassmorphic custom radio */
.mobile-filter .radio-options .m-filter-radio {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
}

/* Hover glow pulse */
.mobile-filter .radio-options .option-label:hover .m-filter-radio {
    box-shadow: 0 0 10px rgba(var(--rgb-primary), 0.4),
        0 0 20px rgba(var(--rgb-primary), 0.2);
}

/* Inner dot (hidden initially) */
.mobile-filter .radio-options .m-filter-radio::after {
    content: "";
    width: 12px;
    height: 12px;
    background: transparent;
    border-radius: 50%;
    position: absolute;
    transform: scale(0);
    opacity: 0;
    transition: all 0.3s ease;
}

/* Checked State */
.mobile-filter
    .radio-options
    .option-label
    input[type="radio"]:checked
    + .m-filter-radio {
    /* background: rgba(var(--rgb-primary), 0.2); */
    border-color: rgba(var(--rgb-primary), 0.8);
    /* box-shadow: 0 0 15px rgba(var(--rgb-primary), 0.6),
            0 0 30px rgba(var(--rgb-primary), 0.3); */
}

/* Show inner dot */
.mobile-filter
    .radio-options
    .option-label
    input[type="radio"]:checked
    + .m-filter-radio::after {
    background: var(--bs-primary);
    transform: scale(1);
    opacity: 1;
}

/* Text color when checked */
.mobile-filter
    .radio-options
    .option-label
    input[type="radio"]:checked
    ~ .option-text {
    color: var(--bs-primary);
    font-weight: 600;
}

/* Parent Label */
.mobile-filter .checkbox-options .option-label {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 16px;
    font-weight: 500;
    color: var(--bs-dark);
    cursor: pointer;
    position: relative;
    width: 100%;
    user-select: none;
    padding: 6px 10px;
    border-radius: 14px;
    transition: background 0.3s ease;
}

/* Hover highlight */
/* .mobile-filter .checkbox-options .option-label:hover {
        background: rgba(var(--rgb-primary), 0.04);
    } */

/* Hide default checkbox */
.mobile-filter .checkbox-options .option-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Custom checkbox (Neumorphic style) */
.mobile-filter .checkbox-options .m-filter-checkbox {
    width: 28px;
    height: 28px;
    background: #f9f9f9;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.1),
        inset -2px -2px 6px rgba(255, 255, 255, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: all 0.3s ease;
}

/* Hover effect on box */
.mobile-filter .checkbox-options .option-label:hover .m-filter-checkbox {
    box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.15),
        inset -1px -1px 4px rgba(255, 255, 255, 0.9),
        0 3px 8px rgba(var(--rgb-primary), 0.2);
}

/* Tick mark hidden initially */
.mobile-filter .checkbox-options .m-filter-checkbox::after {
    content: "";
    width: 8px;
    height: 16px;
    border: solid transparent;
    border-width: 0 3px 3px 0;
    position: absolute;
    transform: rotate(45deg) scale(0);
    opacity: 0;
    transition: all 0.3s ease;
}

/* Checked State */
.mobile-filter
    .checkbox-options
    .option-label
    input[type="checkbox"]:checked
    + .m-filter-checkbox {
    background: linear-gradient(135deg, #e13939, #e65858);
    box-shadow: 0 4px 10px rgba(var(--rgb-primary), 0.4);
}

/* Show tick with animation */
.mobile-filter
    .checkbox-options
    .option-label
    input[type="checkbox"]:checked
    + .m-filter-checkbox::after {
    border-color: var(--bs-white);
    transform: rotate(45deg) scale(1);
    opacity: 1;
}

/* Text color when checked */
.mobile-filter
    .checkbox-options
    .option-label
    input[type="checkbox"]:checked
    ~ .option-text {
    color: var(--bs-primary);
    font-weight: 600;
}

.unique-search {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: inset 2px 2px 6px rgba(255, 255, 255, 0.3),
        inset -2px -2px 6px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease;
}

.unique-search:hover {
    background: #f7f7f7;
}

.unique-search .search-box {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: var(--bs-dark);
    padding: 10px;
}

/* Placeholder styling */
.unique-search .search-box::placeholder {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
}

.unique-search .clear-btn {
    background: transparent;
    border: none;
    color: rgba(0, 0, 0, 0.2);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px 0 0;
    margin: 0;
    width: auto;
    height: auto;
    transition: color 0.3s ease;
}

/* Hover effect */
.unique-search .clear-btn:hover {
    color: rgba(0, 0, 0, 0.5);
}

/* Active click effect */
.unique-search .clear-btn:active {
    transform: scale(0.9);
}

.mobile-filter .m-filer-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 500;
    color: var(--bs-dark);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 10px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.mobile-filter .m-filer-list:hover {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.mobile-filter .m-filer-list p.fw-bold {
    font-size: 15px;
    color: #212529;
    transition: color 0.3s ease;
}
.mobile-filter .m-filer-list:hover p.fw-bold {
    color: var(--bs-primary);
}
.mobile-filter .m-filer-list .d-flex p {
    font-size: 14px;
    color: #495057;
    margin-right: 8px;
}

.mobile-filter .m-filer-list i {
    font-size: 14px;
    color: #6c757d;
    transition: transform 0.3s ease, color 0.3s ease;
}

.mobile-filter .m-filer-list:hover i {
    transform: translateX(4px);
    color: var(--bs-primary);
}

.mobile-filter .number-range-list {
    /* display: flex; */
    /* gap: 14px; */
    width: 100%;
    /* justify-content: space-between; */
}

.mobile-filter .range-input-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
}

.mobile-filter .number-range-item {
    width: 100%;
    padding: 14px 40px 14px 16px;
    background: var(--bs-white);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    color: var(--bs-dark);
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05);
}

/* Placeholder styling */
.mobile-filter .number-range-item::placeholder {
    color: var(--bs-dark) !important;
    font-weight: 500;
}

/* Focus & hover effects */
.mobile-filter .number-range-item:focus {
    background: #f7f7f7;
    /* border-color: var(--bs-primary); */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    /* transform: translateY(-2px) scale(1.02); */
}

.mobile-filter .number-range-item:hover {
    background: #f7f7f7;
}

/* Unit label */
.mobile-filter .range-input-wrapper .unit-label {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-dark);
    font-size: 14px;
    pointer-events: none;
    transition: color 0.3s ease;
}

.mobile-filter .range-input-wrapper:focus-within .unit-label {
    color: var(--bs-primary);
    font-weight: 500;
}

/* Remove default number arrows */
.mobile-filter .number-range-item::-webkit-outer-spin-button,
.mobile-filter .number-range-item::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}