/* Style for the select dropdown */
.login-box-input select {
    appearance: none; /* Remove default dropdown styling */
    background-color: transparent; /* Transparent background */
    border: none; /* Remove default border */
    padding: 10px 0; /* Padding similar to input */
    font-size: 16px; /* Font size */
    color: #fff; /* Text color, to match the email field */
    width: 100%; /* Full width */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
    outline: none; /* Remove outline on focus */
    cursor: pointer; /* Cursor pointer for dropdown */
    position: relative;
    font-family: inherit; /* Inherit font to match */
}

/* Remove default select arrow and create custom arrow */
.login-box-input select::-ms-expand {
    display: none;
}
.login-box-input select:after {
    content: "\25BC"; /* Downward arrow symbol */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff; /* Color of the arrow */
}

/* Style for label on the select dropdown */
.login-box-input:has(select) label {
    position: absolute;
    top: 12px; /* Adjust label position */
    left: 0; /* Align with the select */
    color: #fff; /* Default label color */
    transition: 0.3s ease all;
    font-size: 16px;
    pointer-events: none;
}

/* Floating label effect when select is focused or has value */
/* .login-box-input select:focus + label,
.login-box-input select:not([value="none"]) + label {
    top: -14px;
    font-size: 12px;
    color: #66afe9;
} */

/* Focus state for select field */
.login-box-input select:focus .login-box:has(select) {
    border-bottom-color: #66afe9; /* Border color change on focus */
}

/* Style for icon next to select (user icon) */
.login-box-input .select-icon {
    position: absolute;
    left: 0;
    top: 12px; /* Align it vertically with the select field */
    font-size: 20px;
    color: #fff;
}

/* Ensure the select icon and input don't overlap */
.login-box-input {
    position: relative;
}

select option {
    color: black;
}