/* ==========================================================================
   ANZMEX World Cup Fan Hub 2026 - Custom Stylesheet
   ========================================================================== */

/* Luxury Gradients */
.gold-gradient {
    background: linear-gradient(135deg, #FDA900 0%, #B87200 50%, #6E4400 100%);
}

.green-gradient {
    background: linear-gradient(135deg, #00130B 0%, #022D1D 60%, #004D30 100%);
}

/* Elegant Glowing Borders */
.gold-border-glow {
    box-shadow: 0 0 20px rgba(253, 169, 0, 0.15);
    border: 1px solid rgba(253, 169, 0, 0.35);
}

.green-border-glow {
    box-shadow: 0 0 20px rgba(0, 77, 48, 0.2);
    border: 1px solid rgba(0, 77, 48, 0.4);
}

/* Text Shimmer Effect */
.gold-text-shimmer {
    background: linear-gradient(90deg, #FFE8B3, #FDA900, #B87200, #FFE8B3);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmer 5s linear infinite;
}

/* Custom Scrollbar for Prestigious Visuals */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #F1F5F9;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #004D30;
    border-radius: 4px;
}

/* ==========================================================================
   🔍 FORM VALIDATION (ACCESSIBILITY & MODERN STANDARDS)
   ========================================================================== */

/* Error message styling (initially hidden) */
.error-msg {
    display: none;
    color: #DC2626; /* Tailwind red-600 */
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
}

/* 
   Style invalid fields *only* after user interaction (blur or submit attempt).
   This avoids showing errors on page load and while typing.
*/
input:user-invalid {
    border-color: #DC2626 !important; /* red-600 */
    background-color: #FEF2F2 !important; /* red-50 */
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

/* Display the helper/error message when the input is in a user-invalid state */
input:user-invalid + .error-msg {
    display: block !important;
}

/* Style valid required fields for subtle visual assurance */
input:required:user-valid {
    border-color: #059669 !important; /* Tailwind emerald-600 */
    background-color: #ECFDF5 !important; /* emerald-50 */
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1) !important;
}