/**
 * UI Fixes for Task 14: Fix Current UI and Translation Issues
 * Created: 2025-09-14T16-19-07-174Z
 * 
 * This CSS file contains fixes for:
 * 1. Pricing page text visibility issues
 * 2. About us page text visibility issues
 * 3. Cross-browser compatibility
 * 4. Mobile responsiveness
 */

/* ===== PRICING PAGE TEXT VISIBILITY FIXES ===== */

/* Ensure all pricing cards have high contrast */
.pricing-card,
.bg-white.rounded-lg.shadow-lg {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #e5e7eb !important;
}

/* Fix pricing card headings */
.pricing-card h3,
.bg-white.rounded-lg.shadow-lg h3 {
    color: #111827 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* Fix pricing amounts */
.pricing-card .text-4xl,
.bg-white.rounded-lg.shadow-lg .text-4xl {
    color: #1f2937 !important;
    font-weight: 800 !important;
}

/* Fix pricing descriptions */
.pricing-card .text-gray-600,
.bg-white.rounded-lg.shadow-lg .text-gray-600 {
    color: #4b5563 !important;
    font-weight: 500 !important;
}

/* Fix feature list items */
.pricing-card ul li,
.bg-white.rounded-lg.shadow-lg ul li {
    color: #374151 !important;
}

/* Fix check marks and X marks */
.pricing-card .text-green-500,
.bg-white.rounded-lg.shadow-lg .text-green-500 {
    color: #10b981 !important;
}

.pricing-card .text-red-500,
.bg-white.rounded-lg.shadow-lg .text-red-500 {
    color: #ef4444 !important;
}

/* Fix "Most Popular" badge */
.bg-\[var\(--secondary-color\)\] {
    background-color: #3a55b4 !important;
    color: #ffffff !important;
}

/* ===== ABOUT PAGE TEXT VISIBILITY FIXES ===== */

/* Ensure about page content has high contrast */
.about-content,
main {
    background-color: #ffffff !important;
    color: #1f2937 !important;
}

/* Fix all heading colors on about page */
.about-content h1,
.about-content h2,
.about-content h3,
.about-content h4,
main h1,
main h2,
main h3,
main h4 {
    color: #111827 !important;
    font-weight: 700 !important;
}

/* Fix paragraph text */
.about-content p,
main p {
    color: #374151 !important;
    line-height: 1.6 !important;
}

/* Ensure hero gradient text is visible */
.hero-gradient h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.hero-gradient p {
    color: #f3f4f6 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* Fix value cards on about page */
.bg-white.rounded-lg.shadow-md {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

.bg-white.rounded-lg.shadow-md h3 {
    color: #111827 !important;
}

.bg-white.rounded-lg.shadow-md p {
    color: #4b5563 !important;
}

/* ===== GENERAL TEXT VISIBILITY FIXES ===== */

/* Ensure high contrast for all common text elements */
.bg-white {
    background-color: #ffffff !important;
}

.text-gray-900 {
    color: #111827 !important;
}

.text-gray-600 {
    color: #4b5563 !important;
}

.text-gray-700 {
    color: #374151 !important;
}

.text-gray-800 {
    color: #1f2937 !important;
}

/* Fix background colors */
.bg-gray-50 {
    background-color: #f9fafb !important;
}

.bg-gray-100 {
    background-color: #f3f4f6 !important;
}

/* ===== ICON BACKGROUND FIXES ===== */

.bg-blue-100 {
    background-color: #dbeafe !important;
}

.bg-green-100 {
    background-color: #dcfce7 !important;
}

.bg-purple-100 {
    background-color: #f3e8ff !important;
}

.bg-yellow-100 {
    background-color: #fef3c7 !important;
}

/* ===== MOBILE RESPONSIVENESS FIXES ===== */

@media (max-width: 768px) {
    /* Pricing cards on mobile */
    .pricing-card,
    .bg-white.rounded-lg.shadow-lg {
        margin-bottom: 1rem !important;
        padding: 1.5rem !important;
    }
    
    .pricing-card h3,
    .bg-white.rounded-lg.shadow-lg h3 {
        font-size: 1.5rem !important;
    }
    
    .pricing-card .text-4xl,
    .bg-white.rounded-lg.shadow-lg .text-4xl {
        font-size: 2rem !important;
    }
    
    /* About page on mobile */
    .about-content,
    main {
        padding: 1rem !important;
    }
    
    .hero-gradient {
        padding: 2rem 1rem !important;
    }
}

/* ===== CROSS-BROWSER COMPATIBILITY ===== */

/* Firefox specific fixes */
@-moz-document url-prefix() {
    .pricing-card,
    .bg-white.rounded-lg.shadow-lg {
        background-color: #ffffff !important;
    }
}

/* Safari specific fixes */
@supports (-webkit-appearance: none) {
    .pricing-card h3,
    .bg-white.rounded-lg.shadow-lg h3 {
        -webkit-font-smoothing: antialiased;
    }
}

/* Edge specific fixes */
@supports (-ms-ime-align: auto) {
    .text-gray-600 {
        color: #4b5563 !important;
    }
}

/* ===== HIGH CONTRAST MODE SUPPORT ===== */

@media (prefers-contrast: high) {
    .pricing-card,
    .bg-white.rounded-lg.shadow-lg {
        border: 2px solid #000000 !important;
    }
    
    .pricing-card h3,
    .bg-white.rounded-lg.shadow-lg h3 {
        color: #000000 !important;
    }
    
    .pricing-card .text-gray-600,
    .bg-white.rounded-lg.shadow-lg .text-gray-600 {
        color: #000000 !important;
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    .pricing-card,
    .bg-white.rounded-lg.shadow-lg {
        background-color: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #000000 !important;
    }
}