/* form.css */

/* Form styling */
form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Spacing between form elements */
}

/* Label styles */
label {
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--primary_text_color); /* Dark gray text for better readability */
}

/* Input, select, and textarea styles */
input[type="text"], 
input[type="email"],
input[type="url"],
select, 
textarea {
    width: 100%;
    padding: 12px; /* Increased padding for better touch targets */
    border: 1px solid var(--border_color); /* Light gray border */
    border-radius: 4px; /* Rounded corners */
    font-size: 16px; /* Ensures readability */
    color: var(--primary_text_color); /* Dark gray text */
    box-sizing: border-box; /* Includes padding and border in element's total width and height */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
    background: var(--input_background);
}

/* Textarea specific styles */
textarea {
    height: 100px; /* Fixed height for textarea */
    resize: vertical; /* Allow vertical resizing */
}

/* Focus state for inputs and selects */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--focus_color); /* Blue border on focus */
    box-shadow: 0 0 8px var(--focus_color); /* Blue shadow on focus */
    outline: none;
    background: var(--background_light); /* White background on focus */
}

/* Submit button styles */
button[type="submit"] {
    padding: 12px 24px; /* Increased padding for better touch targets */
    background: var(--primary_button_color); /* Blue background */
    color: var(--primary_button_text_color); /* White text for contrast */
    border: none;
    border-radius: 4px; /* Rounded corners */
    font-size: 16px; /* Readable font size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background 0.3s ease; /* Smooth transition on hover */
    margin-top: 10px; /* Space above the button */
}

/* Submit button hover effect */
button[type="submit"]:hover {
    background: var(--primary_button_hover_color); /* Orange on hover */
    color: var(--primary_button_hover_text_color);
}

/* Error and success messages */
.error {
    color: var(--error_color); /* Red for error messages */
    font-size: 14px;
    margin-top: -10px; /* Adjust spacing for error messages */
    margin-bottom: 15px;
}

.success {
    color: #5bc0de; /* Light blue for success messages */
    font-size: 14px;
    margin-top: -10px; /* Adjust spacing for success messages */
    margin-bottom: 15px;
}

.disabled {
    background: gray !important;
    color: white !important;
}