/* Mobile Optimizations for Finloop Network */

/* Touch-friendly improvements */
@media (max-width: 767.98px) {
  /* Increase touch targets */
  .btn, .nav-link, .dropdown-item {
    min-height: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Better spacing for touch interactions */
  .navbar-nav .nav-link {
    padding: 12px 16px !important;
    margin: 2px 0 !important;
  }
  
  .dropdown-item {
    padding: 12px 16px !important;
    margin: 2px 0 !important;
  }
  
  /* Improve button spacing */
  .btn {
    margin: 4px 2px !important;
    padding: 10px 16px !important;
  }
  
  /* Better card spacing */
  .exchange-card, .about-card, .feature-card, .faq-card, .testimonial-card {
    margin: 8px 4px !important;
    padding: 16px 12px !important;
  }
  
  /* Improve text readability */
  body {
    font-size: 16px !important; /* Prevent zoom on iOS */
    line-height: 1.5 !important;
  }
  
  /* Better form inputs */
  input, select, textarea {
    font-size: 16px !important; /* Prevent zoom on iOS */
    padding: 12px !important;
    border-radius: 8px !important;
  }
  
  /* Improve modal responsiveness */
  .modal-dialog {
    margin: 10px !important;
    max-width: calc(100% - 20px) !important;
  }
  
  .modal-content {
    border-radius: 12px !important;
  }
  
  /* Better table responsiveness */
  .table-responsive {
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  
  /* Improve image responsiveness */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Better list spacing */
  ul, ol {
    padding-left: 20px !important;
  }
  
  li {
    margin-bottom: 8px !important;
  }
}

/* Very small screen optimizations */
@media (max-width: 375px) {
  .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  
  .navbar {
    padding: 0 4px !important;
  }
  
  .navbar .navbar-brand img {
    height: 30px !important;
    max-width: 100px !important;
  }
  
  .exchange-card {
    padding: 12px 8px !important;
    margin: 4px 2px !important;
  }
  
  .btn {
    padding: 8px 12px !important;
    font-size: 0.9rem !important;
  }
  
  .hero-title {
    font-size: 1.3rem !important;
  }
  
  .hero-desc {
    font-size: 0.9rem !important;
  }
}

/* Landscape orientation optimizations */
@media (max-width: 767.98px) and (orientation: landscape) {
  .navbar {
    height: 50px !important;
    min-height: 50px !important;
  }
  
  .navbar .navbar-brand img {
    height: 35px !important;
    max-width: 120px !important;
  }
  
  .hero-title {
    font-size: 1.4rem !important;
  }
  
  .py-5, .py-4 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  
  .exchange-card {
    padding: 12px 8px !important;
  }
}

/* Performance optimizations */
@media (max-width: 767.98px) {
  /* Reduce animations for better performance */
  * {
    animation-duration: 0.2s !important;
    transition-duration: 0.2s !important;
  }
  
  /* Optimize for mobile scrolling */
  .testimonial-list {
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Better focus states for accessibility */
  .btn:focus, .nav-link:focus, .dropdown-item:focus {
    outline: 2px solid #FFD600 !important;
    outline-offset: 2px !important;
  }
  
  /* Improve loading states */
  .loading {
    min-height: 200px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Dark mode optimizations for mobile */
@media (max-width: 767.98px) {
  body:not(.light-mode) {
    background: #101828 !important;
    color: #e5e7eb !important;
  }
  
  body:not(.light-mode) .exchange-card,
  body:not(.light-mode) .about-card,
  body:not(.light-mode) .feature-card,
  body:not(.light-mode) .faq-card,
  body:not(.light-mode) .testimonial-card {
    background: #232946 !important;
    color: #e5e7eb !important;
    border: 1px solid #334155 !important;
  }
  
  body.light-mode {
    background: #f5f5f5 !important;
    color: #2c3e50 !important;
  }
  
  body.light-mode .exchange-card,
  body.light-mode .about-card,
  body.light-mode .feature-card,
  body.light-mode .faq-card,
  body.light-mode .testimonial-card {
    background: #ffffff !important;
    color: #2c3e50 !important;
    border: 1px solid #e0e7ef !important;
  }
}

/* Battery optimization */
@media (max-width: 767.98px) {
  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
  }
  
  /* Optimize for low battery */
  @media (prefers-reduced-data: reduce) {
    img {
      max-width: 200px !important;
    }
    
    .hero-card img,
    .about-card img {
      display: none !important;
    }
  }
}

/* Accessibility improvements */
@media (max-width: 767.98px) {
  /* High contrast mode */
  @media (prefers-contrast: high) {
    .exchange-card,
    .about-card,
    .feature-card,
    .faq-card,
    .testimonial-card {
      border: 2px solid #000 !important;
    }
    
    .btn {
      border: 2px solid currentColor !important;
    }
  }
  
  /* Focus visible for keyboard navigation */
  .btn:focus-visible,
  .nav-link:focus-visible,
  .dropdown-item:focus-visible {
    outline: 3px solid #FFD600 !important;
    outline-offset: 2px !important;
  }
}