/* Custom Form Styling for Synoviq */

/* Form Container */
.custom-form {
    @apply space-y-6;
}

/* Form Field Groups */
.form-field-group {
    @apply relative;
}

/* Labels */
.custom-form label {
    @apply block text-sm font-semibold text-gray-700 mb-3;
}

.custom-form label.required::after {
    content: " *";
    @apply text-red-500 ml-1;
}

/* Text Inputs */
.custom-form input[type="text"],
.custom-form input[type="email"],
.custom-form input[type="tel"],
.custom-form input[type="url"],
.custom-form input[type="number"],
.custom-form input[type="password"] {
    @apply w-full px-4 py-4 text-gray-700 bg-white border-2 border-gray-200 rounded-lg transition-all duration-300;
}

.custom-form input[type="text"]:focus,
.custom-form input[type="email"]:focus,
.custom-form input[type="tel"]:focus,
.custom-form input[type="url"]:focus,
.custom-form input[type="number"]:focus,
.custom-form input[type="password"]:focus {
    @apply border-primary ring-2 ring-primary/20 outline-none;
}

.custom-form input[type="text"]:hover,
.custom-form input[type="email"]:hover,
.custom-form input[type="tel"]:hover,
.custom-form input[type="url"]:hover,
.custom-form input[type="number"]:hover,
.custom-form input[type="password"]:hover {
    @apply border-primary/60;
}

/* Textarea */
.custom-form textarea {
    @apply w-full px-4 py-4 text-gray-700 bg-white border-2 border-gray-200 rounded-lg transition-all duration-300 resize-none;
}

.custom-form textarea:focus {
    @apply border-primary ring-2 ring-primary/20 outline-none;
}

.custom-form textarea:hover {
    @apply border-primary/60;
}

/* Select Dropdowns */
.custom-form select {
    @apply w-full px-4 py-4 text-gray-700 bg-white border-2 border-gray-200 rounded-lg transition-all duration-300 appearance-none cursor-pointer;
    background-image: none;
}

.custom-form select:focus {
    @apply border-primary ring-2 ring-primary/20 outline-none;
}

.custom-form select:hover {
    @apply border-primary/60;
}

/* Select Container with Custom Arrow */
.select-container {
    @apply relative;
}

.select-container::after {
    content: "";
    @apply absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none;
}

.select-container::after {
    content: "⌄";
    @apply text-gray-400 text-xl font-bold;
}

/* Checkboxes */
.checkbox-group {
    @apply flex items-start space-x-3;
}

.custom-form input[type="checkbox"] {
    @apply w-4 h-4 text-primary bg-gray-100 border-gray-300 rounded focus:ring-primary focus:ring-2 transition-colors;
}

.custom-form input[type="checkbox"]:checked {
    @apply bg-primary border-primary;
}

/* Radio Buttons */
.radio-group {
    @apply space-y-2;
}

.radio-option {
    @apply flex items-center space-x-3;
}

.custom-form input[type="radio"] {
    @apply w-4 h-4 text-primary bg-gray-100 border-gray-300 focus:ring-primary focus:ring-2 transition-colors;
}

.custom-form input[type="radio"]:checked {
    @apply bg-primary border-primary;
}

/* File Upload */
.file-upload-container {
    @apply relative;
}

.file-upload-container input[type="file"] {
    @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer;
}

.file-upload-display {
    @apply w-full px-4 py-4 text-gray-700 bg-white border-2 border-gray-200 rounded-lg hover:border-primary transition-all duration-300 cursor-pointer;
}

.file-upload-display:hover {
    @apply border-primary/60;
}

/* Submit Button */
.custom-form button[type="submit"] {
    @apply w-full bg-gradient-to-r from-primary to-primary/90 text-white py-4 px-8 rounded-lg font-semibold text-lg transition-all duration-300 transform hover:scale-[1.02] shadow-lg hover:shadow-xl;
}

.custom-form button[type="submit"]:hover {
    @apply from-primary/90 to-primary;
}

.custom-form button[type="submit"]:active {
    @apply scale-[0.98];
}

/* Loading States */
.form-loading {
    @apply flex items-center justify-center space-x-3;
}

.loading-spinner {
    @apply animate-spin rounded-full h-8 w-8 border-b-2 border-primary;
}

/* Success/Error Messages */
.message-success {
    @apply bg-green-50 border border-green-200 text-green-800 px-6 py-4 rounded-lg flex items-center;
}

.message-error {
    @apply bg-red-50 border border-red-200 text-red-800 px-6 py-4 rounded-lg flex items-center;
}

.message-warning {
    @apply bg-yellow-50 border border-yellow-200 text-yellow-800 px-6 py-4 rounded-lg flex items-center;
}

.message-info {
    @apply bg-blue-50 border border-blue-200 text-blue-800 px-6 py-4 rounded-lg flex items-center;
}

/* Form Validation */
.field-error {
    @apply text-sm text-red-600 flex items-center mt-2;
}

.field-error svg {
    @apply w-4 h-4 mr-1;
}

.field-help {
    @apply text-sm text-gray-500 mt-2;
}

/* Floating Labels (Optional) */
.floating-label {
    @apply relative;
}

.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label,
.floating-label textarea:focus + label,
.floating-label textarea:not(:placeholder-shown) + label {
    @apply transform -translate-y-6 scale-75 text-primary;
}

.floating-label label {
    @apply absolute left-4 top-4 text-gray-500 transition-all duration-300 pointer-events-none;
}

/* Responsive Design */
@media (max-width: 640px) {
    .custom-form input,
    .custom-form textarea,
    .custom-form select {
        @apply px-3 py-3;
    }
    
    .custom-form button[type="submit"] {
        @apply py-3 px-6 text-base;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .custom-form input,
    .custom-form textarea,
    .custom-form select {
        @apply bg-gray-800 border-gray-600 text-gray-100;
    }
    
    .custom-form input:focus,
    .custom-form textarea:focus,
    .custom-form select:focus {
        @apply border-primary ring-primary/20;
    }
    
    .custom-form label {
        @apply text-gray-300;
    }
}

/* Animation Keyframes */
@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

/* Apply animations */
.form-field-group {
    animation: fadeIn 0.3s ease-out;
}

.message-success,
.message-error,
.message-warning,
.message-info {
    animation: slideIn 0.3s ease-out;
}