/* assets/styles/form-custom.css */

/* Styles pour les sliders/ranges */
input[type="range"] {
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: #d1d5db;
    border-radius: 4px;
}

input[type="range"]::-webkit-slider-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #f97316; /* orange-500 */
    cursor: pointer;
    -webkit-appearance: none;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: #d1d5db;
    border-radius: 4px;
    border: none;
}

input[type="range"]::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #f97316; /* orange-500 */
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Styles pour les inputs en erreur avec focus */
input.border-red-500:focus,
textarea.border-red-500:focus,
select.border-red-500:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Styles pour les labels required */
label.required::after {
    content: " *";
    color: #ef4444;
}

/* Animation subtile pour les champs focus */
input:focus,
textarea:focus,
select:focus {
    transform: translateY(-1px);
}

/* Placeholder styling */
input::placeholder,
textarea::placeholder {
    color: #9ca3af;
    opacity: 1;
}

/* File input styling amélioré */
input[type="file"]::-webkit-file-upload-button {
    transition: all 0.2s;
}

/* Styles pour les checkboxes et radios personnalisés */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* Animation de validation réussie */
@keyframes success-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.form-success {
    animation: success-pulse 0.6s ease-out;
}