/* The same tokens the portal defines. Declared here too so the auth layer
   still stands alone if it is lifted out; when both are loaded the values are
   identical, and a change to one variable moves both. */
:root {
  --fw-ink: #111;
  --fw-muted: #6b6b6b;
  --fw-line: #e4e4e4;
  --fw-radius: 3px;
}

/**
 * Self-contained styles for the login dialog.
 *
 * Deliberately independent of the theme's Bootstrap so the auth layer can be
 * lifted out unchanged. Everything is scoped under .fw-auth.
 */

.fw-auth__open {
  padding: 0.65rem 1.25rem;
  border: 1px solid currentColor;
  border-radius: var(--fw-radius);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.fw-auth__dialog {
  /* A modal dialog centres on the browser's own `position: fixed; inset: 0;
     margin: auto`. All three were lost — `position: relative` here took the
     first, and Tailwind's preflight resets margin to 0 on every element — so
     the dialog rendered flush against the top-left corner. Stated in full
     rather than relying on the UA sheet, since something in the cascade
     already resolved this to `absolute` once. `fixed` is still a containing
     block, so the close button in the corner keeps its anchor. */
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(26rem, calc(100vw - 2rem));
  max-width: min(26rem, calc(100vw - 2rem));
  width: min(30rem, calc(100vw - 2rem));
  padding: 2rem;
  border: 0;
  border-radius: var(--fw-radius);
  color: var(--fw-ink);
  background: #fff;
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.2);
}

.fw-auth__dialog::backdrop {
  background: rgb(0 0 0 / 0.45);
}

.fw-auth__close-form {
  display: flex;
  justify-content: flex-end;
  margin: -1rem -1rem 0 0;
}

.fw-auth__close {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--fw-radius);
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.fw-auth__title {
  margin: 0 0 1.5rem;
  font-size: 2rem;
  font-weight: 300;
  text-align: center;
}

.fw-auth__methods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.75rem;
}

.fw-auth__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 0;
  border-radius: var(--fw-radius);
  background: #f2f2f2;
  font: inherit;
  cursor: pointer;
}

.fw-auth__pill[aria-selected='true'] {
  background: var(--fw-ink);
  color: #fff;
}

.fw-auth__pill:disabled {
  color: #9a9a9a;
  cursor: not-allowed;
}

.fw-auth__input {
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid #cfcfcf;
  border-radius: var(--fw-radius);
  font: inherit;
}

.fw-auth__input:disabled {
  background: #fafafa;
  color: #9a9a9a;
}

.fw-auth__hint {
  margin: 0 0 1.25rem;
  color: #555;
  font-size: 0.95rem;
  text-align: center;
}

.fw-auth__submit {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 0;
  border-radius: var(--fw-radius);
  background: var(--fw-ink);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.fw-auth__submit:disabled {
  background: #e6e6e6;
  color: #9a9a9a;
  cursor: default;
}

.fw-auth__status {
  min-height: 1.5rem;
  margin: 1rem 0 0;
  font-size: 0.95rem;
  text-align: center;
}

.fw-auth__status[data-kind='error'] {
  color: #b3261e;
}

.fw-auth__status[data-kind='ok'] {
  color: #1b7f39;
}

/* All panels occupy one grid cell, so the dialog is as tall as the largest
   method needs and does not resize when switching between them. The inactive
   ones are hidden but still counted, which is what keeps the height steady. */
.fw-auth__panels {
  display: grid;
}

/* Every panel keeps its place in the one grid cell, so the stack is as tall as
   the largest method needs and nothing moves when switching. Only the open one
   is visible. */
.fw-auth__panels > .fw-auth__panel {
  grid-area: 1 / 1;
  visibility: hidden;
}

.fw-auth__panels > .fw-auth__panel.is-open {
  visibility: visible;
}

/* A method that is not built yet reads as unavailable rather than as a choice. */
.fw-auth__pill--soon {
  background: #f0f0f0;
  color: #8a8a8a;
}

.fw-auth__pill--soon[aria-selected="true"] {
  background: #e4e4e4;
  color: var(--fw-muted);
}

/* ---- Scoped past the theme -------------------------------------------
   These are plain <button> and <input> elements on a page whose theme styles
   both, and a single-class rule loses to it — which is why unselected pills
   came out black instead of grey, and why only the aria-selected rule appeared
   to work. Everything below is scoped under .fw-auth so it wins outright. */

.fw-auth .fw-auth__pill {
  /* The theme draws a border on every button, and the plain `border: 0` above
     loses to it — which left the grey pills outlined like empty boxes. */
  border: 0;
  background: #f2f2f2;
  color: var(--fw-ink);
}

.fw-auth .fw-auth__pill[aria-selected='true'] {
  background: var(--fw-ink);
  color: #fff;
}

/* A method that is not built yet stays grey — it must not look like a working
   choice. */
.fw-auth .fw-auth__pill--soon {
  background: #ededed;
  color: #8a8a8a;
}

/* Open, but still unavailable: grey keeps that clear while the underline says
   which panel you are looking at. Without it, clicking Smart-ID changed the
   fields with nothing marking the tab as open. */
.fw-auth .fw-auth__pill--soon[aria-selected='true'] {
  background: #e0e0e0;
  color: #5f5f5f;
  box-shadow: inset 0 -3px 0 #8a8a8a;
}

/* Padding was adding to a 100% width, so the fields ran past the dialog. The
   action shares their padding too, or it stands taller than what it submits. */
.fw-auth .fw-auth__input,
.fw-auth .fw-auth__submit {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 0.6rem 0.8rem;
}

/* One size, whichever method is open: the panels share a grid cell, so the
   stack is as tall as the largest method needs — no fixed height to guess at,
   and it stays right if a method gains a field. The fields sit in the middle of
   that space, so they do not jump when switching methods. */
.fw-auth__panels > .fw-auth__panel {
  display: grid;
  min-width: 0;
}

.fw-auth__body {
  align-self: center;
  width: 100%;
}

/* The action is the card's footer — one button for every method, below the
   status line, so a notice about the attempt is never pushed under it. */
.fw-auth__foot {
  margin-top: 0.4rem;
}

.fw-auth__hint {
  margin-top: 0;
}

/* The second line is what happens next, not what to do — so it steps back. */
.fw-auth .fw-auth__hint {
  margin: 0 0 0.3rem;
}

/* The status line keeps its space whether or not it says anything: taking it
   out of the flow when empty is what made the dialog grow the moment a message
   appeared. Measured in the text's own units rather than a pixel guess, and it
   sits clear of the action below it. */
.fw-auth .fw-auth__status {
  margin: 0.7rem 0 0;
  /* Two lines held open from the start. Every message this dialog shows —
     waiting for PIN1, or a failure asking to retry — fits in two, so the
     dialog never changes size while the buyer is reading it. One reserved line
     was not enough: a wrapped message still pushed the bottom edge down. */
  min-height: 3em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.fw-auth .fw-auth__status:empty {
  visibility: hidden;
}

/* In the corner, inside the card rather than hanging off its edge: the glyph
   sat on the rounded corner and read as a separate tile stuck to the dialog. */
.fw-auth__close-form {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  margin: 0;
}

/* A close glyph, not a second action. The theme draws a border and a filled
   background on every button — the unscoped rule above loses to it, which is
   what put a black rounded tile in the corner. Scoped here so it wins. */
.fw-auth .fw-auth__close {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  /* The theme's buttons carry `min-height: 40px` and shrink the font to its own
     size, so the unscoped 2rem box came out oblong with a tiny glyph in it. */
  width: 2rem;
  height: 2rem;
  min-height: 0;
  padding: 0;
  /* Transparent rather than absent, so the hover state colours a border that is
     already there and the glyph does not shift by a pixel. */
  border: 1px solid transparent;
  border-radius: var(--fw-radius);
  background: transparent;
  box-shadow: none;
  color: var(--fw-muted);
  font-size: 1.5rem;
  line-height: 1;
}

/* Hover and focus say the same thing, the way .fw-cart__remove does it in the
   portal: the glyph darkens over the faintest tint. The theme fills every
   button on hover, which turned this into a dark tile reading as the primary
   action — the background here is what overrides that. */
.fw-auth .fw-auth__close:hover,
.fw-auth .fw-auth__close:focus-visible {
  border-color: var(--fw-line);
  background: #f6f6f6;
  color: var(--fw-ink);
}

/* Keyboard focus needs to carry across the room, which a tint alone does not —
   one deliberate ring, not the browser's blue over the theme's border. */
.fw-auth .fw-auth__close:focus-visible {
  outline: 2px solid var(--fw-ink);
  outline-offset: 1px;
}

/* The action holds focus from the moment the dialog opens, so its ring is the
   dialog's own rather than the browser's blue, held clear of the black fill. */
.fw-auth .fw-auth__submit:focus-visible {
  outline: 2px solid var(--fw-ink);
  outline-offset: 2px;
}

/* Balanced: the pills' own bottom margin was twice the gap under the hint, so
   the centred content looked pushed down. */
.fw-auth .fw-auth__methods {
  margin-bottom: 0.85rem;
}

.fw-auth__slot {
  position: relative;
}

/* The Smart-ID code the phone must also show — the one thing to compare, so
   it is set large, laid over the id code field in that field's own box. */
.fw-auth .fw-auth__code {
  position: absolute;
  inset: 0 0 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--fw-ink);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.3em;
}

.fw-auth .fw-auth__code[hidden] {
  display: none;
}

/* Marks a method running against its provider's test service. */
.fw-auth .fw-auth__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  background: #b3261e;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  vertical-align: middle;
}