/* Onboarding wizard layout. Reuses marketing.css for colours/buttons/vars. */

.ob-body { background: var(--mk-bg-alt, #f5f7fa); }

.ob-main { padding: 2.5rem 1.25rem 4rem; max-width: 840px; }
/* The plan step shows the modules as side-by-side cards — give it more room. */
.ob-main--wide { max-width: 1000px; }

/* ── progress steps ────────────────────────────────────────────────── */
.ob-steps {
  list-style: none; display: flex; gap: .5rem; padding: 0; margin: 0 0 1.5rem;
}
.ob-step {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: .35rem; color: var(--mk-muted, #6b7280); font-size: .85rem; text-align: center;
}
.ob-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #e5e7eb; color: #374151; font-weight: 700;
}
.ob-step--done .ob-step__num,
.ob-step--current .ob-step__num {
  background: var(--mk-primary, #2b6cb0); color: #fff;
}
.ob-step--current .ob-step__label { color: var(--mk-fg, #1f2933); font-weight: 600; }

/* ── card ──────────────────────────────────────────────────────────── */
.ob-card {
  background: #fff; border: 1px solid var(--mk-border, #e5e7eb);
  border-radius: var(--mk-radius, 12px); padding: 2rem;
}
.ob-card__title { margin: 0 0 1rem; font-size: 1.5rem; }
.ob-card__hint { color: var(--mk-muted, #6b7280); margin: 0 0 1.25rem; }
.ob-card__hint--bonus { color: var(--mk-primary, #d6336c); font-weight: 600; }
.ob-breakdown { list-style: none; margin: 0; padding: 0; }
.ob-breakdown li { display: flex; justify-content: space-between; gap: 1rem; max-width: 16rem; }

/* ── form ──────────────────────────────────────────────────────────── */
.ob-form > div { margin-bottom: 1rem; }
.ob-form label { display: block; font-weight: 600; margin-bottom: .25rem; }
.ob-form input[type=text],
.ob-form input[type=email],
.ob-form input[type=password],
.ob-form input[type=number],
.ob-form select,
.ob-form textarea {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--mk-border, #e5e7eb);
  border-radius: 8px; font: inherit;
}
.ob-form input[type=checkbox],
.ob-form input[type=radio] { margin-right: .4rem; }
.ob-form ul { list-style: none; padding: 0; margin: 0; }
.ob-form .helptext { display: block; color: var(--mk-muted, #6b7280); font-size: .85rem; }
.ob-form .errorlist { list-style: none; padding: 0; margin: .25rem 0; color: #b91c1c; }

.ob-actions {
  display: flex; justify-content: space-between; gap: .75rem; margin-top: 1.5rem;
}

/* ── summary ───────────────────────────────────────────────────────── */
.ob-summary {
  display: grid; grid-template-columns: 1fr 2fr; gap: .5rem 1rem; margin: 1rem 0 1.5rem;
}
.ob-summary dt { color: var(--mk-muted, #6b7280); }
.ob-summary dd { margin: 0; font-weight: 600; word-break: break-word; }

/* ── no borders around grouped fields ──────────────────────────────────
   Django wraps choice fields (RadioSelect / CheckboxSelectMultiple) in a
   <fieldset>, which the browser draws a border around. Reset it everywhere
   (e.g. the domain choice in step 2 and the modules in step 3). */
.ob-form fieldset { border: 0; margin: 0; padding: 0; min-inline-size: auto; }
.ob-form legend { padding: 0; margin-bottom: .35rem; font-weight: 600; font-size: 1rem; }

.ob-field__label { display: block; font-weight: 600; margin-bottom: .35rem; }

/* domain choice — clean rows, no box, normal-weight option labels */
.ob-field--choice label { font-weight: 400; display: inline; }
.ob-field--choice input[type=radio] { margin-right: .4rem; }

/* ── free web address: input + fixed domain suffix ────────────────────── */
.ob-address { display: flex; align-items: stretch; max-width: 440px; }
.ob-address input { border-radius: 8px 0 0 8px; flex: 1 1 auto; min-width: 0; }
.ob-address__suffix {
  display: flex; align-items: center; padding: 0 .7rem; white-space: nowrap;
  background: #f1f5f9; color: var(--mk-muted, #6b7280);
  border: 1px solid var(--mk-border, #e5e7eb); border-left: 0; border-radius: 0 8px 8px 0;
}

/* availability status line under the address */
.ob-status { font-size: .85rem; margin-top: .35rem; min-height: 1.25em; }
.ob-status--available { color: #15803d; }
.ob-status--taken { color: #b91c1c; }

.ob-field--narrow { max-width: 260px; }

/* ── pricing cards (Tabler pricing style) ─────────────────────────────
   Side-by-side selectable price variants. The radio is visually hidden; the
   card is the clickable surface and shows its selected state via :checked. */
/* Up to 4 cards in a row (they share the width equally and wrap if narrower). */
.ob-prices { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.ob-price { flex: 1 1 120px; margin: 0; cursor: pointer; }
.ob-price__radio { position: absolute; opacity: 0; width: 0; height: 0; }
.ob-price__card {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  height: 100%; padding: 1.5rem 1rem; text-align: center;
  background: #fff; border: 2px solid var(--mk-border, #e5e7eb);
  border-radius: var(--mk-radius, 12px);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ob-price:hover .ob-price__card { border-color: #cbd5e1; }
.ob-price__radio:checked + .ob-price__card {
  border-color: var(--mk-primary, #2b6cb0);
  box-shadow: 0 0 0 3px rgba(43, 108, 176, .15);
}
.ob-price__radio:focus-visible + .ob-price__card {
  outline: 2px solid var(--mk-primary, #2b6cb0); outline-offset: 2px;
}
.ob-price__name {
  font-weight: 600; font-size: .8rem; letter-spacing: .03em;
  text-transform: uppercase; color: var(--mk-muted, #6b7280);
}
.ob-price__amount { font-size: 1.6rem; font-weight: 700; white-space: nowrap; }

/* ── web-address tiles (progressive disclosure) ───────────────────────── */
.ob-tiles { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
/* the radios only carry the form value — the tiles are the clickable surface */
.ob-tile__radio { position: absolute; opacity: 0; width: 0; height: 0; }

.ob-tile {
  border: 2px solid var(--mk-border, #e5e7eb); border-radius: var(--mk-radius, 12px);
  padding: 1rem 1.1rem; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.ob-tile:hover { border-color: #cbd5e1; }
.ob-tile--selected {
  border-color: var(--mk-primary, #2b6cb0);
  box-shadow: 0 0 0 3px rgba(43, 108, 176, .12);
}
.ob-tile--muted { background: #f8fafc; }

.ob-tile__head { display: flex; align-items: center; gap: .6rem; }
.ob-tile__dot {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--mk-border, #cbd5e1); background: #fff;
}
.ob-tile__dot--on {
  border-color: var(--mk-primary, #2b6cb0);
  box-shadow: inset 0 0 0 3px var(--mk-primary, #2b6cb0);
}
.ob-tile__title { font-weight: 600; }
.ob-tile__tag {
  margin-left: auto; font-size: .75rem; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--mk-primary, #2b6cb0);
  background: rgba(43, 108, 176, .1); padding: .15rem .5rem; border-radius: 999px;
}
.ob-tile__body { margin-top: .85rem; }
/* collapsed: kept in the DOM (still submits) but visually hidden */
.ob-tile__body--collapsed { display: none; }

.ob-subopt { display: block; font-weight: 400; margin: .35rem 0; cursor: pointer; }
.ob-subopt input[type=radio] { margin-right: .4rem; }

.ob-hint { color: var(--mk-muted, #6b7280); font-size: .9rem; margin: 0 0 .6rem; }

/* ── the operator's pencil ─────────────────────────────────────────────
   The wizard's prose is content the operator writes. The pencil itself comes
   from billing/css/module-cards.css (.pricing-edit), so it looks the same here
   as on the module cards; only where it sits is the wizard's business — out of
   the text's way, in the region's top right corner. */
.ob-card__title > .pricing-edit,
.ob-card__hint > .pricing-edit,
.ob-field__label > .pricing-edit,
.ob-hint > .pricing-edit,
.ob-field .helptext > .pricing-edit { float: right; margin-left: .5rem; }

/* single-input address row + inline check button */
.ob-address--single { max-width: 480px; }
.ob-address--single:has(.ob-address__btn) input { border-radius: 8px 0 0 8px; }
.ob-address__btn { border-radius: 0 8px 8px 0; white-space: nowrap; }

/* alternative-TLD chips */
.ob-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .5rem; }
.ob-chips__label { color: var(--mk-muted, #6b7280); font-size: .85rem; margin-right: .2rem; }
.ob-chip {
  font: inherit; font-size: .85rem; cursor: pointer;
  border: 1px solid var(--mk-border, #e5e7eb); background: #fff;
  border-radius: 999px; padding: .25rem .7rem; color: var(--mk-fg, #1f2933);
  transition: border-color .15s ease, background .15s ease;
}
.ob-chip:hover { border-color: var(--mk-primary, #2b6cb0); background: rgba(43, 108, 176, .06); }