/* ==========================================
   Global responsive fixes (no redesign)
   Breakpoints:
   - tablet:  max-width 1024px
   - mobile:  max-width 768px
========================================== */

/* Media should never overflow */
img, video {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

/* Prevent accidental horizontal scroll from long text */
body {
  overflow-x: hidden;
}

/* Tables: wrap with .table-scroll to enable horizontal scroll */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll table {
  width: 100%;
  border-collapse: collapse;
}

/* Modal containers used across admin pages (fixed width -> responsive) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 16px;
}
.modal-card {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow: auto;
  padding: 22px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.18);
}

/* Page hero headings: avoid overflow on small screens */
@media (max-width: 768px) {
  .page-hero h1,
  .about-hero h1,
  .blog-hero-overlay h1,
  .gallery-hero-overlay h1 {
    font-size: clamp(2rem, 7vw, 2.6rem);
  }
  .page-hero p,
  .blog-hero-overlay p,
  .gallery-hero-overlay p {
    font-size: 1rem;
  }
}

/* Forms: prevent side-by-side inputs from squeezing */
@media (max-width: 768px) {
  input, select, textarea {
    max-width: 100%;
  }
}

/* Shared layout hardening for mobile across public/admin/doctor */
@media (max-width: 1024px) {
  .container {
    width: min(100% - 24px, 1200px);
  }

  .products-grid,
  .therapy-grid,
  .blog-list,
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .checkout-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .field-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .container {
    width: min(100% - 18px, 1200px);
  }

  .products-grid,
  .therapy-grid,
  .blog-list,
  .gallery-grid,
  .stats-grid,
  .cards-grid {
    grid-template-columns: 1fr !important;
  }

  .field-grid {
    grid-template-columns: 1fr !important;
  }

  .checkout-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .summary-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .summary-item > *:last-child {
    text-align: left !important;
  }

  .topbar {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Don't force all tables wider than the viewport.
     If a table needs horizontal scroll, wrap it in .table-scroll. */
  table {
    width: 100%;
  }
  .table-scroll table {
    min-width: 640px;
  }

  .content,
  .panel,
  .card {
    padding: 14px;
  }

  .btn {
    min-height: 42px;
  }
}