/* ============================================================
   compat.css - Font Awesome 7 / Tailwind v4 Compatibility Overrides,
   Banner/Header Layout System, and Utility Classes
   Extracted from base.html inline styles for cacheability.
   ============================================================ */

/* Force dropdown header gradients and icons */
.nav-ps .dropdown-header-blue {
    background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%) !important;
    color: white !important;
}

.nav-ps .icon-container {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

/* Tailwind CSS v4 + Font Awesome 7 Pro Compatibility - Override Resets */
.fas, .fa-solid, [class*="fa-"] {
    font-family: "Font Awesome 7 Pro" !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    /* Override Tailwind v4 resets */
    box-sizing: content-box !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: baseline !important;
}

.far, .fa-regular {
    font-family: "Font Awesome 7 Pro" !important;
    font-weight: 400 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.fab, .fa-brands {
    font-family: "Font Awesome 7 Brands" !important;
    font-weight: 400 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Force payment method icons to display */
.fa-cc-visa:before { content: "\f1f0"; font-family: "Font Awesome 7 Brands" !important; }
.fa-cc-mastercard:before { content: "\f1f1"; font-family: "Font Awesome 7 Brands" !important; }
.fa-cc-paypal:before { content: "\f1f4"; font-family: "Font Awesome 7 Brands" !important; }

/* Font Awesome 7 Pro Icons - Direct Content Override with Tailwind v4 fixes */
.fas:before, .fa-solid:before, [class*="fa-"]:before {
    font-family: "Font Awesome 7 Pro" !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    /* Critical for Tailwind v4 compatibility */
    box-sizing: content-box !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.fas.fa-globe:before { content: "\f0ac" !important; }
.fas.fa-server:before { content: "\f233" !important; }
.fas.fa-circle-question:before { content: "\f059" !important; }
.fas.fa-lock:before { content: "\f023" !important; }
.fas.fa-wand-magic-sparkles:before { content: "\f6d1" !important; }
.fas.fa-tag:before { content: "\f02b" !important; }
.fas.fa-browser:before { content: "\f37e" !important; }
.fas.fa-gem:before { content: "\f3a5" !important; }
.fas.fa-phone:before { content: "\f095" !important; }
.fas.fa-map-marker-alt:before { content: "\f3c5" !important; }
.fas.fa-envelope:before { content: "\f0e0" !important; }
.fas.fa-code:before { content: "\f121" !important; }
.fas.fa-arrow-right:before { content: "\f061" !important; }

/* Brand Icons - Force Font Awesome 7 Pro Brands */
.fab:before, .fa-brands:before {
    font-family: "Font Awesome 7 Brands" !important;
    font-weight: 400 !important;
    font-style: normal !important;
    display: inline-block !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Payment Method Icons - Explicit definitions */
.fa-cc-visa:before {
    content: "\f1f0" !important;
    font-family: "Font Awesome 7 Brands" !important;
    font-weight: 400 !important;
}
.fa-cc-mastercard:before {
    content: "\f1f1" !important;
    font-family: "Font Awesome 7 Brands" !important;
    font-weight: 400 !important;
}
.fa-cc-paypal:before {
    content: "\f1f4" !important;
    font-family: "Font Awesome 7 Brands" !important;
    font-weight: 400 !important;
}
.fa-x-twitter:before {
    content: "\e61b" !important;
    font-family: "Font Awesome 7 Brands" !important;
    font-weight: 400 !important;
}

/* Enhanced payment method icon hover effects */
.group:hover .fa-cc-visa {
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5)) !important;
    transform: scale(1.05) !important;
}
.group:hover .fa-cc-mastercard {
    filter: drop-shadow(0 0 8px rgba(248, 113, 113, 0.5)) !important;
    transform: scale(1.05) !important;
}
.group:hover .fa-cc-paypal {
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5)) !important;
    transform: scale(1.05) !important;
}

/* Custom -900 text colors for darker icon styling */
.text-teal-900 {
    color: #134e4a !important;
}
.text-purple-900 {
    color: #581c87 !important;
}
.text-amber-900 {
    color: #78350f !important;
}

/* ============================================================
   Banner and Header Layout System
   ============================================================ */

body.has-banner {
    padding-top: 128px !important; /* Space for both banner (48px) and header (80px) */
}

/* Banner positioning - always at top */
.notification-banner {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 48px !important;
    z-index: 49 !important;
    display: flex !important;
    align-items: center !important;
}

/* Header positioning - fixed below banner when banner exists */
body.has-banner header.nav-ps {
    position: fixed !important;
    top: 48px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    height: 80px !important;
}

/* Header positioning - fixed at top when no banner */
body:not(.has-banner) header.nav-ps {
    position: fixed !important;
    top: 0px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    height: 80px !important;
}

/* Body padding to account for fixed header */
body:not(.has-banner) {
    padding-top: 80px !important;
}

/* Minimal critical styles to prevent mobile flash */
body {
    font-family: system-ui, -apple-system, sans-serif;
    margin: 0;
    font-display: swap;
}
.container { max-width: 1200px; margin: 0 auto; }
.hidden { display: none !important; }
/* Override Tailwind hidden class for navigation */
@media (min-width: 1024px) {
    .nav-ps .hidden.lg\:flex {
        display: flex !important;
    }
}
.flex { display: flex; }
.relative { position: relative; }
.absolute { position: absolute; }

/* Remove visibility hiding - causing navigation issues */

/* Lazy loading styles */
.lazy { opacity: 0; transition: opacity 0.3s ease; }
.lazy.loaded { opacity: 1; }