/* =============================================
   Global: prevent horizontal overflow on mobile
   ============================================= */
html, body, #root {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  position: relative;
}

@media (max-width: 1023px) {
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* =============================================
   Checkout page — comprehensive mobile overflow fix
   ============================================= */
/* Step 1: Kill horizontal scroll at the root */
@media (max-width: 1023px) {
  body.page-checkout,
  html[lang] body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative;
  }
}

/* Step 2: Fix the FIXED green header — it escapes parent overflow */
@media (max-width: 767px) {
  .page-checkout header[class*="fixed"],
  .page-checkout [class*="bg-teal-dark"][class*="fixed"],
  header.fixed {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    left: 0 !important;
    right: 0 !important;
  }
  /* Inner container of the header */
  .page-checkout header[class*="fixed"] .container-custom,
  header.fixed .container-custom {
    max-width: 100% !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    box-sizing: border-box !important;
  }
}

/* Step 3: Main checkout page wrapper */
@media (max-width: 767px) {
  .page-checkout {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative;
  }
  /* Force box-sizing on every child to prevent padding blowing out width */
  .page-checkout,
  .page-checkout * {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Main content area */
  .page-checkout main {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}

/* Step 4: Fix all container-custom instances inside checkout */
@media (max-width: 767px) {
  .page-checkout .container-custom {
    max-width: 100% !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    box-sizing: border-box !important;
  }

  /* Hero section */
  .page-checkout .gradient-hero {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .page-checkout .gradient-hero h1 {
    font-size: 1.5rem !important;
  }
}

/* Step 5: Fix grids — most common overflow culprit */
@media (max-width: 767px) {
  .page-checkout main .grid {
    gap: 1rem !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
  }
  /* Override lg:col-span-2 to be full width */
  .page-checkout [class*="lg:col-span-2"],
  .page-checkout [class*="lg:col-span-1"] {
    grid-column: span 1 !important;
  }
  /* Fix internal grids (form rows) */
  .page-checkout .grid-cols-1 {
    max-width: 100% !important;
  }
  /* Shipping zone select dropdown */
  .page-checkout select,
  .page-checkout [role="combobox"],
  .page-checkout [role="listbox"] {
    max-width: 100% !important;
  }
}

/* Step 6: Fix form cards (the "white cards") */
@media (max-width: 767px) {
  /* All Card components inside checkout */
  .page-checkout [class*="rounded-lg"][class*="border"],
  .page-checkout [class*="bg-card"] {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto;
  }

  /* Card padding reduction */
  .page-checkout [class*="rounded-xl"][class*="p-6"] {
    padding: 1rem !important;
  }
  .page-checkout [class*="rounded-xl"][class*="p-4"] {
    padding: 0.75rem !important;
  }

  /* Card internal sections */
  .page-checkout [class*="rounded-xl"] > div:first-child,
  .page-checkout [class*="rounded-xl"] > div:first-child + div {
    padding: 1rem !important;
  }

  /* Space between cards */
  .page-checkout .space-y-6 {
    margin-top: 0 !important;
  }
  .page-checkout .space-y-6 > * + * {
    margin-top: 1rem !important;
  }
}

/* Step 7: Fix inputs, selects, textareas */
@media (max-width: 767px) {
  .page-checkout input,
  .page-checkout select,
  .page-checkout textarea {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    font-size: 16px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
}

/* RTL fix */
html[dir="rtl"] .page-checkout input,
html[dir="rtl"] .page-checkout select,
html[dir="rtl"] .page-checkout textarea {
  text-align: right;
}

/* Step 8: Order summary on mobile */
@media (max-width: 767px) {
  .page-checkout .sticky {
    position: static !important;
    max-width: 100% !important;
  }
  .page-checkout .sticky [class*="p-6"] {
    padding: 1rem !important;
  }
  /* Cart item images */
  .page-checkout .space-y-3 > div img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
  }
}

/* Step 9: Buttons — full width on mobile */
@media (max-width: 767px) {
  .page-checkout button[type="submit"] {
    width: 100% !important;
  }
  .page-checkout button.w-full {
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
    font-size: 1.05rem !important;
  }
}

/* Step 10: Coupon section */
@media (max-width: 767px) {
  .page-checkout [class*="gap-2"] > .flex.items-center.gap-2 {
    flex-direction: column !important;
    width: 100% !important;
  }
  .page-checkout [class*="gap-2"] > .flex.items-center.gap-2 input {
    width: 100% !important;
  }
  .page-checkout [class*="gap-2"] > .flex.items-center.gap-2 button {
    width: 100% !important;
  }
}

/* Step 11: Payment method cards — prevent text overflow */
@media (max-width: 767px) {
  .page-checkout [class*="cursor-pointer"][class*="rounded-xl"] {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  /* Payment method details area */
  .page-checkout [class*="cursor-pointer"][class*="rounded-xl"] .flex-1 {
    min-width: 0 !important;
  }
}

/* Step 12: Shipping zone select items */
@media (max-width: 767px) {
  .page-checkout [role="option"],
  .page-checkout [class*="flex items-center justify-between w-full gap-4"] {
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
  }
}

/* Step 13: Price summary rows */
@media (max-width: 767px) {
  .page-checkout .space-y-2 > div {
    flex-wrap: wrap !important;
  }
}

/* Step 14: Address form — guest checkout grid */
@media (max-width: 767px) {
  .page-checkout [class*="grid-cols-1 md:grid-cols-2"] {
    gap: 0.75rem !important;
  }
}

/* Step 15: Upload (transfer proof) area */
@media (max-width: 767px) {
  .page-checkout .border-2.border-dashed {
    padding: 0.75rem !important;
    max-width: 100% !important;
  }
  .page-checkout .border-2.border-dashed label {
    min-height: 80px !important;
  }
}

/* Step 16: Fix footer horizontal overflow (also green bg) */
@media (max-width: 767px) {
  footer {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    width: 100% !important;
  }
  footer .container-custom {
    max-width: 100% !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    box-sizing: border-box !important;
  }
  footer [class*="grid"] {
    gap: 1.5rem !important;
  }
}

/* Step 17: Reduce text sizes on mobile */
@media (max-width: 767px) {
  .page-checkout .text-2xl { font-size: 1.25rem !important; }
  .page-checkout .text-xl { font-size: 1.1rem !important; }
  .page-checkout .text-lg { font-size: 1rem !important; }
  .page-checkout .gap-6 { gap: 1rem !important; }
}

/* Address management mobile fixes */
@media (max-width: 767px) {
  [class*="address"] [class*="grid"] { grid-template-columns: 1fr; }
}

/* Step 18: Fix aside (order summary sidebar) overflow */
@media (max-width: 767px) {
  .page-checkout aside,
  .page-checkout [class*="lg:order-last"],
  .page-checkout [class*="order-last"] {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  /* Fix order summary product rows */
  .page-checkout aside .space-y-3 > div,
  .page-checkout [class*="space-y-3"] > [class*="flex"] {
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }
  .page-checkout aside .space-y-3 > div > div:last-child,
  .page-checkout [class*="space-y-3"] > [class*="flex"] > div:last-child {
    min-width: 0 !important;
    flex-shrink: 1 !important;
    overflow: hidden !important;
  }
  .page-checkout aside .space-y-3 > div p,
  .page-checkout aside .space-y-3 > div span,
  .page-checkout [class*="space-y-3"] > [class*="flex"] p,
  .page-checkout [class*="space-y-3"] > [class*="flex"] span {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* Step 19: Fix all flex items that don't wrap */
@media (max-width: 767px) {
  .page-checkout [class*="flex items-center justify-between"],
  .page-checkout [class*="flex items-center gap"] {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
  /* Fix any "flex-shrink-0" elements that may overflow */
  .page-checkout [class*="flex-shrink-0"] {
    max-width: 100% !important;
  }
}

/* Step 20: Fix cart item images & product names overflow */
@media (max-width: 767px) {
  .page-checkout aside img,
  .page-checkout [class*="aspect-square"] {
    max-width: 48px !important;
    max-height: 48px !important;
  }
  /* Product name in cart - prevent overflow */
  .page-checkout aside [class*="line-clamp"] {
    -webkit-line-clamp: 3 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* Step 21: Fix absolute/fixed positioned elements that leak */
@media (max-width: 767px) {
  .page-checkout [class*="fixed"][class*="inset-0"],
  .page-checkout [class*="fixed"][class*="top-0"],
  .page-checkout [class*="fixed"][class*="bottom-0"] {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* Step 22: Fix divider/border lines that stretch */
@media (max-width: 767px) {
  .page-checkout hr,
  .page-checkout [class*="border-t"],
  .page-checkout [class*="border-b"] {
    max-width: 100% !important;
  }
}

/* =============================================
   Auth page responsiveness
   ============================================= */

/* Auth card - responsive padding on mobile */
@media (max-width: 639px) {
  [class*="auth"] [class*="rounded-3xl"] > [class*="p-8"] {
    padding: 1.5rem !important;
  }
  [class*="auth"] form[class*="p-8"] {
    padding: 1.25rem !important;
  }
  [class*="auth"] [class*="text-2xl"] {
    font-size: 1.25rem !important;
  }
  [class*="auth"] [class*="h-16"] {
    height: 3rem !important;
  }
  #email-auth-inject {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  #email-auth-inject button {
    font-size: 0.8rem !important;
    padding: 0.5rem 0.75rem !important;
  }
}

/* Auth card - extra small screens */
@media (max-width: 380px) {
  [class*="auth"] [class*="p-8"] {
    padding: 1rem !important;
  }
  [class*="auth"] form[class*="p-8"] {
    padding: 1rem !important;
  }
  #email-auth-inject {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Auth tabs - RTL direction support */
html[dir="rtl"] #email-auth-inject > div:first-child button:first-child {
  border-radius: 0 0.5rem 0.5rem 0;
}
html[dir="rtl"] #email-auth-inject > div:first-child button:last-child {
  border-radius: 0.5rem 0 0 0.5rem;
}

/* Auth inputs - consistent touch targets on mobile */
@media (max-width: 767px) {
  [class*="auth"] input,
  [class*="auth"] select,
  #email-auth-inject input {
    font-size: 16px !important;
    min-height: 44px !important;
  }
  [class*="auth"] button[type="submit"],
  #email-auth-inject button[type="submit"] {
    min-height: 44px !important;
  }
  [class*="auth"] [class*="w-\\[130px\\]"] {
    width: 100px !important;
  }
}

/* Auth decorative blobs - hide on mobile to prevent overflow */
@media (max-width: 767px) {
  [class*="auth"] [class*="decorative-blob"] {
    display: none !important;
  }
}

/* Auth card full bleed on very small screens */
@media (max-width: 480px) {
  [class*="auth"] [class*="min-h-screen"] {
    padding: 0.5rem !important;
  }
  [class*="auth"] [class*="rounded-3xl"] {
    border-radius: 1.5rem !important;
  }
}