/* 
MyFloat Portal - Accessibility & Color Contrast Fixes
Ensures WCAG 2.1 AA compliance for all text and background combinations
*/

/* Fix any white-on-white text issues */
.text-white.bg-white,
.bg-white .text-white {
    color: #2c3e50 !important;
}

/* Ensure sufficient contrast for light text on light backgrounds */
.text-light {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Fix preview cards for better contrast */
.preview-card {
    color: white !important;
}

.preview-card h3,
.preview-card p {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Ensure button text is readable */
.btn-light {
    color: #2c3e50 !important;
}

.btn-outline-light {
    color: white !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
}

.btn-outline-light:hover {
    color: #2c3e50 !important;
    background-color: white !important;
}

/* Fix any potential issues with cards */
.card.bg-white .text-white,
.dashboard-card .text-white {
    color: #2c3e50 !important;
}

/* Ensure emergency contact buttons have good contrast */
.emergency-btn {
    color: white !important;
    background: #25d366 !important;
}

.emergency-btn:hover {
    color: white !important;
    background: #128c7e !important;
}

/* Fix navigation banner text contrast */
.navigation-banner .nav-btn {
    color: #2c3e50 !important;
}

.navigation-banner .nav-btn:hover {
    color: #1e3a5f !important;
}

/* Ensure pricing cards have good contrast */
.pricing-card {
    background: white !important;
    color: #2c3e50 !important;
}

.pricing-card h3,
.pricing-card p,

/* Payment warning styling */
.membership-alert.upgrade {
    background: #fff3cd !important;
    border: 2px solid #ffc107 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin: 20px 0 !important;
}

.membership-alert.upgrade h3 {
    color: #856404 !important;
    margin-bottom: 10px !important;
}

.membership-alert.upgrade p {
    color: #856404 !important;
    margin-bottom: 15px !important;
}

.alert-actions {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.alert-actions .btn {
    min-width: 180px !important;
}
.pricing-card li {
    color: #2c3e50 !important;
}

/* Fix membership alert contrast */
.membership-alert {
    color: #2c3e50 !important;
}

.membership-alert.pending {
    background: #fff3cd !important;
    color: #856404 !important;
}

.membership-alert.upgrade {
    background: #e8f4fd !important;
    color: #0c5460 !important;
}

.membership-alert.member {
    background: #d4edda !important;
    color: #155724 !important;
}

/* Fix status badges for better contrast */
.status-badge {
    color: white !important;
    font-weight: 600 !important;
}

.status-active {
    background: #28a745 !important;
}

.status-pending {
    background: #ffc107 !important;
    color: #212529 !important;
}

.status-cancelled {
    background: #dc3545 !important;
}

/* Ensure form elements have good contrast */
.form-control:focus {
    border-color: #007bff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/* Fix any transparency issues that might cause poor contrast */
.hero-badge {
    background: rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    font-weight: 600 !important;
}

/* Ensure all text on gradient backgrounds is white */
.bg-gradient,
.hero-section,
.cta-section {
    color: white !important;
}

.bg-gradient h1,
.bg-gradient h2,
.bg-gradient h3,
.bg-gradient h4,
.bg-gradient h5,
.bg-gradient h6,
.bg-gradient p,
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section h4,
.hero-section h5,
.hero-section h6,
.hero-section p,
.cta-section h1,
.cta-section h2,
.cta-section h3,
.cta-section h4,
.cta-section h5,
.cta-section h6,
.cta-section p {
    color: white !important;
}

/* Fix homepage hero section specifically */
.hero-home h1 {
    color: #1e3a5f !important;
}

.hero-home p {
    color: #2c3e50 !important;
}

/* MyFloat logo styling for better visibility */
.hero-logo {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

/* Homepage Features Section - Enhanced Contrast */
#features .dashboard-card .card-title {
    color: #1e3a5f !important;
    font-weight: 600 !important;
}

#features .dashboard-card .card-text {
    color: #2c3e50 !important;
    font-weight: 400 !important;
}

#features .dashboard-card .card-text strong {
    color: #1e3a5f !important;
    font-weight: 600 !important;
}

/* Feature section main heading */
#features h2 {
    color: #1e3a5f !important;
    font-weight: 600 !important;
}

#features .lead {
    color: #2c3e50 !important;
    font-weight: 400 !important;
}

/* Coming Soon section */
.coming-soon .card-title {
    color: #1e3a5f !important;
    font-weight: 600 !important;
}

.coming-soon .card-text {
    color: #2c3e50 !important;
    font-weight: 400 !important;
}

/* Ensure all homepage cards have proper contrast */
.dashboard-card {
    background: white !important;
    color: #2c3e50 !important;
}

.dashboard-card h4 {
    color: #1e3a5f !important;
    font-weight: 600 !important;
}

.dashboard-card p {
    color: #2c3e50 !important;
    font-weight: 400 !important;
}

/* Fix any potential text-muted issues */
.text-muted {
    color: #6c757d !important;
}

/* Fix membership landing page text contrast */
.hero-stats .stat-label {
    color: rgba(255, 255, 255, 0.9) !important;
}

.hero-stats .stat-number {
    color: white !important;
}

/* Fix View Plans & Pricing button text */
.btn-primary {
    color: white !important;
}

.btn-primary:hover {
    color: white !important;
}

/* Ensure all buttons on gradient backgrounds have white text */
.bg-gradient .btn-primary,
.hero-section .btn-primary {
    color: white !important;
    background-color: #e74c3c !important;
    border-color: #e74c3c !important;
}

.bg-gradient .btn-primary:hover,
.hero-section .btn-primary:hover {
    color: white !important;
    background-color: #c0392b !important;
    border-color: #c0392b !important;
}

/* Login button dark blue accent styling */
.btn-login {
    background-color: #1e3a5f !important;
    color: white !important;
    border-color: #1e3a5f !important;
}

.btn-login:hover {
    background-color: #0f2940 !important;
    color: white !important;
    border-color: #0f2940 !important;
}

/* Emergency WhatsApp button styling with maximum specificity */
a.emergency-btn,
.emergency-btn,
a[href*="wa.me"] {
    background: #25D366 !important;
    background-color: #25D366 !important;
    color: white !important;
    border: none !important;
    text-decoration: none !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3) !important;
}

a.emergency-btn:hover,
.emergency-btn:hover,
a[href*="wa.me"]:hover,
a.emergency-btn:focus,
.emergency-btn:focus,
a[href*="wa.me"]:focus,
a.emergency-btn:active,
.emergency-btn:active,
a[href*="wa.me"]:active,
a.emergency-btn:visited,
.emergency-btn:visited,
a[href*="wa.me"]:visited {
    background: #20BA5A !important;
    background-color: #20BA5A !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4) !important;
}

/* CTA section text styling */
.cta-section h2 {
    color: white !important;
}

.cta-section p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.cta-section .cta-benefit {
    color: white !important;
}

.cta-section .cta-icon {
    color: white !important;
}

/* Fix footer link contrast */
.bg-dark .text-light {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Ensure all white text elements have sufficient contrast */
.text-white {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Fix any remaining low contrast issues */
.text-muted {
    color: #6c757d !important;
}

.text-secondary {
    color: #6c757d !important;
}

/* Ensure focus states are visible */
:focus {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
}

/* Fix link contrast */
a {
    color: #007bff !important;
}

a:hover {
    color: #0056b3 !important;
}

/* Ensure emergency contact stands out */
.emergency-contact {
    background: #f8d7da !important;
    border: 2px solid #dc3545 !important;
    color: #721c24 !important;
}

.emergency-contact h3 {
    color: #721c24 !important;
}

/* Fix any remaining contrast issues in specific components */
.benefit-card h3,
.benefit-card p {
    color: #2c3e50 !important;
}

.benefit-features li {
    color: #2c3e50 !important;
}

/* CRITICAL: Navigation Banner Text Contrast Fixes */
/* Ensure ALL text on dark navigation banners is white */
.navigation-banner,
.navigation-banner * {
    color: white !important;
}

.navigation-banner h1,
.navigation-banner h2,
.navigation-banner h3,
.navigation-banner h4,
.navigation-banner h5,
.navigation-banner h6 {
    color: white !important;
    font-weight: 600 !important;
}

.navigation-banner p,
.navigation-banner span,
.navigation-banner small {
    color: white !important;
    opacity: 0.9 !important;
}

.navigation-banner .banner-title h1 {
    color: white !important;
    font-weight: 600 !important;
}

.navigation-banner .banner-title p {
    color: white !important;
    opacity: 0.9 !important;
}

/* Navigation pills on dark backgrounds */
.navigation-banner .nav-pills .nav-link {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.navigation-banner .nav-pills .nav-link:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

.navigation-banner .nav-pills .nav-link.active {
    background: white !important;
    color: #1e3a5f !important;
}

/* Ensure icons are visible on dark backgrounds */
.navigation-banner i,
.navigation-banner .fas,
.navigation-banner .fa {
    color: white !important;
}

/* Override any Bootstrap or other conflicting styles */
.navigation-banner .text-muted {
    color: white !important;
    opacity: 0.9 !important;
}

.navigation-banner .text-primary,
.navigation-banner .text-secondary,
.navigation-banner .text-info,
.navigation-banner .text-dark {
    color: white !important;
}