/* Mobile Responsive Styles for Zero Bot Website */

/* Global Mobile Styles */
@media (max-width: 768px) {
  /* Fix viewport and font sizing */
  html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }

  body {
    font-size: 16px !important;
    line-height: 1.6 !important;
    min-width: 320px !important;
    overflow-x: hidden !important;
  }

  /* Container improvements */
  .container, 
  div[style*="max-width: 1200px"] {
    max-width: 100% !important;
    padding: 0 1rem !important;
  }

  /* Fix grid layouts that break on mobile */
  div[style*="grid-template-columns: repeat(auto-fit, minmax(500px, 1fr))"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  div[style*="grid-template-columns: repeat(auto-fit, minmax(350px, 1fr))"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Navigation mobile improvements */
  nav {
    position: relative;
  }

  nav div[style*="padding: 0 2rem"] {
    padding: 0 1rem !important;
  }

  /* User section mobile */
  nav div[style*="display: flex; align-items: center; gap: 1rem"] {
    gap: 0.5rem !important;
  }

  nav a[href="/profile"] {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
    min-width: auto !important;
  }

  nav a[href="/profile"] img {
    width: 24px !important;
    height: 24px !important;
  }

  nav a[href="/profile"] span {
    display: inline !important;
    max-width: 80px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.75rem !important;
  }

  nav a[href="/logout"] {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
  }

  /* Hero section mobile */
  div[style*="min-height: 90vh"] {
    min-height: auto !important;
    padding: 3rem 0 !important;
  }

  div[style*="padding: 6rem 0"] {
    padding: 3rem 0 !important;
  }

  div[style*="padding: 4rem 0"] {
    padding: 2rem 0 !important;
  }

  /* Typography mobile */
  h1[style*="font-size"] {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  h2[style*="font-size"] {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  h3[style*="font-size"] {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
  }

  p[style*="font-size"] {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }

  /* Fix titles that are too large */
  h1[style*="font-size: 4rem"] {
    font-size: 2.5rem !important;
  }

  h1[style*="font-size: 3rem"] {
    font-size: 2rem !important;
  }

  h2[style*="font-size: 3rem"] {
    font-size: 1.75rem !important;
  }

  h2[style*="font-size: 2rem"] {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }

  p[style*="font-size"] {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  /* Button improvements */
  a[style*="padding: 1rem 2rem"],
  button[style*="padding: 1rem 2rem"] {
    padding: 0.875rem 1.5rem !important;
    font-size: 1rem !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0.5rem 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  a[style*="padding: 0.75rem 1.5rem"] {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.875rem !important;
    width: auto !important;
    display: inline-block !important;
  }

  /* Fix buttons that are too wide */
  a[style*="border-radius: 0.5rem"] {
    border-radius: 0.5rem !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
  }

  /* Card improvements */
  div[style*="padding: 2rem"] {
    padding: 1.5rem !important;
  }

  div[style*="padding: 3rem"] {
    padding: 2rem !important;
  }

  /* Ensure cards don't overflow */
  div[style*="background: #1f2937"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Grid layouts mobile */
  div[style*="display: grid; gap: 2rem"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  div[style*="display: grid; gap: 3rem"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Flex layouts mobile */
  div[style*="display: flex; justify-content: space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
  }

  div[style*="display: flex; gap: 1.5rem"] {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  div[style*="display: flex; gap: 2rem"] {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  /* Form elements */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 0.5rem !important;
  }

  /* Table responsive */
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  table {
    min-width: 600px !important;
    font-size: 0.875rem !important;
  }

  /* Spacing utilities mobile */
  div[style*="margin-bottom: 3rem"] {
    margin-bottom: 2rem !important;
  }

  div[style*="margin-bottom: 4rem"] {
    margin-bottom: 2.5rem !important;
  }

  div[style*="margin-top: 3rem"] {
    margin-top: 2rem !important;
  }

  div[style*="margin-top: 4rem"] {
    margin-top: 2.5rem !important;
  }

  /* Image responsive */
  img[style*="width: 48px"] {
    width: 40px !important;
    height: 40px !important;
  }

  img[style*="width: 32px"] {
    width: 28px !important;
    height: 28px !important;
  }

  /* Icon improvements */
  i.fas, i.fab {
    font-size: 1rem !important;
  }

  /* Loading and error states mobile */
  .loading-spinner {
    width: 40px !important;
    height: 40px !important;
  }

  /* Toast notifications mobile */
  .swal2-popup {
    width: 90% !important;
    max-width: 400px !important;
    margin: 1rem !important;
    font-size: 1rem !important;
  }

  .swal2-title {
    font-size: 1.25rem !important;
  }

  .swal2-content {
    font-size: 1rem !important;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  body {
    font-size: 14px !important;
  }

  h1 {
    font-size: 1.75rem !important;
  }

  h2 {
    font-size: 1.375rem !important;
  }

  div[style*="padding: 1.5rem"] {
    padding: 1rem !important;
  }

  nav span {
    font-size: 1.125rem !important;
  }

  .code-value {
    font-size: 0.875rem !important;
  }
}

/* Landscape mobile orientation */
@media (max-width: 768px) and (orientation: landscape) {
  div[style*="min-height: 90vh"] {
    min-height: 100vh !important;
    padding: 2rem 0 !important;
  }

  h1 {
    font-size: 1.75rem !important;
  }
}

/* Touch improvements */
@media (hover: none) {
  /* Remove hover effects on touch devices */
  a:hover,
  button:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Improve touch targets */
  button,
  a,
  input,
  select {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Ensure all content stays within viewport */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Fix horizontal scrolling */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* Improve spacing for mobile */
  div[style*="margin-bottom: 4rem"] {
    margin-bottom: 2rem !important;
  }

  div[style*="margin-bottom: 3rem"] {
    margin-bottom: 1.5rem !important;
  }

  div[style*="margin-top: 4rem"] {
    margin-top: 2rem !important;
  }

  div[style*="margin-top: 3rem"] {
    margin-top: 1.5rem !important;
  }

  /* Fix feature cards layout */
  div[style*="display: flex; align-items: center; gap"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }

  /* Ensure text doesn't overflow */
  span, p, div {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
}