/* ==================================================
   CRITICAL Mobile Fixes - Load Last to Override
   ================================================== */

/* EMERGENCY MOBILE TYPOGRAPHY FIXES */
@media (max-width: 767px) {
    /* Ensure no horizontal overflow */
    * {
        box-sizing: border-box;
        max-width: 100%;
    }
    
    body {
        font-size: 1.6rem !important; /* Force readable size */
        overflow-x: hidden;
    }
    
    /* Container padding fixes */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100% !important;
    }
    
    /* Header mobile fixes */
    .header-container {
        padding: 1rem !important;
        min-height: 60px;
    }
    
    /* Logo mobile optimizations */
    .logo-container {
        gap: 0.8rem !important;
    }
    
    .logo-icon {
        width: 27px !important;
        height: 27px !important;
    }
    
    .logo-text h1 {
        font-size: 1.6rem !important; /* Readable logo size */
        line-height: 1.1 !important;
        margin-bottom: 0.1rem !important;
    }
    
    .tagline {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }
    
    /* Hero section mobile-specific fixes */
    .hero {
        padding: 3rem 0 2rem !important;
    }
    
    .hero-container {
        gap: 2rem !important;
        padding: 0 1rem;
    }
    
    .hero-title {
        font-size: 2.4rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-description {
        font-size: 1.4rem !important;
        line-height: 1.4 !important;
        margin-bottom: 1.5rem !important;
        max-width: 100% !important;
    }
    
    .hero-buttons {
        gap: 1rem !important;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    /* Section spacing fixes */
    section {
        padding: 3rem 0 !important;
    }
    
    .section-title {
        font-size: 2.2rem !important;
        margin-bottom: 2.5rem !important;
        line-height: 1.2;
    }
    
    /* Feature cards mobile fixes */
    .feature-card {
        padding: 2rem !important;
        margin-bottom: 1.5rem;
    }
    
    .feature-title {
        font-size: 1.8rem !important;
        line-height: 1.3;
        margin-bottom: 1rem !important;
    }
    
    .feature-description {
        font-size: 1.4rem !important;
        line-height: 1.5;
        margin-bottom: 1.5rem !important;
    }
    
    .feature-icon {
        font-size: 3rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Quick access cards */
    .quick-access-card {
        padding: 2rem !important;
        margin-bottom: 1rem;
    }
    
    .quick-access-card h3 {
        font-size: 1.6rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    .quick-access-card p {
        font-size: 1.3rem !important;
        line-height: 1.4;
    }
    
    .quick-access-icon {
        font-size: 2.5rem !important;
        margin-bottom: 1rem !important;
        width: 36px !important;
        height: 36px !important;
        object-fit: contain !important;
    }
    
    /* Image fixes */
    .hero-image svg,
    .hero-image img {
        max-width: 280px !important;
        width: 100%;
        height: auto;
    }
    
    /* Footer mobile fixes */
    .footer {
        padding: 3rem 0 1.5rem !important;
    }
    
    .footer-title {
        font-size: 1.6rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .footer-description,
    .footer-link {
        font-size: 1.4rem !important;
        line-height: 1.5;
    }
    
    .disclaimer {
        padding: 2rem !important;
        margin-bottom: 2rem !important;
    }
    
    .disclaimer-title {
        font-size: 1.6rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .disclaimer-content {
        font-size: 1.3rem !important;
        line-height: 1.5;
    }
}

/* ULTRA SMALL SCREENS (320px and below) */
@media (max-width: 360px) {
    .hero-title {
        font-size: 2rem !important;
        letter-spacing: 0 !important;
    }
    
    .hero-description {
        font-size: 1.3rem !important;
    }
    
    .section-title {
        font-size: 2rem !important;
    }
    
    .feature-title {
        font-size: 1.6rem !important;
    }
    
    .feature-description {
        font-size: 1.3rem !important;
    }
    
    .mobile-nav-content {
        width: min(280px, 90vw) !important;
    }
    
    .hero-image svg,
    .hero-image img {
        max-width: 240px !important;
    }
}

/* Touch-specific improvements */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects that don't work on touch */
    .feature-card:hover,
    .quick-access-card:hover {
        transform: none !important;
    }
    
    /* Ensure adequate spacing for touch */
    .mobile-nav-link {
        padding: 2rem !important;
        min-height: 56px;
    }
    
    .btn {
        padding: 1.6rem 2rem !important;
        min-height: 48px;
    }
}

/* Landscape phone optimization */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding: 2rem 0 1.5rem !important;
    }
    
    .hero-title {
        font-size: 2rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    .hero-description {
        font-size: 1.3rem !important;
        margin-bottom: 1.2rem !important;
    }
    
    .hero-buttons {
        flex-direction: row !important;
        gap: 1rem !important;
    }
    
    .btn {
        width: auto !important;
        padding: 1rem 1.5rem !important;
        font-size: 1.4rem !important;
    }
    
    section {
        padding: 2rem 0 !important;
    }
    
    .section-title {
        font-size: 2rem !important;
        margin-bottom: 2rem !important;
    }
}

/* Fix for iOS viewport issues */
@supports (-webkit-touch-callout: none) {
    .mobile-nav {
        height: -webkit-fill-available;
    }
    
    .mobile-nav-content {
        height: -webkit-fill-available;
    }
}

/* Ensure text remains readable when zoomed */
@media (min-resolution: 2dppx) {
    body {
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }
}

/* CRITICAL: Guide Section Mobile Optimization */
@media (max-width: 767px) {
    .guide-intro {
        margin-bottom: 3rem !important;
        padding: 1.5rem !important;
    }
    
    .guide-intro p {
        font-size: 1.4rem !important;
        line-height: 1.5 !important;
    }
    
    .guide-section-title {
        font-size: 1.8rem !important;
        margin-bottom: 2rem !important;
    }
    
    .guide-steps {
        margin-bottom: 3rem !important;
    }
    
    .steps-container {
        gap: 1.5rem !important;
    }
    
    .step-item {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1.5rem !important;
        padding: 2rem 1.5rem !important;
    }
    
    .step-item:not(:last-child)::after {
        display: none !important;
    }
    
    .step-number {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.6rem !important;
    }
    
    .step-content h4 {
        font-size: 1.6rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    .step-content p {
        font-size: 1.3rem !important;
        text-align: left !important;
    }
    
    /* Terms Grid Mobile */
    .terms-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .term-card {
        padding: 1.5rem !important;
    }
    
    .term-title {
        font-size: 1.4rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    .term-description {
        font-size: 1.3rem !important;
        line-height: 1.5 !important;
    }
    
    .term-example {
        font-size: 1.1rem !important;
        padding: 0.6rem 0.8rem !important;
        margin-top: 0.6rem !important;
    }
    
    /* Warning Section Mobile */
    .guide-warnings {
        margin-bottom: 2rem !important;
    }
    
    .warning-list {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .warning-item {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1rem !important;
        padding: 1.5rem !important;
    }
    
    .warning-icon {
        width: 35px !important;
        height: 35px !important;
        font-size: 1.6rem !important;
    }
    
    .warning-content h4 {
        font-size: 1.4rem !important;
        margin-bottom: 0.6rem !important;
    }
    
    .warning-content p {
        font-size: 1.2rem !important;
        line-height: 1.4 !important;
        text-align: left !important;
    }
}

/* ULTRA SMALL SCREENS - Guide Specific */
@media (max-width: 360px) {
    .guide-intro {
        padding: 1rem !important;
    }
    
    .guide-section-title {
        font-size: 1.6rem !important;
    }
    
    .step-item {
        padding: 1.5rem 1rem !important;
    }
    
    .step-content h4 {
        font-size: 1.4rem !important;
    }
    
    .step-content p {
        font-size: 1.2rem !important;
    }
    
    .term-card {
        padding: 1.2rem !important;
    }
    
    .warning-item {
        padding: 1.2rem !important;
    }
}

/* ENHANCED MOBILE BUTTON FIXES */
@media (max-width: 767px) {
    /* Button improvements for content-heavy sections */
    .btn {
        padding: 1.4rem 2rem !important;
        font-size: 1.4rem !important;
        min-width: auto !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto 1rem auto !important;
    }
    
    /* Section spacing adjustments for dense content */
    section {
        padding: 3rem 0 !important;
    }
    
    .section-title {
        font-size: 2rem !important;
        margin-bottom: 2rem !important;
        line-height: 1.2 !important;
    }
    
    /* Container adjustments for guide section */
    .guide-section .container,
    .faq-section .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    /* FAQ Mobile Optimizations */
    .faq-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .faq-item {
        padding: 1.5rem !important;
        margin-bottom: 0 !important;
    }
    
    .faq-question {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }
    
    .faq-answer {
        font-size: 1.2rem !important;
        line-height: 1.4 !important;
        padding-left: 2.8rem !important;
    }
    
    .faq-question::before,
    .faq-answer::before {
        width: 20px !important;
        height: 20px !important;
        line-height: 20px !important;
        font-size: 1rem !important;
    }
    
    .faq-question::before {
        margin-right: 0.6rem !important;
    }
    
    .faq-answer::before {
        margin-left: -2.8rem !important;
    }
    
    /* Ranking cards mobile improvements */
    .rank-1,
    .rank-2,
    .rank-3 {
        transform: none !important; /* Remove scale on mobile */
        margin-bottom: 2rem !important;
    }
    
    .rank-badge {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.2rem !important;
        top: -8px !important;
        right: -8px !important;
    }
}

/* COMPARISON TABLE MOBILE ENHANCEMENTS */
@media (max-width: 767px) {
    /* Table wrapper improvements */
    .table-wrapper {
        margin: 0 -1.5rem !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: 1px solid var(--gray-200) !important;
        background: var(--bg-white) !important;
    }
    
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
        scrollbar-color: var(--primary-green) var(--gray-100) !important;
    }
    
    /* Table styling improvements */
    .comparison-table {
        min-width: 900px !important;
        font-size: 1.3rem !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: white !important;
    }
    
    .comparison-table thead th {
        padding: 1.4rem 1rem !important;
        font-size: 1.2rem !important;
        background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%) !important;
        color: white !important;
        font-weight: 700 !important;
        text-align: center !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        white-space: nowrap !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    .comparison-table thead th:first-child {
        text-align: left !important;
        position: sticky !important;
        left: 0 !important;
        z-index: 11 !important;
        min-width: 110px !important;
        max-width: 110px !important;
        width: 110px !important;
        border-right: 3px solid rgba(255,255,255,0.3) !important;
        background: linear-gradient(135deg, var(--primary-green-dark) 0%, var(--primary-green) 100%) !important;
        padding: 1.4rem 0.6rem !important;
        font-size: 1.1rem !important;
    }
    
    .comparison-table tbody td {
        padding: 1.2rem 1rem !important;
        font-size: 1.2rem !important;
        border-bottom: 2px solid var(--gray-100) !important;
        text-align: center !important;
        vertical-align: middle !important;
        background: white !important;
        line-height: 1.3 !important;
    }
    
    .comparison-table tbody td:first-child {
        text-align: left !important;
        font-weight: 700 !important;
        color: var(--primary-green-darker) !important;
        position: sticky !important;
        left: 0 !important;
        background: linear-gradient(135deg, rgba(240, 253, 244, 0.98) 0%, rgba(236, 252, 240, 0.95) 100%) !important;
        border-right: 3px solid rgba(16, 185, 129, 0.3) !important;
        z-index: 9 !important;
        min-width: 110px !important;
        max-width: 110px !important;
        width: 110px !important;
        font-size: 1.1rem !important;
        box-shadow: 2px 0 4px rgba(0,0,0,0.05) !important;
        padding: 1rem 0.6rem !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        line-height: 1.2 !important;
    }
    
    /* Stars styling */
    .comparison-table .stars {
        font-size: 1.6rem !important;
        color: #fbbf24 !important;
        line-height: 1 !important;
        display: block !important;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1) !important;
        letter-spacing: 1px !important;
    }
    
    /* Rating badges mobile */
    .high-rating,
    .normal-rating {
        font-size: 1.1rem !important;
        padding: 0.5rem 0.8rem !important;
        border-radius: 6px !important;
        font-weight: 700 !important;
        display: inline-block !important;
        border: 2px solid !important;
        text-align: center !important;
        min-width: 60px !important;
    }
    
    .high-rating {
        background: rgba(34, 197, 94, 0.12) !important;
        color: #15803d !important;
        border-color: rgba(34, 197, 94, 0.3) !important;
    }
    
    .normal-rating {
        background: rgba(251, 191, 36, 0.12) !important;
        color: #b45309 !important;
        border-color: rgba(251, 191, 36, 0.3) !important;
    }
    
    /* Button in table mobile */
    .comparison-table .btn-sm {
        padding: 0.8rem 1.2rem !important;
        font-size: 1.1rem !important;
        min-width: auto !important;
        white-space: nowrap !important;
        border-radius: 8px !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2) !important;
        transition: all 0.2s ease !important;
    }
    
    /* Scroll hint styling */
    .table-scroll-hint {
        display: block !important;
        text-align: center !important;
        font-size: 1.2rem !important;
        color: var(--primary-green-dark) !important;
        margin: 1.5rem 0 !important;
        padding: 1rem !important;
        background: linear-gradient(135deg, var(--bg-blue-light) 0%, rgba(239, 246, 255, 0.8) 100%) !important;
        border-radius: var(--radius-lg) !important;
        font-style: normal !important;
        font-weight: 600 !important;
        border: 2px solid rgba(59, 130, 246, 0.2) !important;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1) !important;
    }
    
    /* Hover effects for mobile */
    .comparison-table tbody tr:hover td {
        background: rgba(240, 253, 244, 0.6) !important;
        transform: scale(1.01) !important;
        transition: all 0.2s ease !important;
    }
    
    .comparison-table tbody tr:hover td:first-child {
        background: linear-gradient(135deg, var(--primary-green-dark) 0%, var(--primary-green) 100%) !important;
        color: white !important;
        box-shadow: 4px 0 8px rgba(0,0,0,0.1) !important;
        min-width: 110px !important;
        max-width: 110px !important;
        width: 110px !important;
    }
    
    /* Add alternating row colors for better readability */
    .comparison-table tbody tr:nth-child(even) td {
        background: rgba(248, 250, 252, 0.8) !important;
    }
    
    .comparison-table tbody tr:nth-child(even) td:first-child {
        background: linear-gradient(135deg, rgba(236, 252, 240, 0.98) 0%, rgba(220, 252, 231, 0.95) 100%) !important;
        min-width: 110px !important;
        max-width: 110px !important;
        width: 110px !important;
    }
}

/* ULTRA RESPONSIVE - Very Small Screens */
@media (max-width: 360px) {
    .container {
        padding-left: 0.8rem !important;
        padding-right: 0.8rem !important;
    }
    
    .guide-section .container,
    .faq-section .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .section-title {
        font-size: 1.8rem !important;
    }
    
    .faq-question {
        font-size: 1.3rem !important;
    }
    
    .faq-answer {
        font-size: 1.1rem !important;
    }
    
    /* Table ultra-small optimizations */
    .comparison-table {
        min-width: 750px !important;
        font-size: 1.1rem !important;
    }
    
    .comparison-table thead th {
        padding: 1rem 0.6rem !important;
        font-size: 1rem !important;
    }
    
    .comparison-table tbody td {
        padding: 0.8rem 0.6rem !important;
        font-size: 1rem !important;
    }
    
    .comparison-table tbody td:first-child {
        min-width: 100px !important;
        max-width: 100px !important;
        width: 100px !important;
        font-size: 1rem !important;
        padding: 0.8rem 0.4rem !important;
    }
}