/* Base styles for the web build. Loaded by src/app/+html.tsx via <link rel="stylesheet">
   so the SSR template ships no inline <style> (SAST: no dangerouslySetInnerHTML).
   Served from public/ exactly like /manifest.json and /config.js. */

/* Reset and base styles for mobile web */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body, #root {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Matches AppContainer's web wrapper (#FFFFFF). The footer sits OUTSIDE #root, so
     whatever body paints is what shows behind it — a different colour here renders as a
     grey band under the app. */
  background-color: #FFFFFF;

  /* BODY is the flex column, not #root. #teconsent is a sibling of #root (TrustArc has to
     own a node React never touches), so if #root kept height:100% the consent links would
     land below the fold and need a scroll to reach. */
  display: flex;
  flex-direction: column;
}

#root {
  display: flex;
  flex-direction: column;
  /* Takes the leftover height instead of all of it, leaving room for the footer. */
  flex: 1 0 auto;
}

/* ---------------------------------------------------------------------------
   Mobile web: the footer FLOWS after the app instead of sharing the viewport.

   Every mobile screen claims a full viewport height of its own —
   CountrySelectionScreen `calc(100svh - chrome)`, HomeScreen `100svh`, BillStatusCard
   and PaymentReviewCard `100dvh`, login `100dvh`, PaymentPlatformFlow `100vh` (the
   svh/dvh split is deliberate, see packages/ui/src/constants/cardLayout.ts). There is
   simply no viewport left to give a persistent footer: constraining #root made the
   screens overflow it and the footer painted over the pinned Continue CTA.

   So below the tablet breakpoint (768, matching useResponsiveWeb's isMobileWeb) #root
   keeps its natural height and the document scrolls. The footer is reached by scrolling
   rather than always on screen — the trade accepted for not covering the primary CTA.
   Desktop keeps the pinned footer, where there IS room.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  body {
    height: auto;
    min-height: 100svh;
  }

  #root {
    /* A DEFINITE height, not `auto`. AppContainer inside is `flex: 1` (basis 0%), which
       collapses to zero unless its parent has a resolved height — `flex: 0 0 auto` alone
       left #root at 0px and the whole app vanished. */
    flex: 0 0 auto;
    height: 100svh;
  }
}

/* Prevent horizontal scroll on mobile — belt and suspenders */
body, #root {
  max-width: 100vw;
  overflow-x: hidden;
}

/* iOS Safari safe area padding support */
/* Only top/bottom — left/right handled by React Native's SafeAreaView.
   Adding both causes double safe-area insets that shift content horizontally. */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Prevent pull-to-refresh and rubber-banding on mobile.

   On HTML, not body. `overflow-x: hidden` above forces overflow-y to compute as `auto`,
   which makes BODY a scroll container of its own — and containment blocks chaining OUT of
   the element it is set on. On body it therefore swallowed the gesture that was supposed
   to scroll the document down to the footer: measured at 390x844, scrollHeight 988 vs a
   844 viewport, yet neither wheel nor touch moved scrollY off 0. Only window.scrollTo
   worked, which is why it read as "the footer is just below the fold" rather than a bug.

   HTML is the element that actually holds that overflow, so containment belongs there:
   the viewport still refuses to chain to the browser's own pull-to-refresh, and body is
   free to chain up to it. Two values: x `none`, y `contain` — the axes the two rules this
   replaces used. */
html {
  overscroll-behavior: none contain;
}

/* Fix input zoom on iOS Safari (font-size >= 16px prevents zoom) */
input, textarea, select {
  font-size: 16px !important;
}

/* ---------------------------------------------------------------------------
   TrustArc consent links (#teconsent)

   TrustArc injects its anchors here at runtime, so they have to inherit the footer's
   styling rather than bring their own.

   In the US/CCPA config it injects TWO sibling anchors — "Do not sell or share my
   personal information" and "Cookie Preferences" — as inline elements with NO whitespace
   text node between them, which runs them together as "...informationCookie Preferences".

   Laying them out on the ANCHORS rather than making the container a flexbox is
   deliberate: TrustArc sets style="display: block" inline on #teconsent itself (confirmed
   live), so any container-level display rule needs !important — and an !important there
   would also override a display:none TrustArc might set to hide the links itself. It sets
   nothing on the anchors, so inline-block + a margin needs no override and keeps working
   whatever the container's display ends up being.

   inline-block rather than inline: it puts them side by side without depending on the
   whitespace text node that isn't there, and the margin supplies the gap. They wrap onto
   separate lines on narrow viewports.
   --------------------------------------------------------------------------- */

#site-footer {
  flex: 0 0 auto;
  /* No background of its own — it sits on the page, not in a band. */
  padding: 16px;
  text-align: center;
}

/* Typography is Figma "Copyright text" (5755:16179), product/body/body-xs — carried over
   from AppContainer, which used to render this line on desktop web only. */
#site-copyright {
  margin: 8px auto 0;
  max-width: 660px;
  color: #000000;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.06px;
}

/* No notice script (blocked, offline, or a build with TrustArc suppressed) means an empty
   container — collapse it so it leaves no phantom gap above the copyright line. */
#teconsent:empty {
  display: none;
}

#teconsent a {
  display: inline-block;
  /* Symmetric, not margin-left on the second anchor: side by side these still add up to a
     24px gap, but once the viewport is narrow enough to wrap, a one-sided margin would
     push the dropped link 12px off centre. The vertical padding is there for the touch
     target — 12px text alone is well under the 44px minimum. */
  margin: 0 12px;
  padding: 6px 0;
  /* Same size as the copyright line it sits with. */
  color: #1F1F1F;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: -0.06px;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Keep TrustArc's overlays above the app.

   AppContainer's `outerBackground` sets `zIndex: 2` and its wrapper is `height: 100svh`,
   so the app's layer reaches the bottom of the viewport. TrustArc leaves the consent
   banner at `z-index: auto`, so the app wins the paint order and covers the banner's top
   edge.

   Collapsed that overlap is ~4px and invisible. Click "Show more" and the banner grows to
   ~141px while #root still ends where the footer starts, so the app covers ~41px — the
   entire first line of the notice text, which reads as the copy being cut off.

   Measured at 1440x900: banner 759→900, #root 0→800, and elementFromPoint returned an
   RNW div for every y from 759 to ~800.
   --------------------------------------------------------------------------- */

#truste-consent-track,
.truste_overlay,
.truste_box_overlay,
.truste_box_overlay_inner {
  z-index: 2147483000;
}