/* ============================================================================
   Signup — marketing-site style registration page
   ----------------------------------------------------------------------------
   Visual language now matches the Elken marketing site: section banner +
   ek-container + ek-card sections + an official product card grid for the
   starter-product selection. Tokens only — no hex, no px font-sizes, no
   !important. Section cards rely on the .ek-card base (elken-ui.css §2) for
   surface, border, radius and padding; this file only adds spacing + titles.
   ============================================================================ */

/* ---------- Page shell ---------- */
.signup-section { padding-top: var(--ek-48); padding-bottom: var(--ek-64); }
.signup-container {
  /* Same column formula as .sec-banner__inner so the card column spans the
     full banner width (left/right edges align with "Create your account."). */
  width: min(var(--ek-content-max), 100% - (var(--ek-page-pad) * 2));
  margin-inline: auto;
}

/* Section cards already get .ek-card styling. Just space them + title. */
.sec-block + .sec-block { margin-top: var(--ek-20); }
.sec-title {
  margin: 0 0 var(--ek-16);
  padding-bottom: var(--ek-12);
  border-bottom: 1px solid var(--ek-border);
  font-size: var(--ek-h4);
  font-weight: var(--ek-w-bold);
  color: var(--ek-blue);
}
.sec-hint {
  margin: calc(-1 * var(--ek-4)) 0 var(--ek-16);
  font-size: var(--ek-small);
  color: var(--ek-muted);
}

/* ---------- Field grid ---------- */
.reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ek-16); }
.field-row { grid-column: auto; min-width: 0; }
.field-row--full { grid-column: 1 / -1; }

/* A .field-row is a grid container (water-pages.css) whose height is dictated
   by the tallest sibling in .reg-grid. With the default align-content, the
   auto rows stretch to fill that height — so when Referrer ID grows a hint
   below it, the Actual Referrer ID input beside it stretches too (layout
   shift). Pack the rows from the top instead: hints/errors take the space
   they need, inputs keep their natural height. */
.field-row { align-content: start; }

.field-row > label {
  display: block;
  font-size: var(--ek-small);
  font-weight: var(--ek-w-bold);
  color: var(--ek-charcoal);
  margin-bottom: var(--ek-8);
}
.field-row > label .req-star { color: var(--ek-blue); margin-left: 2px; }
.field-row .ek-input,
.field-row .ek-select,
.field-row textarea.ek-input { width: 100%; }

/* Inline field error (set by signup.html) */
.field-err-text,
.field-err {
  display: block;
  color: var(--fail, rgba(199, 56, 56, 1));
  font-size: var(--ek-caption);
  margin-top: var(--ek-4);
}

/* Inline field hint — referrer lookup status, country inheritance note */
.field-hint {
  display: block;
  margin-top: var(--ek-4);
  font-size: var(--ek-small);
  line-height: var(--ek-small-lh);
  color: var(--ek-muted);
}
.field-hint.is-ok { color: var(--ek-success); }
.field-hint.is-err { color: var(--ek-error); }

/* ---------- Product grid (official card style) ---------- */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ek-24);
}

@media (max-width: 1024px) {
  .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .prod-grid { grid-template-columns: 1fr; }
}
.prod-empty {
  grid-column: 1 / -1;
  padding: var(--ek-32);
  text-align: center;
  color: var(--ek-muted);
  font-size: var(--ek-small);
}

/* The grid reuses the Repeat Purchase card component (.rp-product-card from
   repeat-purchase.css) so the two pages share one visual language. Only the
   signup-specific selection states live here. */
.rp-product-card.is-added {
  border-color: var(--ek-blue);
  box-shadow: 0 0 0 1px var(--ek-blue), var(--ek-shadow-sm);
}

.rp-product-card__media--empty { background: var(--ek-surface-sunken); }

/* "✓ Added" corner badge (reused class name from the old signup card) */
.prod-card__badge {
  position: absolute;
  top: var(--ek-12);
  right: var(--ek-12);
  display: inline-flex;
  align-items: center;
  gap: var(--ek-4);
  padding: 2px var(--ek-8);
  border-radius: var(--ek-radius-pill);
  background: var(--ek-blue);
  color: var(--ek-white);
  font-size: var(--ek-caption);
  font-weight: var(--ek-w-bold);
  letter-spacing: .02em;
}

/* Added foot: sunken panel with qty stepper + remove (RP has no added state) */
.rp-product-card__foot--added {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ek-12);
  padding: var(--ek-12) var(--ek-24);
  background: var(--ek-surface-sunken);
}
.rp-product-card__remove {
  border: 0;
  background: transparent;
  color: var(--ek-muted);
  font: inherit;
  font-size: var(--ek-small);
  font-weight: var(--ek-w-bold);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--ek-fast) var(--ek-ease);
}
.rp-product-card__remove:hover { color: var(--ek-error); }

/* Quantity stepper (shared with checkout) */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ek-border);
  border-radius: var(--ek-radius);
  overflow: hidden;
  background: var(--ek-surface);
}
.qty-stepper button {
  width: 32px; height: 36px; border: 0; background: transparent;
  color: var(--ek-charcoal); cursor: pointer; font-size: var(--ek-h4);
  display: grid; place-items: center;
}
.qty-stepper button:hover { background: var(--ek-surface-sunken); }
.qty-stepper .qty-val {
  width: 44px; height: 36px; border: 0; text-align: center;
  font-size: var(--ek-small); color: var(--ek-charcoal-deep);
  -moz-appearance: textfield; appearance: textfield; background: var(--ek-surface);
}
.qty-stepper .qty-val:disabled { color: var(--ek-muted); background: var(--ek-surface-sunken); }
.qty-stepper .qty-val::-webkit-outer-spin-button,
.qty-stepper .qty-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Subtotal bar */
.prod-summary-bar {
  display: flex; align-items: center; gap: var(--ek-16); flex-wrap: wrap;
  margin-top: var(--ek-20); padding: var(--ek-12) var(--ek-16);
  background: var(--ek-info-tint); border: 1px solid var(--ek-border);
  border-radius: var(--ek-radius); font-size: var(--ek-small); color: var(--ek-charcoal);
}
.prod-summary-bar b { color: var(--ek-blue); }

/* ---------- Delivery method (radio group) ---------------------------------- */
.radio-group { display: flex; gap: var(--ek-12); flex-wrap: wrap; }
.radio-item {
  display: flex; align-items: center; gap: var(--ek-8);
  padding: var(--ek-12) var(--ek-16);
  border: 1.5px solid var(--ek-border); border-radius: var(--ek-radius);
  cursor: pointer; background: var(--ek-surface);
  font-size: var(--ek-small); color: var(--ek-charcoal);
}
.radio-item:has(input:checked) { border-color: var(--ek-blue); background: var(--ek-info-tint); color: var(--ek-charcoal-deep); }
.radio-item:has(input:focus-visible) { box-shadow: var(--ek-focus-ring); }

/* ---------- Payment method selector (matches checkout) --------------------- */
.pay-method-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--ek-12); }
.pay-method {
  position: relative; display: flex; align-items: center; gap: var(--ek-12);
  padding: var(--ek-16);
  border: 1.5px solid var(--ek-border); border-radius: var(--ek-radius);
  cursor: pointer; background: var(--ek-surface);
  transition: border-color var(--ek-fast) var(--ek-ease), background var(--ek-fast) var(--ek-ease), transform var(--ek-fast) var(--ek-ease);
}
.pay-method:hover { border-color: var(--ek-border-strong); transform: translateY(-1px); }
.pay-method input { position: absolute; opacity: 0; pointer-events: none; }
.pay-method-icon {
  width: var(--ek-40); height: var(--ek-40); border-radius: var(--ek-radius-sm);
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--ek-surface-sunken); color: var(--ek-charcoal);
}
.pay-method-body { flex: 1; min-width: 0; }
.pay-method-name { font-weight: var(--ek-w-medium); font-size: var(--ek-small); color: var(--ek-charcoal); }
.pay-method-sub { font-size: var(--ek-caption); color: var(--ek-muted); margin-top: 2px; }
.pay-method-check {
  width: 20px; height: 20px; border-radius: var(--ek-radius-pill);
  border: 1.5px solid var(--ek-border); display: grid; place-items: center;
  color: transparent; flex-shrink: 0; transition: all var(--ek-fast) var(--ek-ease);
}
.pay-method:has(input:checked) { border-color: var(--ek-blue); background: var(--ek-info-tint); }
.pay-method:has(input:checked) .pay-method-icon { background: var(--ek-blue); color: var(--ek-white); }
.pay-method:has(input:checked) .pay-method-check { background: var(--ek-blue); border-color: var(--ek-blue); color: var(--ek-white); }
.pay-method:has(input:focus-visible) { box-shadow: var(--ek-focus-ring); }

/* ---------- Method info cards (card / ussd / bank / cod) -------------------
   .method-info-card is .ek-card.ek-card--quiet now (elken-ui.css §2) — quiet
   because it's nested inside the (flattened) .sec-block "Payment Method"
   section, and a card inside a card should not double up on shadow. */
.method-info-card { margin-top: var(--ek-16); }
.method-info-card > div:first-child {
  margin-bottom: var(--ek-8); font-size: var(--ek-h4);
  font-weight: var(--ek-w-bold); color: var(--ek-charcoal);
}
.method-info-card p { margin: 0 0 var(--ek-12); font-size: var(--ek-small); color: var(--ek-muted); }

.ussd-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--ek-h4); font-weight: var(--ek-w-bold); color: var(--ek-blue);
  padding: var(--ek-16) var(--ek-20);
  background: var(--ek-info-tint); border: 1.5px dashed var(--ek-blue);
  border-radius: var(--ek-radius); text-align: center; letter-spacing: .04em;
}
.bank-rows { display: flex; flex-direction: column; gap: var(--ek-8); margin-bottom: var(--ek-12); }
.bank-row { display: flex; justify-content: space-between; gap: var(--ek-12); font-size: var(--ek-small); }
.bank-row span { color: var(--ek-muted); }
.bank-row b { color: var(--ek-charcoal-deep); }

/* ---------- Submit + switch ------------------------------------------------ */
.reg-submit-wrap { margin-top: var(--ek-24); }
.reg-submit-wrap .ek-btn { width: 100%; }
.auth-switch-reg {
  text-align: center; font-size: var(--ek-small); color: var(--ek-muted);
  margin: var(--ek-20) 0 0;
}
.auth-switch-reg a { color: var(--ek-blue); font-weight: var(--ek-w-medium); margin-left: var(--ek-4); }
.auth-switch-reg a:hover { text-decoration: underline; }

/* ---------- Responsive: stack to a single column --------------------------- */
@media (max-width: 900px) {
  .signup-container { max-width: 100%; }
}
@media (max-width: 640px) {
  .signup-section { padding-top: var(--ek-32); }
  .reg-grid { grid-template-columns: 1fr; }
  .sec-block { padding: var(--ek-20); }
  .pay-method-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Product detail modal (View product) ----------------------------- */
/* "View product" is a <button> styled like the shared card link */
.rp-product-card__view {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit;
}
.pv-overlay {
  position: fixed; inset: 0; z-index: var(--ek-z-modal);
  display: flex; align-items: center; justify-content: center;
  background: rgba(13, 20, 23, .55);
  padding: var(--ek-16);
}
.pv-dialog {
  position: relative; width: 100%; max-width: 760px;
  background: var(--ek-surface);
  border-radius: var(--ek-radius-lg);
  box-shadow: var(--ek-shadow-lg);
  padding: var(--ek-24) var(--ek-32) var(--ek-32);
}
.pv-dialog__topbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--ek-16); margin-bottom: var(--ek-20);
}
.pv-dialog__code {
  font-size: var(--ek-h4); font-weight: var(--ek-w-bold);
  color: var(--ek-charcoal); letter-spacing: .02em;
}
.pv-dialog__close {
  width: 32px; height: 32px; border: none; border-radius: var(--ek-radius-pill);
  background: transparent; color: var(--ek-muted);
  font-size: var(--ek-h3); line-height: 1; cursor: pointer;
}
.pv-dialog__close:hover { color: var(--ek-charcoal); background: var(--ek-grey-light); }
.pv-dialog__body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--ek-32); align-items: center;
}
.pv-dialog__media {
  display: flex; align-items: center; justify-content: center;
  min-height: 260px; padding: var(--ek-16);
  background: var(--ek-surface); border-radius: var(--ek-radius);
}
.pv-dialog__media img {
  max-width: 100%; max-height: 300px; object-fit: contain;
}
.pv-dialog__name {
  margin: 0 0 var(--ek-20);
  font-size: var(--ek-h3); color: var(--ek-charcoal);
}
.pv-spec { margin: 0; }
.pv-spec__row {
  display: grid; grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--ek-16); align-items: baseline;
  padding: var(--ek-8) 0;
}
.pv-spec__row dt { font-size: var(--ek-small); color: var(--ek-muted); }
.pv-spec__row dd {
  margin: 0; font-size: var(--ek-small); color: var(--ek-body-ink);
  font-variant-numeric: var(--ek-num);
}
@media (max-width: 640px) {
  .pv-dialog { padding: var(--ek-20); }
  .pv-dialog__body { grid-template-columns: 1fr; gap: var(--ek-20); }
  .pv-dialog__media { min-height: 200px; }
  .pv-spec__row { grid-template-columns: 110px minmax(0, 1fr); }
}

/* ---------- Paystack payment modals --------------------------------------- */
.ps-overlay {
  position: fixed; inset: 0; z-index: var(--ek-z-modal);
  display: flex; align-items: center; justify-content: center;
  background: rgba(13, 20, 23, .55);
  padding: var(--ek-16);
}
.ps-overlay--ck { background: rgba(13, 20, 23, .72); }

/* Step 1 — email + amount confirm dialog */
.ps-dialog {
  position: relative; width: 100%; max-width: 420px;
  background: var(--ek-surface);
  border-radius: var(--ek-radius-lg);
  box-shadow: var(--ek-shadow-lg);
  padding: var(--ek-24);
}
.ps-dialog__close {
  position: absolute; top: var(--ek-12); right: var(--ek-12);
  width: 32px; height: 32px; border: none; border-radius: var(--ek-radius-pill);
  background: transparent; color: var(--ek-muted);
  font-size: var(--ek-h3); line-height: 1; cursor: pointer;
}
.ps-dialog__close:hover { color: var(--ek-charcoal); background: var(--ek-grey-light); }
.ps-dialog__title { margin: 0 0 var(--ek-8); font-size: var(--ek-h3); color: var(--ek-charcoal); }
.ps-dialog__note { margin: 0 0 var(--ek-16); font-size: var(--ek-small); color: var(--ek-muted); }
.ps-amount-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ek-12) var(--ek-16); margin: var(--ek-16) 0;
  background: var(--ek-surface-sunken); border-radius: var(--ek-radius);
  font-size: var(--ek-small); color: var(--ek-muted);
}
.ps-amount-row b { font-size: var(--ek-h4); color: var(--ek-success); font-variant-numeric: var(--ek-num); }
.ps-dialog__go { width: 100%; }

/* Step 2 — Paystack checkout (test) page */
.ps-ck-wrap { position: relative; width: 100%; max-width: 560px; }
.ps-ck-close {
  position: absolute; top: calc(-1 * var(--ek-32)); right: 0;
  border: none; background: transparent; color: var(--ek-white);
  font-size: var(--ek-h2); line-height: 1; cursor: pointer;
}
.ps-ck { display: flex; background: var(--ek-surface); border-radius: var(--ek-radius); overflow: hidden; box-shadow: var(--ek-shadow-lg); }

.ps-ck__side {
  flex: 0 0 168px; padding: var(--ek-20) var(--ek-16);
  background: var(--ek-surface-sunken); border-right: 1px solid var(--ek-border);
}
.ps-ck__side-title {
  font-size: var(--ek-caption); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ek-muted); margin: 0 0 var(--ek-16);
}
.ps-ck__channel {
  display: flex; align-items: center; gap: var(--ek-8);
  padding: var(--ek-8); border-radius: var(--ek-radius-sm);
  font-size: var(--ek-small); color: var(--ek-body-ink); cursor: pointer;
}
.ps-ck__channel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ps-ck__channel.is-active { color: var(--ek-success); font-weight: var(--ek-w-medium); }
.ps-ck__channel:has(input:checked) { color: var(--ek-success); font-weight: var(--ek-w-medium); }
.ps-ck__channel:hover { background: var(--ek-grey-mid); }

.ps-ck__main { flex: 1; padding: var(--ek-20) var(--ek-24); text-align: center; }
.ps-ck__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ek-16);
  margin-bottom: var(--ek-16);
}
.ps-ck__head-right { text-align: right; }
.ps-ck__email { font-size: var(--ek-caption); color: var(--ek-muted); }
.ps-ck__payline { font-size: var(--ek-small); color: var(--ek-muted); }
.ps-ck__payline b { color: var(--ek-success); font-variant-numeric: var(--ek-num); }
.ps-ck__testrow { display: flex; justify-content: center; margin-bottom: var(--ek-16); }
.ps-ck__test {
  padding: var(--ek-4) var(--ek-16); border-radius: var(--ek-radius-sm);
  background: var(--ek-warning-tint); color: var(--ek-warning);
  font-size: var(--ek-caption); font-weight: var(--ek-w-medium);
  letter-spacing: .08em; text-transform: uppercase;
}
.ps-ck__hint { margin: 0 0 var(--ek-16); font-size: var(--ek-small); color: var(--ek-body-ink); }

.ps-ck__options { display: flex; flex-direction: column; gap: var(--ek-8); margin-bottom: var(--ek-16); }
.ps-ck__option {
  display: flex; align-items: center; gap: var(--ek-12);
  padding: var(--ek-12) var(--ek-16); text-align: left;
  border: 1px solid var(--ek-border-strong); border-radius: var(--ek-radius-sm);
  font-size: var(--ek-small); color: var(--ek-body-ink); cursor: pointer;
}
.ps-ck__option:hover { border-color: var(--ek-aqua); }
.ps-ck__option:has(input:checked) { border-color: var(--ek-success); }
.ps-ck__option input { accent-color: var(--ek-success); }

.ps-ck__error {
  margin-bottom: var(--ek-12); padding: var(--ek-8) var(--ek-12);
  background: var(--ek-error-tint); color: var(--ek-error);
  border-radius: var(--ek-radius-sm); font-size: var(--ek-caption);
}
.ps-ck__paybtn {
  display: block; width: 100%; padding: var(--ek-12);
  border: none; border-radius: var(--ek-radius-sm);
  background: var(--ek-success); color: var(--ek-white);
  font-size: var(--ek-text); font-weight: var(--ek-w-bold); cursor: pointer;
}
.ps-ck__paybtn:hover { opacity: .92; }
.ps-ck__another {
  margin-top: var(--ek-12); border: none; background: transparent;
  font-size: var(--ek-small); color: var(--ek-muted); cursor: pointer;
}
.ps-ck__another:hover { color: var(--ek-charcoal); text-decoration: underline; }

.ps-ck__success {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--ek-16); min-height: 280px;
}
.ps-ck__success p { margin: 0; font-size: var(--ek-h4); font-weight: var(--ek-w-medium); color: var(--ek-success); }

.ps-ck__secured {
  display: flex; align-items: center; justify-content: center; gap: var(--ek-4);
  margin-top: var(--ek-16); font-size: var(--ek-caption); color: var(--ek-white);
}
.ps-ck__secured b { font-weight: var(--ek-w-bold); }

@media (max-width: 640px) {
  .ps-ck { flex-direction: column; }
  .ps-ck__side { flex: none; border-right: none; border-bottom: 1px solid var(--ek-border); }
  .ps-ck-close { top: calc(-1 * var(--ek-40)); right: 0; }
}

/* Read-only, system-filled fields (e.g. auto-locked Reporting Center ID,
   inherited Country, auto-generated Member ID): greyed, no focus ring,
   clearly not editable — mirrors checkout.css .is-locked. */
.ek-input.input-locked,
.ek-select.input-locked,
.ek-input.input-locked:focus,
.ek-select.input-locked:focus {
  background: var(--ek-grey-light);
  color: var(--ek-muted);
  border-color: var(--ek-border, #e3e5ee);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   Member ID credential modal — shown once after signup payment succeeds.
   Force-confirm: no overlay / Esc dismissal, "Got it" is the only way out.
   All values from elken-tokens — nothing hardcoded (system rule).
   ========================================================================== */
.mid-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(13, 20, 23, .5);
  display: flex; align-items: center; justify-content: center;
  padding: var(--ek-24);
}
.mid-dialog {
  width: 420px; max-width: 100%;
  background: var(--ek-surface);
  border: 1px solid var(--ek-border);
  border-radius: var(--ek-radius-lg);
  box-shadow: var(--ek-shadow-lg);
  padding: var(--ek-24);
  font-family: var(--ek-font);
}
.mid-head { display: flex; align-items: flex-start; gap: var(--ek-12); }
.mid-check {
  width: 40px; height: 40px; flex: none;
  border-radius: var(--ek-radius-pill);
  background: var(--ek-success-tint); color: var(--ek-success);
  display: inline-flex; align-items: center; justify-content: center;
}
.mid-title { margin: 0; font-size: var(--ek-h3); line-height: var(--ek-h3-lh); font-weight: var(--ek-w-bold); color: var(--ek-blue); }
.mid-sub { margin: var(--ek-4) 0 0; font-size: var(--ek-small); line-height: 1.5; color: var(--ek-muted); }
.mid-idbox {
  margin-top: var(--ek-20);
  background: var(--ek-surface-sunken);
  border: 1px solid var(--ek-border);
  border-radius: var(--ek-radius);
  padding: var(--ek-16);
  display: flex; align-items: center; justify-content: space-between; gap: var(--ek-12);
}
.mid-idlabel { margin: 0 0 var(--ek-4); font-size: var(--ek-caption); line-height: var(--ek-caption-lh); color: var(--ek-muted); }
.mid-idvalue {
  margin: 0; font-size: 22px; font-weight: var(--ek-w-bold);
  letter-spacing: 1px; color: var(--ek-blue);
  font-variant-numeric: var(--ek-num);
  transition: color .2s var(--ease-out, ease);
}
.mid-copy {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--ek-blue);
  border: 1px solid var(--ek-border-strong);
  border-radius: var(--ek-radius);
  padding: 8px 14px; font-size: var(--ek-small); font-weight: var(--ek-w-medium);
  font-family: inherit; cursor: pointer;
  transition: all .2s var(--ease-out, ease);
}
.mid-copy:hover { background: var(--ek-grey-light); }
.mid-copy.is-copied { background: var(--ek-success-tint); border-color: var(--ek-success); color: var(--ek-success); }
.mid-copy .mid-ic-check { display: none; }
.mid-copy.is-copied .mid-ic-copy { display: none; }
.mid-copy.is-copied .mid-ic-check { display: block; }
.mid-idbox.is-copied .mid-idvalue { color: var(--ek-success); }
.mid-warn {
  margin-top: var(--ek-16);
  background: var(--ek-warning-tint); color: var(--ek-warning);
  border-radius: var(--ek-radius);
  padding: var(--ek-12) 14px;
  display: flex; gap: 10px; align-items: flex-start;
}
.mid-warn-ic { flex: none; margin-top: 2px; }
.mid-warn p { margin: 0; font-size: var(--ek-small); line-height: 1.5; }
.mid-got { width: 100%; margin-top: var(--ek-20); min-height: 44px; }
@media (max-width: 640px) {
  .mid-idbox { flex-direction: column; align-items: stretch; text-align: center; }
}