/* ─────────────────────────────────────────────────────────
   ZODIA — Global Mobile Safety Net
   Loaded on every page after fonts.css.
   Fixes horizontal-scroll jank, iOS input overflow,
   and date/time picker layout bugs across all templates.
───────────────────────────────────────────────────────── */

/* 1 ── Prevent horizontal scroll on all pages
   Both html AND body must have overflow-x: hidden for Safari iOS.
   Setting only one of them is insufficient — content in the other
   root element can still cause the page to scroll sideways. */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* 2 ── iOS Safari: date & time inputs often exceed their container
   because the browser uses a native minimum intrinsic width.
   -webkit-appearance: none + min-width: 0 forces them to respect
   the CSS width: 100% rule. */
input[type="date"],
input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

/* 3 ── All text-type inputs: prevent overflow on narrow viewports */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea,
select {
  min-width: 0;
  max-width: 100%;
}

/* 4 ── Media never exceeds its container */
img,
video,
svg,
iframe,
canvas,
embed,
object {
  max-width: 100%;
}

/* 5 ── Responsive input font-size: prevents iOS auto-zoom on focus.
   Safari zooms in when font-size < 16px on any focused input. */
@media (max-width: 768px) {
  input,
  textarea,
  select {
    font-size: max(16px, 1em) !important;
  }
}