/* ===================== GLOBAL LAYOUT STABILITY ===================== */

/* English comment: Stable gutter on desktop browsers to prevent width jumps */
html {
  scrollbar-gutter: stable both-edges; /* Chrome/Edge/Firefox */
}

/* English comment: Base reset + hard clamp against horizontal overflow */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  background: #020617;
  overscroll-behavior-x: none; /* iOS ignores, others obey */
  -webkit-text-size-adjust: 100%;
}

/* English comment: Prefer clip if supported (prevents scrollWidth growth from effects) */
html,
body,
#root {
  overflow-x: hidden; /* fallback default */
}

@supports (overflow: clip) {
  html,
  body,
  #root {
    overflow-x: clip;
  }
}

/* English comment: Mobile viewport stability (prevents address-bar jump issues) */
body {
  min-height: 100dvh;
  position: relative;
  /* English comment: Helps prevent accidental horizontal pan on most browsers */
  touch-action: pan-y;
}

/* English comment: Keep width stable on DESKTOP only (avoid weirdness on iOS) */
@media (hover: hover) and (pointer: fine) {
  body {
    overflow-y: scroll;
  }
}

/* English comment: Single source of truth for root width */
#root {
  width: 100%;
  max-width: 100%;
  position: relative;
}

/* English comment: Prevent flex/grid children from forcing overflow */
*,
*::before,
*::after {
  box-sizing: border-box;
  min-width: 0;
}

/* English comment: Media should never exceed container */
img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===================== INPUTS ===================== */

/* English comment: Force native date calendar icon visible on dark background (Chrome/Edge/Safari). */
input[type="date"] {
  -webkit-appearance: auto !important;
  appearance: auto !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  display: block !important;
  opacity: 1 !important;
  filter: invert(1) !important;
  cursor: pointer !important;
}

/* ===================== ANIMATIONS ===================== */

/* English comment: Soft pulse animation for the brand mark (small scale + glow). */
@keyframes techPulse {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(255, 215, 0, 0));
  }
  50% {
    transform: scale(1.06);
    filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.35));
  }
}

.brandLogoSafe {
  /* English comment: isolate logo paint so glow never creates page overflow */
  contain: paint;

  /* English comment: set BOTH axes to avoid implicit overflow-y:auto */
  overflow: hidden;

  display: inline-block;

  /* English comment: keep glow visible INSIDE the clipped area */
  padding: 14px;
  margin: -14px;
}

@supports (overflow: clip) {
  .brandLogoSafe {
    overflow: clip; /* English comment: better than hidden when supported */
  }
}

/* ===== Universal modal date style (ALL devices) ===== */

input[type="date"].iosModalDate {
  height: 48px;
  padding: 0 14px;
  font-size: 14px;
  line-height: normal;
}

/* ===================== iPhone: clean input fix ===================== */
@supports (-webkit-touch-callout: none) {
  /* 1️⃣ Prevent iOS zoom (ALL inputs) */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
  input[type="date"].iosModalDate {
    font-size: 16px !important;
    line-height: 48px !important; /* 🔥 fix vertical alignment */
  }

  /* iPhone zoom fix only */
  @supports (-webkit-touch-callout: none) {
    input[type="date"] {
      font-size: 16px !important;
    }
  }

  @media (max-width: 430px) {
    html,
    body,
    #root {
      overflow-x: hidden !important;
      max-width: 100% !important;
    }

    .brandLogoSafe {
      margin: 0 !important;
      padding: 8px !important;
      overflow: hidden !important;
    }

    .kidHeader {
      max-width: 100vw !important;
      overflow-x: hidden !important;
      padding-left: calc(env(safe-area-inset-left) + 16px) !important;
      padding-right: calc(env(safe-area-inset-right) + 16px) !important;
    }
  }
}