/* Form-Elements.css - Form input and control styles for Expo Registration Form */

/* Input group styles */
.input-group {
    position: relative;
    margin-bottom: 1rem;
}

.input-group label {
    transition: color 0.3s ease, transform 0.3s ease;
}

.input-group input:focus ~ label,
.input-group select:focus ~ label,
.input-group textarea:focus ~ label {
    color: #4f46e5;
    font-weight: 500;
}

/* Input field focus states */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
    transition: all 0.3s ease;
}

/* Input validation styles */
input.border-red-500,
select.border-red-500,
textarea.border-red-500 {
    border-color: #ef4444;
    background-color: #fef2f2;
}

/* Upload area styles */
#uploadArea {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

#uploadArea:hover {
    transform: scale(1.05);
    border-color: #4f46e5;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.2);
}

#previewImage {
    transition: opacity 0.3s ease-in;
}

/* Checkbox styles */
input[type="checkbox"] {
    cursor: pointer;
}

/* Custom toggle switch for marketing consent */
input[type="checkbox"][id="marketingConsent"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

input[type="checkbox"][id="marketingConsent"] + label {
    display: inline-block;
    width: 40px;
    height: 24px;
    position: relative;
    cursor: pointer;
    background-color: #d1d5db;
    border-radius: 34px;
    transition: background-color 0.3s ease;
}

input[type="checkbox"][id="marketingConsent"] + label::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

input[type="checkbox"][id="marketingConsent"]:checked + label {
    background-color: #4f46e5;
}

input[type="checkbox"][id="marketingConsent"]:checked + label::before {
    transform: translateX(16px);
}

input[type="checkbox"][id="marketingConsent"]:focus + label {
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

/* Accessibility checkbox details */
#accessibilityDetails {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

#accessibilityDetails:not(.hidden) {
    max-height: 100px;
    opacity: 1;
}

/* Focus state styles */
.input-focus {
    position: relative;
}

.input-focus::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #4f46e5;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.input-focus:focus-within::after {
    transform: scaleX(1);
}