/* Enhanced form styling for dark mode */

/* Form container */
.form-container {
    background-color: #1e1e1e !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #333 !important;
    padding: 25px !important;
    margin-bottom: 30px !important;
}

/* Form groups */
.form-group {
    margin-bottom: 20px !important;
    position: relative !important;
}

/* Labels */
.form-group label {
    display: block !important;
    margin-bottom: 8px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
}

/* Text inputs */
.form-control,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="url"],
textarea {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid #444 !important;
    border-radius: 6px !important;
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
}

.form-control:focus,
input:focus,
textarea:focus {
    border-color: #3b82f6 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3) !important;
}

/* Select inputs */
select {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid #444 !important;
    border-radius: 6px !important;
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    font-size: 1rem !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    padding-right: 45px !important;
}

select:focus {
    border-color: #3b82f6 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3) !important;
}

/* Radio and checkbox styling */
.form-check {
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
}

.form-check-input {
    width: 18px !important;
    height: 18px !important;
    margin-right: 10px !important;
    accent-color: #3b82f6 !important;
    cursor: pointer !important;
}

.form-check-label {
    color: #e0e0e0 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
}

/* Buttons */
.btn,
button[type="submit"] {
    display: inline-block !important;
    padding: 12px 25px !important;
    border-radius: 8px !important;
    background-color: #3b82f6 !important;
    color: white !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    overflow: hidden !important;
}

.btn:hover,
button[type="submit"]:hover {
    background-color: #2563eb !important;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.4) !important;
    transform: translateY(-2px) !important;
}

.btn:active,
button[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

.btn:focus,
button[type="submit"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4) !important;
}

/* Submit button with ripple effect */
.submit-btn {
    background-color: #3b82f6 !important;
    position: relative !important;
}

.submit-btn::after {
    content: '' !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: inherit !important;
    transform: scale(0) !important;
    opacity: 0 !important;
    transition: all 0.5s !important;
}

.submit-btn:hover::after {
    transform: scale(1) !important;
    opacity: 1 !important;
    animation: pulse 1.5s infinite !important;
}

@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 0.2; }
    100% { opacity: 0.5; }
}

/* Form feedback */
.form-feedback {
    margin-top: 8px !important;
    font-size: 0.85rem !important;
}

.form-feedback.success {
    color: #34d399 !important;
}

.form-feedback.error {
    color: #f87171 !important;
}

/* Form input icons */
.input-icon {
    position: relative !important;
}

.input-icon input {
    padding-left: 40px !important;
}

.input-icon i {
    position: absolute !important;
    top: 50% !important;
    left: 15px !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
}

/* Custom range input styling */
input[type="range"] {
    -webkit-appearance: none !important;
    width: 100% !important;
    height: 6px !important;
    border-radius: 5px !important;
    background: #444 !important;
    outline: none !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s !important;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #3b82f6 !important;
    cursor: pointer !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important;
}

input[type="range"]::-moz-range-thumb {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #3b82f6 !important;
    cursor: pointer !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important;
}

input[type="range"]:hover {
    opacity: 1 !important;
}

/* Form title */
.form-title {
    color: #60a5fa !important;
    font-size: 1.4rem !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #333 !important;
    font-weight: 600 !important;
}

/* Helper text */
.form-helper {
    color: #94a3b8 !important;
    font-size: 0.85rem !important;
    margin-top: 5px !important;
    display: block !important;
}