/* ===================================================================
   CompanionFrame Mobile & Responsive Styles
   Mobile-first responsive design and mobile-specific features
   ================================================================ */

/* ===== MOBILE NAVIGATION ===== */

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    padding: var(--spacing-sm);
}

.mobile-menu-toggle span {
    width: 24px;
    height: 2px;
    background-color: var(--text-primary);
    transition: all var(--transition-fast);
}

/* ===== MOBILE CHAT INTERFACE ===== */

/* Mobile chat header - hidden on desktop */
.mobile-chat-header {
    display: none;
}

.mobile-sidebar-overlay {
    display: none;
}

.mobile-close-sidebar {
    display: none;
}

/* ===== BREAKPOINT: TABLET AND BELOW ===== */
@media (max-width: 768px) {
    /* Navigation */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--surface-color);
        border-top: 1px solid var(--border-color);
        flex-direction: column;
        padding: var(--spacing-lg);
        gap: var(--spacing-md);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    .nav-links.show {
        display: flex !important;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    /* Hero adjustments */
    .hero {
        padding: var(--spacing-2xl) var(--spacing-md);
        min-height: 70vh;
    }

    .hero-title {
        font-size: clamp(2rem, 8vw, 2.5rem);
        margin-bottom: var(--spacing-lg);
    }

    .hero-subtitle {
        font-size: clamp(1rem, 4vw, 1.2rem);
        margin-bottom: var(--spacing-xl);
        padding: 0 var(--spacing-md);
    }

    .hero-cta {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-md);
    }

    .hero-cta .btn {
        width: 100%;
        max-width: 300px;
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: 1rem;
    }

    .trust-indicators {
        gap: var(--spacing-md);
        flex-direction: column;
        align-items: center;
    }

    .trust-item {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

         /* Grid adjustments */
     .features-grid {
         grid-template-columns: 1fr;
     }
     
     .characters-grid {
         grid-template-columns: 1fr;
         gap: var(--spacing-lg);
     }
     
     .character-card {
         padding: var(--spacing-xl);
         margin-bottom: var(--spacing-md);
     }
     
     .character-avatar {
         width: 80px;
         height: 80px;
     }
     
     .characters .section-title {
         font-size: clamp(1.75rem, 6vw, 2.5rem);
         margin-bottom: var(--spacing-lg);
     }
     
     .characters .section-subtitle {
         font-size: clamp(1rem, 4vw, 1.2rem);
         margin-bottom: var(--spacing-xl);
         padding: 0 var(--spacing-md);
     }
     
     .characters {
         padding: var(--spacing-2xl) var(--spacing-md);
     }

    /* Trust indicators */
    .trust-indicators {
        flex-direction: column;
        gap: 16px;
    }
    
         .problems-grid {
         grid-template-columns: 1fr;
         gap: var(--spacing-lg);
     }

     .problem-card {
         padding: var(--spacing-xl);
         margin-bottom: var(--spacing-md);
     }

     .problem-icon {
         width: 60px;
         height: 60px;
         font-size: 2rem;
     }

     .problems-we-solve .section-title {
         font-size: clamp(1.75rem, 6vw, 2.5rem);
         margin-bottom: var(--spacing-md);
     }

     .problems-we-solve .section-subtitle {
         font-size: clamp(1rem, 4vw, 1.2rem);
         margin-bottom: var(--spacing-xl);
         padding: 0 var(--spacing-md);
     }
    
         .steps-grid {
         grid-template-columns: 1fr;
         gap: var(--spacing-lg);
     }

     .step {
         padding: var(--spacing-xl);
         margin-bottom: var(--spacing-md);
     }

     .step-number {
         width: 70px;
         height: 70px;
         font-size: 1.75rem;
     }

     .how-it-works .section-title {
         font-size: clamp(1.75rem, 6vw, 2.5rem);
         margin-bottom: var(--spacing-lg);
     }

     .how-it-works {
         padding: var(--spacing-2xl) var(--spacing-md);
     }

    /* Enhanced Mobile Chat Interface */
    .chat-container {
        height: 100dvh !important; /* Use dynamic viewport height */
        height: calc(var(--vh, 1vh) * 100) !important;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .chat-sidebar {
    position: fixed !important;
    left: -100% !important;
    top: 0 !important;
    height: 100dvh !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    z-index: 2000 !important;
    transition: left 0.3s ease !important;
    background-color: var(--surface-color) !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    width: 85vw !important;
    max-width: 320px !important;
    border-right: 1px solid var(--border-color) !important;
}

.chat-sidebar.show {
    left: 0 !important;
    visibility: visible !important;
}

    /* Mobile chat header */
    .mobile-chat-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-md);
        background-color: var(--surface-color);
        border-bottom: 1px solid var(--border-color);
        position: sticky;
        top: 0;
        z-index: 100;
        flex-shrink: 0;
    }

    .mobile-menu-btn {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        padding: var(--spacing-sm);
        color: var(--text-primary);
        border-radius: var(--radius-sm);
        transition: background-color var(--transition-fast);
    }

    .mobile-menu-btn:hover {
        background-color: var(--border-light);
    }

    .mobile-current-companion {
        display: flex;
        align-items: center;
        flex: 1;
        margin: 0 var(--spacing-md);
    }

    .mobile-current-companion .companion-avatar {
        width: 32px;
        height: 32px;
        margin-right: var(--spacing-sm);
        flex-shrink: 0;
    }

    .mobile-current-companion .companion-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    .mobile-current-companion .companion-info h3 {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 600;
    }

    .mobile-current-companion .companion-info p {
        margin: 0;
        font-size: 0.75rem;
        opacity: 0.8;
    }

    /* Overlay for sidebar */
    .mobile-sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .mobile-sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    /* Chat main area - ensure input is always visible */
    .chat-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    .chat-header {
        flex-shrink: 0;
        padding: var(--spacing-md);
        background-color: var(--surface-color);
        border-bottom: 1px solid var(--border-color);
    }

    .sidebar-header {
        padding: var(--spacing-md);
        border-bottom: 1px solid var(--border-color);
        background-color: var(--surface-color);
    }

    .mobile-close-sidebar {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        padding: var(--spacing-sm);
        color: var(--text-primary);
        border-radius: var(--radius-sm);
        transition: background-color var(--transition-fast);
    }

    .companion-item {
        display: flex;
        align-items: center;
        padding: var(--spacing-md);
        cursor: pointer;
        transition: background-color var(--transition-fast);
        border-radius: var(--radius-sm);
    }

    .companion-item .companion-avatar {
        width: 40px;
        height: 40px;
        margin-right: var(--spacing-md);
        flex-shrink: 0;
    }

    .companions-list {
        flex: 1;
        overflow-y: auto;
        padding: var(--spacing-md);
        -webkit-overflow-scrolling: touch;
    }

    .sidebar-footer {
        padding: var(--spacing-md);
        border-top: 1px solid var(--border-color);
        background-color: var(--surface-color);
    }

    .sidebar-footer .btn {
        width: 100%;
        justify-content: center;
    }

    .message-content {
        max-width: 85%;
    }

    /* Enhanced chat input area - always visible */
    .chat-input-wrapper {
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
        flex-shrink: 0;
        background-color: var(--surface-color);
        border-top: 1px solid var(--border-color);
        position: sticky;
        bottom: 0;
        z-index: 50;
    }

    #messageInput {
        font-size: 16px; /* Prevents zoom on iOS */
        min-height: 44px;
        max-height: 120px;
        resize: none;
        -webkit-overflow-scrolling: touch;
    }

    /* Ensure chat messages area doesn't overlap with input */
    .chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: var(--spacing-md);
        padding-bottom: calc(var(--spacing-md) + 60px); /* Extra space for input */
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* Mobile-specific chat input container */
    .chat-input-container {
        position: sticky;
        bottom: 0;
        background-color: var(--surface-color);
        border-top: 1px solid var(--border-color);
        padding: var(--spacing-md);
        z-index: 100;
        flex-shrink: 0;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }

    /* Hide desktop chat header on mobile */
    .chat-header {
        display: none;
    }

    /* Mobile sidebar improvements */
    .sidebar-header {
        padding: var(--spacing-lg) var(--spacing-md);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-close-sidebar {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--text-secondary);
        padding: var(--spacing-xs);
        display: block;
    }

    /* Larger touch targets for mobile */
    .companion-item {
        padding: var(--spacing-md) var(--spacing-md);
        min-height: 50px;
        display: flex;
        align-items: center;
    }

    .companion-item .companion-avatar {
        width: 35px;
        height: 35px;
        flex-shrink: 0;
    }

    /* Fix companions list scrolling */
    .companions-list {
        flex: 1;
        overflow-y: auto;
        padding: var(--spacing-sm);
        -webkit-overflow-scrolling: touch;
    }

    .sidebar-footer {
        padding: var(--spacing-md);
        border-top: 1px solid var(--border-color);
        flex-shrink: 0;
        gap: var(--spacing-sm);
    }

    .sidebar-footer .btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.9rem;
        min-height: 44px;
    }

    /* Message adjustments */
    .message-content {
        max-width: 85%;
    }

    .chat-input-wrapper {
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }

    #messageInput {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Account page mobile fixes */
    .account-header {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: stretch;
    }

    .account-content {
        gap: var(--spacing-lg);
    }

    .account-section {
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-md);
    }

    .account-section .form-group input,
    .account-section .form-group textarea {
        font-size: 16px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Auth and subscription forms */
    .subscription-container,
    .auth-container {
        padding: var(--spacing-md);
    }

    .auth-form,
    .subscription-content {
        margin: 1rem;
        padding: 2rem 1.5rem;
        border-radius: 20px;
    }
    
    .auth-form h2,
    .subscription-content h2 {
        font-size: 1.75rem;
    }
    
    .form-group input {
        padding: 0.875rem 1rem;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .legal-consent {
        padding: 1rem;
    }
    
    .checkbox-label {
        font-size: 0.85rem;
    }

    .container {
        padding: 0 var(--spacing-md);
    }

    /* Mobile legal elements */
    .cookie-consent-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .cookie-consent-actions {
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
        width: 100%;
    }

    .cookie-consent-actions .btn {
        width: 100%;
}

   .legal-modal-content {
    margin: 1rem !important;
    max-height: 90vh !important;
    max-width: calc(100vw - 2rem) !important;
}

.legal-modal-header {
    padding: 1.5rem 1.5rem 1rem 1.5rem !important;
}

.legal-modal-body {
    padding: 1rem 1.5rem 2rem 1.5rem !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

   .footer-content {
       grid-template-columns: 1fr;
       text-align: center;
   }

   .cookie-settings-actions {
       flex-direction: column;
   }

   .privacy-controls {
       flex-direction: column;
   }

   .cookie-category-header {
       flex-direction: column;
       align-items: flex-start;
       gap: 0.5rem;
   }

   .control-buttons {
       flex-direction: column;
   }
   
   .control-buttons .btn {
       width: 100%;
   }

   /* Floating CTA mobile */
   .floating-cta {
       bottom: 10px;
       right: 10px;
   }
   
   .floating-cta button {
       padding: 12px 20px;
       font-size: 0.9rem;
   }
}

/* ===== BREAKPOINT: MOBILE PHONES ===== */
@media (max-width: 480px) {
   .hero {
       padding: var(--spacing-xl) 0;
   }

   .hero-title {
       font-size: 1.75rem;
   }

   .character-card,
   .feature-card {
       padding: var(--spacing-lg);
   }

       .pricing-card {
        padding: var(--spacing-xl);
        margin: 0 var(--spacing-md);
    }

    .amount {
        font-size: 3rem;
    }
    
    .pricing .section-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
        margin-bottom: var(--spacing-lg);
    }
    
    .pricing {
        padding: var(--spacing-2xl) var(--spacing-md);
    }
    
    .features-list li {
        font-size: 0.95rem;
    }
    
    .features-list li::before {
        width: 20px;
        height: 20px;
        font-size: 1rem;
    }

   .chat-messages {
       padding: var(--spacing-md);
   }

   .chat-input-container {
       padding: var(--spacing-md);
   }

   /* Account container mobile fixes */
   .account-container {
       padding: var(--spacing-md);
       position: static;
       height: auto;
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;
       animation: slideInUp 0.3s ease-out;
   }

   .account-section {
       padding: var(--spacing-lg);
       margin-bottom: var(--spacing-md);
       border-radius: 12px;
   }
   
   .account-header {
       padding: var(--spacing-lg);
       flex-direction: column;
       gap: var(--spacing-md);
       text-align: center;
   }

   .account-header h2 {
       font-size: 1.75rem;
   }

   .control-buttons {
       flex-direction: column;
   }

   .control-buttons .btn {
       min-width: 100%;
   }

   .privacy-controls {
       flex-direction: column;
   }

   .privacy-controls .btn {
       min-width: 100%;
   }
}

/* ===== DESKTOP - HIDE MOBILE ELEMENTS ===== */
@media (min-width: 769px) {
   .mobile-chat-header,
   .mobile-sidebar-overlay,
   .mobile-close-sidebar {
       display: none !important;
   }

   .chat-sidebar {
       position: static !important;
       left: auto !important;
       transform: none !important;
   }
}

/* ===== ACCESSIBILITY & MOTION ===== */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
       animation-duration: 0.01ms !important;
       animation-iteration-count: 1 !important;
       transition-duration: 0.01ms !important;
   }

   .floating-cta button {
       animation: none !important;
   }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
   .btn {
       border: 2px solid currentColor;
   }
   
   .character-card,
   .problem-card {
       border: 2px solid var(--text-primary);
   }
}

/* ===== PRINT STYLES ===== */
@media print {
   .navbar,
   .floating-cta,
   .auth-container,
   .chat-container,
   .subscription-container,
   .mobile-chat-header,
   .mobile-sidebar-overlay {
       display: none !important;
   }
   
   .hero,
   .problems-we-solve,
   .how-it-works,
   .characters,
   .pricing {
       background: white !important;
       color: black !important;
   }
   
   .btn {
       border: 1px solid black !important;
       background: white !important;
       color: black !important;
   }
}

/* ===== BROWSER SPECIFIC FIXES ===== */

/* Fix for Safari iOS viewport height issue */
.full-height {
   height: 100vh;
   height: calc(var(--vh, 1vh) * 100);
}

/* Remove iOS input zoom */
@media screen and (max-width: 767px) {
   input[type="text"],
   input[type="email"],
   input[type="password"],
   input[type="number"],
   textarea,
   select {
       font-size: 16px !important;
   }
}

/* Prevent body scroll when mobile account is open */
@media (max-width: 768px) {
   body:has(#accountContainer[style*="display: block"]) {
       overflow: auto;
       position: static;
   }
}

/* ===== LOADING STATES ===== */

/* Smooth page transitions */
.landing-page,
.auth-container,
.chat-container,
.account-container,
.subscription-container {
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
}

.landing-page[style*="block"] {
   opacity: 1 !important;
}

.auth-container[style*="flex"] {
   opacity: 1 !important;
}

.chat-container[style*="flex"] {
   opacity: 1 !important;
}

.account-container[style*="block"] {
   opacity: 1 !important;
}

.subscription-container[style*="flex"] {
   opacity: 1 !important;
}

/* Loading spinner transitions */
.loading-spinner {
   opacity: 1;
   transition: opacity 0.3s ease-in-out;
}

.loading-spinner[style*="none"] {
   opacity: 0;
}

/* ===== UTILITY OVERRIDES FOR MOBILE ===== */

@media (max-width: 768px) {
   /* Force specific styling for problematic elements */
   .auth-container {
       position: fixed !important;
       top: 0 !important;
       left: 0 !important;
       width: 100% !important;
       height: 100vh !important;
       z-index: 1000 !important;
       overflow-y: auto !important;
       padding: 1rem !important;
       box-sizing: border-box !important;
       display: flex !important;
       align-items: flex-start !important;
       justify-content: center !important;
       padding-top: 1rem !important;
   }

   .auth-form {
       margin-top: 1rem !important;
       margin-bottom: 2rem !important;
       width: 100% !important;
       max-width: 420px !important;
   }

   /* Fix account page visibility */
   .account-container {
    background-color: var(--background-color) !important;
    color: var(--text-primary) !important;
    min-height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    /* Enhanced mobile scrolling */
    height: auto !important;
    min-height: 100vh !important;
    min-height: calc(var(--vh, 1vh) * 100) !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    /* Ensure full scrollability */
    max-height: none !important;
}

.account-container[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
}

.account-container[style*="display: block"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* Ensure body doesn't interfere with scrolling */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

   .account-container[style*="display: block"] {
       visibility: visible !important;
       opacity: 1 !important;
   }

   .account-header {
    background-color: var(--surface-color) !important;
    padding: 1rem !important;
    border-bottom: 1px solid var(--border-color) !important;
    margin-bottom: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

  .account-content {
    background-color: var(--background-color) !important;
    padding: 1rem !important;
    padding-bottom: 4rem !important;
    flex: 1 !important;
    /* Enhanced mobile scrolling */
    height: auto !important;
    min-height: calc(100vh - 80px) !important;
    min-height: calc((var(--vh, 1vh) * 100) - 80px) !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    /* Ensure full scrollability */
    max-height: none !important;
}

.account-section {
    background-color: var(--surface-color) !important;
    color: var(--text-primary) !important;
    margin-bottom: 1rem !important;
    padding: 1rem !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

   /* Fix chat interface visibility */
   .chat-container[style*="display: flex"] {
       visibility: visible !important;
       opacity: 1 !important;
       background-color: var(--background-color) !important;
   }

   .chat-main {
       display: flex !important;
       flex-direction: column !important;
       flex: 1 !important;
       height: 100vh !important;
   }

   .chat-messages {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: var(--spacing-md) !important;
    background-color: #f8fafc !important;
    gap: var(--spacing-md) !important;
}

.message-content {
    max-width: 85% !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-size: 0.9rem !important;
}

.message-time {
    font-size: 0.7rem !important;
}

   .chat-sidebar {
       display: flex !important;
       flex-direction: column !important;
       background-color: var(--surface-color) !important;
   }

   .companions-list {
       display: block !important;
       overflow-y: auto !important;
   }

   .chat-input-container {
       display: block !important;
       padding: var(--spacing-lg) !important;
       background-color: var(--surface-color) !important;
   }
}

/* ===== GAP FIXES ===== */

/* Remove any gaps between sections and footer */
.site-footer {
   margin-top: 0 !important;
   position: static !important;
   top: auto !important;
   transform: none !important;
}

.faq {
   margin-bottom: 0 !important;
   padding-bottom: 1rem !important;
}

.account-content {
   margin-bottom: 0 !important;
   padding-bottom: 0 !important;
}

.account-section:last-child {
    margin-bottom: 0 !important;
}

.landing-page > section:last-child {
   margin-bottom: 0 !important;
}

.chat-container {
   margin-bottom: 0 !important;
}

/* Force body and app container to have no gaps */
body {
   margin: 0 !important;
   padding: 0 !important;
}

#app {
   margin: 0 !important;
   padding: 0 !important;
}

/* Fix cookie banner mobile positioning */
.cookie-consent-banner {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-top: 2px solid var(--primary-color) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    padding: 1rem !important;
    transition: all 0.3s ease !important;
}

/* Ensure cookie banner hides properly on mobile */
.cookie-consent-banner[style*="display: none"],
.cookie-consent-banner[style*="visibility: hidden"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -9999 !important;
    transform: translateY(100vh) !important;
    pointer-events: none !important;
    position: absolute !important;
    bottom: -100vh !important;
    top: auto !important;
}

@media (max-width: 768px) {
    .cookie-consent-banner {
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        transition: all 0.3s ease !important;
    }
    
    .cookie-consent-content {
        background: white !important;
        padding: 1rem !important;
        border-radius: 12px !important;
        margin: 0 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Mobile-specific cookie banner button improvements */
    .cookie-consent-banner .btn {
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        min-height: 44px !important;
        padding: 0.75rem 1rem !important;
    }
}

/* Fix mobile hamburger menu */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex !important;
        z-index: 1000;
    }
    
    .nav-links {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        flex-direction: column !important;
        padding: 1rem !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
        display: none !important;
        z-index: 999 !important;
    }
    
    .nav-links.show {
        display: flex !important;
    }
}

/* Ensure mobile menu toggle is always visible on mobile */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex !important;
        cursor: pointer !important;
        z-index: 1000 !important;
    }
}

/* Simple mobile button fix */
@media (max-width: 768px) {
    button, .btn, a {
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        outline: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    
    button:focus, .btn:focus, a:focus {
        outline: none !important;
    }
    
    /* Prevent keyboard from opening */
    button, .btn {
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
    
    /* Fix specific button types */
    .hero-cta .btn,
    .nav-links .btn,
    .footer-link-btn {
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
        -webkit-focus-ring-color: rgba(0,0,0,0) !important;
    }
}

/* Fixed mobile button handling */
@media (max-width: 768px) {
    /* Specific button fixes only */
    button, .btn, .btn-primary, .btn-secondary, .hero-cta .btn {
        -webkit-appearance: none !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        outline: none !important;
    }
    
    /* Ensure no elements accidentally trigger input focus */
    .landing-page, .hero, .problems-we-solve, .characters, .pricing {
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* Allow normal text selection for readability */
    p, h1, h2, h3, h4, h5, h6, span, li {
        -webkit-user-select: text !important;
        user-select: text !important;
    }
}

/* Additional mobile keyboard prevention */
@media (max-width: 768px) {
    /* Prevent any accidental focus events */
    * {
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* Ensure no invisible form elements exist */
    input[type="hidden"], input[style*="display: none"] {
        display: none !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* Fix iOS Safari specific issues */
    body {
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }
    
    /* Override any contenteditable or input-like behavior */
    [contenteditable="true"] {
        -webkit-user-select: text !important;
        user-select: text !important;
    }
}

/* Mobile keyboard prevention fix */
@media (max-width: 768px) {
    /* Remove tap highlights that could cause focus issues */
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Ensure hidden inputs are completely inaccessible */
    input[type="hidden"] {
        display: none !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
    }
    
    /* Normal button behavior without interference */
    button, .btn {
        -webkit-appearance: none;
        touch-action: manipulation;
        cursor: pointer;
    }
}

/* Fix date of birth field on mobile */
@media (max-width: 768px) {
    #registerDateOfBirth {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        padding: 0.875rem 1rem !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 0.5rem !important;
        background: white !important;
        font-size: 16px !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    
    /* Ensure the form group is visible */
    .form-group:has(#registerDateOfBirth) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Make sure label is visible */
    label[for="registerDateOfBirth"] {
        display: block !important;
        visibility: visible !important;
    }
}

/* Working mobile keyboard fix with form display fix */
@media (max-width: 768px) {
    /* Hide auth container completely when not in use */
    .auth-container {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    /* Show properly when activated */
    .auth-container[style*="display: flex"] {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    padding: 0.5rem !important;
    padding-bottom: 2rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 1000 !important;
    align-items: flex-start !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}
    
    /* Hide all forms by default, even when auth container is shown */
.auth-container[style*="display: flex"] .auth-form {
    display: none !important;
    visibility: hidden !important;
}

/* Only show the specific form that should be visible */
.auth-container[style*="display: flex"] .auth-form[style*="display: block"] {
    display: block !important;
    visibility: visible !important;
    width: calc(100% - 1rem) !important;
    max-width: 420px !important;
    margin: 0.5rem auto 2rem auto !important;
    padding: 2rem 1.5rem 2rem 1.5rem !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 24px !important;
    backdrop-filter: blur(20px) !important;
    min-height: auto !important;
    box-sizing: border-box !important;
}   
    /* Restore input functionality when forms are shown */
    .auth-container[style*="display: flex"] input,
    .auth-container[style*="display: flex"] button,
    .auth-container[style*="display: flex"] .btn {
        pointer-events: auto !important;
        display: block !important;
        visibility: visible !important;
    }
}

.mobile-sidebar-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 1500 !important;
    display: none !important;
}

.mobile-sidebar-overlay.show {
    display: block !important;
}