/*
 * Styling inherits Breakdance global tokens (var(--bde-*)) where available,
 * and falls back to our own values when the theme/Breakdance isn't present.
 */
/*
 * Variable names + fallbacks verified against the live Breakdance
 * global-settings.css on this site (ison, Breakdance 2.7.2). Fallbacks mirror
 * the site's real token values so the widget still looks right if rendered
 * outside a Breakdance context.
 */
.avista-onb {
  max-width: 28rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* Honour the Breakdance gap when it's set, but never tighter than this floor. */
  gap: max(var(--bde-form-gap, 0px), 1.5rem);
  font-family: var(--bde-body-font-family, inherit);
  color: var(--bde-body-text-color, inherit);
}

.avista-onb__label {
  color: var(--bde-form-label-color, var(--bde-headings-color, #1a1717));
  font-weight: var(--bde-form-label-font-weight, 500);
  font-size: var(--bde-form-font-size, 18px);
  margin-bottom: var(--bde-form-after-label, 8px);
}

/*
 * Inputs follow the Gravity Forms "Orbital" look used by every other form on
 * the site: transparent, no box, a single bottom-border that darkens on focus.
 * The --avista-input-* custom properties are set by adoptGravityStyles() in the
 * JS when a Gravity Form is on the page, so the fields track whatever that form
 * actually renders; the fallbacks below are the standalone (no-GF) look.
 */
.avista-onb__input {
  width: 100%;
  padding:
    var(--bde-form-input-padding-top, 12px)
    0
    var(--bde-form-input-padding-bottom, 12px);
  background: var(--avista-input-bg, transparent);
  color: var(--avista-input-color, var(--bde-form-text-color, #1a1717));
  border-top: var(--avista-input-border-top, 0);
  border-right: var(--avista-input-border-right, 0);
  border-bottom: var(--avista-input-border-bottom, 1px solid var(--bde-form-input-border-color, #c3c4c7));
  border-left: var(--avista-input-border-left, 0);
  border-radius: var(--avista-input-radius, 0);
  font-size: var(--bde-form-font-size, 18px);
  font-family: inherit;
}

.avista-onb__input::placeholder {
  color: var(--bde-form-input-placeholder-color, #787e8b);
}

.avista-onb__input:focus {
  outline: none;
  background: var(--avista-input-bg, transparent);
  border-bottom-color: var(--bde-form-input-focused-border-color, #1a1717);
  box-shadow: none;
}

/*
 * Buttons mirror the site's dark Gravity Forms submit (#1A1717, pill-shaped).
 * The --avista-btn-* custom properties are set by adoptGravityStyles() from the
 * real submit button when a Gravity Form is on the page; the fallbacks are the
 * standalone look (Breakdance token, then the real site value).
 */
.avista-onb__btn {
  display: inline-block;
  /* Size to content (like the Gravity submit) rather than stretching to the
     full step width inside the flex columns. */
  align-self: flex-start;
  padding: var(--avista-btn-padding, var(--bde-button-padding-base, 14px 28px));
  border: var(--avista-btn-border, var(--bde-button-border-width, 1px) solid var(--bde-button-primary-border-color, transparent));
  border-radius: var(--avista-btn-radius, 999px);
  background: var(--avista-btn-bg, var(--bde-button-primary-background-color, #1a1717));
  color: var(--avista-btn-color, var(--bde-button-primary-text-color, #fff));
  font-size: var(--bde-button-font-size, 18px);
  font-weight: var(--bde-button-font-weight, 500);
  line-height: var(--bde-button-line-height, 1);
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.avista-onb__btn:hover {
  filter: brightness(0.9);
}

.avista-onb__btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Secondary / alternative action (rafræn skilríki, logout, B2C choice).
   Outline that tracks the adopted primary colour so the pair stays a set. */
.avista-onb__btn--alt {
  background: transparent;
  color: var(--avista-btn-bg, var(--bde-button-secondary-text-color, #1a1717));
  border: var(--bde-button-border-width, 1px) solid var(--avista-btn-bg, var(--bde-button-secondary-border-color, #1a1717));
}

.avista-onb__btn--alt:hover {
  background: var(--avista-btn-bg, var(--bde-button-secondary-background-color-hover, #1a1717));
  color: var(--avista-btn-color, var(--bde-button-secondary-text-color-hover, #fff));
}

.avista-onb__company {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: var(--bde-headings-color, inherit);
}

.avista-onb__hint {
  margin: 0;
  color: var(--bde-form-text-color, #374151);
  opacity: 0.85;
  font-size: 0.9rem;
}

.avista-onb__msg {
  margin: 0;
  font-size: 0.9rem;
  color: var(--bde-body-text-color, #555);
  opacity: 0.85;
  min-height: 1.2em;
}

.avista-onb__msg--error {
  color: #b00020;
  opacity: 1;
}

/* Logged-in state: greeting + account link + logout */
.avista-onb__greeting {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  color: var(--bde-body-text-color, inherit);
}

/* Each gateway step is its own flex column so its fields/buttons stack with a
   consistent, roomy gap (the input step is a <form>, hence included here). */
.avista-onb__form,
.avista-onb__result,
.avista-onb__choose,
.avista-onb__b2bapply,
.avista-onb__b2cregister,
.avista-onb__done,
.avista-onb__register-form {
  display: flex;
  flex-direction: column;
  gap: max(var(--bde-form-gap, 0px), 1.25rem);
}

/* A hidden step must stay hidden even though it is display:flex above */
.avista-onb [data-step][hidden] {
  display: none;
}

/* A label+input pair. Keeps the label hugging its input (via the label's own
   margin-bottom) so the roomy step gap falls *between* fields, not inside them. */
.avista-onb__field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Two-up rows in the B2C register form (name, postcode + city) */
.avista-onb__field-row {
  display: flex;
  gap: max(var(--bde-form-gap, 0px), 1rem);
}

.avista-onb__field-row > .avista-onb__field {
  flex: 1 1 0;
}

.avista-onb__field-row > .avista-onb__field--postcode {
  flex: 0 1 9rem;
}

/* Stack the two-up rows on narrow viewports */
@media (max-width: 28rem) {
  .avista-onb__field-row {
    flex-direction: column;
  }

  .avista-onb__field-row > .avista-onb__field--postcode {
    flex: 1 1 auto;
  }
}

/* Subtle "Til baka" link shown at the bottom of each navigational step */
.avista-onb__back {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0.25rem 0;
  margin: 0;
  color: var(--bde-body-text-color, #1a1717);
  opacity: 0.65;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}

.avista-onb__back::before {
  content: "\2190\00a0"; /* ← + non-breaking space */
}

.avista-onb__back:hover {
  opacity: 1;
  text-decoration: underline;
}

.avista-onb-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 99999;
  max-width: 90vw;
  padding: 0.8rem 1.1rem;
  border-radius: var(--bde-button-border-radius, 0.5rem);
  font-family: var(--bde-body-font-family, inherit);
  font-size: 0.95rem;
  color: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.avista-onb-toast--error {
  background: #b00020;
}

.avista-onb-toast--pending {
  background: var(--bde-brand-primary-color, #2b6cb0);
}