/* Self-contained so the screen looks right in a product with or without Bootstrap.
   Theme it by overriding the custom properties on :root in the product's stylesheet. */
:root {
  --ia-bg: #f5f2f0; --ia-card: #fff; --ia-ink: #2a2522; --ia-muted: #6b625d;
  --ia-accent: #3f6b52; --ia-accent-ink: #fff; --ia-border: #d9d2cd;
  --ia-error: #a3271f; --ia-info: #1f4a8a; --ia-radius: .6rem;
}
.ia-body { margin: 0; background: var(--ia-bg); color: var(--ia-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.ia-main { display: flex; justify-content: center; padding: 2rem 1rem; }
.ia-card { width: 100%; max-width: 28rem; background: var(--ia-card); border-radius: var(--ia-radius);
  box-shadow: 0 2px 12px rgba(0,0,0,.08); padding: 1.5rem; box-sizing: border-box; }
.ia-title { margin: 0 0 1rem; font-size: 1.4rem; }
.ia-tabs { display: flex; margin: 0 0 1.25rem; border-bottom: 1px solid var(--ia-border); }
.ia-tab { flex: 1 1 0; text-align: center; padding: .7rem .5rem; color: var(--ia-muted); text-decoration: none;
  border-bottom: 3px solid transparent; font-weight: 600; }
.ia-tab.is-active { color: var(--ia-ink); border-bottom-color: var(--ia-accent); }
.ia-tab:focus-visible, .ia-button:focus-visible, .ia-link-button:focus-visible, .ia-form a:focus-visible,
.ia-field input:focus-visible, .ia-check input:focus-visible { outline: 3px solid var(--ia-info); outline-offset: 2px; }
.ia-pane[hidden] { display: none; }
.ia-form { display: block; }
.ia-field { margin: 0 0 1rem; }
.ia-field label { display: block; margin: 0 0 .3rem; font-weight: 600; }
.ia-field input { width: 100%; box-sizing: border-box; padding: .6rem .7rem; font: inherit;
  border: 1px solid var(--ia-border); border-radius: .4rem; }
.ia-field.has-error input { border-color: var(--ia-error); }
.ia-check { margin: 0 0 .9rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.ia-check label { flex: 1 1 14rem; }
.ia-error { color: var(--ia-error); font-size: .9rem; margin-top: .3rem; flex-basis: 100%; }
.ia-alert { border: 1px solid var(--ia-error); color: var(--ia-error); background: #fdf1ef;
  border-radius: .4rem; padding: .6rem .8rem; margin: 0 0 1rem; }
.ia-alert.ia-info { border-color: var(--ia-info); color: var(--ia-info); background: #eef4fc; }
.ia-alpha-notice { background: #eef4fc; border-left: 4px solid var(--ia-info); padding: .6rem .8rem;
  border-radius: .3rem; margin: 0 0 1rem; font-size: .95rem; }
.ia-button { width: 100%; padding: .7rem 1rem; font: inherit; font-weight: 600; border: 0;
  border-radius: .4rem; background: var(--ia-accent); color: var(--ia-accent-ink); cursor: pointer; }
.ia-button[disabled] { opacity: .55; cursor: not-allowed; }
.ia-hint { color: var(--ia-muted); font-size: .85rem; margin: .4rem 0 0; }
.ia-switch { margin: 1rem 0 0; text-align: center; color: var(--ia-muted); }
.ia-inline { margin-top: .75rem; text-align: center; }
.ia-link-button { background: none; border: 0; padding: 0; color: var(--ia-info); text-decoration: underline; cursor: pointer; font: inherit; }
.ia-altcha { margin: 0 0 1rem; }