/* 
 * Checkout Error Message Fixes
 * This file ensures error messages work properly in checkout.php
 */

/* Ensure field errors are visible and properly styled */
.checkout-section .field-error,
.core-form .field-error {
    color: #dc3545 !important;
    font-size: 0.875rem !important;
    margin-top: 0.5rem !important;
    padding: 0.75rem !important;
    background-color: #f8d7da !important;
    border: 1px solid #f5c6cb !important;
    border-radius: 0.25rem !important;
    display: block !important;
    animation: slideDown 0.3s ease-out !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.1) !important;
    z-index: 10 !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure form fields with errors are visible */
.checkout-section .form-control.error,
.core-form .form-control.error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    background-color: #fff5f5 !important;
}

/* Ensure form groups don't hide errors */
.checkout-section .form-group,
.core-form .form-group {
    position: relative !important;
    margin-bottom: 1.5rem !important;
    overflow: visible !important;
}

.checkout-section .form-group.has-error,
.core-form .form-group.has-error {
    margin-bottom: 2rem !important;
}

/* Mobile responsiveness for field errors */
@media (max-width: 768px) {
    .checkout-section .field-error,
    .core-form .field-error {
        font-size: 14px !important;
        padding: 12px !important;
        margin-top: 8px !important;
        border-radius: 8px !important;
        line-height: 1.4 !important;
    }
}

/* Notification positioning fixes */
.app-notification {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    max-width: 400px !important;
    z-index: 10000 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    backdrop-filter: blur(10px) !important;
    animation: slideIn 0.3s ease-out !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Mobile notification positioning */
@media (max-width: 768px) {
    .app-notification {
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
        max-width: none !important;
    }
}

/* Animation keyframes */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 200px;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

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

/* Error state for various form elements */
.checkout-section select.error,
.checkout-section textarea.error,
.core-form select.error,
.core-form textarea.error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    background-color: #fff5f5 !important;
}

/* Ensure error visibility in checkout grid */
.checkout-grid .form-section {
    overflow: visible !important;
}

.checkout-section {
    overflow: visible !important;
}

/* Success state styling */
.checkout-section .form-control.success:not(.error),
.core-form .form-control.success:not(.error) {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
    background-color: #f8fff9 !important;
}

/* Prevent notification overlap with fixed headers */
body.has-fixed-header .app-notification {
    top: 80px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .field-error {
        border: 2px solid #dc3545 !important;
        background-color: #ffffff !important;
        color: #dc3545 !important;
    }
    
    .form-control.error {
        border: 2px solid #dc3545 !important;
        background-color: #ffffff !important;
    }
}

/* Ensure notifications are always visible */
.app-notification {
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Debug mode - uncomment to see error boundaries */
/*
.field-error {
    outline: 2px dashed red !important;
}

.form-group.has-error {
    outline: 1px dashed blue !important;
}
*/