/* Bếp Thuỷ Japan — Mobile/iOS WebView fixes
 * Loaded on every page. Targets:
 * - iOS auto-text-scaling (fixes "content too big" on iPhone)
 * - Input focus auto-zoom (when font-size < 16px)
 * - Safe-area handling for notch/home-indicator
 * - Horizontal overflow guard
 */

/* ==== iOS text-size lock ==== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ==== Safe-area + overflow guard ==== */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* ==== Prevent iOS input focus zoom ====
 * Inputs with font-size < 16px trigger Safari/WebView auto-zoom.
 * Force ≥16px on form fields to keep zoom level fixed.
 */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
select,
textarea {
  font-size: 16px !important;
}

/* Restore the original visual sizes for non-iOS via media query.
 * On desktop, override back to design size where needed.
 */
@media (min-width: 768px) {
  .field-input {
    font-size: 0.875rem !important; /* 14px on desktop */
  }
}

/* ==== Image responsive guard ==== */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ==== Tap highlight (subtle red, brand color) ==== */
* { -webkit-tap-highlight-color: rgba(200, 16, 46, 0.15); }

/* ==== Smooth scroll on iOS ==== */
* { -webkit-overflow-scrolling: touch; }