/* jQuery Validation Plugin Styles */
.error {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

label.error {
    color: #dc3545;
    font-size: 12px;
    font-weight: normal;
    margin-top: 5px;
    display: block;
}

input.error {
    border-color: #dc3545 !important;
    background-color: #fff5f5 !important;
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.3) !important;
}

input.valid {
    border-color: #28a745 !important;
    background-color: #f8fff8 !important;
    box-shadow: 0 0 5px rgba(40, 167, 69, 0.3) !important;
}

/* Form validation states */
.form-group.has-error .form-control {
    border-color: #dc3545;
}

.form-group.has-success .form-control {
    border-color: #28a745;
}

.form-group.has-error .control-label,
.form-group.has-error .help-block,
.form-group.has-error .radio,
.form-group.has-error .checkbox,
.form-group.has-error .radio-inline,
.form-group.has-error .checkbox-inline,
.form-group.has-error .form-control-feedback {
    color: #dc3545;
}

.form-group.has-success .control-label,
.form-group.has-success .help-block,
.form-group.has-success .radio,
.form-group.has-success .checkbox,
.form-group.has-success .radio-inline,
.form-group.has-success .checkbox-inline,
.form-group.has-success .form-control-feedback {
    color: #28a745;
}

/* Validation feedback icons */
.form-control-feedback {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    pointer-events: none;
}

.has-feedback .form-control {
    padding-right: 42.5px;
}

/* Error message positioning */
.error-message {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
    display: block;
    min-height: 18px;
    line-height: 1.2;
    font-weight: 500;
}

/* Stabilize input layout when toggling error/valid classes */
#epaimentform input {
    display: block;
    width: 100%;
}

/* Specific validation for Mobilis form */
#epaimentform .form-group.has-error input {
    border-color: #dc3545;
    background-color: #fff5f5;
}

#epaimentform .form-group.has-success input {
    border-color: #28a745;
    background-color: #f8fff8;
}

/* Captcha validation */
#captcha.error {
    border-color: #dc3545;
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.3);
}

#captcha.valid {
    border-color: #28a745;
    box-shadow: 0 0 5px rgba(40, 167, 69, 0.3);
}

/* Button states during validation */
.ButtonEnvoyer:disabled,
.ButtonAnnuler:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading state */
.ButtonEnvoyer.loading {
    position: relative;
    padding-left: 40px;
}

.ButtonEnvoyer.loading::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

/* Focus states for validation */
input:focus.error {
    border-color: #dc3545;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.4);
}

input:focus.valid {
    border-color: #28a745;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.4);
}

/* Responsive validation styles */
@media (max-width: 480px) {
    .error {
        font-size: 11px;
    }
    
    label.error {
        font-size: 11px;
    }
    
    .error-message {
        font-size: 11px;
    }
}