.smart-dropdown-wrapper {
    /* ... [Previous variables and base styles] ... */
    --bs-blue: #0d6efd;
    --bs-btn-bg: #0d6efd;
    --bs-btn-color: #fff;
    --bs-btn-hover: #0b5ed7;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-opacity: 0.65;
    --bs-border-radius: 0.375rem;

    font-family:
        system-ui,
        -apple-system,
        'Segoe UI',
        Roboto,
        sans-serif;
    position: relative;
    width: 100%;

    * {
        box-sizing: border-box;
    }

    /* --- TRIGGER --- */
    .filter-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 38px;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        color: #212529;
        background: #fff;
        border: 1px solid #ced4da;
        border-radius: var(--bs-border-radius);
        cursor: pointer;
        transition: all 0.15s;

        &:hover {
            border-color: #b3b3b3;
        }

        &.is-open {
            border-color: #86b7fe;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }
    }

    .result-image {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        /* Circle image */
        object-fit: cover;
        margin-right: 12px;
        background-color: #f0f0f0;
        flex-shrink: 0;
    }

    /* Typewriter cursor animation */
    @keyframes typewriterCursor {
        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }
    }

    /* Typewriter fade-in animation for final placeholder */
    @keyframes typewriterFadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* INPUT MODE TRIGGER STYLES */
    .trigger-input {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        font-size: 1rem;
        color: #212529;
        padding: 0;
        margin: 0;

        &::placeholder {
            color: #6c757d;
        }

        /* Typewriter cursor effect when placeholder is animating */
        &.typewriter-active::placeholder {
            border-right: 2px solid #6c757d;
            animation: typewriterCursor 0.8s infinite;
        }

        /* Fade-in effect for last typewriter item */
        &.typewriter-fade-in::placeholder {
            animation: typewriterFadeIn 0.3s ease-out forwards;
        }
    }

    .trigger-input-inline {
        border: none;
        outline: none;
        background: transparent;
        font-size: 1rem;
        min-width: 50px;
        flex-grow: 1;
    }

    /* ... [Chips, Placeholder, Caret styles - No Change] ... */
    .trigger-content {
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        overflow: hidden;
    }

    .placeholder-text {
        color: #6c757d;
    }

    .caret {
        margin-left: 8px;
        border-top: 4px solid #666;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
    }

    .chip {
        background: #e9ecef;
        color: #495057;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.85rem;
        display: inline-flex;
        align-items: center;
        font-weight: 500;
    }

    .chip-remove {
        margin-left: 6px;
        cursor: pointer;
        font-weight: bold;
        color: #888;
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;

        &:hover {
            background: #ccc;
            color: #000;
        }
    }

    /* --- DROPDOWN --- */
    .filter-dropdown {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        width: 100%;
        min-width: 300px;
        background: white;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: var(--bs-border-radius);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        z-index: 1050;
        display: flex;
        flex-direction: column;
        max-height: 450px;
        animation: fadeIn 0.1s ease-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Chrome Android-style mobile animation: fast fade + slide up from bottom */
    @keyframes mobileSlideUp {
        from {
            opacity: 0;
            transform: translateY(100%);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Mobile closing animation: slide down with fade out */
    @keyframes mobileSlideDown {
        from {
            opacity: 1;
            transform: translateY(0);
        }

        to {
            opacity: 0;
            transform: translateY(100%);
        }
    }

    .search-header {
        padding: 10px;
        border-bottom: 1px solid #e9ecef;
        background-color: #fff;
        flex-shrink: 0;
        display: flex;
        gap: 8px;
        align-items: center;
        overflow: hidden; // Prevent content overflow
    }

    /* Mobile back button - hidden on desktop, shown on mobile */
    .mobile-back-btn {
        display: none;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        padding: 8px;
        cursor: pointer;
        color: #212529;
        flex-shrink: 0;

        &:hover {
            color: #0d6efd;
        }

        svg {
            display: block;
        }
    }

    .search-input {
        flex-grow: 1;
        width: auto;
        min-width: 0; // Prevent flex overflow
        padding: 0.375rem 0.75rem 0.375rem 34px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        outline: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 10px center;

        &:focus {
            border-color: #86b7fe;
        }
    }

    /* ... [Button, List, Footer, Item styles - No Change] ... */
    .btn-confirm {
        display: inline-block;
        font-weight: 500;
        text-align: center;
        vertical-align: middle;
        user-select: none;
        border: 1px solid transparent;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: var(--bs-border-radius);
        color: var(--bs-btn-color);
        background-color: var(--bs-btn-bg);
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
        flex-shrink: 0; // Prevent button from shrinking in flex container

        &:hover:not(:disabled) {
            background-color: var(--bs-btn-hover);
        }

        &:active:not(:disabled) {
            background-color: #0a58ca;
        }

        &:disabled {
            opacity: var(--bs-btn-disabled-opacity);
            cursor: not-allowed;
        }
    }

    .dropdown-footer {
        padding: 10px;
        border-top: 1px solid #e9ecef;
        background-color: #f8f9fa;
        flex-shrink: 0;

        .btn-confirm {
            width: 100%;
        }
    }

    .list-container {
        overflow-y: auto;
        flex-grow: 1;
        min-height: 150px;
        /* Keep touch scrolling inside the list on iOS instead of chaining the
           overscroll to the sheet/page behind the fullscreen dropdown. */
        overscroll-behavior: contain;
    }

    .list-header {
        padding: 12px 16px;
        font-size: 0.85rem;
        color: #6c757d;
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
        font-style: italic;
    }

    .list-group-label {
        padding: 8px 16px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #adb5bd;
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
        position: sticky;
        top: 0;
        z-index: 5;
    }

    .sticky-selected {
        background: #f8f9fa;
        color: var(--bs-blue);
        border-bottom: 2px solid #e9ecef;
    }

    .list-item-custom-container {
        padding: 8px 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f8f9fa;
        transition: background-color 0.15s;

        &:hover {
            background-color: #e9ecef;
        }

        &.selected {
            background-color: #e7f1ff;
        }

        // Keyboard (arrow-key) focus indicator — distinct from hover/selected so
        // SR/keyboard users can see which option is active (WCAG 2.4.7).
        &.focused {
            background-color: #e9ecef;
            box-shadow: inset 0 0 0 2px #2b55cc;
        }
    }

    .list-item {
        padding: 8px 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f8f9fa;

        &:hover {
            background: #e9ecef;
        }

        &.selected {
            background: #e7f1ff;
        }

        &.focused {
            background: #e9ecef;
            box-shadow: inset 0 0 0 2px #2b55cc;
        }
    }

    .checkbox-visual {
        width: 16px;
        height: 16px;
        border: 1px solid #adb5bd;
        border-radius: 3px;
        margin-right: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        flex-shrink: 0;

        &.checked {
            background: var(--bs-blue);
            border-color: var(--bs-blue);

            &::after {
                content: '';
                width: 4px;
                height: 8px;
                border: solid white;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
                margin-top: -2px;
            }
        }
    }

    .no-checkbox .checkbox-visual {
        display: none;
    }

    .item-content {
        flex: 1;
    }

    .item-text {
        display: block;
        font-size: 0.95rem;
        color: #212529;
    }

    .item-subtitle {
        display: block;
        font-size: 0.8rem;
        color: #6c757d;
    }

    .loading-state,
    .empty-state {
        padding: 1.5rem;
        text-align: center;
        color: #6c757d;
        font-size: 0.9rem;
    }

    .search-only-prompt {
        padding: 2.5rem 1.5rem;
        font-size: 1rem;
        color: #adb5bd;
        font-style: italic;
    }

    .view-mobile-only {
        width: 100%;
    }

    .view-desktop-only {
        width: 100%;
    }

    /* Desktop View ( > 768px ) */
    @media (min-width: 769px) {
        .view-mobile-only {
            display: none !important;
        }

        .view-desktop-only {
            display: block !important;
        }
    }

    /* Mobile View ( <= 768px ) */
    @media (max-width: 768px) {
        .view-mobile-only {
            display: block !important;
        }

        .view-desktop-only {
            display: none !important;
        }
    }

    /* --- MODE LOGIC (Desktop) --- */

    /* When in 'input' mode on Desktop: Hide internal search header and footer */
    @media (min-width: 769px) {
        	&.mode-input {
            .internal-search-header {
                display: none !important;
            }

            .dropdown-footer {
                display: none !important;
            }
        }
    }

    /* --- MOBILE RESPONSIVE --- */
    @media (max-width: 768px) {
        .filter-dropdown {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            border-radius: 0;
            border: none;
            z-index: 9999;
            max-height: none;
            /* Chrome Android-style: fast slide up with fade */
            animation: mobileSlideUp 0.25s cubic-bezier(0.32, 0.72, 0, 1);

            /* Closing animation */
            &.is-closing {
                animation: mobileSlideDown 0.2s cubic-bezier(0.32, 0.72, 0, 1) forwards;
            }
        }

        /* Mobile search header - Airbnb/Chrome style with back button */
        .search-header {
            padding: 12px 12px 12px 4px;
            background-color: #fff;
            border-bottom: 1px solid #e9ecef;
        }

        /* Show mobile back button */
        .mobile-back-btn {
            display: flex;
        }

        /* On mobile, remove the search icon from input since we have back button */
        .search-input {
            padding-left: 12px;
            background-image: none;
            border: none;
            border-radius: 0;
            font-size: 1.1rem;

            &:focus {
                border-color: transparent;
                box-shadow: none;
            }
        }

        .list-container {
            height: auto;
        }

        /* On Mobile, always show the internal search/footer even if in 'input' mode */
        /* because the external input is behind the modal */
        &.mode-input {
            .internal-search-header {
                display: flex !important;
            }

            .dropdown-footer {
                display: block !important;
            }
        }
    }
}