/* Input type places */
input, select {
    background-color: var(--color-4-dark); /* Dark background */
    color: white; /* Text color */
    border: none; /* Remove all borders */
    border-bottom: 2px solid white; /* Add only a bottom border */
    padding: 8px 4px; /* Add some inner spacing */
    font-size: 1rem; /* Adjust the font size for readability */
    outline: none; /* Remove the blue border on focus */
    width: 100%; /* Make inputs span the width of the parent */
    box-sizing: border-box; /* Ensure padding doesn't overflow */
}

input:hover, select:hover {
    border-bottom: 2px solid var(--color-3); /* Highlight with primary color on focus */
}
input:focus, select:focus {
    border-bottom: 2px solid var(--color-2); /* Highlight with primary color on focus */
    outline: none; /* Avoid default focus outline */
}

select option {
    background-color: var(--color-4-dark);
    color: white;
}

.error-input{
    border: 2px solid var(--color-1) !important;
    border-radius: 5px;
    outline: none;
}

/* SVG enter buttons */
.enter-button {
    background-color: transparent;
    color: var(--color-3);
    border: 0px;
    margin-left: auto; /* Push the button to the right */
    scale: calc(31 / 48);
    height: fit-content;
    width: fit-content;
}
.enter-button:hover {
    color: var(--color-2);
}
.enter-button:active {
    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.5)); /* Add shadow to SVG */
    transform: translateY(2px); /* Slightly "push" the button down */
}