/*
 * Responsive Layout Overrides for Action Rehab Booking Portal
 * This file is loaded AFTER the Tailwind CSS bundle to fix responsive layout issues.
 * It targets the compiled Tailwind utility classes used in the React SPA.
 */

/* ===== GLOBAL FIXES ===== */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

#root {
  overflow-x: hidden !important;
  width: 100% !important;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* ===== HOME PAGE: Hide unnecessary sections ===== */
/* Keep only the hero section (child 1). Hide "Why Book Online?" (child 2),
   "Ready to Get Started?" (child 3), and footer (child 4). */

/* "Why Book Online?" section */
.min-h-screen.bg-background > section.py-16 {
  display: none !important;
}

/* Footer */
.min-h-screen.bg-background > footer {
  display: none !important;
}

/* Make the hero section fill the viewport since it's now the only content */
.min-h-screen.bg-background > section.relative.py-20 {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===== MOBILE (up to 639px) ===== */
@media (max-width: 639px) {

  /* --- Page Container --- */
  /* Reduce top/bottom padding on mobile */
  .py-8 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  .px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* --- Content max-width overrides: allow full width on mobile --- */
  .max-w-xl,
  .max-w-2xl,
  .max-w-3xl {
    max-width: 100% !important;
  }

  .max-w-4xl,
  .max-w-6xl {
    max-width: 100% !important;
  }

  /* --- Stepper / Progress Bar --- */
  /* Structure: .flex.items-center.justify-center.gap-2.mb-2 > .flex.items-center (×5)
     Each step group: circle (w-8 h-8) + connector line (w-12 h-1 mx-1)
     Total natural width: 5 circles (32px ea) + 4 connectors (48px + 8px margin ea) = ~384px
     This overflows on 375px mobile viewport. */

  /* Stepper container: ensure it fits within viewport */
  .flex.items-center.justify-center.gap-2.mb-2 {
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0.5rem !important;
  }

  /* Shrink step circles on mobile */
  .w-8.h-8.rounded-full {
    width: 1.625rem !important;
    height: 1.625rem !important;
    min-width: 1.625rem !important;
    font-size: 0.65rem !important;
    flex-shrink: 0 !important;
  }

  /* Shrink connector lines between steps */
  .w-12.h-1 {
    width: 2rem !important;
    margin-left: 0.125rem !important;
    margin-right: 0.125rem !important;
  }

  /* Reduce gaps between elements */
  .gap-6 {
    gap: 1rem !important;
  }

  .gap-4 {
    gap: 0.75rem !important;
  }

  /* --- Card Sections (Location cards, patient type cards) --- */
  .p-8 {
    padding: 1.25rem !important;
  }

  .p-6 {
    padding: 1rem !important;
  }

  /* --- Typography adjustments --- */
  .text-3xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }

  .text-2xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }

  .text-xl {
    font-size: 1.125rem !important;
    line-height: 1.5rem !important;
  }

  /* --- Grid adjustments for patient type cards --- */
  .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  .grid.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* --- Form adjustments --- */
  .grid.md\:grid-cols-2.gap-4 {
    grid-template-columns: 1fr !important;
  }

  /* --- Booking heading section --- */
  .text-center.mb-8 h1,
  .text-center h1 {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }

  /* --- Ensure buttons don't overflow --- */
  .flex.gap-4 {
    gap: 0.5rem !important;
  }

  /* --- Location card list spacing --- */
  .space-y-4 > * + * {
    margin-top: 0.75rem !important;
  }

  /* --- Bottom margin adjustments --- */
  .mb-8 {
    margin-bottom: 1.25rem !important;
  }

  .mb-6 {
    margin-bottom: 1rem !important;
  }
}

/* ===== TABLET (640px to 1023px) ===== */
@media (min-width: 640px) and (max-width: 1023px) {

  /* Content containers: moderate sizing */
  .max-w-xl {
    max-width: 95% !important;
  }

  .max-w-2xl {
    max-width: 95% !important;
  }

  .max-w-4xl,
  .max-w-6xl {
    max-width: 95% !important;
  }

  /* Reasonable padding */
  .px-4 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Card padding */
  .p-8 {
    padding: 1.5rem !important;
  }
}

/* ===== DESKTOP (1024px and up) ===== */
@media (min-width: 1024px) {
  /* Desktop keeps Tailwind defaults — no overrides needed.
     These rules just ensure the layout is centered and comfortable. */

  .max-w-4xl {
    max-width: 56rem; /* Tailwind default */
  }

  .max-w-6xl {
    max-width: 72rem; /* Tailwind default */
  }
}

/* ===== WIDE DESKTOP (1280px+) ===== */
@media (min-width: 1280px) {
  /* Ensure content doesn't stretch too wide on ultra-wide screens */
  .max-w-6xl {
    max-width: 72rem;
  }
}

/* ===== SMALL MOBILE (up to 374px, e.g. iPhone SE) ===== */
@media (max-width: 374px) {

  /* Even smaller step circles */
  .w-8.h-8.rounded-full {
    width: 1.375rem !important;
    height: 1.375rem !important;
    min-width: 1.375rem !important;
    font-size: 0.575rem !important;
  }

  /* Even shorter connector lines */
  .w-12.h-1 {
    width: 1.25rem !important;
    margin-left: 0.0625rem !important;
    margin-right: 0.0625rem !important;
  }

  .px-4 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .p-8 {
    padding: 1rem !important;
  }

  .text-3xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }

  .text-2xl {
    font-size: 1.125rem !important;
    line-height: 1.5rem !important;
  }
}