.custom-select {
    position: relative;
    width: 100%;
    font-family: var(--body-s-family);
    font-size: var(--body-s-size);
    color: var(--color-white);

    &.open .custom-select__trigger {
        border-bottom-color: var(--color-purple);
    }

    .custom-select__trigger.is-placeholder {
        color: #888888;

        svg,
        i {
            color: #888888;
        }
    }

    &.education-level .custom-select__trigger {
        height: 24px;
    }

    .custom-select__trigger {
        font-family: var(--body-s-family);
        width: 100%;
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--color-white);
        border-radius: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        transition:
            border-color var(--dur-normal) var(--ease-standard),
            color var(--dur-normal) var(--ease-standard);
        height: 40px;
        padding: 6px 0 10px;
        color: var(--color-white);
        font-size: 12px;

        svg,
        i {
            stroke-width: 1;
            pointer-events: none;
        }

        &:hover {
            border-bottom-color: var(--color-purple);
        }

        &:disabled {
            opacity: 0.5;
            cursor: default;
        }
    }

    /* Contenedor con border-radius (no scrollea) */
    .custom-select__dropdown {
        position: absolute;
        padding: 3px 0;
        top: calc(100% + 1px);
        left: 0;
        width: 100%;
        background: #ffffff;
        border-radius: 0 0 12px 12px;
        overflow: hidden;
        display: none;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        z-index: 20;
    }

    &.open .custom-select__dropdown {
        display: block;
    }

    .custom-select__list {
        max-height: 240px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .custom-select__option {
        padding: 9px 16px;
        cursor: pointer;
        color: var(--color-black);
        transition:
            background 0.15s ease,
            color 0.15s ease;
        user-select: none;
    }

    .custom-select__option:hover {
        background: #d2d2d2;
        color: var(--color-purple);
    }

    .custom-select__option.is-selected {
        color: var(--color-purple);
        background: #d2d2d2;
    }
}

/* Scrollbar (opcional, webkit) */
.custom-select__list::-webkit-scrollbar {
    width: 6px;
}

.custom-select__list::-webkit-scrollbar-thumb {
    background: var(--color-purple);
    border-radius: 10px;
}

.custom-select__list::-webkit-scrollbar-track {
    background: transparent;
}