/* ETMAM Auth Final — Wave 2 Wizard Account bridge
 * Freeze: AUTH_FINAL_20260908_233840310
 * Scope: only under .etmam-auth on the public wizard route.
 * Does not alter merchant/platform/account-returning pages.
 */

/* Hide legacy lab badge if ever present */
.etmam-auth .lab-flag { display: none !important; }

/* Wave 2.1 — keep logo fixed; shift showcase story/items down to match freeze */
@media (min-width: 48.01rem) {
  .etmam-auth .auth-shell--registration .brand-showcase-stack > .brand-story {
    align-self: end;
    padding-block-end: clamp(1.25rem, 3.2vh, 2.75rem);
    padding-block-start: clamp(2.5rem, 7vh, 5.5rem);
  }
}

/*
 * Showcase feature icons hotfix
 * Root cause: feature list uses dual class "signal-stage signal-stack".
 * Decorative .signal-stage rules (absolute inset + scale + fixed width) were
 * written for the old orbit stage and can pull the feature cluster to the
 * showcase corner. Feature rows must keep normal stacked grid layout.
 * Also: legacy public-wizard-17 i.ph {display:inline-block} beats
 * .showcase-item>i {display:grid} on specificity — restore icon box geometry.
 */
.etmam-auth .brand-story > .signal-stack.signal-stage,
.etmam-auth .brand-story > .signal-stack {
  position: relative;
  inset: auto;
  width: auto;
  max-width: none;
  min-height: 0;
  transform: none;
  opacity: 1;
  display: grid;
  justify-items: start;
  gap: 0.55rem;
  margin-block-start: 1.15rem;
}

.etmam-auth .brand-story .showcase-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  width: min(100%, 18.5rem);
  justify-self: start;
  margin-right: 0;
  margin-left: auto;
  text-align: right;
}

.etmam-auth .brand-story .showcase-item > i.ph,
.etmam-auth .brand-story .showcase-item > i.ph-bold,
.etmam-auth .brand-story .showcase-item > i.ph-fill {
  display: grid !important;
  width: 1.9rem;
  height: 1.9rem;
  place-items: center;
  flex: none;
  color: #8ff0cc;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(110, 231, 186, 0.2);
  border-radius: 0.58rem;
  font-size: 1rem;
  line-height: 1;
  vertical-align: unset;
}

@media (max-width: 48rem) {
  /* Freeze mobile: feature rows intentionally hidden */
  .etmam-auth .brand-story > .signal-stack {
    display: none;
  }
}

/* Wave 2.1 — unify account form row rhythm; phone is not a 3-row labeled field */
.etmam-auth .auth-form .form-grid {
  align-items: start;
}

.etmam-auth .auth-form .form-grid > .ea-phone.field {
  display: grid;
  grid-template-rows: none;
  grid-auto-rows: auto;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}

.etmam-auth .auth-form .form-grid > .field.field--placeholder-label {
  grid-template-rows: auto;
  gap: 0;
}

.etmam-auth .auth-form .form-grid > .field.field--placeholder-label .control-wrap {
  min-height: var(--control);
}

.etmam-auth .auth-form .form-grid > .field.field--placeholder-label .field__message:empty {
  display: none;
  min-height: 0;
  margin: 0;
  padding: 0;
}

/* Verify CTA: never inherit black/slate text over filled primary */
.etmam-auth .btn.btn--primary,
.etmam-auth .btn.btn--primary span,
.etmam-auth .btn.btn--primary i {
  color: #fff !important;
}

.etmam-auth .btn.btn--primary:hover:not(:disabled),
.etmam-auth .btn.btn--primary:hover:not(:disabled) span,
.etmam-auth .btn.btn--primary:hover:not(:disabled) i {
  color: #fff !important;
}

.etmam-auth .btn.btn--primary:focus-visible {
  color: #fff !important;
  outline: none;
  box-shadow: var(--focus);
}

.etmam-auth .btn.btn--primary:active:not(:disabled) {
  color: #fff !important;
}

.etmam-auth .btn.btn--primary:disabled,
.etmam-auth .btn.btn--primary.is-loading {
  color: #fff !important;
}

/* Verify actions: vertical stack (OTP → primary → secondary) */
.etmam-auth .auth-form--verify .btn-row,
.etmam-auth .ea-verify-stage .btn-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  margin-block-start: 0.85rem;
}

.etmam-auth .auth-form--verify .btn-row .btn--primary,
.etmam-auth .ea-verify-stage .btn-row .btn--primary {
  width: 100%;
  order: 0;
}

.etmam-auth .auth-form--verify .btn-row .btn--ghost,
.etmam-auth .ea-verify-stage .btn-row .btn--ghost {
  width: 100%;
  order: 1;
}

/* Mute Tailwind color inheritance on migrated verify controls */
.etmam-auth .ea-verify-stage .btn--primary {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* Wizard page chrome: remove public-shell top padding already handled by pw17;
   keep foundation shell full-viewport */
body.pw17-page.public-shell .etmam-auth {
  min-height: 100svh;
}

body.pw17-page .etmam-auth .auth-shell {
  min-height: calc(100svh - 3.25rem); /* leave room for compact footer */
}

/* Map real phone partial into freeze phone-control geometry (wizard only) */
.etmam-auth .ea-phone .account-intl-phone {
  display: grid;
  gap: 0.35rem;
}

.etmam-auth .ea-phone .account-intl-phone > .field__label,
.etmam-auth .ea-phone .account-intl-phone > .field__label--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.etmam-auth .ea-phone .account-intl-phone__row {
  display: grid !important;
  grid-template-columns: 7.1rem minmax(0, 1fr) !important;
  flex-direction: unset !important;
  gap: 0 !important;
  direction: ltr;
  align-items: stretch;
  min-height: var(--control);
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: visible;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
}

.etmam-auth .ea-phone .account-intl-phone__row:focus-within {
  background: #fff;
  border-color: var(--brand);
  box-shadow: var(--focus);
}

.etmam-auth .ea-phone .account-intl-phone__national {
  order: 2 !important;
  width: 100%;
  min-width: 0;
  height: var(--control);
  margin: 0;
  padding: 0.48rem 0.72rem;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit;
  color: var(--ink);
  direction: ltr;
  text-align: start;
}

.etmam-auth .ea-phone .account-intl-phone__combo {
  position: relative;
  order: 1 !important;
  border-inline-end: 1px solid var(--line);
}

.etmam-auth .ea-phone .account-intl-phone__combo-btn {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: var(--control);
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.35rem 0.45rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.etmam-auth .ea-phone .account-intl-phone__flag {
  display: inline-flex;
  width: 1.25rem;
  height: 0.9rem;
  overflow: hidden;
  border-radius: 0.15rem;
}

.etmam-auth .ea-phone .account-intl-phone__flag svg,
.etmam-auth .ea-phone .account-intl-phone__flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.etmam-auth .ea-phone .account-intl-phone__dial {
  font-size: 0.78rem;
  font-weight: 600;
  direction: ltr;
}

.etmam-auth .ea-phone .account-intl-phone__list {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 0.4rem);
  z-index: 60;
  width: min(18rem, 78vw);
  max-height: 16rem;
  overflow: auto;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  direction: rtl;
}

.etmam-auth .ea-phone .account-intl-phone__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border-radius: 0.55rem;
  cursor: pointer;
}

.etmam-auth .ea-phone .account-intl-phone__option:hover,
.etmam-auth .ea-phone .account-intl-phone__option.is-selected {
  background: var(--brand-soft);
}

.etmam-auth .ea-phone .account-intl-phone__country {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.etmam-auth .ea-phone .account-intl-phone__hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.4;
}

/* Password strength: support freeze meter + existing pw17 guidance classes */
.etmam-auth .password-meter[data-pw17-password-strength] i.is-on:nth-child(1) { background: var(--danger); }
.etmam-auth .password-meter[data-pw17-password-strength] i.is-on:nth-child(2) { background: var(--warning); }
.etmam-auth .password-meter[data-pw17-password-strength] i.is-on:nth-child(3),
.etmam-auth .password-meter[data-pw17-password-strength] i.is-on:nth-child(4) { background: var(--brand); }
.etmam-auth .password-meter[data-pw17-password-strength][data-state="strong"] i.is-on { background: var(--success); }

.etmam-auth .password-feedback[data-state="valid"],
.etmam-auth [data-pw17-password-confirm-status][data-state="valid"] { color: var(--success-dark); }
.etmam-auth .password-feedback[data-state="invalid"],
.etmam-auth [data-pw17-password-confirm-status][data-state="invalid"] { color: var(--danger); }

/* Transitional: later wizard stages keep functional cards inside workbench */
.etmam-auth .ea-legacy-stage .pw17-form-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
  border-radius: 0;
}

.etmam-auth .ea-legacy-stage .pw17-stepper--compact {
  display: none;
}

/* Neutralize leftover Tailwind utility collisions inside account form only */
.etmam-auth .auth-form .pw17-control {
  /* unused when account uses .control */
}

/* Flash notices use freeze notice language */
.etmam-auth .ea-flash {
  margin-block-end: 0.75rem;
}

@media (max-width: 48rem) {
  body.pw17-page .etmam-auth .auth-shell {
    min-height: auto;
  }

  .etmam-auth .ea-phone .account-intl-phone__row {
    grid-template-columns: 6.5rem minmax(0, 1fr) !important;
  }

  .etmam-auth .ea-phone .account-intl-phone__list {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    max-height: 56vh;
    border-radius: 1.05rem 1.05rem 0 0;
  }
}