.unified-auth-react {
  --unified-auth-text: #141414;
  --unified-auth-border: #d0d0d0;
  --unified-auth-primary: #4ba3df;
  --unified-auth-error: #c62828;
  --unified-auth-control-height: 50px;
  --unified-auth-radius: 512px;
  box-sizing: border-box;
  display: block;
  margin-inline: auto;
  width: 100%;
  /* max-width is set per-instance via Quick Edits > Layout > Component
     Width (style.html.twig) — this is the sole source of the side
     gutter, no fixed padding is added on top of it. */
}

.unified-auth-react *,
.unified-auth-react *::before,
.unified-auth-react *::after {
  box-sizing: border-box;
}

/* Applied by min-width-guard.js when it counter-scales the component back
   to its real proportions against an ancestor Fit Viewport container. The
   content may then exceed the available height — contain that scroll
   inside the component itself, never letting it reach the page. */
.unified-auth-react--counter-scaled {
  max-height: 100vh;
  max-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
}

.unified-auth-react__screen {
  align-items: center;
  color: var(--unified-auth-text);
  display: flex;
  flex-direction: column;
  font-family: Inter, Arial, sans-serif;
  gap: 20px;
  justify-content: center;
  /* No padding here by design (26/08): the side gutter comes entirely
     from the Component Width (vw) field on .unified-auth-react, not from
     padding stacked on top of it. */
  padding: 0;
}

.unified-auth-react__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 95vw;
  width: 100%;
}

.unified-auth-react__entry {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.unified-auth-react__channel-switch {
  display: flex;
  gap: 8px;
}

.unified-auth-react__channel {
  background: transparent;
  border: 1px solid var(--unified-auth-border);
  border-radius: 512px;
  color: rgba(20, 20, 20, 0.8);
  cursor: pointer;
  flex: 1;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  height: 36px;
}

.unified-auth-react__channel.is-active {
  background: rgba(20, 20, 20, 0.04);
  border-color: var(--unified-auth-text);
  color: var(--unified-auth-text);
}

.unified-auth-react__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.unified-auth-react__label {
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
}

.unified-auth-react__required-marker {
  color: #f9e57a;
}

.unified-auth-react__phone-control,
.unified-auth-react__text-control {
  align-items: center;
  background: #fff;
  border: 1px solid var(--unified-auth-border);
  border-radius: var(--unified-auth-radius);
  display: flex;
  gap: 20px;
  height: var(--unified-auth-control-height);
  padding: 0 8px;
  position: relative;
}

/* iti wraps the input; hide its own country chrome — React owns the Figma pill */
.unified-auth-react__phone-control .iti {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  width: 100%;
}

.unified-auth-react__phone-control .iti__country-container {
  height: 1px !important;
  left: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  top: 100% !important;
  width: 1px !important;
}

.unified-auth-react__phone-control .iti__tel-input,
.unified-auth-react__phone-control .unified-auth-react__phone-input {
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
  caret-color: var(--unified-auth-text);
  color: rgba(20, 20, 20, 0.8);
  font: inherit;
  font-size: 13px;
  height: 100%;
  line-height: 16px;
  margin: 0;
  min-width: 0;
  outline: 0 !important;
  outline-offset: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  width: 100% !important;
}

.unified-auth-react__phone-control .iti__tel-input:focus,
.unified-auth-react__phone-control .iti__tel-input:focus-visible,
.unified-auth-react__phone-control .unified-auth-react__phone-input:focus,
.unified-auth-react__phone-control .unified-auth-react__phone-input:focus-visible {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Kill theme/Material underlines + Chrome autofill chrome inside the field */
.unified-auth-react__phone-control input::-webkit-contacts-auto-fill-button,
.unified-auth-react__phone-control input::-webkit-credentials-auto-fill-button {
  display: none !important;
  pointer-events: none;
  visibility: hidden;
}

/* Only applies to the inline (non-fullscreen) dropdown, which does stay
   nested under .iti inside .phone-control. */
.unified-auth-react__phone-control .iti--inline-dropdown .iti__dropdown-content {
  left: 0;
  z-index: 30;
}

/* Figma "Select country" fullscreen modal — Frame 38 spec (FIGMA DEFAULT.pdf
   p.7, item 15): white panel, top corners only, Elevation/025 shadow. Header
   is custom-mounted by initSsoPhoneMask.js on open:countrydropdown, the
   library renders none.

   Scoped by .unified-auth-react__iti (containerClass option), NOT by
   .unified-auth-react__phone-control — in fullscreen-popup mode (default on
   mobile) the library appends this container to document.body, so it is
   never a descendant of the phone control. */
.unified-auth-react__iti.iti--fullscreen-popup .iti__dropdown-content {
  background: #fff;
  border-radius: 12px 12px 0 0;
  bottom: 0;
  box-shadow: 0 0 2px 0 #554934;
  display: flex;
  flex-direction: column;
  height: 50vh;
  left: 0;
  position: fixed;
  right: 0;
  top: auto;
  width: 100%;
}

/* Scroll lives on the country list, not the panel itself, so the fixed
   header stays put while the list scrolls underneath it. Scrollbar is
   hidden per Figma (no visible scroll affordance in the spec) while
   scrolling itself stays fully functional. */
.unified-auth-react__iti.iti--fullscreen-popup .iti__country-list {
  -ms-overflow-style: none;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.unified-auth-react__iti.iti--fullscreen-popup .iti__country-list::-webkit-scrollbar {
  display: none;
}

/* Figma item 18 (FIGMA DEFAULT.pdf p.7, Frame 38, "Vector 3"): 1px divider
   directly under the header, full width, #141414 at 32% opacity. */
.unified-auth-react__country-dropdown-header {
  align-items: center;
  border-bottom: 1px solid rgba(20, 20, 20, 0.32);
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  padding: 16px 24px;
}

.unified-auth-react__country-dropdown-title {
  color: #141414;
  font-size: 14px;
  font-weight: 600;
}

.unified-auth-react__country-dropdown-close {
  align-items: center;
  background: rgba(20, 20, 20, 0.04);
  border: 0;
  border-radius: 50%;
  color: rgba(20, 20, 20, 0.8);
  cursor: pointer;
  display: inline-flex;
  font-size: 18px;
  height: 32px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 32px;
}

/* Figma "Layout and spacing" (FIGMA DEFAULT.pdf p.7, Frame 38): the panel
   itself carries 16px top/bottom padding and 32px item spacing between
   rows — not per-row padding or a divider line. Padding here is horizontal
   only; vertical rhythm comes entirely from the list's gap. Top padding
   moved onto the scrollable list itself (not the panel) so the fixed
   header isn't pushed down by it; bottom padding stays on the panel. */
.unified-auth-react__iti .iti__dropdown-content {
  padding-bottom: 16px;
}

.unified-auth-react__iti .iti__country-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 16px;
}

/* The library's own .iti--fullscreen-popup .iti__country rule (padding:
   10px 10px) has equal specificity and can win depending on load order —
   pin this explicitly so the fullscreen (mobile) panel always matches the
   Figma horizontal rhythm regardless of CSS source order. */
.unified-auth-react__iti.iti--fullscreen-popup .iti__country,
.unified-auth-react__iti .iti__country {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0 24px;
}

.unified-auth-react__iti .iti__country-name {
  flex: 1 1 auto;
  margin-right: 12px;
  text-align: left;
}

/* Figma item 19/22/25... shows round flags, the library ships them as a
   12x16 sprite rectangle (border-radius: 1px) by default. The sprite crop
   itself (background-position/-size) is driven by --iti-flag-offset, set
   per-country by the library (.iti__ac, .iti__ad...) at the original 12x16
   scale — resizing --iti-flag-width/-height or the sprite vars here would
   desync every offset from the sheet and break the crop entirely. Instead,
   wrap the untouched 12x16 flag in a round mask sized to fit its height. */
.unified-auth-react__iti .iti__flag-clip {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  flex-shrink: 0;
  height: 20px;
  justify-content: center;
  margin-right: 12px;
  overflow: hidden;
  width: 20px;
}

.unified-auth-react__iti .iti__flag-clip .iti__flag {
  box-shadow: none;
  flex-shrink: 0;
  transform: scale(1.6);
}

/* Figma Frame 38 — fill only (no brown Elevation ring); hug ~36h, pad 10, gap 2 */
.unified-auth-react__country-code {
  align-items: center;
  appearance: none;
  background: rgba(20, 20, 20, 0.04);
  border: 0;
  border-radius: 512px;
  box-shadow: none;
  color: rgba(20, 20, 20, 0.8);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  height: 36px;
  line-height: 0;
  margin: 0;
  padding: 0 10px;
}

.unified-auth-react__country-code:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.unified-auth-react__flag-clip {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  flex-shrink: 0;
  height: 20px;
  justify-content: center;
  overflow: hidden;
  width: 20px;
}

.unified-auth-react__flag-clip .iti__flag {
  flex-shrink: 0;
  margin: 0;
  transform: scale(1.25);
}

.unified-auth-react__dial-code {
  font-size: 13px;
  line-height: 16px;
}

.unified-auth-react__chevron {
  color: #141414;
  display: block;
  flex-shrink: 0;
  height: 24px;
  width: 24px;
}

.unified-auth-react__phone-input,
.unified-auth-react__text-input {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0 !important;
  box-shadow: none !important;
  caret-color: var(--unified-auth-text);
  color: rgba(20, 20, 20, 0.8);
  font: inherit;
  font-size: 13px;
  line-height: 16px;
  min-width: 0;
  outline: 0 !important;
  padding: 0;
  width: 100%;
}

.unified-auth-react__text-input:focus,
.unified-auth-react__text-input:focus-visible {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.unified-auth-react__phone-input::placeholder,
.unified-auth-react__text-input::placeholder,
.unified-auth-react__phone-control .iti__tel-input::placeholder {
  color: rgba(20, 20, 20, 0.6);
  opacity: 1;
}

.unified-auth-react__field.is-error .unified-auth-react__phone-input,
.unified-auth-react__field.is-error .unified-auth-react__text-input,
.unified-auth-react__field.is-error .unified-auth-react__phone-control .iti__tel-input {
  color: var(--unified-auth-error);
}

.unified-auth-react__field.is-error .unified-auth-react__phone-control,
.unified-auth-react__field.is-error .unified-auth-react__text-control {
  border-color: var(--unified-auth-error);
}

/* Focus = thin outer border only (Figma field), no heavy ring / inner underline */
.unified-auth-react__phone-control:focus-within,
.unified-auth-react__text-control:focus-within {
  border-color: var(--unified-auth-text);
  box-shadow: none;
}

.unified-auth-react__field.is-error .unified-auth-react__phone-control:focus-within,
.unified-auth-react__field.is-error .unified-auth-react__text-control:focus-within {
  border-color: var(--unified-auth-error);
  box-shadow: none;
}

.unified-auth-react__field-error {
  color: var(--unified-auth-error);
  font-size: 12px;
  line-height: 16px;
  margin: 0;
}

.unified-auth-react__submit,
.unified-auth-react__social-button {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  height: var(--unified-auth-control-height);
  justify-content: center;
  transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  width: 100%;
}

.unified-auth-react__submit:disabled,
.unified-auth-react__social-button:disabled,
.unified-auth-react__link-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.unified-auth-react__submit {
  background: var(--unified-auth-primary);
  border: 1px solid var(--unified-auth-primary);
  border-radius: var(--unified-auth-radius);
  color: #fff;
}

.unified-auth-react__social-button {
  background: #fff;
  border: 1px solid var(--unified-auth-text);
  border-radius: var(--unified-auth-radius);
  color: var(--unified-auth-text);
  gap: 7px;
}

.unified-auth-react__submit:hover:not(:disabled),
.unified-auth-react__social-button:hover:not(:disabled) {
  box-shadow: 0 2px 4px rgba(20, 20, 20, 0.16);
  transform: translateY(-1px);
}

.unified-auth-react__submit:focus-visible,
.unified-auth-react__social-button:focus-visible,
.unified-auth-react__link-button:focus-visible,
.unified-auth-react__back:focus-visible,
.unified-auth-react__channel:focus-visible,
.unified-auth-react__country-code:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

.unified-auth-react__divider {
  align-items: center;
  display: flex;
  gap: 10px;
}

.unified-auth-react__divider-line {
  background: rgba(20, 20, 20, 0.8);
  flex: 1;
  height: 1px;
}

.unified-auth-react__divider-label {
  color: rgba(20, 20, 20, 0.8);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.unified-auth-react__social-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.unified-auth-react__social-icon {
  flex: 0 0 18px;
  height: 18px;
  width: 18px;
}

.unified-auth-react__otp {
  display: flex;
  flex-direction: column;
  /* Figma Auth Code screen shows uneven breathing room between blocks (back
     button, title, description, masked identifier row, digit boxes), not a
     single uniform gap — matched here per element below instead of one
     column gap, so the hierarchy reads the same as the mock. */
  gap: 8px;
}

.unified-auth-react__otp .unified-auth-react__back {
  margin-bottom: 12px;
}

.unified-auth-react__otp .unified-auth-react__otp-description {
  margin-bottom: 4px;
}

.unified-auth-react__otp .unified-auth-react__otp-meta {
  margin-bottom: 16px;
}

/* Figma Layout: Largura/Altura 40, Raio 512, Espaço 8 → icon 24 */
.unified-auth-react__back {
  align-items: center;
  appearance: none;
  background: #c4daf5;
  border: 0;
  border-radius: 512px;
  box-sizing: border-box;
  color: #3f577b;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  gap: 8px;
  height: 40px;
  justify-content: center;
  line-height: 0;
  margin: 0;
  max-height: 40px;
  max-width: 40px;
  min-height: 40px;
  min-width: 40px;
  overflow: hidden;
  padding: 8px;
  width: 40px;
}

.unified-auth-react__back:hover {
  background: #b5d0f0;
}

.unified-auth-react__back-icon {
  display: block;
  flex: 0 0 24px;
  height: 24px;
  width: 24px;
}

.unified-auth-react__link-button {
  background: transparent;
  border: 0;
  color: var(--unified-auth-primary);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 0;
  text-align: right;
  white-space: nowrap;
  width: fit-content;
}

.unified-auth-react__resend-timer {
  color: rgba(20, 20, 20, 0.8);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-align: right;
  white-space: nowrap;
}

.unified-auth-react__visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.unified-auth-react__otp-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  margin: 0;
  /* Match .unified-auth-react__form's max-width so the title lines up with
     the rest of the screen (inputs, buttons) instead of spanning the full
     .screen container, which is wider (Figma: title flush with the form). */
  max-width: 95vw;
  text-align: center;
  width: 100%;
}

.unified-auth-react__otp-description {
  color: rgba(20, 20, 20, 0.8);
  font-size: 14px;
  line-height: 20px;
  margin: 0;
}

.unified-auth-react__otp-meta {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  width: 100%;
}

.unified-auth-react__otp-masked {
  color: var(--unified-auth-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.unified-auth-react__otp-inputs {
  display: flex;
  gap: 8px;
}

.unified-auth-react__otp-digit {
  background: #fff;
  border: 1px solid var(--unified-auth-border);
  border-radius: 12px;
  color: rgba(20, 20, 20, 0.8);
  flex: 1;
  font: inherit;
  font-size: 20px;
  font-weight: 600;
  height: 48px;
  text-align: center;
  width: 100%;
}

.unified-auth-react__otp-digit::placeholder {
  color: rgba(20, 20, 20, 0.35);
  opacity: 1;
}

/* JOIN DOB: Figma placeholder text + calendar affordance (13798-4559). */
.unified-auth-react__date-control {
  gap: 8px;
}

.unified-auth-react__date-picker {
  align-items: center;
  color: rgba(20, 20, 20, 0.6);
  display: inline-flex;
  flex-shrink: 0;
  height: 24px;
  position: relative;
  width: 24px;
}

.unified-auth-react__date-calendar-icon {
  display: block;
  pointer-events: none;
}

.unified-auth-react__date-picker .visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.unified-auth-react__field.is-error .unified-auth-react__date-picker {
  color: var(--unified-auth-error);
}

.unified-auth-react__join-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Figma Complete Form: the three opt-in checkboxes sit close together, then
   a larger gap separates them from the Submit button — not the same 16px
   rhythm as the fields above them. Checkbox rows are unwrapped <div>s (no
   class), so target them by their child instead. */
.unified-auth-react__join-form > div:has(> .unified-auth-react__checkbox-field) + div:has(> .unified-auth-react__checkbox-field) {
  margin-top: -8px;
}

.unified-auth-react__join-form > div:has(> .unified-auth-react__checkbox-field):last-of-type {
  margin-bottom: 8px;
}

.unified-auth-react__join-row {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.unified-auth-react__checkbox-field {
  align-items: flex-start;
  display: flex;
  gap: 8px;
}

.unified-auth-react__checkbox-field input[type='checkbox'] {
  flex-shrink: 0;
  height: 18px;
  margin-top: 2px;
  width: 18px;
}

.unified-auth-react__checkbox-field label,
.unified-auth-react__checkbox-label {
  font-size: 13px;
  line-height: 18px;
}

.unified-auth-react__checkbox-label a {
  color: var(--unified-auth-primary);
  text-decoration: underline;
}