.custom-dropdown {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;


    &.focused {
        border-color: #2bd48f;
        box-shadow:
                0 0 0 2px rgba(43, 212, 143, 0.45),
                0 0 16px rgba(43, 212, 143, 0.55);
        border-radius: 1rem;
    }

    &.is-disabled {
        .custom-dropdown-button {
            cursor: not-allowed;
            background: linear-gradient(
                180deg,
                rgba(205, 214, 228, 0.92),
                rgba(184, 196, 214, 0.96)
            );
            border-color: rgba(120, 136, 160, 0.85);
            color: rgba(36, 44, 58, 0.58);
            box-shadow: none;
            opacity: 1;
            pointer-events: none;
        }

        .dropdown-label {
            color: rgba(36, 44, 58, 0.58);
        }

        .custom-dropdown-arrow {
            opacity: 0.35;
        }
    }

    .custom-dropdown-button {
        display: flex;
        min-height: var(--tb-control-height, calc(1.4em + 1rem + 2px));
        height: var(--tb-control-height, 42px);
        padding: var(--tb-control-padding-y, 0.5rem) var(--tb-control-padding-x, 1rem);
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 1rem;
        background-color: white;
        cursor: pointer;
        font-size: 14px;
        -webkit-tap-highlight-color: transparent;

        .custom-dropdown-arrow {
            transition: transform 0.3s ease;
            line-height: 8px;
            font-size: 1.3rem;
            padding: 0;

            [aria-expanded="true"] & {
                transform: rotate(180deg);
            }
        }
    }

    .dropdown-label {
        padding: 0;
        line-height: 1.4;
    }

    .custom-dropdown-options {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-height: 200px;
        overflow-y: auto;
        border: 1px solid #ccc;
        border-radius: 8px;
        background: white;
        z-index: 1000;

        &.open {
            display: block;
        }

        div {
            padding: 0.5rem 1rem;
            cursor: pointer;
            font-size: 0.9rem;

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

.disabled-options {
    color: #999;
    cursor: not-allowed !important;
    background-color: #f5f5f5;
    opacity: 0.8;

    &:hover {
        background-color: #f5f5f5 !important;
    }
}