/* PayPal Open — the same publicly-hosted font file referenced
   from paypalobjects.com that the reference login page uses.
   Loaded only with this stylesheet so it doesn't affect the
   rest of the app. */
@font-face {
  font-family: 'PayPal Open';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('https://www.paypalobjects.com/paypal-ui/fonts/PayPalOpen-Regular.woff2')
    format('woff2');
}
@font-face {
  font-family: 'PayPal Open';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('https://www.paypalobjects.com/paypal-ui/fonts/PayPalOpen-Medium.woff2')
    format('woff2');
}
@font-face {
  font-family: 'PayPal Open';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('https://www.paypalobjects.com/paypal-ui/fonts/PayPalOpen-Bold.woff2')
    format('woff2');
}

/* ===========================================================
   Auth pages stylesheet (sign-in / sign-up).

   Original CSS we wrote, using the same design tokens as the
   reference fintech login screen the user is matching:
     - card 460px wide, hairline #EAECED border, 12px radius
     - 30px top / 46px (10%) sides / 50px bottom padding
     - input 64px tall, #999 border, 4px radius, 14px floating label
     - button 48px tall, 100px radius, 18px medium weight
     - "or" divider as a 1px #CBD2D6 line with the word centered on it
     - locale row of pipe-separated language links at the bottom
   Loaded only while AuthShell is mounted.
   =========================================================== */

.auth-page {
  /* The auth page is laid out by `.auth-shell` (a flex column inside
     `#root`). Body just supplies the white canvas + typography; it
     does NOT impose a fixed height or overflow rules. That means:
       - On viewports tall enough to fit the card + footer, the shell
         pins the footer to the bottom and there's no scrollbar.
       - On viewports too short for the content (small phones in
         landscape, popovers, etc.) the page scrolls naturally
         instead of clipping. */
  background: #ffffff;
  font-family: 'PayPal Open', 'Helvetica Neue', Arial, sans-serif;
  color: #001435;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes auth-card-fade-in {
  /* Slide in from the right with a quick fade. Feels like a card
     swap on a native finance app rather than a soft cross-blend.
     Translation distance is small (16px) so the motion reads as a
     "switch" — not a full page slide — and the easing is the iOS
     standard fast-out-slow-in for a snappy settle. */
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

.auth-card {
  width: 460px;
  max-width: calc(100% - 32px);
  /* No min-height — the card sizes to its content so the page fits in
     a typical viewport without forcing a vertical scrollbar (matches
     paypal.com/signin behavior). */
  margin: 16px auto 0;
  padding: 20px 46px 32px;
  background: #ffffff;
  border: 1px solid #eaeced;
  border-radius: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Anchor for the absolutely-positioned spinner overlay shown
     during the email → password transition. */
  position: relative;
}

/* Mount-only fade for the auth card. The `auth-card-entering` class
   is added by AuthShell on first render and stripped via
   `onAnimationEnd` once the keyframes finish — that removes the
   `animation` property and tears down the compositor layer, so any
   subsequent input focus inside the card re-paints on the normal
   document layer (no subpixel re-rasterization, no text blur). */
.auth-card.auth-card-entering {
  animation: auth-card-fade-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.auth-card > * {
  width: 100%;
}

/* ---------- Logo ---------- */
.auth-logo {
  display: block;
  /* Verbatim from PayPal's contextualLoginElementalUIv5_1.css
     `.paypal-logo-long`: width 100px, height 41.56px. */
  width: 115px;
  height: 47.79px;
  /* Bottom margin matches the visual gap between the top of the
     card and the logo (card padding-top 20 + shell margin-top 16
     ≈ 36px) so the logo sits optically centred between the card's
     top edge and the email field. */
  margin: 0 auto 36px;
  background: url('/img/paypal-logo.svg') center / contain no-repeat;
}

/* ---------- Floating-label field ---------- */
.auth-field {
  position: relative;
  margin-bottom: 16px;
}

.auth-field input {
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 20px 12px 8px;
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  /* PayPal renders typed input a touch heavier than 400 — 500 matches
     the optical weight on paypal.com/signin. */
  font-weight: 500;
  color: #000000;
  background: #ffffff;
  border: 0.0625rem solid #999999;
  border-radius: 6px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  box-sizing: border-box;
}

.auth-field input::placeholder {
  color: transparent;
}

.auth-field input:hover {
  border-color: #6c7378;
}

.auth-field input:focus {
  /* paypal.com/signin keeps the thin grey border and adds a thicker
     light-blue ring with a clear WHITE GAP between the two. We get
     the gap by stacking two box-shadows:
       1) 0 0 0 2px #fff — a 2px white "spacer" sitting just outside
          the grey border
       2) 0 0 0 4px #097ff5 — the 4px-wide blue ring sitting outside
          that spacer (so its inner edge is 2px away from the border)
     `outline` would also work but renders inconsistently across
     browsers when combined with `border-radius`. */
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #097ff5;
  /* On focus paypal.com also LIGHTENS the inner border (the dark
     #999 grey would clash with the light-blue ring around it). The
     border softens to a near-platinum grey while the blue ring does
     the heavy lifting of indicating focus. */
  border-color: #cbcbcb;
}

.auth-field .auth-label {
  position: absolute;
  /* The label keeps 4px horizontal padding so its white background
     can cover the border when it floats up. We pull `left` back by
     that same 4px so the VISIBLE label text starts at 12px — flush
     with the input's `padding-left: 12px`, which the user flagged
     as misaligned (typed text was starting earlier than the label). */
  left: 8px;
  top: 18px;
  height: 30px;
  display: flex;
  align-items: center;
  /* Default (un-floated) label sits a touch larger than the typed
     input — paypal.com uses ~17px here. */
  font-size: 17px;
  color: #6c7378;
  pointer-events: none;
  background: transparent;
  padding: 0 4px;
  transition: 0.2s ease all;
}

.auth-field input:focus + .auth-label,
.auth-field input:not(:placeholder-shown) + .auth-label {
  /* paypal.com floats the label only slightly: it shrinks just a
     hair (17px → 15px) and lifts a small amount (top 18 → 12), so
     the typed value sits below it without the dramatic "shrink-and-
     fly" we had before (was 16 → 14 at top:8). */
  top: 12px;
  font-size: 15px;
  height: 18px;
  background: #ffffff;
}

/* PayPal's floating label keeps its grey colour on focus — only the
   border and ring go blue. Earlier we tinted the label `#0551b5` on
   focus, which the user flagged as a divergence from paypal.com. */
.auth-field input:focus + .auth-label {
  color: #6c7378;
}

/* Error state */
.auth-field.has-error input {
  border-color: #d20000;
}
.auth-field.has-error input:focus {
  /* Same two-stop pattern as the focus ring, recoloured red so the
     error state still has the visible white gap between border and
     outer ring. */
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d20000;
  border-color: #d20000;
}
.auth-field.has-error {
  /* When an error message follows the field, let the error own the
     spacing instead of stacking the field's 16px bottom margin on
     top of the error's own gap. */
  margin-bottom: 0;
}
.auth-field-error {
  margin: 6px 0 8px;
  font-size: 13px;
  line-height: 18px;
  color: #d20000;
}

/* ---------- Inline links (Forgot email/password) ---------- */
.auth-link {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-family: 'PayPal Open', Helvetica Neue, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  font-style: normal;
  color: #0070e0;
  background: none;
  border: 0;
  text-decoration: none;
  text-size-adjust: 100%;
  cursor: pointer;
}
.auth-link:link,
.auth-link:visited {
  color: #0070e0;
}
.auth-link:hover {
  color: #003087;
  text-decoration: underline;
}

/* ---------- Buttons ---------- */
.auth-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 6rem;
  height: 48px;
  padding: 0.75rem 2rem;
  font-family: 'PayPal Open', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.06666667em;
  line-height: 21px;
  font-weight: 500;
  text-align: center;
  border-radius: 100px;
  border: 0.125rem solid transparent;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease,
    border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

.auth-btn-primary {
  background-color: #0551b5;
  border-color: #0551b5;
  color: #ffffff;
}
.auth-btn-primary:hover {
  background-color: #1161ca;
  border-color: #1161ca;
}
.auth-btn-primary:active {
  background-color: #003087;
  border-color: #003087;
}
.auth-btn-primary:disabled {
  background-color: #cbd2d6;
  border-color: #cbd2d6;
  color: #ffffff;
  cursor: not-allowed;
}

.auth-btn-secondary {
  background-color: transparent;
  color: #001435;
  border-color: #001435;
}
.auth-btn-secondary:hover {
  background-color: #f5f7fa;
}
.auth-btn-secondary:active {
  background-color: #e7ebef;
}

.auth-actions {
  margin-top: 24px;
}

/* ---------- "or" divider (line with text centered on it) ---------- */
.auth-divider {
  position: relative;
  height: 15px;
  margin: 8.72% 0 4.895%;
  border-top: 1px solid #cbd2d6;
  text-align: center;
  line-height: 0;
}
.auth-divider span {
  position: relative;
  top: -0.5em;
  display: inline-block;
  padding: 0 0.5em;
  background: #ffffff;
  color: #6c7378;
  font-family: 'PayPal Open', Helvetica Neue, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}

/* ---------- intent footer + locale row ---------- */
.intent-footer {
  /* PayPal: .intentFooter { margin-top: 72px; font-size:12px; line-height:16px } */
  margin-top: 72px;
  font-size: 12px;
  line-height: 16px;
  position: relative;
  display: block;
}

/* ----------------------------------------------------------------
   Locale selector — verbatim port of PayPal's contextual-login rules.

   Authoritative sources from the saved paypal.com signin bundle:
     • styles/contextualLoginElementalUIv5_1.css  → .intentFooter,
       .intentFooter .localeSelector, .localeLink, .selected
     • index.html (inline <style>)                → .country-selector
       .country (sprite), .country-selector .US (background-position),
       .picker.country-selector, .picker.country-selector button,
       .picker.country-selector button::after (the chevron — a rotated
       8×8 border square, NOT an SVG or an image).

   Locale text inherits font-size: 12px / line-height: 16px from the
   surrounding .intentFooter — that's why language labels look smaller
   than the inputs above them on real PayPal.
   ---------------------------------------------------------------- */

.intent-footer .localeSelector {
  text-align: center;
  display: block;
  width: 100%;
  padding-top: 16px;
  /* Uniform up-scale: every nested dimension (font-size, sprite, chevron,
     paddings, margins, line-height) is multiplied by the same factor, so
     PayPal's exact proportions are preserved — nothing is sized
     independently. Bump this single number if you want it bigger/smaller. */
  zoom: 1.15;
  /* Keep flag/chevron and language pills locked on a single line.
     Without this, slim Android phones (~360px) couldn't fit the full
     row at zoom: 1.15 + the flag button's 30px right margin, so the
     flag+chevron wrapped onto a SECOND line above the language pills
     — the user reported this as "the language selector with the arrow
     gets cropped above". A media query below drops the zoom on narrow
     viewports so the row continues to fit at base scale. */
  white-space: nowrap;
}

/* Narrow phones: shrink the locale row so the flag, chevron, and all
   four language pills stay on a single line without the chevron ever
   having to crowd "English" to make room. The 26px margin between the
   flag button and the languages is preserved at every zoom level. */
@media (max-width: 419px) {
  .intent-footer .localeSelector { zoom: 1; }
}
@media (max-width: 359px) {
  .intent-footer .localeSelector { zoom: 0.88; }
}
@media (max-width: 319px) {
  .intent-footer .localeSelector { zoom: 0.78; }
}

.intent-footer .localeSelector a,
.intent-footer .localeSelector a:link,
.intent-footer .localeSelector a:visited,
.intent-footer .localeSelector a:hover {
  color: #545d68;
  white-space: nowrap;
  font-family: 'PayPal Open', 'Helvetica Neue', Arial, sans-serif;
  font-style: normal;
  text-decoration: none;
}
.intent-footer .localeSelector a.selected {
  color: #545d68;
  /* PayPal's source uses `bold` (700); we step down so the selected
     language reads slightly lighter without losing emphasis. */
  font-weight: 530;
}

.intent-footer .localeSelector .localeLink {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
  vertical-align: middle;
}
.intent-footer .localeSelector .localeLink li {
  padding: 0 6px;
  display: inline-block;
  border-left: 1px solid #ccc;
  /* Slight bump above PayPal's canonical 12px so the language labels
     visually balance the flag at our zoomed size. The whole row is
     still under the .localeSelector zoom factor, so this scales with
     the flag and chevron in lockstep. */
  font-size: 14px;
  line-height: 18px;
}
.intent-footer .localeSelector .localeLink li:first-child {
  padding-left: 0;
  border-left: none;
}

/* The flag button — sprite from PayPal's own sprite_countries_flag4.png
   (24px row height, 32px min-width, US row at -383px on Y). Hosted from
   our own /img/ path so we don't hot-link paypalobjects.com. */
.intent-footer .picker.country-selector {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  /* Trims just the flag+chevron group down a touch relative to the
     language labels — sits inside the .localeSelector zoom, so the
     flag and chevron still scale together in lockstep. */
  zoom: 0.9;
}
/* Verbatim from PayPal's index.html inline <style> (lines 980-984),
   except `margin-right` is tuned to 26px (PayPal ships 30px). The
   chevron is absolutely positioned at `left: 30px` inside this 32px-
   wide button — so the chevron's visible right edge sits ~15px past
   the button's own right edge. We need `margin-right` to cover that
   overhang PLUS leave a real gap before the "English" label that
   visually matches the flag-to-chevron gap; 26px hits that mark.
   Anything below ~18px causes the chevron to crash into "English".
   Single-line fit on slim phones is handled by the zoom media
   queries on `.localeSelector` above, not by squeezing this margin. */
.intent-footer .picker.country-selector button {
  display: inline-block;
  margin-right: 26px;
  cursor: pointer;
  padding: 0;
  /* Do NOT set `background` here — it would wipe out the sprite image
     declared on `.country` below (same element, higher specificity). */
  /* Press feedback: gentle scale-down + fade on tap. Mirrors the
     same active-state vibe as the rest of the auth surface so the
     flag/chevron feels like a real button rather than a static icon. */
  transition: transform 120ms ease-out, opacity 120ms ease-out;
  transform-origin: 50% 50%;
}
.intent-footer .picker.country-selector button:hover {
  opacity: 0.82;
}
.intent-footer .picker.country-selector button:active {
  transform: scale(0.92);
  opacity: 0.7;
}
.intent-footer .picker.country-selector button:focus-visible {
  outline: 2px solid #097ff5;
  outline-offset: 3px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .intent-footer .picker.country-selector button {
    transition: none;
  }
  .intent-footer .picker.country-selector button:active {
    transform: none;
  }
}

/* Verbatim from PayPal's index.html inline <style> (lines 47-54).
   Sprite is rendered at NATIVE pixel size — 22px wide source PNG sits
   inside a 32×24 button with a 5px left gutter, so the visible flag is
   exactly the same crop you see on paypal.com/signin. */
.intent-footer .country-selector .country {
  overflow: hidden;
  height: 24px;
  min-width: 32px;
  background-color: transparent;
  background-image: url('/img/sprite_countries_flag4.png');
  background-repeat: no-repeat;
  background-position: 5px 100px;
  border: none;
  text-align: left;
  /* Nudge the flag down a few pixels so its visual center lines up
     with the text baseline and the chevron. We shift the inline-block
     itself with vertical-align rather than `position: relative`, so the
     chevron's absolute positioning (which uses the picker as its
     containing block) stays untouched. */
  vertical-align: -4px;
}
.intent-footer .picker.country-selector .country.US {
  /* Verbatim from PayPal's index.html inline <style> (lines 97-99).
     Specificity is bumped above the button rule so the US row wins. */
  background-position: 5px -383px;
}

/* Verbatim from PayPal's index.html inline <style> (lines 985-1002):
   pure-CSS chevron — an 8×8 box with two borders, rotated 135°. */
.intent-footer .picker.country-selector button::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 30px;
  height: 9px;
  width: 9px;
  margin: 8px 0 0 8px;
  border-color: #333;
  border-style: solid;
  border-width: 1px 1px 0 0;
  transform: rotate(135deg);
}

/* ---------- Headings ---------- */
.auth-h1 {
  margin: 0;
  padding-bottom: 22px;
  text-align: center;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  color: #001435;
}

/* Recovery flow heading variant ("Enter your email…", "We found a
   match", "No match found"). Left-aligned, heavier weight, slightly
   larger — matches paypal.com's account-recovery screens. */
.auth-h1-recovery {
  text-align: left;
  font-size: 28px;
  font-weight: 700;
  line-height: 34px;
  padding-bottom: 28px;
}

/* Email-display row used on the "We found a match" / "No match" /
   "Check your email" screens. Left-aligned, normal body weight. */
.auth-found-email {
  margin: 0 0 24px;
  font-family: 'PayPal Open', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #001435;
  word-break: break-word;
}

/* Centered, underlined blue link used below primary buttons on the
   recovery screens ("Return to login", "Need a new password?",
   "Try a different email"). Distinct from `.auth-link` which is the
   left-aligned text link used inline beneath form fields. */
.auth-link-center {
  display: block;
  width: 100%;
  margin: 22px auto 0;
  padding: 4px 0;
  background: none;
  border: 0;
  font-family: 'PayPal Open', 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  color: #0070e0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.auth-link-center:hover {
  color: #003087;
}
.auth-link-center:focus-visible {
  outline: 2px solid #0070ba;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Identity row (password step) ----------------------- *
 * Centered "user@example.com  Change" line that sits above the
 * password field, mirroring paypal.com/signin's password step. The
 * email is rendered in the body color, "Change" is the standard
 * blue PayPal link that returns the user to the email step.
 * --------------------------------------------------------------- */
.auth-identity {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  font-family: 'PayPal Open', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
}
.auth-identity-email {
  color: #001435;
  font-weight: 500;
}
.auth-identity-change {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  color: #0070e0;
  cursor: pointer;
}
.auth-identity-change:hover {
  color: #003087;
  text-decoration: underline;
}

.auth-fineprint {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: #6c7378;
}

/* ---------- Auth shell (flex column wrapper) -------------------- *
 * Owns the page-level vertical layout: card on top, legal footer
 * pinned to the bottom via `margin-top: auto` on the footer. Using
 * `min-height: 100vh` (not `height`) means the shell is AT LEAST
 * the viewport tall — content never clips on short viewports, but
 * also never overflows on normal ones, so no spurious scrollbar.
 * --------------------------------------------------------------- */
.auth-shell {
  display: flex;
  flex-direction: column;
  /* `100vh` measures the LARGEST viewport (toolbars retracted) on
     iOS Safari, Chrome Android, and Samsung Internet, so when the
     mobile browser's bottom URL bar is visible it overlaps anything
     pinned to the bottom — including the legal footer the user
     reported being clipped. `100dvh` is the dynamic viewport that
     shrinks when the URL bar is on screen and grows when it
     retracts, so the footer always sits inside the truly visible
     area regardless of toolbar state. The `100vh` line stays as a
     fallback for older browsers that don't support `dvh`. */
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
}

/* ---------- Page-bottom legal footer ---------------------------- *
 * Mirrors PayPal's `.footer .legalFooter`: a full-bleed bar with
 * light grey background, centered links, and 14px padding all
 * around. Pinned to the bottom of `.auth-shell` via `margin-top:
 * auto` (not `position: fixed`) so it sits naturally in the flow
 * and the body never needs `padding-bottom` to clear it.
 * --------------------------------------------------------------- */
.legal-footer {
  margin-top: auto;
  width: 100%;
  /* Add the iOS home-indicator / notch inset to the bottom padding
     so the footer never sits underneath the gesture bar on iPhones.
     `env(safe-area-inset-bottom)` is 0 on devices without a safe
     area, so this is a no-op everywhere except where it's needed. */
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  background-color: #f7f9fa;
  box-sizing: border-box;
}
.legal-footer ul {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0; /* collapse whitespace between inline-block items */
}
.legal-footer li {
  display: inline-block;
  /* PayPal's `.footer .legalFooter` doesn't set per-item padding —
     items butt up against each other with only the natural word
     gap between them. We use a small symmetric padding to match
     that tighter rhythm (was 12px, far too airy). */
  padding: 0 6px;
  font-size: 12px;
  line-height: 16px;
}
.legal-footer a,
.legal-footer a:link,
.legal-footer a:visited,
.legal-footer a:hover {
  color: #545d68;
  text-decoration: none;
  font-family: 'PayPal Open', 'Helvetica Neue', Arial, sans-serif;
  /* PayPal Open renders these links a touch heavier than 400 — bump
     to 500 so the optical weight matches paypal.com/signin. */
  font-weight: 500;
  white-space: nowrap;
}
.legal-footer a:hover {
  text-decoration: underline;
}

/* (Footer clearance is handled by the flex layout in `.auth-shell` —
   no body padding needed.) */

/* Small screens — drop the card chrome and full-bleed it */
@media (max-width: 540px) {
  .auth-card {
    border: 0;
    margin: 32px auto 0;
    padding: 24px 16px 40px;
    min-height: auto;
  }
}

/* ---------- Loading spinner (email → password transition) ----------
   paypal.com fades the form down and shows a thin dark-blue arc
   spinning in the centre of the card. The arc is a circle whose
   border is mostly transparent with one segment coloured. */
.auth-loading-overlay {
  /* Pinned to the viewport (not the card) so the spinner sits in
     the geometric middle of the page, matching paypal.com. */
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  /* Translucent white wash — the form behind it is still faintly
     visible, exactly like paypal.com's loading state. */
  background: rgba(255, 255, 255, 0.88);
}

.auth-spinner {
  /* SVG-based ring — a single `<circle>` with a uniform stroke is
     the only way to get a perfectly even, single-colour arc. The
     earlier conic-gradient + radial-mask approach produced subpixel
     anti-aliasing differences between the inner and outer edge of
     the ring, which read as a two-tone gradient. */
  width: 138px;
  height: 138px;
  display: block;
  animation: auth-spin 1.4s linear infinite;
}

.auth-form-fading {
  /* Form is fully covered by the white overlay above; we still
     disable interaction to be safe. */
  pointer-events: none;
}

@keyframes auth-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Password reveal toggle ----------
   Wraps `.auth-field` in a flex row with a "Show/Hide" button that
   slides out from behind the input's right edge as soon as the user
   types -- mirrors paypal.com/signin. The row owns the bottom margin
   that `.auth-field` normally provides so vertical rhythm is
   unchanged. */
.auth-field-row {
  display: flex;
  align-items: stretch;
  margin-bottom: 16px;
}
.auth-field-row > .auth-field {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.auth-show-toggle {
  flex: 0 0 auto;
  /* Match the input's height so the thin blue outline sits at the
     same vertical rhythm as the input's own border. */
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* Margin pushes the Show box clear of the input's 4px focus ring
     so the two blue outlines never collide. */
  margin: 0 0 0 8px;
  background: transparent;
  /* paypal.com draws a thin blue rounded outline around the Show box
     whenever it's visible. paypal.com uses a slightly DARKER blue
     here (#1161ca) than the input's outer focus ring (#097ff5) so
     the 1px-wide Show outline still reads at the same optical
     weight as the much thicker 4px input ring sitting next to it.
     CRITICAL: only TOP, RIGHT, BOTTOM edges. The LEFT edge MUST
     stay borderless so the chip looks like a tab attached to the
     input's right side -- a 1px blue stripe on the left would
     appear as a vertical line cutting INTO the password area, which
     the user has flagged repeatedly.
     We render the 3-sided ring with `box-shadow` insets rather than
     CSS `border`. Reason: with `border-left-width: 0` and 1px on
     the other sides, the chip's effective height becomes
     row-height - 2px. When the row's height is fractional (which
     happens any time the parent flex container's stretch math
     resolves to non-integer pixels -- e.g. on the recovery pages
     where the form sits inside a slightly different shell), the
     top and bottom 1px borders can collapse to sub-pixel lines that
     render visibly THINNER than on /signin. Inset shadows are
     painted from the SAME box as the chip itself, so the 1px lines
     stay crisp 1px regardless of fractional layout, and the chip's
     outer dimensions stay exactly equal to the input's height with
     no border-eaten content area. */
  border: 0;
  box-shadow:
    inset  0  1px 0 0 #1161ca,
    inset -1px 0 0 0 #1161ca,
    inset  0 -1px 0 0 #1161ca;
  /* Square the LEFT corners so the Show box's left edge is a straight
     vertical line that aligns flush against the input's right edge --
     paypal.com renders the two as one connected control with rounded
     outer corners only. */
  border-radius: 0 6px 6px 0;
  font-family: inherit;
  font-size: 16px;
  /* paypal.com renders the Show/Hide label at the same heavier weight
     as their primary text links. */
  font-weight: 700;
  color: #0070ba;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  /* Stack above the input so the focused chip's translated/rounded
     left edge can paint OVER the input's right border instead of
     getting clipped underneath it. */
  position: relative;
  z-index: 1;
  /* Smooth the corner-rounding and slide-over when focus arrives.
     We animate max-width (not width) because the expanded state uses
     content-driven width — fixed 56px clipped translated Show/Hide
     strings ("Einblenden"/"Anzeigen" in DE, "Mostrar"/"Ocultar" in ES,
     etc.) — and width:auto isn't animatable. max-width:0 → a generous
     ceiling animates the slide-in cleanly and the resting width is
     governed by horizontal padding around the actual label. */
  transition:
    max-width 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    padding 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    margin-left 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-radius 140ms ease,
    transform 140ms ease;
  /* Collapsed state: zero max-width AND zero margin/padding so the
     input is full-bleed. pointer-events guard against the invisible
     button still being clickable when it's offscreen. */
  max-width: 0;
  padding: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.auth-field-row.has-value:focus-within .auth-show-toggle {
  /* Expanded state. Content-driven width (capped at 160px so a freak
     translation can't shove the input area too narrow) with 14px of
     symmetric horizontal padding — enough for the longest locale
     strings ("Einblenden", "Mostrar", "Mascherare") without clipping,
     and still tight on English "Show"/"Hide". The Show box sits
     directly against the input's focus ring — paypal.com renders
     them as one connected control with only a hairline 1px gap
     between the input's outer ring and the Show box's left border.
     `:focus-within` (rather than just `.has-value`) means the Show
     box hides again the moment the user taps out of the password
     field — matching paypal.com's behaviour where Show is part of
     the focused-field affordance, not a permanent badge. The toggle
     itself sits inside the row so clicking it keeps `:focus-within`
     true; combined with the input's `onMouseDown preventDefault`
     in PasswordField, focus never leaves the input mid-toggle. */
  max-width: 160px;
  padding: 0 14px;
  margin-left: 1px;
  opacity: 1;
  pointer-events: auto;
}
/* No hover effect -- the resting 3-sided chip + 1px transparent
   left border interact badly with a hover background fill (the
   fill paints into the missing-left-border gap and reads as a
   buggy seam). paypal.com's chip is also visually inert on hover;
   the press/focus state is the only interaction affordance. */
.auth-show-toggle:focus {
  /* On focus paypal.com replaces the resting outline with a single
     thicker blue ring AND fully rounds the LEFT corners so the box
     reads as a free-floating chip that overlaps the input's right
     edge -- the resting state has square left corners flush with
     the input, the focused state pops the chip out as a complete
     pill with rounded corners on all four sides.
       1. `border-radius: 6px` rounds all four corners (override of
          the resting `0 6px 6px 0`).
       2. `border-color: transparent` hides the resting 1px border so
          it doesn't show through as an inner line inside the ring.
       3. `inset 0 0 0 2px #097ff5` paints the thicker blue ring on
          the INSIDE edge of the button -- box doesn't grow, just
          gets a heavier outline.
       4. `translateX(-3px)` slides the chip left so its now-rounded
          left edge crosses over the input's right grey border,
          matching paypal.com where the focused chip overlaps the
          input. `position: relative; z-index: 1` (set on the resting
          rule below) ensures it paints above the input border. */
  outline: none;
  /* On press/focus the chip pops out as a free-floating fully
     rounded blue pill -- ALL FOUR SIDES of the ring visible, all
     four corners rounded. This is the deliberate "pressed"
     affordance and is DIFFERENT from the resting visible state
     (which has only top/right/bottom inset shadow so the chip
     reads as a tab attached to the input). Both states use only
     box-shadow / background; the chip has no `border` at all. */
  /* White fill so the input's grey right border (and rounded
     corner) underneath the chip body don't bleed through next to
     the blue ring. */
  background: #ffffff;
  /* Full four-sided 2px blue inset ring -- replaces the resting
     3-sided 1px shadow entirely (single box-shadow declaration). */
  box-shadow: inset 0 0 0 2px #097ff5;
  /* Round all four corners (override of resting `0 6px 6px 0`)
     for the floating-pill look. */
  border-radius: 10px;
  /* Slide left so the chip's rounded left edge sits OVER the
     input's right rounded corner -- the chip's white bg + left
     ring fully cover the input's corner, leaving only the chip's
     blue pill visible. */
  transform: translateX(-8px);
}

/* ================================================================
   COUNTRY / LOCALE PICKER MODAL
   1:1 port of PayPal's .countryListModal CSS from /signin.
   Sprite uses the same /img/sprite_countries_flag4.png as the
   inline locale footer; positions are taken verbatim from PayPal.
   ================================================================ */

.countryListModal {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 999999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: "PayPal Open", "Helvetica Neue", Arial, sans-serif;
}

/* Open animation. The picker uses `.countryListModal.transitionUp`
   (name borrowed verbatim from PayPal's own classlist) — sheet slides
   up from a few pixels below and fades in. Content fades in a hair
   later so the chrome lands first, which feels less abrupt on slim
   phones than a single all-at-once fade. `prefers-reduced-motion`
   users get an instant render. */
@keyframes countryModal-sheet-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes countryModal-content-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.countryListModal.transitionUp {
  animation: countryModal-sheet-in 240ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  will-change: transform, opacity;
}
.countryListModal.transitionUp .wrapper {
  animation: countryModal-content-in 220ms ease-out 80ms both;
}
@media (prefers-reduced-motion: reduce) {
  .countryListModal.transitionUp,
  .countryListModal.transitionUp .wrapper { animation: none; }
}
.countryListModal .wrapper {
  margin: 0 auto;
  width: 70%;
  max-width: 1200px;
}
@media all and (max-width: 767px) {
  .countryListModal .wrapper { width: 100%; }
}
.countryListModal .buttonHolder {
  min-height: 7rem;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  max-width: 1200px;
  background: #fff;
  z-index: 1;
}
@media all and (max-width: 767px) {
  .countryListModal .buttonHolder { min-height: 5rem; width: 100%; left: 0; transform: none; }
  .countryListModal .ghostElement { height: 5rem; }
}
.countryListModal .ghostElement { height: 7rem; }
.countryListModal .modalContent { padding: 0 10px 40px; }
.countryListModal .closeModal {
  background: none;
  border: none;
  padding: 8px;
  float: right;
  margin: 28px 8px 0 0;
  color: #2c2e2f;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.countryListModal .closeModal:hover { opacity: 0.7; }
.countryListModal .hide-visually {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.countryListModal .paypalIcon {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAxCAMAAACbDMsxAAAA8FBMVEVHcEwAMIcAL4cAMIcAMIcAnN8AMIcAnN8AoOIAMIcAltoAUKAAMIcAMIcAnN4AMIcAnN8An+EAnN4AMIcAnN8AnN8AoOIAMIcAMIcAMIcAMIcAMIcAnN4AnN8AnN8AnN8AnN8AMIcAm94AMIcAMIcAMIcAEnABSJoBIWkAMIcAnN8AnN4BH2cAMosALoQBHWQBI2wApeYAru8AK4IBfMAAHXkAElsAtvcACVMAMYkAq+wAMIgBJnQAsPEAFV4BKXoBhsoAktYABU8ALYQCWqQBarUAGGECL3gBdsABR5oDQIYCZKgCRYoAjdIDVJkAw//Oh6SBAAAAKHRSTlMAjiRCy4eYz3n0Mg5qBGfimRrxd/ddbzC1cqGwSbAnP+ZfplIY54+dhZd5sgAAAjdJREFUeNqFlQtX2jAYhluQiygwUNx03ubcZpNC0yttoeWm4NRt///fLE3SJqWhfQ+nBzgP35c8uaAoJN2mVsiPo6uzelfZz6V2IMdqbQ/9qh3OZR49KkG1pkh2tdKcCmitHNUeOVqvQFWOnlagfY42K1DtRCZgNhYTBMEs+ZbLFclJPlqAfzGrFQXMxgv9KReE5ovJRiJgbBv6XgzDiHedooDxwngqxv+YXjBUrUKfp3BE0S8cnUtQ3XMiAKmvfjarAElQbwdMANoJeZIVDTSkF0i0xv0BaCXoZ95/ohfR7XYVYvQ8Qb8JrmRF/+KimK0UgHxkhhCzsEoAiv3lFMJ0AP3DKPL816Q9ZlvlAvS150xB0h7AhzIBhu+/rQgJMJss7XfJZjG2nr+O35zIoiB+3GL0TBjqOo49nNhAu4/3pRUBWhG/7pNZXWWoPX9fOiTLFbCmFu1NcDDKnxb35V9kWVYUWaFp0tkQGgsYks1ynBXdrEI2h/RB3+C3d/nTYo+hSRQyihYkpRukKBfg/jZpS7Eq+fCJ7msuwH0OAa8p4BeF68J9segasgeDb26L14XrUOGsHKnfanT4JSQI+GNCphKct3u90XVnIF6tj3kB6Zw7SjH1nADAxngvIYXTwgSQQd7IUFUUwKpCpvzgf4v7aoHUU0+GZgI29jLMXN7JUC7AXpnZIg1kaF1l+fnLzPoPlfIMTAjJvqKnsyztbKumO+lgHviWblegwxSF4LoCbUC2rFDe/z/JjPZOipOkUwAAAABJRU5ErkJggg==") center 24px no-repeat #fff;
  background-size: 26px;
}

/* ----- Country list ----- */
.countryListModal .country-selector { padding-top: 8px; }
.countryListModal .country-selector ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.countryListModal .country-selector ul li {
  list-style: none;
  width: 19%;
  display: inline-block;
  line-height: 1.5rem;
  min-height: 3em;
  vertical-align: top;
}
@media all and (max-width: 767px) {
  .countryListModal .country-selector ul li { display: block; width: 100%; }
}
.countryListModal .country-selector ul li a.country {
  padding: 3px 28px 0 35px;
  overflow: visible;
  line-height: 1.2em;
  display: block;
  height: 30px;
  min-width: 30px;
  color: #7f8689;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  position: relative;
  background-image: url("/img/sprite_countries_flag4.png");
  background-repeat: no-repeat;
  background-position: 5px 100px; /* default, individual codes override */
}
.countryListModal .country-selector ul li a.country:hover { color: #0070ba; }
.countryListModal .country-selector .priorityCountries {
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.countryListModal .country-checkmark {
  float: right;
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
}
@media all and (min-width: 768px) {
  .countryListModal .country-selector .priorityCountries .country-checkmark { display: none; }
}

/* ----- Sprite positions for every supported country (verbatim from PayPal). ----- */
.countryListModal .country-selector ul li a.country.US { background-position: 5px -383px; }
.countryListModal .country-selector ul li a.country.DE { background-position: 5px -4934px; }
.countryListModal .country-selector ul li a.country.GB { background-position: 5px -4304px; }
.countryListModal .country-selector ul li a.country.AU { background-position: 5px -5984px; }
.countryListModal .country-selector ul li a.country.FR { background-position: 5px -4374px; }
.countryListModal .country-selector ul li a.country.IT { background-position: 5px -3604px; }
.countryListModal .country-selector ul li a.country.CA { background-position: 5px -5319px; }
.countryListModal .country-selector ul li a.country.ES { background-position: 5px -4618px; }
.countryListModal .country-selector ul li a.country.AD { background-position: 5px -6334px; }
.countryListModal .country-selector ul li a.country.AO { background-position: 5px -6089px; }
.countryListModal .country-selector ul li a.country.AI { background-position: 5px -6229px; }
.countryListModal .country-selector ul li a.country.AG { background-position: 5px -6264px; }
.countryListModal .country-selector ul li a.country.AR { background-position: 5px -6055px; }
.countryListModal .country-selector ul li a.country.AM { background-position: 5px -6159px; }
.countryListModal .country-selector ul li a.country.AW { background-position: 5px -5949px; }
.countryListModal .country-selector ul li a.country.AZ { background-position: 5px -5914px; }
.countryListModal .country-selector ul li a.country.BS { background-position: 5px -5459px; }
.countryListModal .country-selector ul li a.country.BB { background-position: 5px -5844px; }
.countryListModal .country-selector ul li a.country.BY { background-position: 5px -6999px; }
.countryListModal .country-selector ul li a.country.BE { background-position: 5px -5809px; }
.countryListModal .country-selector ul li a.country.BZ { background-position: 5px -5354px; }
.countryListModal .country-selector ul li a.country.BJ { background-position: 5px -5634px; }
.countryListModal .country-selector ul li a.country.BM { background-position: 5px -5599px; }
.countryListModal .country-selector ul li a.country.BT { background-position: 5px -5424px; }
.countryListModal .country-selector ul li a.country.BO { background-position: 5px -5529px; }
.countryListModal .country-selector ul li a.country.BA { background-position: 5px -5879px; }
.countryListModal .country-selector ul li a.country.BW { background-position: 5px -5389px; }
.countryListModal .country-selector ul li a.country.BR { background-position: 5px -5494px; }
.countryListModal .country-selector ul li a.country.VG { background-position: 5px -209px; }
.countryListModal .country-selector ul li a.country.BN { background-position: 5px -5564px; }
.countryListModal .country-selector ul li a.country.BF { background-position: 5px -5773px; }
.countryListModal .country-selector ul li a.country.BI { background-position: 5px -5669px; }
.countryListModal .country-selector ul li a.country.KH { background-position: 5px -3397px; }
.countryListModal .country-selector ul li a.country.CM { background-position: 5px -7174px; }
.countryListModal .country-selector ul li a.country.CV { background-position: 5px -5039px; }
.countryListModal .country-selector ul li a.country.KY { background-position: 5px -4479px; }
.countryListModal .country-selector ul li a.country.CZ { background-position: 5px -4969px; }
.countryListModal .country-selector ul li a.country.CL { background-position: 5px -5179px; }
.countryListModal .country-selector ul li a.country.CO { background-position: 5px -5109px; }
.countryListModal .country-selector ul li a.country.KM { background-position: 5px -3324px; }
.countryListModal .country-selector ul li a.country.CG { background-position: 5px -5284px; }
.countryListModal .country-selector ul li a.country.CD { background-position: 5px -5284px; }
.countryListModal .country-selector ul li a.country.CK { background-position: 5px -5214px; }
.countryListModal .country-selector ul li a.country.CR { background-position: 5px -5074px; }
.countryListModal .country-selector ul li a.country.CI { background-position: 5px -7139px; }
.countryListModal .country-selector ul li a.country.HR { background-position: 5px -3849px; }
.countryListModal .country-selector ul li a.country.CY { background-position: 5px -5004px; }
.countryListModal .country-selector ul li a.country.DK { background-position: 5px -4864px; }
.countryListModal .country-selector ul li a.country.DJ { background-position: 5px -4899px; }
.countryListModal .country-selector ul li a.country.DM { background-position: 5px -4829px; }
.countryListModal .country-selector ul li a.country.EC { background-position: 5px -4724px; }
.countryListModal .country-selector ul li a.country.EE { background-position: 5px -4689px; }
.countryListModal .country-selector ul li a.country.SV { background-position: 5px -979px; }
.countryListModal .country-selector ul li a.country.ER { background-position: 5px -4655px; }
.countryListModal .country-selector ul li a.country.SZ { background-position: 5px -6509px; }
.countryListModal .country-selector ul li a.country.ET { background-position: 5px -4587px; }
.countryListModal .country-selector ul li a.country.FO { background-position: 5px -4409px; }
.countryListModal .country-selector ul li a.country.FK { background-position: 5px -6229px; }
.countryListModal .country-selector ul li a.country.FJ { background-position: 5px -4514px; }
.countryListModal .country-selector ul li a.country.PF { background-position: 5px -1819px; }
.countryListModal .country-selector ul li a.country.GA { background-position: 5px -4339px; }
.countryListModal .country-selector ul li a.country.GM { background-position: 5px -4129px; }
.countryListModal .country-selector ul li a.country.GE { background-position: 5px -6652px; }
.countryListModal .country-selector ul li a.country.GI { background-position: 5px -4199px; }
.countryListModal .country-selector ul li a.country.GD { background-position: 5px -4269px; }
.countryListModal .country-selector ul li a.country.GL { background-position: 5px -4164px; }
.countryListModal .country-selector ul li a.country.GP { background-position: 5px -4374px; }
.countryListModal .country-selector ul li a.country.GT { background-position: 5px -4024px; }
.countryListModal .country-selector ul li a.country.GW { background-position: 5px -3989px; }
.countryListModal .country-selector ul li a.country.GN { background-position: 5px -3989px; }
.countryListModal .country-selector ul li a.country.GY { background-position: 5px -3954px; }
.countryListModal .country-selector ul li a.country.GF { background-position: 5px -4374px; }
.countryListModal .country-selector ul li a.country.HN { background-position: 5px -3884px; }
.countryListModal .country-selector ul li a.country.HK { background-position: 5px -3919px; }
.countryListModal .country-selector ul li a.country.IS { background-position: 5px -3639px; }
.countryListModal .country-selector ul li a.country.IN { background-position: 5px -3674px; }
.countryListModal .country-selector ul li a.country.ID { background-position: 5px -3779px; }
.countryListModal .country-selector ul li a.country.IE { background-position: 5px -3744px; }
.countryListModal .country-selector ul li a.country.JM { background-position: 5px -3569px; }
.countryListModal .country-selector ul li a.country.KZ { background-position: 5px -3149px; }
.countryListModal .country-selector ul li a.country.KE { background-position: 5px -3464px; }
.countryListModal .country-selector ul li a.country.KI { background-position: 5px -3359px; }
.countryListModal .country-selector ul li a.country.KG { background-position: 5px -3429px; }
.countryListModal .country-selector ul li a.country.RE { background-position: 5px -4374px; }
.countryListModal .country-selector ul li a.country.LA { background-position: 5px -3114px; }
.countryListModal .country-selector ul li a.country.LV { background-position: 5px -2869px; }
.countryListModal .country-selector ul li a.country.LS { background-position: 5px -2974px; }
.countryListModal .country-selector ul li a.country.LI { background-position: 5px -3044px; }
.countryListModal .country-selector ul li a.country.LT { background-position: 5px -2939px; }
.countryListModal .country-selector ul li a.country.LU { background-position: 5px -2904px; }
.countryListModal .country-selector ul li a.country.MG { background-position: 5px -2799px; }
.countryListModal .country-selector ul li a.country.HU { background-position: 5px -3814px; }
.countryListModal .country-selector ul li a.country.MW { background-position: 5px -2449px; }
.countryListModal .country-selector ul li a.country.MY { background-position: 5px -2379px; }
.countryListModal .country-selector ul li a.country.MV { background-position: 5px -2484px; }
.countryListModal .country-selector ul li a.country.ML { background-position: 5px -2729px; }
.countryListModal .country-selector ul li a.country.MT { background-position: 5px -2554px; }
.countryListModal .country-selector ul li a.country.MH { background-position: 5px -2764px; }
.countryListModal .country-selector ul li a.country.MQ { background-position: 5px -4374px; }
.countryListModal .country-selector ul li a.country.MR { background-position: 5px -2624px; }
.countryListModal .country-selector ul li a.country.MU { background-position: 5px -2519px; }
.countryListModal .country-selector ul li a.country.YT { background-position: 5px -4374px; }
.countryListModal .country-selector ul li a.country.MX { background-position: 5px -2414px; }
.countryListModal .country-selector ul li a.country.FM { background-position: 5px -4444px; }
.countryListModal .country-selector ul li a.country.MD { background-position: 5px -6929px; }
.countryListModal .country-selector ul li a.country.MC { background-position: 5px -7034px; }
.countryListModal .country-selector ul li a.country.MN { background-position: 5px -6369px; }
.countryListModal .country-selector ul li a.country.ME { background-position: 5px -6859px; }
.countryListModal .country-selector ul li a.country.MS { background-position: 5px -2589px; }
.countryListModal .country-selector ul li a.country.MZ { background-position: 5px -2344px; }
.countryListModal .country-selector ul li a.country.NA { background-position: 5px -2309px; }
.countryListModal .country-selector ul li a.country.NR { background-position: 5px -2029px; }
.countryListModal .country-selector ul li a.country.NL { background-position: 5px -2134px; }
.countryListModal .country-selector ul li a.country.NP { background-position: 5px -2064px; }
.countryListModal .country-selector ul li a.country.AN { background-position: 5px -6124px; }
.countryListModal .country-selector ul li a.country.NC { background-position: 5px -2274px; }
.countryListModal .country-selector ul li a.country.NZ { background-position: 5px -1959px; }
.countryListModal .country-selector ul li a.country.NI { background-position: 5px -2169px; }
.countryListModal .country-selector ul li a.country.NE { background-position: 5px -2239px; }
.countryListModal .country-selector ul li a.country.NG { background-position: 5px -7069px; }
.countryListModal .country-selector ul li a.country.NU { background-position: 5px -1994px; }
.countryListModal .country-selector ul li a.country.NF { background-position: 5px -2204px; }
.countryListModal .country-selector ul li a.country.NO { background-position: 5px -2099px; }
.countryListModal .country-selector ul li a.country.MK { background-position: 5px -6894px; }
.countryListModal .country-selector ul li a.country.AT { background-position: 5px -6019px; }
.countryListModal .country-selector ul li a.country.PW { background-position: 5px -1644px; }
.countryListModal .country-selector ul li a.country.PA { background-position: 5px -1889px; }
.countryListModal .country-selector ul li a.country.PG { background-position: 5px -1784px; }
.countryListModal .country-selector ul li a.country.PY { background-position: 5px -7244px; }
.countryListModal .country-selector ul li a.country.PE { background-position: 5px -1854px; }
.countryListModal .country-selector ul li a.country.PH { background-position: 5px -1749px; }
.countryListModal .country-selector ul li a.country.PN { background-position: 5px -6229px; }
.countryListModal .country-selector ul li a.country.PL { background-position: 5px -1714px; }
.countryListModal .country-selector ul li a.country.PT { background-position: 5px -1679px; }
.countryListModal .country-selector ul li a.country.QA { background-position: 5px -5704px; }
.countryListModal .country-selector ul li a.country.DO { background-position: 5px -4794px; }
.countryListModal .country-selector ul li a.country.RO { background-position: 5px -1539px; }
.countryListModal .country-selector ul li a.country.RW { background-position: 5px -6439px; }
.countryListModal .country-selector ul li a.country.WS { background-position: 5px -104px; }
.countryListModal .country-selector ul li a.country.SM { background-position: 5px -1154px; }
.countryListModal .country-selector ul li a.country.ST { background-position: 5px -1014px; }
.countryListModal .country-selector ul li a.country.CH { background-position: 5px -944px; }
.countryListModal .country-selector ul li a.country.SN { background-position: 5px -1119px; }
.countryListModal .country-selector ul li a.country.RS { background-position: 5px -6718px; }
.countryListModal .country-selector ul li a.country.SC { background-position: 5px -1364px; }
.countryListModal .country-selector ul li a.country.AL { background-position: 5px -6194px; }
.countryListModal .country-selector ul li a.country.SL { background-position: 5px -1189px; }
.countryListModal .country-selector ul li a.country.SG { background-position: 5px -1294px; }
.countryListModal .country-selector ul li a.country.SI { background-position: 5px -1259px; }
.countryListModal .country-selector ul li a.country.SK { background-position: 5px -1224px; }
.countryListModal .country-selector ul li a.country.SB { background-position: 5px -1399px; }
.countryListModal .country-selector ul li a.country.SO { background-position: 5px -1084px; }
.countryListModal .country-selector ul li a.country.ZA { background-position: 5px -34px; }
.countryListModal .country-selector ul li a.country.SH { background-position: 5px -909px; }
.countryListModal .country-selector ul li a.country.KN { background-position: 5px -3289px; }
.countryListModal .country-selector ul li a.country.LC { background-position: 5px -3079px; }
.countryListModal .country-selector ul li a.country.PM { background-position: 5px -6824px; }
.countryListModal .country-selector ul li a.country.VC { background-position: 5px -278px; }
.countryListModal .country-selector ul li a.country.FI { background-position: 5px -4549px; }
.countryListModal .country-selector ul li a.country.SR { background-position: 5px -1049px; }
.countryListModal .country-selector ul li a.country.SJ { background-position: 5px -2099px; }
.countryListModal .country-selector ul li a.country.SE { background-position: 5px -1329px; }
.countryListModal .country-selector ul li a.country.TJ { background-position: 5px -769px; }
.countryListModal .country-selector ul li a.country.TZ { background-position: 5px -489px; }
.countryListModal .country-selector ul li a.country.TD { background-position: 5px -1539px; }
.countryListModal .country-selector ul li a.country.TG { background-position: 5px -839px; }
.countryListModal .country-selector ul li a.country.TO { background-position: 5px -664px; }
.countryListModal .country-selector ul li a.country.TT { background-position: 5px -594px; }
.countryListModal .country-selector ul li a.country.TR { background-position: 5px -629px; }
.countryListModal .country-selector ul li a.country.TM { background-position: 5px -734px; }
.countryListModal .country-selector ul li a.country.TC { background-position: 5px -909px; }
.countryListModal .country-selector ul li a.country.TV { background-position: 5px -559px; }
.countryListModal .country-selector ul li a.country.UG { background-position: 5px -419px; }
.countryListModal .country-selector ul li a.country.UA { background-position: 5px -454px; }
.countryListModal .country-selector ul li a.country.AE { background-position: 5px -6299px; }
.countryListModal .country-selector ul li a.country.UY { background-position: 5px -351px; }
.countryListModal .country-selector ul li a.country.VU { background-position: 5px -139px; }
.countryListModal .country-selector ul li a.country.VA { background-position: 5px -314px; }
.countryListModal .country-selector ul li a.country.VE { background-position: 5px -244px; }
.countryListModal .country-selector ul li a.country.VN { background-position: 5px -174px; }
.countryListModal .country-selector ul li a.country.WF { background-position: 5px -6792px; }
.countryListModal .country-selector ul li a.country.ZM { background-position: 5px 1px; }
.countryListModal .country-selector ul li a.country.ZW { background-position: 5px -7209px; }
.countryListModal .country-selector ul li a.country.GR { background-position: 5px -4059px; }
.countryListModal .country-selector ul li a.country.BG { background-position: 5px -5739px; }
.countryListModal .country-selector ul li a.country.RU { background-position: 5px -1503px; }
.countryListModal .country-selector ul li a.country.IL { background-position: 5px -3709px; }
.countryListModal .country-selector ul li a.country.JO { background-position: 5px -3534px; }
.countryListModal .country-selector ul li a.country.BH { background-position: 5px -5704px; }
.countryListModal .country-selector ul li a.country.DZ { background-position: 5px -4759px; }
.countryListModal .country-selector ul li a.country.KW { background-position: 5px -3219px; }
.countryListModal .country-selector ul li a.country.MA { background-position: 5px -2834px; }
.countryListModal .country-selector ul li a.country.SA { background-position: 5px -1434px; }
.countryListModal .country-selector ul li a.country.YE { background-position: 5px -69px; }
.countryListModal .country-selector ul li a.country.TN { background-position: 5px -699px; }
.countryListModal .country-selector ul li a.country.OM { background-position: 5px -1924px; }


/* Footer trigger flag positions for every country (parallels modal). */
.intent-footer .picker.country-selector .country.ZM { background-position: 5px 1px; }
.intent-footer .picker.country-selector .country.ZA { background-position: 5px -34px; }
.intent-footer .picker.country-selector .country.YE { background-position: 5px -69px; }
.intent-footer .picker.country-selector .country.WS { background-position: 5px -104px; }
.intent-footer .picker.country-selector .country.VU { background-position: 5px -139px; }
.intent-footer .picker.country-selector .country.US { background-position: 5px -383px; }
.intent-footer .picker.country-selector .country.TW { background-position: 5px -524px; }
.intent-footer .picker.country-selector .country.TR { background-position: 5px -629px; }
.intent-footer .picker.country-selector .country.TH { background-position: 5px -804px; }
.intent-footer .picker.country-selector .country.CH { background-position: 5px -944px; }
.intent-footer .picker.country-selector .country.AR { background-position: 5px -6055px; }
.intent-footer .picker.country-selector .country.SK { background-position: 5px -1224px; }
.intent-footer .picker.country-selector .country.SG { background-position: 5px -1294px; }
.intent-footer .picker.country-selector .country.SE { background-position: 5px -1329px; }
.intent-footer .picker.country-selector .country.PT { background-position: 5px -1679px; }
.intent-footer .picker.country-selector .country.PL { background-position: 5px -1714px; }
.intent-footer .picker.country-selector .country.NZ { background-position: 5px -1959px; }
.intent-footer .picker.country-selector .country.NO { background-position: 5px -2099px; }
.intent-footer .picker.country-selector .country.NL { background-position: 5px -2134px; }
.intent-footer .picker.country-selector .country.MY { background-position: 5px -2379px; }
.intent-footer .picker.country-selector .country.MX { background-position: 5px -2414px; }
.intent-footer .picker.country-selector .country.MQ { background-position: 5px -4374px; }
.intent-footer .picker.country-selector .country.LU { background-position: 5px -2904px; }
.intent-footer .picker.country-selector .country.KR { background-position: 5px -3254px; }
.intent-footer .picker.country-selector .country.JP { background-position: 5px -3499px; }
.intent-footer .picker.country-selector .country.JM { background-position: 5px -3569px; }
.intent-footer .picker.country-selector .country.IT { background-position: 5px -3604px; }
.intent-footer .picker.country-selector .country.IL { background-position: 5px -3709px; }
.intent-footer .picker.country-selector .country.IE { background-position: 5px -3744px; }
.intent-footer .picker.country-selector .country.ID { background-position: 5px -3779px; }
.intent-footer .picker.country-selector .country.HU { background-position: 5px -3814px; }
.intent-footer .picker.country-selector .country.HK { background-position: 5px -3919px; }
.intent-footer .picker.country-selector .country.GR { background-position: 5px -4059px; }
.intent-footer .picker.country-selector .country.GB { background-position: 5px -4304px; }
.intent-footer .picker.country-selector .country.FR { background-position: 5px -4374px; }
.intent-footer .picker.country-selector .country.GF { background-position: 5px -4374px; }
.intent-footer .picker.country-selector .country.GP { background-position: 5px -4374px; }
.intent-footer .picker.country-selector .country.RE { background-position: 5px -4374px; }
.intent-footer .picker.country-selector .country.FI { background-position: 5px -4549px; }
.intent-footer .picker.country-selector .country.ES { background-position: 5px -4618px; }
.intent-footer .picker.country-selector .country.EC { background-position: 5px -4724px; }
.intent-footer .picker.country-selector .country.DZ { background-position: 5px -4759px; }
.intent-footer .picker.country-selector .country.DK { background-position: 5px -4864px; }
.intent-footer .picker.country-selector .country.DE { background-position: 5px -4934px; }
.intent-footer .picker.country-selector .country.EG { background-position: 5px -69px; }
.intent-footer .picker.country-selector .country.CZ { background-position: 5px -4969px; }
.intent-footer .picker.country-selector .country.C2 { background-position: 5px -5144px; }
.intent-footer .picker.country-selector .country.CN { background-position: 5px -5144px; }
.intent-footer .picker.country-selector .country.CA { background-position: 5px -5319px; }
.intent-footer .picker.country-selector .country.BW { background-position: 5px -5389px; }
.intent-footer .picker.country-selector .country.BZ { background-position: 5px -5354px; }
.intent-footer .picker.country-selector .country.BS { background-position: 5px -5459px; }
.intent-footer .picker.country-selector .country.BR { background-position: 5px -5494px; }
.intent-footer .picker.country-selector .country.BM { background-position: 5px -5599px; }
.intent-footer .picker.country-selector .country.BH { background-position: 5px -5704px; }
.intent-footer .picker.country-selector .country.BE { background-position: 5px -5809px; }
.intent-footer .picker.country-selector .country.BB { background-position: 5px -5844px; }
.intent-footer .picker.country-selector .country.BA { background-position: 5px -5879px; }
.intent-footer .picker.country-selector .country.BF { background-position: 5px -5773px; }
.intent-footer .picker.country-selector .country.AU { background-position: 5px -5984px; }
.intent-footer .picker.country-selector .country.AT { background-position: 5px -6019px; }
.intent-footer .picker.country-selector .country.AL { background-position: 5px -6194px; }
.intent-footer .picker.country-selector .country.AG { background-position: 5px -6264px; }
.intent-footer .picker.country-selector .country.AD { background-position: 5px -6334px; }
.intent-footer .picker.country-selector .country.BG { background-position: 5px -5739px; }
.intent-footer .picker.country-selector .country.KH { background-position: 5px -3397px; }
.intent-footer .picker.country-selector .country.KY { background-position: 5px -4479px; }
.intent-footer .picker.country-selector .country.CO { background-position: 5px -5109px; }
.intent-footer .picker.country-selector .country.HR { background-position: 5px -3849px; }
.intent-footer .picker.country-selector .country.CY { background-position: 5px -5004px; }
.intent-footer .picker.country-selector .country.DM { background-position: 5px -4829px; }
.intent-footer .picker.country-selector .country.DO { background-position: 5px -4794px; }
.intent-footer .picker.country-selector .country.SV { background-position: 5px -979px; }
.intent-footer .picker.country-selector .country.ER { background-position: 5px -4655px; }
.intent-footer .picker.country-selector .country.EE { background-position: 5px -4689px; }
.intent-footer .picker.country-selector .country.ET { background-position: 5px -4587px; }
.intent-footer .picker.country-selector .country.FO { background-position: 5px -4409px; }
.intent-footer .picker.country-selector .country.FJ { background-position: 5px -4514px; }
.intent-footer .picker.country-selector .country.PF { background-position: 5px -1819px; }
.intent-footer .picker.country-selector .country.GI { background-position: 5px -4199px; }
.intent-footer .picker.country-selector .country.GL { background-position: 5px -4164px; }
.intent-footer .picker.country-selector .country.GD { background-position: 5px -4269px; }
.intent-footer .picker.country-selector .country.GT { background-position: 5px -4024px; }
.intent-footer .picker.country-selector .country.HN { background-position: 5px -3884px; }
.intent-footer .picker.country-selector .country.IS { background-position: 5px -3639px; }
.intent-footer .picker.country-selector .country.JO { background-position: 5px -3534px; }
.intent-footer .picker.country-selector .country.KE { background-position: 5px -3464px; }
.intent-footer .picker.country-selector .country.KW { background-position: 5px -3219px; }
.intent-footer .picker.country-selector .country.LV { background-position: 5px -2869px; }
.intent-footer .picker.country-selector .country.LS { background-position: 5px -2974px; }
.intent-footer .picker.country-selector .country.LI { background-position: 5px -3044px; }
.intent-footer .picker.country-selector .country.LT { background-position: 5px -2939px; }
.intent-footer .picker.country-selector .country.MW { background-position: 5px -2449px; }
.intent-footer .picker.country-selector .country.MT { background-position: 5px -2554px; }
.intent-footer .picker.country-selector .country.MN { background-position: 5px -6369px; }
.intent-footer .picker.country-selector .country.MA { background-position: 5px -2834px; }
.intent-footer .picker.country-selector .country.MZ { background-position: 5px -2344px; }
.intent-footer .picker.country-selector .country.NC { background-position: 5px -2274px; }
.intent-footer .picker.country-selector .country.OM { background-position: 5px -1924px; }
.intent-footer .picker.country-selector .country.PW { background-position: 5px -1644px; }
.intent-footer .picker.country-selector .country.PA { background-position: 5px -1889px; }
.intent-footer .picker.country-selector .country.PH { background-position: 5px -1749px; }
.intent-footer .picker.country-selector .country.PN { background-position: 5px -6229px; }
.intent-footer .picker.country-selector .country.QA { background-position: 5px -5704px; }
.intent-footer .picker.country-selector .country.RO { background-position: 5px -1539px; }
.intent-footer .picker.country-selector .country.RU { background-position: 5px -1503px; }
.intent-footer .picker.country-selector .country.RW { background-position: 5px -6439px; }
.intent-footer .picker.country-selector .country.ST { background-position: 5px -1014px; }
.intent-footer .picker.country-selector .country.KN { background-position: 5px -3289px; }
.intent-footer .picker.country-selector .country.SH { background-position: 5px -909px; }
.intent-footer .picker.country-selector .country.VC { background-position: 5px -278px; }
.intent-footer .picker.country-selector .country.LC { background-position: 5px -3079px; }
.intent-footer .picker.country-selector .country.PM { background-position: 5px -6824px; }
.intent-footer .picker.country-selector .country.SM { background-position: 5px -1154px; }
.intent-footer .picker.country-selector .country.SA { background-position: 5px -1434px; }
.intent-footer .picker.country-selector .country.SC { background-position: 5px -1364px; }
.intent-footer .picker.country-selector .country.SI { background-position: 5px -1259px; }
.intent-footer .picker.country-selector .country.TJ { background-position: 5px -769px; }
.intent-footer .picker.country-selector .country.TT { background-position: 5px -594px; }
.intent-footer .picker.country-selector .country.AE { background-position: 5px -6299px; }
.intent-footer .picker.country-selector .country.UY { background-position: 5px -351px; }
.intent-footer .picker.country-selector .country.VE { background-position: 5px -244px; }
.intent-footer .picker.country-selector .country.IN { background-position: 5px -3674px; }
.intent-footer .picker.country-selector .country.VN { background-position: 5px -174px; }
.intent-footer .picker.country-selector .country.AO { background-position: 5px -6089px; }
.intent-footer .picker.country-selector .country.AI { background-position: 5px -6229px; }
.intent-footer .picker.country-selector .country.AM { background-position: 5px -6159px; }
.intent-footer .picker.country-selector .country.AW { background-position: 5px -5949px; }
.intent-footer .picker.country-selector .country.AZ { background-position: 5px -5914px; }
.intent-footer .picker.country-selector .country.BJ { background-position: 5px -5634px; }
.intent-footer .picker.country-selector .country.BT { background-position: 5px -5424px; }
.intent-footer .picker.country-selector .country.BO { background-position: 5px -5529px; }
.intent-footer .picker.country-selector .country.BN { background-position: 5px -5564px; }
.intent-footer .picker.country-selector .country.BI { background-position: 5px -5669px; }
.intent-footer .picker.country-selector .country.CV { background-position: 5px -5039px; }
.intent-footer .picker.country-selector .country.TD { background-position: 5px -1539px; }
.intent-footer .picker.country-selector .country.CL { background-position: 5px -5179px; }
.intent-footer .picker.country-selector .country.KM { background-position: 5px -3324px; }
.intent-footer .picker.country-selector .country.CK { background-position: 5px -5214px; }
.intent-footer .picker.country-selector .country.CR { background-position: 5px -5074px; }
.intent-footer .picker.country-selector .country.CD { background-position: 5px -5284px; }
.intent-footer .picker.country-selector .country.DJ { background-position: 5px -4899px; }
.intent-footer .picker.country-selector .country.FK { background-position: 5px -6229px; }
.intent-footer .picker.country-selector .country.GA { background-position: 5px -4339px; }
.intent-footer .picker.country-selector .country.GM { background-position: 5px -4129px; }
.intent-footer .picker.country-selector .country.GE { background-position: 5px -6652px; }
.intent-footer .picker.country-selector .country.GN { background-position: 5px -3989px; }
.intent-footer .picker.country-selector .country.GW { background-position: 5px -3989px; }
.intent-footer .picker.country-selector .country.GY { background-position: 5px -3954px; }
.intent-footer .picker.country-selector .country.KZ { background-position: 5px -3149px; }
.intent-footer .picker.country-selector .country.KI { background-position: 5px -3359px; }
.intent-footer .picker.country-selector .country.KG { background-position: 5px -3429px; }
.intent-footer .picker.country-selector .country.LA { background-position: 5px -3114px; }
.intent-footer .picker.country-selector .country.MG { background-position: 5px -2799px; }
.intent-footer .picker.country-selector .country.MV { background-position: 5px -2484px; }
.intent-footer .picker.country-selector .country.ML { background-position: 5px -2729px; }
.intent-footer .picker.country-selector .country.MH { background-position: 5px -2764px; }
.intent-footer .picker.country-selector .country.MR { background-position: 5px -2624px; }
.intent-footer .picker.country-selector .country.MU { background-position: 5px -2519px; }
.intent-footer .picker.country-selector .country.FM { background-position: 5px -4444px; }
.intent-footer .picker.country-selector .country.MS { background-position: 5px -2589px; }
.intent-footer .picker.country-selector .country.YT { background-position: 5px -4374px; }
.intent-footer .picker.country-selector .country.NA { background-position: 5px -2309px; }
.intent-footer .picker.country-selector .country.NR { background-position: 5px -2029px; }
.intent-footer .picker.country-selector .country.NP { background-position: 5px -2064px; }
.intent-footer .picker.country-selector .country.AN { background-position: 5px -6124px; }
.intent-footer .picker.country-selector .country.NI { background-position: 5px -2169px; }
.intent-footer .picker.country-selector .country.NE { background-position: 5px -2239px; }
.intent-footer .picker.country-selector .country.NU { background-position: 5px -1994px; }
.intent-footer .picker.country-selector .country.NF { background-position: 5px -2204px; }
.intent-footer .picker.country-selector .country.PG { background-position: 5px -1784px; }
.intent-footer .picker.country-selector .country.PE { background-position: 5px -1854px; }
.intent-footer .picker.country-selector .country.CG { background-position: 5px -5284px; }
.intent-footer .picker.country-selector .country.SN { background-position: 5px -1119px; }
.intent-footer .picker.country-selector .country.RS { background-position: 5px -6718px; }
.intent-footer .picker.country-selector .country.SL { background-position: 5px -1189px; }
.intent-footer .picker.country-selector .country.SB { background-position: 5px -1399px; }
.intent-footer .picker.country-selector .country.SO { background-position: 5px -1084px; }
.intent-footer .picker.country-selector .country.LK { background-position: 5px -3009px; }
.intent-footer .picker.country-selector .country.SR { background-position: 5px -1049px; }
.intent-footer .picker.country-selector .country.SZ { background-position: 5px -6509px; }
.intent-footer .picker.country-selector .country.SJ { background-position: 5px -2099px; }
.intent-footer .picker.country-selector .country.TZ { background-position: 5px -489px; }
.intent-footer .picker.country-selector .country.TG { background-position: 5px -839px; }
.intent-footer .picker.country-selector .country.TO { background-position: 5px -664px; }
.intent-footer .picker.country-selector .country.TN { background-position: 5px -699px; }
.intent-footer .picker.country-selector .country.TM { background-position: 5px -734px; }
.intent-footer .picker.country-selector .country.TC { background-position: 5px -909px; }
.intent-footer .picker.country-selector .country.TV { background-position: 5px -559px; }
.intent-footer .picker.country-selector .country.UG { background-position: 5px -419px; }
.intent-footer .picker.country-selector .country.UA { background-position: 5px -454px; }
.intent-footer .picker.country-selector .country.VA { background-position: 5px -314px; }
.intent-footer .picker.country-selector .country.VG { background-position: 5px -209px; }
.intent-footer .picker.country-selector .country.WF { background-position: 5px -6792px; }
.intent-footer .picker.country-selector .country.ME { background-position: 5px -6859px; }
.intent-footer .picker.country-selector .country.MK { background-position: 5px -6894px; }
.intent-footer .picker.country-selector .country.MD { background-position: 5px -6929px; }
.intent-footer .picker.country-selector .country.XK { background-position: 5px -6964px; }
.intent-footer .picker.country-selector .country.BY { background-position: 5px -6999px; }
.intent-footer .picker.country-selector .country.MC { background-position: 5px -7034px; }
.intent-footer .picker.country-selector .country.NG { background-position: 5px -7069px; }
.intent-footer .picker.country-selector .country.GH { background-position: 5px -7104px; }
.intent-footer .picker.country-selector .country.CI { background-position: 5px -7139px; }
.intent-footer .picker.country-selector .country.CM { background-position: 5px -7174px; }
.intent-footer .picker.country-selector .country.ZW { background-position: 5px -7209px; }
.intent-footer .picker.country-selector .country.PY { background-position: 5px -7244px; }

/* ------------------------------------------------------------------
   Phone-number dial-code affordance. Plain inline "+1 v" text that
   reads like part of the typed value but is actually a button
   anchored at the input's left padding. Mirrors the borderless
   country/language picker styling at the bottom of the auth page.
   ------------------------------------------------------------------ */
/* Padding-left for the input in phone mode is set dynamically via an
   inline style on the input itself (SignIn.tsx measures the rendered
   pill width and adds a 6px trailing gap). A small fallback keeps
   things readable before the measurement effect runs. */
.auth-field.phone-mode input {
  padding-left: 48px;
}

.auth-dial-pill {
  position: absolute;
  left: 12px;
  /* Match the input's typed text baseline: input padding is
     20px top / 8px bottom, so text optical center sits ~30px
     from the top of a 64px field. */
  top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #000000;
  cursor: pointer;
  z-index: 2;
}

.auth-dial-pill:focus-visible {
  outline: 2px solid #097ff5;
  outline-offset: 2px;
  border-radius: 2px;
}

.auth-dial-pill-code {
  line-height: 1;
}

.auth-dial-pill-caret {
  color: #6c7378;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Dial-code modal additions on top of the shared .countryListModal
   chrome: a search input at the top, and a right-side "+code" badge
   on each country row. Everything else (wrapper width, close button,
   list spacing, flag sprite, hover color) is inherited verbatim. */
.dialCodeSearchWrap {
  padding: 0 0 16px;
}

.dialCodeSearch {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 500;
  color: #2c2e2f;
  background: #ffffff;
  border: 1px solid #cbd2d6;
  border-radius: 20px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  box-sizing: border-box;
}

.dialCodeSearch::placeholder { color: #7f8689; }

.dialCodeSearch:focus {
  border-color: #0070ba;
  box-shadow: 0 0 0 1px #0070ba;
}

.dialCodeListModal .country-selector ul li a.country .dialCodeRowDial {
  margin-left: 10px;
  font-weight: 500;
  font-size: 15px;
  color: #7f8689;
  font-variant-numeric: tabular-nums;
}

.dialCodeListModal .dialCodeEmpty {
  padding: 24px 16px;
  text-align: center;
  font-size: 14px;
  color: #7f8689;
}