/* ===================================
   MOBILE ENHANCEMENTS - COMPREHENSIVE
   Complete mobile optimization for Paywize
   =================================== */

/* ===================================
   ENHANCEMENT #1: PROGRESSIVE FONT SCALING
   Smoother text sizing from desktop → mobile
   =================================== */

/* Large Desktop (1400px+) - Default sizes */
@media (min-width: 1400px) {
    .hero-title {
        font-size: 64px !important;
    }
    
    .section-title {
        font-size: 42px !important;
    }
    
    .cta-content h2 {
        font-size: 52px !important;
    }
}

/* Desktop (1200px - 1399px) */
@media (max-width: 1399px) {
    .hero-title {
        font-size: 56px !important;
    }
    
    .section-title {
        font-size: 38px !important;
    }
    
    .cta-content h2 {
        font-size: 46px !important;
    }
}

/* Laptop (992px - 1199px) */
@media (max-width: 1199px) {
    .hero-title {
        font-size: 48px !important;
    }
    
    .hero-subtitle {
        font-size: 18px !important;
    }
    
    .section-title {
        font-size: 36px !important;
    }
    
    .section-subtitle {
        font-size: 17px !important;
    }
    
    .cta-content h2 {
        font-size: 42px !important;
    }
}

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    .hero-title {
        font-size: 40px !important;
    }
    
    .hero-subtitle {
        font-size: 17px !important;
    }
    
    .section-title {
        font-size: 32px !important;
    }
    
    .section-subtitle {
        font-size: 16px !important;
    }
    
    .cta-content h2 {
        font-size: 36px !important;
    }
    
    .cta-content > p {
        font-size: 17px !important;
    }
}

/* Mobile Landscape (576px - 767px) */
@media (max-width: 767px) {
    .hero-title {
        font-size: 34px !important;
        line-height: 1.2 !important;
    }
    
    .hero-subtitle {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
    
    .section-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }
    
    .section-subtitle {
        font-size: 15px !important;
    }
    
    .cta-content h2 {
        font-size: 30px !important;
        line-height: 1.3 !important;
    }
    
    .cta-content > p {
        font-size: 16px !important;
    }
    
    /* Card headings */
    .card h3, .tab-text h3 {
        font-size: 20px !important;
    }
    
    /* Card descriptions */
    .card p, .tab-text p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
}

/* Mobile Portrait (375px - 575px) */
@media (max-width: 575px) {
    .hero-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
    
    .hero-subtitle {
        font-size: 15px !important;
    }
    
    .section-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    
    .section-subtitle {
        font-size: 14px !important;
    }
    
    .cta-content h2 {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }
    
    .cta-content > p {
        font-size: 15px !important;
    }
    
    /* Card headings */
    .card h3, .tab-text h3 {
        font-size: 18px !important;
    }
    
    /* Card descriptions */
    .card p, .tab-text p {
        font-size: 14px !important;
    }
}

/* Small Mobile (320px - 374px) */
@media (max-width: 374px) {
    .hero-title {
        font-size: 26px !important;
    }
    
    .hero-subtitle {
        font-size: 14px !important;
    }
    
    .section-title {
        font-size: 22px !important;
    }
    
    .cta-content h2 {
        font-size: 24px !important;
    }
}

/* ===================================
   ENHANCEMENT #2: FULL-SCREEN MOBILE CHAT
   Natural chat experience on mobile
   =================================== */

@media (max-width: 767px) {
    .chat-widget {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        z-index: 10000 !important;
    }
    
    .chat-messages {
        height: calc(100vh - 180px) !important;
        max-height: none !important;
    }
    
    .chat-header {
        border-radius: 0 !important;
        padding: 20px 16px !important;
    }
    
    .chat-input-area {
        padding: 16px !important;
        border-radius: 0 !important;
    }
    
    .chat-input {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 14px 16px !important;
    }
    
    .chat-send {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
    }
}

/* ===================================
   ENHANCEMENT #3: TOUCH-OPTIMIZED BUTTONS
   44px minimum tap targets (Apple/Google guidelines)
   =================================== */

@media (max-width: 767px) {
    /* All buttons minimum touch target */
    .btn,
    button,
    .tab-btn,
    .mobile-menu-toggle,
    .chat-trigger,
    .back-to-top {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
    }
    
    /* Large CTA buttons */
    .btn-large {
        min-height: 52px !important;
        padding: 14px 28px !important;
        font-size: 16px !important;
    }
    
    /* Navigation links */
    .mobile-menu a {
        min-height: 48px !important;
        padding: 14px 24px !important;
        font-size: 16px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Tab buttons */
    .tab-btn {
        min-height: 48px !important;
        padding: 12px 16px !important;
    }
    
    /* Floating action buttons */
    .whatsapp-float,
    .chat-trigger,
    .back-to-top {
        width: 56px !important;
        height: 56px !important;
        font-size: 24px !important;
    }
    
    /* Cookie consent buttons */
    .btn-cookie-accept,
    .btn-cookie-reject {
        min-height: 44px !important;
        padding: 10px 20px !important;
    }
}

/* ===================================
   ENHANCEMENT #4: MOBILE-FIRST COOKIE BANNER
   Better positioning on small screens
   =================================== */

@media (max-width: 767px) {
    .cookie-consent {
        bottom: 80px !important; /* Above floating buttons */
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) translateY(20px) scale(0.95) !important;
    }
    
    .cookie-consent.show {
        transform: translateX(-50%) translateY(0) scale(1) !important;
    }
    
    .cookie-banner {
        max-width: calc(100vw - 32px) !important;
        flex-direction: column !important;
        padding: 20px !important;
    }
    
    .cookie-icon {
        display: none !important; /* Hide icon on mobile to save space */
    }
    
    .cookie-content {
        text-align: center !important;
    }
    
    .cookie-content p {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }
    
    .cookie-actions {
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    .btn-cookie-accept,
    .btn-cookie-reject {
        flex: 1 !important;
        font-size: 14px !important;
    }
}

/* ===================================
   ENHANCEMENT #5: CARD OPTIMIZATION
   Better spacing and stacking on mobile
   =================================== */

@media (max-width: 767px) {
    /* Reduce card padding */
    .card,
    .feature-card,
    .solution-card,
    .innovation-card,
    .testimonial-card {
        padding: 20px !important;
        margin-bottom: 16px !important;
    }
    
    /* Optimize card icons */
    .card-icon,
    .feature-icon,
    .icon-container {
        width: 48px !important;
        height: 48px !important;
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }
    
    /* Card grids to single column */
    .features-grid,
    .solutions-grid,
    .capabilities-grid,
    .integrations-grid,
    .blogs-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    /* Stats grid optimization */
    .stats-grid,
    .social-proof-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    
    .stat-card {
        padding: 16px !important;
    }
    
    .stat-number {
        font-size: 28px !important;
    }
    
    .stat-label {
        font-size: 13px !important;
    }
}

/* ===================================
   ENHANCEMENT #6: FORM ENHANCEMENT
   Mobile keyboard optimization
   =================================== */

@media (max-width: 767px) {
    /* Prevent zoom on input focus (iOS) */
    input,
    textarea,
    select {
        font-size: 16px !important; /* Minimum to prevent iOS zoom */
    }
    
    /* Better input spacing */
    .form-group {
        margin-bottom: 16px !important;
    }
    
    input,
    textarea {
        padding: 14px 16px !important;
        min-height: 48px !important;
        border-radius: 8px !important;
    }
    
    textarea {
        min-height: 120px !important;
    }
    
    /* Form labels */
    label {
        font-size: 14px !important;
        margin-bottom: 8px !important;
        display: block !important;
    }
    
    /* Form rows to single column */
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    /* Submit buttons */
    .form-submit,
    input[type="submit"],
    button[type="submit"] {
        width: 100% !important;
        min-height: 52px !important;
        font-size: 16px !important;
        margin-top: 8px !important;
    }
    
    /* Proper input types for mobile keyboards */
    input[type="email"] {
        -webkit-appearance: none;
        appearance: none;
    }
    
    input[type="tel"] {
        -webkit-appearance: none;
        appearance: none;
    }
    
    input[type="number"] {
        -webkit-appearance: none;
        appearance: none;
    }
}

/* ===================================
   ENHANCEMENT #7: IMAGE LAZY LOADING
   Better performance - applied via HTML
   Note: lazy loading attribute added to images in HTML
   =================================== */

/* Placeholder for images while loading */
img[loading="lazy"] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

img[loading="lazy"].loaded {
    animation: none;
    background: none;
}

/* ===================================
   ENHANCEMENT #8: SWIPE GESTURES
   Close mobile menu with swipe - applied via JS
   =================================== */

@media (max-width: 767px) {
    .mobile-menu {
        touch-action: pan-y !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .mobile-menu.swiping {
        transition: none !important;
    }
}

/* ===================================
   ENHANCEMENT #9: BOTTOM NAVIGATION SPACING
   Better spacing for floating elements
   =================================== */

@media (max-width: 767px) {
    /* Reorganize floating buttons to avoid overlap */
    .whatsapp-float {
        bottom: 24px !important;
        left: 20px !important;
        z-index: 999 !important;
    }
    
    .chat-trigger {
        bottom: 24px !important;
        right: 20px !important;
        z-index: 999 !important;
    }
    
    .back-to-top {
        bottom: 92px !important;
        right: 20px !important;
        z-index: 999 !important;
    }
    
    /* Add padding to bottom of page to avoid content hiding behind buttons */
    .footer {
        padding-bottom: 100px !important;
    }
    
    /* Cookie banner positioning adjustment */
    .cookie-consent {
        bottom: 100px !important;
    }
}

/* ===================================
   ENHANCEMENT #10: TYPOGRAPHY HIERARCHY
   Better readability on small screens
   =================================== */

@media (max-width: 767px) {
    /* Base font size increase */
    body {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
    
    /* Paragraph spacing */
    p {
        margin-bottom: 16px !important;
        line-height: 1.7 !important;
    }
    
    /* Heading hierarchy */
    h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
    }
    
    h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 14px !important;
    }
    
    h3 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }
    
    h4 {
        font-size: 18px !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }
    
    h5, h6 {
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }
    
    /* List readability */
    ul, ol {
        padding-left: 24px !important;
        margin-bottom: 16px !important;
    }
    
    li {
        margin-bottom: 8px !important;
        line-height: 1.6 !important;
    }
    
    /* Link sizing */
    a {
        font-size: inherit !important;
    }
    
    /* Badge and tag readability */
    .badge,
    .tag,
    .section-tag {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
    
    /* Better contrast for secondary text */
    .text-secondary,
    .section-description {
        color: #4a5568 !important;
        font-size: 15px !important;
    }
}

/* ===================================
   NOTE: Dashboard mobile view handled separately
   in mobile-app-view.css - keeps desktop unchanged
   =================================== */

/* ===================================
   ADDITIONAL MOBILE OPTIMIZATIONS
   =================================== */

@media (max-width: 767px) {
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden !important;
    }
    
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Section spacing optimization */
    section {
        padding: 60px 0 !important;
    }
    
    .section-header {
        margin-bottom: 32px !important;
    }
    
    /* Hero section styles moved to mobile-app-view.css to avoid conflicts */
    
    .trust-item i {
        font-size: 14px !important;
    }
    
    /* Navigation mobile optimization */
    .navbar {
        padding: 12px 0 !important;
    }
    
    .logo {
        font-size: 20px !important;
    }
    
    .logo-icon {
        width: 32px !important;
        height: 32px !important;
    }
    
    /* Tab navigation mobile */
    .tabs-nav {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    /* Modal optimization */
    .modal-content {
        width: calc(100vw - 32px) !important;
        max-width: none !important;
        margin: 16px !important;
        padding: 24px 20px !important;
    }
    
    /* Testimonial optimization */
    .testimonial-card {
        min-height: auto !important;
    }
    
    .testimonial-author {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
    }
    
    /* Footer optimization */
    .footer-links {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    .footer-brand {
        text-align: center !important;
        margin-bottom: 32px !important;
    }
    
    .footer-social {
        justify-content: center !important;
    }
}

/* ===================================
   LANDSCAPE MOBILE SPECIFIC
   =================================== */

@media (max-width: 767px) and (orientation: landscape) {
    .hero {
        padding: 60px 0 40px !important;
    }
    
    .chat-widget {
        height: 100vh !important;
    }
    
    .chat-messages {
        height: calc(100vh - 160px) !important;
    }
}

/* ===================================
   TOUCH DEVICE OPTIMIZATIONS
   =================================== */

@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .card:hover,
    .btn:hover,
    .feature-card:hover {
        transform: none !important;
    }
    
    /* Add active/pressed states instead */
    .btn:active {
        transform: scale(0.96) !important;
    }
    
    .card:active {
        transform: translateY(2px) !important;
    }
}

/* ===================================
   HIGH DPI DISPLAYS (Retina, etc.)
   =================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders and shadows on retina */
    .card,
    .btn,
    .modal-content {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}