/* ============================================================================
   MMIO MOBILE STYLES
   Mobile-first responsive design for MMIO application
   Primary Breakpoint: max-width: 768px (tablets and below)
   Secondary Breakpoint: max-width: 480px (phones)
   Tertiary Breakpoint: max-width: 320px (tiny phones) - if needed
   
   Organization:
   - All 768px styles are consolidated into single blocks per section
   - 480px overrides come after 768px styles
   - No duplicate media queries for same breakpoint
   ============================================================================ */

/* ============================================================================
   1. IMPORTS & FONT DEPENDENCIES
   ============================================================================ */

/* Import Roboto font family - matches main site typography */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700&display=swap');

/* ============================================================================
   2. MOBILE-SPECIFIC CSS VARIABLES
   Define once, use everywhere for consistency
   ============================================================================ */

@media (max-width: 768px) {
  :root {
    /* Mobile-specific variable overrides */
    --mobile-padding: 1rem;              /* Standard mobile padding */
    --mobile-padding-sm: 0.5rem;         /* Small mobile padding */
    --mobile-padding-lg: 1.5rem;         /* Large mobile padding */
    
    --mobile-font-size: 14px;            /* Base mobile font size */
    --mobile-font-size-sm: 12px;         /* Small text on mobile */
    --mobile-font-size-lg: 16px;         /* Large text on mobile */
    
    --mobile-button-height: 48px;        /* iOS/Android touch target minimum */
    --mobile-input-height: 44px;         /* Form input height for touch */
    
    --mobile-spacing: 1rem;              /* Standard spacing between elements */
    --mobile-spacing-sm: 0.5rem;         /* Tight spacing */
    --mobile-spacing-lg: 2rem;           /* Large spacing */
    
    --mobile-radius: 8px;                /* Slightly smaller border radius on mobile */
    
    /* Mobile-specific hero sizes */
    --mobile-hero-font: clamp(1.8rem, 8vw, 2.5rem);
    --mobile-hero-subtitle: 18px;
  } 
}


/* Ultra-small phone overrides */
@media (max-width: 480px) {
  :root {
    /* Even smaller for tiny screens */
    --mobile-hero-font: clamp(1.6rem, 9vw, 2rem);
    --mobile-hero-subtitle: 16px;
    --mobile-padding: 0.75rem;           /* Tighter padding on very small screens */
  }
}





/* ============================================================================
   3. BASE MOBILE STYLES - GLOBAL RESETS & CONTAINERS
   All fundamental mobile adjustments in one block
   ============================================================================ */

@media (max-width: 768px) {
  /* Body and HTML resets for mobile */
  body {
    font-size: var(--mobile-font-size);  /* Use our mobile font size variable */
    padding: 0;                          /* Remove default padding */
    margin: 0;                           /* Remove default margin */
    overflow-x: hidden;                  /* Prevent horizontal scroll */
    -webkit-text-size-adjust: 100%;     /* Prevent iOS font size adjustment */
  }

  /* Main container adjustments */
  .page,
  .dashboard-container,
  .container {
    margin: var(--mobile-padding);       /* Consistent mobile margins */
    padding: 0 var(--mobile-padding-sm); /* Horizontal padding only */
    max-width: 100%;                     /* Full width on mobile */
    box-sizing: border-box;              /* Include padding in width */
  }
  
  /* Specific dashboard container override if needed */
  .dashboard-container {
    margin: 1rem;                        /* Your existing specific value */
    padding: 0 0.5rem;                   /* Your existing specific value */
  }

  /* ============================================================================
     4. TYPOGRAPHY ADJUSTMENTS FOR MOBILE
     Consolidated heading and text sizes
     ============================================================================ */
  
  /* Heading adjustments - all in one place */
  h1 {
    font-size: 1.5rem;                   /* 24px on mobile */
    line-height: 1.2;                    /* Tighter line height */
    margin-bottom: var(--mobile-spacing);
  }
  
  h2 {
    font-size: 1.25rem;                  /* 20px on mobile */
    line-height: 1.3;
    margin-bottom: var(--mobile-spacing-sm);
  }
  
  h3 {
    font-size: 1.1rem;                   /* ~17-18px on mobile */
    line-height: 1.3;
    margin-bottom: var(--mobile-spacing-sm);
  }
  
  h4, h5, h6 {
    font-size: 1rem;                     /* 16px on mobile */
    line-height: 1.4;
    margin-bottom: var(--mobile-spacing-sm);
  }
  
  /* Paragraph and text adjustments */
  p {
    font-size: var(--mobile-font-size);
    line-height: 1.5;                    /* Comfortable reading */
    margin-bottom: var(--mobile-spacing-sm);
  }
  
  /* Link adjustments for better touch targets */
  a {
    padding: 2px 4px;                    /* Small padding for touch */
    margin: -2px -4px;                   /* Compensate for padding */
  }
}

/* ============================================================================
   5. ULTRA-SMALL SCREEN OVERRIDES (480px and below)
   ============================================================================ */

@media (max-width: 480px) {
  /* Further reduce container margins on tiny screens */
  .page,
  .container {
    margin: var(--mobile-padding-sm);    /* Even tighter margins */
    padding: 0 var(--mobile-padding-sm);
  }
  
  /* Further reduce typography if needed */
  body {
    font-size: var(--mobile-font-size-sm); /* 12px base on very small */
  }
  
  h1 {
    font-size: 1.3rem;                   /* Even smaller h1 */
  }
  
  h2 {
    font-size: 1.15rem;
  }
}


/* ============================================================================
   6. NAVIGATION & HEADER MOBILE STYLES
   ============================================================================ */

@media (max-width: 768px) {
  /* Main navigation adjustments */
  .nav,
  .navbar {
    padding: var(--mobile-padding-sm) var(--mobile-padding);
    flex-direction: row;                 /* Keep horizontal on mobile */
    flex-wrap: wrap;                     /* Allow wrapping if needed */
  }
  
  /* Navigation links */
  .nav-links,
  .navbar-nav {
    width: 100%;                        /* Full width on mobile */
    justify-content: center;            /* Center navigation items */
    margin-top: var(--mobile-spacing-sm);
    gap: var(--mobile-spacing-sm);
  }
  
  /* Individual nav items */
  .navbar-nav .nav-item {
    margin: 0 var(--mobile-spacing-sm);
  }
  
  /* Last nav item (often CTA button) special handling */
  .navbar-nav .nav-item:last-child .nav-link {
    margin-left: 0;
    margin-top: 8px;
    display: inline-block;
    width: 100%;                        /* Full width CTA on mobile */
    padding: var(--mobile-padding-sm) var(--mobile-padding);
    white-space: normal;
    word-break: keep-all;   /* prevents single-letter orphan */
    line-height: 1.4;       /* better spacing */
    text-align: center;     /* optional: center text nicely */
  }
  
  /* Mobile menu toggle if you have one */
  .navbar-toggler {
    padding: 0.25rem 0.5rem;
    font-size: 1.25rem;
    border: 1px solid rgba(0,0,0,0.1);
  }

  /* ============================================================================
     7. HERO SECTION MOBILE
     Using the LATEST version from your duplicates
     ============================================================================ */
  
  .hero {
    padding: var(--mobile-spacing-lg) var(--mobile-padding);
    text-align: center;                 /* Center hero content on mobile */
  }
  
  .hero h1 {
    font-size: var(--mobile-hero-font); /* Using our clamp variable */
    line-height: 1.0;                   /* Tight line height for impact */
    margin-bottom: var(--mobile-spacing-sm);
  }
  
  .hero p {
    font-size: var(--mobile-hero-subtitle);
    margin: 0 0 20px 0;
  }

  /* ============================================================================
     8. CARDS & PANELS MOBILE
     Adding the missing card styles
     ============================================================================ */
  
  .card {
    padding: var(--mobile-padding);     /* Reduced padding on mobile */
    margin-bottom: var(--mobile-spacing);
    border-radius: var(--mobile-radius); /* Slightly smaller radius */
  }
  
  /* Card headers if you have them */
  .card-header {
    padding: var(--mobile-padding-sm);
    font-size: 1.1rem;
  }
  
  .card-body {
    padding: var(--mobile-padding);
  }

  /* ============================================================================
     9. BANNER COMPONENT MOBILE
     Adding the missing banner styles
     ============================================================================ */
  
  .banner {
    padding: var(--mobile-padding);
    flex-direction: column;             /* Stack banner content vertically */
    text-align: center;                 /* Center banner text */
    gap: var(--mobile-spacing);
  }
  
  .banner strong {
    font-size: 1.25rem;                /* Smaller banner heading on mobile */
  }
  
  .banner .btn {
    width: 100%;                        /* Full width banner button */
    margin-top: var(--mobile-spacing-sm);
  }

  /* ============================================================================
     10. FOOTER MOBILE
     Adding the missing footer styles
     ============================================================================ */
  
  .footer {
    padding: var(--mobile-padding);
    font-size: var(--mobile-font-size-sm);
    text-align: center;
  }
  
  /* Footer columns if you have them */
  .footer-columns {
    flex-direction: column;
    gap: var(--mobile-spacing);
  }
  
  .footer-column {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================================
   11. ULTRA-SMALL SCREEN LAYOUT OVERRIDES (480px)
   ============================================================================ */

@media (max-width: 480px) {
  /* Hero further adjustments */
  .hero h1 {
    font-size: var(--mobile-hero-font); /* Will use 480px variable */
    line-height: 1.1;                   /* Allow slight line break if needed */
  }
  
  .hero p {
    font-size: var(--mobile-hero-subtitle); /* Will use 480px variable */
    margin: 0 0 18px 0;
  }
  
  /* Even smaller cards */
  .card {
    padding: var(--mobile-padding-sm);
  }
  
  /* Navigation adjustments */
  .nav-links,
  .navbar-nav {
    flex-direction: column;             /* Stack nav items vertically on tiny screens */
  }
}


/* ============================================================================
   12. FORMS & INPUT MOBILE STYLES
   Touch-friendly form elements
   ============================================================================ */

@media (max-width: 768px) {
  /* Form section containers */
  .form-section {
    padding: var(--mobile-padding);
    margin-bottom: var(--mobile-spacing);
  }
  
  /* Form rows - stack on mobile */
  .form-row {
    grid-template-columns: 1fr;         /* Single column on mobile */
    gap: var(--mobile-spacing);
  }
  
  /* All form inputs - touch-friendly sizing */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  input[type="url"],
  select,
  textarea {
    width: 100%;                        /* Full width inputs */
    min-height: var(--mobile-input-height); /* 44px minimum */
    font-size: 16px;                   /* Prevents iOS zoom on focus */
    padding: 12px;                      /* Comfortable padding */
    border-radius: var(--mobile-radius);
  }
  
  /* Buttons - touch-friendly */
  button,
  .btn,
  input[type="submit"],
  input[type="button"],
  input[type="reset"] {
    min-height: var(--mobile-button-height); /* 48px minimum */
    font-size: 16px;                   /* Prevents iOS zoom */
    padding: 12px 24px;                 /* Comfortable padding */
    width: 100%;                        /* Full width by default on mobile */
    border-radius: var(--mobile-radius);
  }
  
  /* Inline buttons can be smaller */
  .btn-inline {
    width: auto;                        /* Not full width */
    padding: 8px 16px;
    min-height: 40px;                   /* Slightly smaller for inline */
  }
  
  /* Form labels */
  label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: var(--mobile-font-size);
  }
  
  /* Checkboxes and radios - bigger touch targets */
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }

  /* ============================================================================
     13. DASHBOARD SPECIFIC MOBILE STYLES
     All your dashboard component adjustments
     ============================================================================ */
  
  /* Dashboard layout adjustments */
  .dashboard-container {
    margin: 1rem;
    padding: 0 0.5rem;
  }
  
  /* Button rows - vertical stack on mobile */
  .button-row {
    flex-direction: column;             /* Stack vertically */
    align-items: stretch;               /* Full width items */
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
  }
  
  /* Action rows - vertical stack */
  .action-row {
    flex-direction: column;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--mobile-spacing-sm);
  }
  
  /* Profile link adjustments */
  .profile-link {
    margin-bottom: 0.5rem;
    width: 100%;
    text-align: center;
    padding: var(--mobile-padding-sm);
  }
  
  /* Dashboard specific buttons - full width */
  #logout-btn,
  #access-biz-btn,
  #upgrade-btn {
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 12px;
    font-size: 16px;
  }
  
  /* Pro form specific */
  #pro-form {
    padding: 1rem !important;
  }
  
  /* Page headers in dashboard */
  .page-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    padding: var(--mobile-padding);
  }
  
  /* Dashboard cards/sections */
  .dashboard-section {
    margin-bottom: var(--mobile-spacing-lg);
    padding: var(--mobile-padding);
  }
  
  /* Stats or metric displays */
  .metric-row {
    flex-direction: column;
    gap: var(--mobile-spacing);
  }
  
  .metric-card {
    width: 100%;
    padding: var(--mobile-padding);
  }
}

/* ============================================================================
   14. ULTRA-SMALL SCREEN FORM OVERRIDES (480px)
   ============================================================================ */

@media (max-width: 480px) {
  /* Even more compact forms on tiny screens */
  .form-section {
    padding: var(--mobile-padding-sm);
  }
  
  /* Smaller input padding on tiny screens */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  input[type="url"],
  select,
  textarea {
    padding: 10px;                      /* Slightly less padding */
  }
  
  /* Smaller button padding */
  button,
  .btn {
    padding: 10px 16px;
  }
}






/* ============================================================================
   15. AUTHENTICATION MOBILE STYLES
   Login and auth container adjustments
   ============================================================================ */

@media (max-width: 768px) {
  /* Login view container */
  #login-view {
    padding: 1rem;
    margin: 1rem;
    max-width: 100%;
  }
  
  /* Firebase UI specific */
  .firebaseui-container {
    max-width: 100%;
    padding: 0;
  }
  
  /* Auth forms */
  .auth-form {
    padding: var(--mobile-padding);
    width: 100%;
  }
  
  /* Social login buttons if you have them */
  .social-login-btn {
    width: 100%;
    margin-bottom: var(--mobile-spacing-sm);
    padding: 12px;
  }
}

/* ============================================================================
   16. FEATURE ICONS & COMPONENTS MOBILE
   DUPLICATE REMOVED - keeping only one version
   ============================================================================ */

@media (max-width: 768px) {
  /* Feature section containers */
  .features {
    grid-template-columns: 1fr;         /* Single column on mobile */
    gap: var(--mobile-spacing-lg);
  }
  
  /* Individual feature boxes */
  .feature {
    text-align: center;                 /* Center feature content */
    padding: var(--mobile-padding);
  }
  
  /* Feature icons - adjusted size for mobile */
  .feature .icon {
    width: 50px;                        /* Smaller icons on mobile */
    height: 50px;
    margin: 0 auto var(--mobile-spacing-sm);
  }
  
  .feature .icon svg {
    width: 40px;
    height: 40px;
  }
  
  /* Feature titles and descriptions */
  .feature h3 {
    font-size: 1.1rem;
    margin-bottom: var(--mobile-spacing-sm);
  }
  
  .feature p {
    font-size: var(--mobile-font-size);
  }
}

/* ============================================================================
   17. SEARCH RESULTS MOBILE STYLES
   Tables and results display
   ============================================================================ */

@media (max-width: 768px) {
  /* Search results container */
  #searchResults {
    padding: 10px;
    margin-top: 20px;
  }
  
  /* Search status messages */
  #searchStatus {
    padding: 12px;
    font-size: 14px;
    text-align: center;
    margin: 15px 0;
  }
  
  /* Results categories */
  .results-category {
    margin-bottom: 20px;
  }
  
  .results-category h3 {
    padding: 12px 15px;
    font-size: 1em;
  }
  
  /* Results tables - responsive */
  .results-table {
    font-size: 12px;
    width: 100%;
    overflow-x: auto;                   /* Allow horizontal scroll if needed */
    display: block;                     /* Enable scrolling */
  }
  
  .results-table th,
  .results-table td {
    padding: 8px 10px;
    white-space: nowrap;                /* Prevent text wrapping in cells */
  }
  
  /* Make table scrollable wrapper */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;  /* Smooth scrolling on iOS */
    margin-bottom: var(--mobile-spacing);
  }
}

/* ============================================================================
   18. BUTTONS & LINKS UTILITIES MOBILE
   Additional button and link styles
   ============================================================================ */

@media (max-width: 768px) {
  /* More info button */
  .more-info-btn {
    padding: 12px;
    font-size: 15px;
    width: 100%;
    margin-bottom: var(--mobile-spacing-sm);
  }
  
  /* Detail links */
  .detail-link {
    display: block;
    margin: 8px 0;
    text-align: center;
    padding: 8px;
    background: rgba(0,0,0,0.03);      /* Subtle background */
    border-radius: var(--mobile-radius);
  }
  
  /* Contact details sections */
  .contact-details {
    padding: 10px;
    font-size: var(--mobile-font-size);
  }
  
  /* Button subtext - hide on mobile for space */
  .btn-subtext {
    display: none;
  }
  
  /* Call-to-action buttons */
  .cta-button {
    width: 100%;
    padding: 16px;
    font-size: 18px;
    font-weight: bold;
    margin: var(--mobile-spacing) 0;
  }
}

/* ============================================================================
   19. ULTRA-SMALL SCREEN FINAL OVERRIDES (480px)
   Most restrictive mobile adjustments
   ============================================================================ */

@media (max-width: 480px) {
  /* Hide address column in tables on very small screens */
  .results-table th:nth-child(4),
  .results-table td:nth-child(4) {
    display: none;
  }
  
  /* Even smaller table text */
  .results-table {
    font-size: 11px;
  }
  
  .results-table th,
  .results-table td {
    padding: 6px 8px;
  }
  
  /* Feature icons even smaller */
  .feature .icon {
    width: 40px;
    height: 40px;
  }
  
  .feature .icon svg {
    width: 32px;
    height: 32px;
  }
  
  /* Hide non-essential elements */
  .desktop-only,
  .tablet-only {
    display: none !important;
  }
  
  /* Reduce all spacing further */
  #searchResults {
    padding: 8px;
  }
  
  /* Stack everything vertically */
  .row,
  .grid,
  .flex-row {
    flex-direction: column !important;
  }
}

/* ============================================================================
   20. TINY SCREEN OVERRIDES (320px) - OPTIONAL
   Only if you need to support very old or very small devices
   ============================================================================ */

@media (max-width: 320px) {
  /* Absolute minimum viable styles */
  body {
    font-size: 12px;
  }
  
  .page,
  .container {
    padding: 0 8px;
    margin: 8px 0;
  }
  
  h1 {
    font-size: 1.2rem;
  }
  
  /* Hide everything non-essential */
  .mobile-optional {
    display: none !important;
  }
}



/**
 * Mobile responsive adjustments
 * - Scales icon down to match mobile SVG size (40x40)
 * - Applied at same breakpoint as existing mobile styles
 */
@media (max-width: 768px) {
  .feature .icon img {
    width: 40px;   /* Match mobile SVG size */
    height: 40px;  /* Match mobile SVG size */
  }
}

/**
 * High-DPI display optimization
 * - Detects Retina and other high-DPI screens
 * - Browser automatically leverages full 1024x1024 source resolution
 * - Ensures maximum clarity on high-density displays
 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .feature .icon img {
    /* Browser automatically scales from high-res source */
    /* 1024x1024 PNG provides 21x native resolution for 48px display */
    /* This ensures perfect clarity even on 3x Retina displays */
  }
}


  /*
   * Adjust Google attribution positioning for vertical layout
   */
  .google-attribution {
    margin-top: 8px;               /* Space above attribution */
    text-align: center;            /* Center the attribution */
  }


/* ============================================================================
   SEARCH BAR & BUTTON - MOBILE RESPONSIVE (CONSOLIDATED)
   All search-related mobile styles in ONE place
   Heights matched for perfect alignment
   ============================================================================ */

/* ────────────────────────────────────────────────────────────────────────────
   TABLET & LARGE PHONE (1024px and below)
   - Vertical layout (stacked input + button)
   - Full width elements
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Search container - stack vertically */
  .search {
    flex-direction: column;        /* Stack input and button vertically */
    align-items: stretch;          /* Full width children */
    gap: 12px;                     /* Space between elements */
    width: 100%;                   
    max-width: 100%;               /* Override desktop constraint */
    padding: 0 1rem;               /* Side breathing room */
  }
  
  /* Search field container */
  .search-field {
    width: 100%;                   /* Full width */
    flex: none;                    
  }
  
  /* Search input - TABLET SIZE */
  .search input {
    width: 100%;                   
    height: 60px;                  /* ✅ MATCHED to button */
    padding: 14px;                 /* Comfortable padding */
    font-size: 16px;               /* Prevents iOS zoom */
    box-sizing: border-box;        
  }
  
  /* Search button - TABLET SIZE */
  .search button#searchButton {
    width: 100%;                   /* Full width */
    height: 60px;                  /* ✅ MATCHED to input */
    min-height: 60px;              /* Enforce height */
    padding: 10px 16px;            /* Padding for image */
    font-size: 16px;               
    box-sizing: border-box;        
    margin: 0;                     
  }
  
  /* Search button image - TABLET SIZE */
  .search-button-image {
    height: 68px;                  /* Slightly smaller than container */
    max-width: 170px;              
  }
  
  /* Google attribution */
  .google-attribution {
    margin-top: 8px;               
    text-align: center;            
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   STANDARD MOBILE (768px and below)
   - Slightly smaller sizing for phones
   - Still maintains alignment
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Search container adjustments */
  .search {
    padding: 0 0.75rem;            /* Less padding on phones */
    gap: 10px;                     /* Tighter spacing */
  }
  
  /* Search input - MOBILE SIZE */
  .search input {
    height: 56px;                  /* ✅ MATCHED to button */
    padding: 12px;                 /* Compact padding */
  }
  
  /* Search button - MOBILE SIZE */
  .search button#searchButton {
    height: 56px;                  /* ✅ MATCHED to input */
    min-height: 56px;              /* Enforce height */
    padding: 8px 14px;             /* Compact padding */
  }
  
  /* Search button image - MOBILE SIZE */
  .search-button-image {
    height: 60px;                  /* Proportional to container */
    max-width: 150px;              
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   SMALL MOBILE (480px and below)
   - Maximum optimization for small screens
   - Still maintains alignment
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Search container adjustments */
  .search {
    padding: 0 0.5rem;             /* Minimal padding */
    gap: 8px;                      /* Tight spacing */
  }
  
  /* Search input - SMALL MOBILE SIZE */
  .search input {
    height: 52px;                  /* ✅ MATCHED to button */
    padding: 10px;                 /* Compact padding */
    font-size: 15px;               /* Slightly smaller but readable */
  }
  
  /* Search button - SMALL MOBILE SIZE */
  .search button#searchButton {
    height: 52px;                  /* ✅ MATCHED to input */
    min-height: 52px;              /* Enforce height */
    padding: 6px 12px;             /* Minimal padding */
  }
  
  /* Search button image - SMALL MOBILE SIZE */
  .search-button-image {
    height: 52px;                  /* Proportional to container */
    max-width: 130px;              
  }
}