/* Custom Form Validation Styles */

/* Valid Field Styling */
.form-control.is-valid {
    border-color: #28a745;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='m2.3 6.73.8.92 3.13-3.1-1.51-1.5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Invalid Field Styling */
.form-control.is-invalid {
    border-color: #dc3545;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6h.4m0 2.4v2.4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Custom invalid feedback styling */
.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
    padding: 0.5rem;
    border-radius: 0.25rem;
    border-left: 3px solid #dc3545;
    position: relative;
    z-index: 1;
}

/* Ensure input-group maintains consistent height */
.input-group {
    min-height: 50px;
    align-items: center;
}

/* Fix for floating labels and consistent icon positioning */
.input-group .form-control {
    position: relative;
    z-index: 2;
}

/* Loading button styles */
.btn-loading {
    pointer-events: none;
    opacity: 0.65;
}

/* Checkbox validation */
.form-check-input.is-invalid {
    border-color: #dc3545;
}

.form-check-input.is-valid {
    border-color: #28a745;
}

/* Character counter styling */
.form-text.text-warning {
    color: #ffc107 !important;
    font-weight: 500;
}

/* Required field indicator */
.text-danger {
    color: #dc3545 !important;
}

/* Focus states for better accessibility */
.form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(225, 24, 24, 0.25);
    border-color: #e11818;
}

.form-control.is-valid:focus {
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    border-color: #28a745;
}

.form-control.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    border-color: #dc3545;
}

/* Spinner for loading state */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

/* Phone number input special styling */
input[type="tel"] {
    font-family: 'Courier New', monospace;
}

/* Special handling for tel inputs with icons */
input[type="tel"] ~ .icon {
    right: 15px !important;
}

input[type="tel"].is-valid ~ .icon,
input[type="tel"].is-invalid ~ .icon {
    right: 15px !important;
}

/* Honeypot field - ensure it's completely hidden */
input[name="_gotcha"] {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* Success message styling */
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

/* Error message styling */
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

/* Responsive form adjustments */
@media (max-width: 768px) {
    .invalid-feedback {
        font-size: 0.8rem;
        padding: 0.375rem;
    }
    
    .form-text {
        font-size: 0.8rem;
    }
}

/* Form animations */
.form-control, .form-check-input {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-image 0.15s ease-in-out;
}

/* Fix icon positioning when validation errors appear */
.input-group {
    position: relative;
}

.input-group .icon {
    z-index: 10;
    pointer-events: none;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 15px;
}

/* Ensure icons stay in place regardless of validation state */
.form-control.is-invalid ~ .icon,
.form-control.is-valid ~ .icon,
.form-control ~ .icon {
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 15px !important;
}

/* Prevent validation background images from affecting layout */
.form-control.is-valid,
.form-control.is-invalid {
    background-position: right calc(2.5em + 0.1875rem) center !important;
    padding-right: 2.5rem !important;
}

/* Adjust icon position when there's validation feedback */
.input-group.has-validation .icon,
.input-group .form-control.is-valid ~ .icon,
.input-group .form-control.is-invalid ~ .icon {
    right: 45px !important;
}

/* Textarea with internal icon and counter */
.textarea-wrapper {
    position: relative;
}

.textarea-wrapper .form-control {
    padding-bottom: 40px !important;
    min-height: 120px;
    resize: vertical;
}

.textarea-footer {
    background: transparent;
    border: none;
    z-index: 5;
    margin-right: 10px;
    margin-bottom: 10px;
    pointer-events: none;
}

.textarea-footer .character-count {
    font-size: 0.8rem;
    margin: 0;
}

.textarea-footer i {
    font-size: 0.9rem;
}

/* Update character counter via JavaScript */
.character-count.warning {
    color: #ffc107 !important;
    font-weight: 500;
}

.character-count.danger {
    color: #dc3545 !important;
    font-weight: 500;
}

/* Prevent zoom on mobile inputs */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important;
    }
    
    .textarea-footer {
        margin-right: 5px;
        margin-bottom: 5px;
    }
    
    .textarea-footer .character-count {
        font-size: 0.75rem;
    }
    
    .textarea-footer i {
        font-size: 0.8rem;
    }
}