/* ── Fonts ───────────────────────────────────────────────────── */

@font-face {
  font-family: 'BeVietnamPro';
  src: url('/assets/fonts/BeVietnamPro.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Firelli – served locally if available, otherwise fallback */
@font-face {
  font-family: 'Firelli';
  src: url('/assets/fonts/Firelli.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  --auth-bg:       #fff5ef;
  --auth-orange:   #e55a18;
  --auth-orange2:  #c94e13;
  --auth-text:     #1a1a1a;
  --auth-muted:    #4a423e; /* Darkened for better WCAG contrast */
  --auth-border:   #d4c4ba; /* Darkened for better input visibility */
  --auth-radius:   16px;
  --auth-shadow:   0 4px 20px rgba(229,90,24,0.18);
}

/* ── Page wrapper ────────────────────────────────────────────── */
.auth-brand-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--auth-bg);
  font-family: 'BeVietnamPro', sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
}

/* ── Keyboard Open State ─────────────────────────────────────── */
.auth-brand-page.keyboard-open .auth-brand-hero {
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  transition: all 0.3s ease;
}
.auth-brand-page.keyboard-open .auth-brand-card {
  margin-top: 0;
  border-radius: 0;
  padding-bottom: 250px; /* Extra space to ensure the button can scroll into view above keyboard */
}
/* ── Hero image block ────────────────────────────────────────── */
.auth-brand-hero {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  margin-top: -50px; /* Push top image up further */
  transition: all 0.3s ease;
}
.auth-brand-hero img.hero-img {
  width: 100%;
  display: block;
  object-fit: cover;
  /* The arch is the bottom 261px of the 708x647 source — 40.3% of it, and
     0.369 x the viewport width once the image is `width: 100%`. Wherever
     `max-height` below has to crop, `cover` defaults to a centred crop and
     takes half of it off the arch: 70px of source at 375x667, 80px at
     320x568. Anchoring to the bottom spends the whole crop on the
     photograph above instead, so the shape stays whole for as long as
     there is room for it at all. */
  object-position: bottom;
}

/* ── Footer image ────────────────────────────────────────────── */
.auth-brand-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
}
.auth-brand-footer img {
  width: 100%;
  display: block;
}

/* ── Form area ───────────────────────────────────────────────────
   Not a card: same surface as the page, no rounded corners. The hero
   PNG already draws the arch, and a second rounded rectangle riding
   over the photo read as a box competing with it.

   And it is transparent, not merely the same colour. It still overlaps
   the hero by -40px, but an opaque fill there covered the bottom 40px of
   the arch — its widest, most decorative part. Painting nothing lets the
   shape finish while the form keeps the 40px of height it needs to stay
   clear of the footer artwork, which is the only other place that 40px
   could come from. The page beneath supplies the same --auth-bg, so
   nothing about the surface changes.

   What lands in that 40px band is each form's first line, starting 12px
   above the image's bottom edge — and 12px up, the arch's interior is
   still ~93% of the viewport wide, so a centred title sits on the page
   background, not on the photograph. The ornament rule and everything
   below it clear the image entirely. This only holds while no form
   scrolls (verified below); scrolled content would ride up into the band
   with no opaque fill to hide it. */
.auth-brand-card {
  flex: 1;
  background: transparent;
  padding: 28px 24px 150px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: -40px;
  border-radius: 0;
  position: relative;
  z-index: 9;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── Typography ──────────────────────────────────────────────── */
.auth-brand-title {
  font-family: 'Firelli', 'BeVietnamPro', sans-serif;
  font-size: clamp(26px, 7vw, 34px);
  color: var(--auth-orange);
  margin: 0 0 4px;
  padding: 0;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}
.auth-brand-subtitle {
  font-family: 'BeVietnamPro', sans-serif;
  font-size: clamp(14px, 4vw, 16px);
  color: var(--auth-muted);
  margin: 0 0 28px;
  padding: 0;
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
}
.auth-brand-ornament {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 14px;
  color: var(--auth-orange);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  justify-content: center;
}
.auth-brand-ornament::before,
.auth-brand-ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--auth-orange), transparent);
}

/* ── Input ───────────────────────────────────────────────────── */
.auth-brand-input-wrap {
  position: relative;
  margin-bottom: 20px;
}
.auth-brand-input {
  width: 100%;
  border: 1.5px solid var(--auth-border);
  border-radius: 12px;
  background: #fff;
  font-family: 'BeVietnamPro', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--auth-text);
  padding: 15px 20px;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.auth-brand-input:focus {
  border-color: var(--auth-orange);
  box-shadow: 0 0 0 3px rgba(229,90,24,.10);
}
.auth-brand-input.has-prefix {
  padding-left: 80px;
}
.auth-brand-input.error {
  border-color: #e53e3e;
}
.auth-brand-input-prefix {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 15px;
  gap: 6px;
  pointer-events: none;
}
.auth-brand-input-prefix img { width: 20px; border-radius: 2px; }
.auth-brand-input-prefix span {
  font-family: 'BeVietnamPro', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--auth-text);
  padding-left: 2px;
}
.auth-brand-input-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--auth-muted);
  margin-bottom: 6px;
  display: block;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* ── Button ──────────────────────────────────────────────────── */
.auth-brand-btn {
  width: 100%;
  background: var(--auth-orange);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: 'BeVietnamPro', sans-serif;
  font-size: 18px;
  font-weight: 600;
  padding: 15px 20px;
  cursor: pointer;
  box-shadow: var(--auth-shadow);
  transition: background .2s, transform .1s;
  letter-spacing: .3px;
}
.auth-brand-btn:active { transform: scale(.98); }
.auth-brand-btn:disabled {
  background: #ddd;
  color: #999;
  box-shadow: none;
}

/* ── OTP boxes ───────────────────────────────────────────────── */
.auth-otp-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 28px;
}
.auth-otp-box {
  width: 48px;
  height: 56px;
  border: 2px solid var(--auth-border);
  border-radius: 12px;
  background: #fff;
  font-family: 'BeVietnamPro', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--auth-text);
  text-align: center;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.auth-otp-box:focus {
  border-color: var(--auth-orange);
  box-shadow: 0 0 0 3px rgba(229,90,24,.12);
}
.auth-otp-box.filled { border-color: var(--auth-orange); }
.auth-otp-box.invalid { border-color: #e53e3e; }

/* ── Links / helpers ─────────────────────────────────────────── */
.auth-brand-link {
  color: var(--auth-orange);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.auth-brand-resend-row {
  text-align: center;
  font-size: 15px;
  color: var(--auth-muted);
  margin-top: 12px;
}
.auth-brand-back-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  background: rgba(255,255,255,0.85);
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.auth-brand-back-btn img { width: 18px; }

/* ── Error toast ─────────────────────────────────────────────── */
.auth-brand-error {
  background: #fff0f0;
  border: 1px solid #feb2b2;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  color: #c53030;
  margin-bottom: 16px;
  text-align: center;
}

/* ── Override legacy OTP component colours ───────────────────── */
/* Squircle path for 48×56px boxes — Figma plugin exact: r1=0.059, r2=0.48 */
/* s=48, p=23.04, d=2.832 */
.login-with-otp-input-container { justify-content: center; gap: 10px; }
.login-with-otp-input {
  width: 48px !important;
  height: 56px !important;
  border: 2.5px solid #c4a99a !important;
  border-radius: 0 !important;
  clip-path: path("M 0 23.04 C 0 2.832 2.832 0 23.04 0 L 24.96 0 C 45.168 0 48 2.832 48 23.04 L 48 32.96 C 48 53.168 45.168 56 24.96 56 L 23.04 56 C 2.832 56 0 53.168 0 32.96 Z") !important;
  background: #ffffff !important;
  font-family: 'BeVietnamPro',sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--auth-text) !important;
  outline: none !important;
  box-shadow: none !important;
  text-align: center;
}
.login-with-otp-input:focus {
  border-color: var(--auth-orange) !important;
  box-shadow: none !important;
}
.login-with-otp-input-green {
  width: 48px !important;
  height: 56px !important;
  border: 2px solid var(--auth-orange) !important;
  border-radius: 0 !important;
  clip-path: path("M 0 23.04 C 0 2.832 2.832 0 23.04 0 L 24.96 0 C 45.168 0 48 2.832 48 23.04 L 48 32.96 C 48 53.168 45.168 56 24.96 56 L 23.04 56 C 2.832 56 0 53.168 0 32.96 Z") !important;
  background: #fff8f5 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--auth-orange) !important;
  outline: none !important;
  box-shadow: none !important;
  text-align: center;
}
.login-with-otp-input-invalid {
  width: 48px !important;
  height: 56px !important;
  border: 2px solid #e53e3e !important;
  border-radius: 0 !important;
  clip-path: path("M 0 23.04 C 0 2.832 2.832 0 23.04 0 L 24.96 0 C 45.168 0 48 2.832 48 23.04 L 48 32.96 C 48 53.168 45.168 56 24.96 56 L 23.04 56 C 2.832 56 0 53.168 0 32.96 Z") !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  outline: none !important;
  box-shadow: none !important;
  text-align: center;
}

/* ── Wallet tab active button ────────────────────────────────── */
.wallet-tab-active {
  display: block;
  width: 100%;
}

/* ── Short-viewport clearance ────────────────────────────────────
   The hero photo and the footer artwork are both sized from viewport WIDTH
   (each is width:100%), while the gap between them is set by viewport HEIGHT.
   On a short screen the two decorative bands grow toward each other until the
   footer sits on top of the primary button — measured 64px of overlap on the
   Continue button at 375x667 and 83px at 320x568, with the OTP screen's
   "Verify" and the resend links buried underneath it.

   Nothing here restyles an element: the hero is simply capped to the height
   actually available once the footer band and the block between them are
   accounted for. auth-footer.png is 2319x1169, i.e. 0.504x its width tall, so
   52vw reserves it with a little slack. The 270px covers the tallest form
   (title + ornament + two-line subtitle + OTP boxes + Verify + resend + "Wrong
   number?") and leaves ~25px between the last line of text and the point where
   the artwork becomes opaque — its top 27.5% is transparent, which is why the
   element's box may still overlap without anything being obscured. On tall
   screens the computed cap exceeds the image's natural height and nothing
   changes; 390x844 and 430x932 are byte-identical to before. */
.auth-brand-hero img.hero-img {
  max-height: calc(100vh - 52vw - 270px);
}
/* svh tracks the viewport with the browser toolbars showing, which is what a
   position:fixed page actually gets; vh above is the fallback. */
@supports (height: 100svh) {
  .auth-brand-hero img.hero-img {
    max-height: calc(100svh - 52vw - 270px);
  }
}

/* Reserve the footer band beneath the card's content so anything that scrolls
   (the OTP form is taller than the login form) comes to rest above the
   artwork rather than under it. The flat 150px this replaces was shorter than
   the art on every screen wider than ~300px. */
.auth-brand-card {
  padding-bottom: calc(52vw + 24px);
}

/* ── Make the card's own overflow-y actually work ────────────────
   .auth-brand-card already declares `flex: 1; overflow-y: auto`, but its
   parent is a <form>, which is display:block — so the flex sizing was inert,
   the card grew to its content height, and .auth-brand-page's `overflow:
   hidden` meant anything past the fold was simply unreachable. The register
   step is the form that overflows (two inputs, the referral row, plus an
   error banner when the server rejects a submission), and its "Create
   Account" button ended up under the footer art with no way to scroll to it.

   Making the visible form the flex column it was assumed to be lets the card
   size to the space left by the hero and scroll when its content is taller.
   Forms that already fit are unaffected — and the card's #fff6ef sits on the
   page's #fff5ef, so filling the remaining height is not visible. */
.auth-brand-page > form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.auth-brand-card {
  min-height: 0;
}

/* The register step carries more than the others — two inputs, the referral
   row, and an error banner when a submission is rejected — so it needs a
   larger reserve than the 270px calibrated on the login and OTP forms. Each
   form renders its own HeroBlock, so this targets that step alone and leaves
   the other screens exactly as they are. 320px is the smallest reserve that
   clears the artwork unaided at every size tested down to 320x568 — including
   375x667, where the error text wraps to two lines. The cost is a thin hero
   strip on the shortest screens, which is the right trade for a form. */
#registerNameForm .auth-brand-hero img.hero-img {
  max-height: calc(100vh - 52vw - 320px);
}
@supports (height: 100svh) {
  #registerNameForm .auth-brand-hero img.hero-img {
    max-height: calc(100svh - 52vw - 320px);
  }
}

/* ── Nothing in a form may be squeezed to make it fit ────────────
   The card is `display:flex; flex-direction:column` with `flex: 1`, so
   it is exactly as tall as the space the hero leaves — and its children
   inherit the default `flex-shrink: 1`. When a form's content came to
   more than that height, the browser compressed the children instead of
   scrolling: the OTP screen's "Verify" fell from its declared 56px to
   39.6px at 390x844 and to 27px (its min-content height) at 375x667,
   while the identical "Continue" on the shorter login form stayed 56px.
   It read as a button that had been restyled smaller; nothing had been
   restyled at all.

   Pinning every child at its natural size makes the overflow real, which
   the card's own `overflow-y: auto` then handles. */
.auth-brand-card > * {
  flex-shrink: 0;
}
.auth-brand-btn {
  flex-shrink: 0;
}

/* Two changes above take vertical space away from the forms: nothing is
   compressible any more (the OTP step overflows ~30px at 375x667, the
   register step 21-29px everywhere). It is paid for out of the footer
   reserve. auth-footer.png's top 27.5% is transparent, so the `52vw` this
   replaces reserved roughly 54px of empty pixels below the last line of
   text; reserving the artwork's *ink* instead (52 x 0.725 ≈ 38vw) hands
   that back. The login step, which
   fits either way, is unaffected — a shorter reserve on a card that does
   not scroll only trims empty space the page background fills.

   Verified on the live build at 320x568, 360x640, 375x667, 390x844,
   412x915 and 430x932: Continue, Verify and Create Account all measure
   56px, no form scrolls, and every line of text clears the point where
   the footer artwork becomes opaque by 46-108px. */
.auth-brand-card {
  padding-bottom: calc(38vw + 24px);
}