/* ============================================================
   MATRICBASE ASSIST — STYLES
   Built on top of the existing --mb-* design tokens defined in
   home-redesign.css (colours, radii, shadow, fonts). This file
   only adds NEW component styles for the monetization pages —
   it does not redefine or override anything from the existing
   design system.
   ============================================================ */

.mb-assist {
  background: var(--mb-bg);
  color: var(--mb-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 60vh;
  padding: 40px 0 80px;
}

.mb-assist * { box-sizing: border-box; }

.mb-assist .mb-shell {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Narrower shell variants for pages that read better at a tighter
   measure than the default 1120px — replaces per-page inline
   style="max-width:..." so the values live in one place. */
.mb-assist .mb-shell-900 { max-width: 900px; }
.mb-assist .mb-shell-800 { max-width: 800px; }

/* Small text-link back-navigation, e.g. order-detail.html back to
   the dashboard. Same icon-forward, muted-until-hover language as
   .mb-refresh-btn rather than a bare underlined text link. */
.mb-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mb-muted);
  text-decoration: none;
  margin-bottom: 20px;
}
.mb-back-link i { font-size: 12px; }
.mb-back-link:hover { color: var(--mb-green-dark); }

.mb-assist h1, .mb-assist h2, .mb-assist h3 {
  font-family: "Fraunces", Georgia, serif;
  color: var(--mb-ink);
  margin: 0 0 10px;
}

.mb-assist-header { margin-bottom: 28px; scroll-margin-top: 90px; }
.mb-assist-header h1 { font-size: 34px; }
.mb-assist-header p { color: var(--mb-body); font-size: 16px; max-width: 640px; margin: 0; }

.mb-build-package-banner {
  margin-bottom: 28px;
  background: var(--mb-green-tint);
  border-color: var(--mb-green);
}
.mb-build-package-banner h2 {
  font-size: 21px;
  font-weight: 700;
  margin: 6px 0 16px;
  max-width: 640px;
}
.mb-build-package-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.mb-build-package-tier {
  display: flex;
  align-items: baseline;
  gap: 6px;
  background: var(--mb-surface);
  border: 1px solid var(--mb-green);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
}
.mb-build-package-tier strong { font-size: 16px; color: var(--mb-green-dark); }
.mb-build-package-note { font-size: 13px; color: var(--mb-muted); margin: 0; max-width: 640px; }

/* ============================================================
   LANDING SECTIONS — hero, how it works, benefits
   Sit above the existing package grid / cart rail. Reuse the
   --mb-* tokens already loaded via home-redesign.css; nothing
   here redefines them.
   ============================================================ */

.mb-assist-section-head { margin-bottom: 28px; }
.mb-assist-section-head h2 { font-size: 28px; max-width: 26ch; }

/* ---------- Hero ---------- */
.mb-assist-hero {
  padding: 48px 0 44px;
  background: linear-gradient(180deg, var(--mb-green-tint) 0%, var(--mb-bg) 100%);
  border-bottom: 1px solid var(--mb-line);
  margin-bottom: 56px;
}
.mb-assist-hero-inner { max-width: 720px; }
.mb-assist-hero-title {
  font-size: clamp(30px, 6vw, 44px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.mb-assist-hero-sub {
  font-size: 16px;
  line-height: 1.65;
  color: var(--mb-body);
  max-width: 58ch;
  margin: 0;
}
.mb-assist-hero-actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- How it works ---------- */
.mb-assist-how {
  margin-bottom: 56px;
  scroll-margin-top: 90px;
}
.mb-how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .mb-how-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .mb-how-grid { grid-template-columns: 1fr; } }

.mb-how-step {
  position: relative;
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius-md);
  padding: 22px 18px 20px;
}
.mb-how-num {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--mb-gold);
  margin-bottom: 10px;
}
.mb-how-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--mb-radius-sm);
  background: var(--mb-green-tint);
  color: var(--mb-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  margin-bottom: 14px;
}
.mb-how-step h3 { font-size: 16px; margin-bottom: 6px; }
.mb-how-step p { font-size: 13.5px; line-height: 1.55; color: var(--mb-muted); margin: 0; }

/* ---------- Benefits ---------- */
.mb-assist-benefits { margin-bottom: 56px; }
.mb-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .mb-benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mb-benefits-grid { grid-template-columns: 1fr; } }

.mb-benefit-card {
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius-md);
  padding: 22px 20px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mb-benefit-card:hover { border-color: var(--mb-green); box-shadow: var(--mb-shadow); }
.mb-benefit-icon {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--mb-gold-tint);
  color: var(--mb-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: 14px;
}
.mb-benefit-card h3 { font-size: 16px; margin-bottom: 6px; }
.mb-benefit-card p { font-size: 13.5px; line-height: 1.55; color: var(--mb-muted); margin: 0; }

/* ---------- Layout: content + cart summary rail ---------- */
.mb-assist-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .mb-assist-layout { grid-template-columns: 1fr; }
}

/* ---------- Category tabs ---------- */
.mb-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--mb-line);
}
.mb-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 14px;
  color: var(--mb-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
}
.mb-tab.active {
  color: var(--mb-green-dark);
  border-bottom-color: var(--mb-green);
}
.mb-tab:hover { color: var(--mb-ink); }

.mb-tab-panel { display: none; }
.mb-tab-panel.active { display: block; }

/* ---------- Tier cards ---------- */
.mb-tier-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 560px) { .mb-tier-grid { grid-template-columns: 1fr; } }

.mb-tier-card {
  background: var(--mb-surface);
  border: 1.5px solid var(--mb-line);
  border-radius: var(--mb-radius-md);
  padding: 20px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
  position: relative;
}
.mb-tier-card:hover { border-color: var(--mb-green); }
.mb-tier-card.selected {
  border-color: var(--mb-green);
  box-shadow: var(--mb-shadow);
  background: var(--mb-green-tint);
}
.mb-tier-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--mb-gold);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 999px;
}
.mb-tier-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; }

/* Individual value (crossed out) sits just above the package price,
   and the savings line just below it — kept small and muted rather
   than loud/red "sale" styling, matching the premium-platform feel
   the rest of assist.css already establishes. */
.mb-tier-individual-value {
  font-size: 12.5px;
  color: var(--mb-muted);
  margin-top: 2px;
}
.mb-tier-individual-value s { text-decoration-color: var(--mb-muted); }

.mb-tier-price { font-family: "Fraunces", serif; font-size: 26px; color: var(--mb-green-dark); }
.mb-tier-price small { font-family: "Inter", sans-serif; font-size: 13px; color: var(--mb-muted); font-weight: 500; }

.mb-tier-savings {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mb-green-dark);
  margin-top: 2px;
}
.mb-tier-savings-pct { font-weight: 500; color: var(--mb-green); }

/* Picker slot: a real item inside .mb-package-grid, placed in the DOM
   right after the card that opened it. Spanning every column forces
   it onto its own full-width row directly under that card and pushes
   later cards down — the grid's normal auto-flow does the work, so
   no absolute/fixed positioning is needed to "move" it into place. */
.mb-package-picker-slot {
  grid-column: 1 / -1;
  scroll-margin-top: 90px;
}
@media (max-width: 560px) { .mb-package-picker-slot { grid-column: 1; } }

/* ---------- Course interest step (asked before institution pickers) ---------- */
.mb-course-interest-step {
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius-md);
  padding: 18px;
  margin-bottom: 16px;
}
.mb-course-interest-label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}
.mb-course-interest-select {
  font-size: 1rem;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--mb-line);
  min-width: 260px;
  max-width: 100%;
}

/* ---------- Institution picker ---------- */
.mb-picker {
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius-md);
  padding: 18px;
}
.mb-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.mb-picker-count { font-size: 13px; color: var(--mb-muted); font-weight: 600; }
.mb-picker-count.full { color: var(--mb-green-dark); }

.mb-search-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius-sm);
  font-size: 14px;
  font-family: inherit;
  margin-bottom: 12px;
}
.mb-search-input:focus { outline: 2px solid var(--mb-green); outline-offset: 1px; }

.mb-picker-list {
  max-height: 360px;
  overflow-y: auto;
  display: grid;
  gap: 6px;
}
.mb-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--mb-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
}
.mb-picker-item:hover { background: var(--mb-bg); }
.mb-picker-item.checked { background: var(--mb-green-tint); border-color: var(--mb-green); }
.mb-picker-item input { pointer-events: none; }
.mb-picker-item-name { font-weight: 600; font-size: 14px; }
.mb-picker-item-meta { font-size: 12px; color: var(--mb-muted); margin-left: auto; }
.mb-picker-item.disabled { opacity: .4; cursor: not-allowed; }
.mb-picker-item-already {
  font-size: 11px; font-weight: 600; color: var(--mb-body);
  background: var(--mb-gold-tint); border-radius: var(--mb-radius-sm);
  padding: 2px 8px; margin-left: auto;
}

.mb-picker-row { display: grid; gap: 6px; }

/* Loading / empty / error text inside a picker list (e.g. while
   bursaries are still being fetched from Supabase). */
.mb-picker-status { color: var(--mb-muted); font-size: 14px; margin: 4px 2px; }
.mb-picker-status-error { color: #B91C1C; }

/* Institution application fee — deliberately gold/amber, not the
   MatricBase green, so it reads as a distinct, external charge
   rather than part of the Assist package price. */
.mb-fee-info {
  background: var(--mb-gold-tint);
  border: 1px solid var(--mb-gold);
  border-radius: var(--mb-radius-sm);
  padding: 10px 12px;
  margin: 0 0 4px 2px;
  display: grid;
  gap: 4px;
}
.mb-fee-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mb-fee-label { font-size: 12.5px; color: var(--mb-body); font-weight: 600; }
.mb-fee-value { font-size: 13px; color: var(--mb-ink); font-weight: 700; white-space: nowrap; }
.mb-fee-note { font-size: 12px; color: var(--mb-muted); margin: 2px 0 0; line-height: 1.5; }
.mb-fee-disclaimer {
  font-size: 12px;
  color: var(--mb-gold);
  font-weight: 600;
  margin: 4px 0 0;
  line-height: 1.5;
}
.mb-fee-disclaimer i { margin-right: 4px; }

/* Compact fee chip — cart/checkout use this instead of the full
   .mb-fee-info panel above (too heavy repeated per line item).
   Same gold/amber treatment so it still reads as an external,
   non-MatricBase charge. */
.mb-cart-inst-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 3px 0;
}
.mb-fee-chip-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-width: 100%;
}
.mb-fee-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--mb-gold-tint);
  border: 1px solid var(--mb-gold);
  color: var(--mb-ink);
  white-space: nowrap;
}
.mb-fee-chip-unknown { opacity: .85; }
.mb-fee-chip-note {
  font-size: 11px;
  color: var(--mb-muted);
  line-height: 1.4;
  max-width: 320px;
}
@media (max-width: 560px) {
  .mb-fee-chip-note { max-width: 100%; }
}

.mb-picker-actions { margin-top: 14px; display: flex; justify-content: flex-end; }

/* ---------- Cart summary rail ---------- */
.mb-cart-rail {
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius-md);
  padding: 20px;
  position: sticky;
  top: 96px;
}
.mb-cart-rail h3 { font-size: 18px; }
.mb-cart-empty { color: var(--mb-muted); font-size: 14px; }

.mb-cart-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--mb-line);
}
.mb-cart-line:last-of-type { border-bottom: none; }
.mb-cart-line-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.mb-cart-line-sub { font-size: 12px; color: var(--mb-muted); }
.mb-cart-line-amount { font-weight: 700; white-space: nowrap; }
.mb-cart-line-remove {
  background: none; border: none; color: var(--mb-muted); cursor: pointer;
  font-size: 12px; text-decoration: underline; padding: 0; margin-top: 4px;
}
.mb-cart-line-remove:hover { color: #B3261E; }

.mb-cart-total {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 17px;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1.5px solid var(--mb-ink);
}

.mb-cart-subtotal-row {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--mb-muted);
  max-width: 320px;
  margin-left: auto;
  padding: 2px 0;
}
.mb-cart-discount-row { color: var(--mb-green-dark); font-weight: 600; }

/* ---------- Cart / checkout page tables ---------- */
.mb-order-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.mb-order-table th, .mb-order-table td {
  text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--mb-line); vertical-align: top;
}
.mb-order-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--mb-muted); }
.mb-inst-tag {
  display: inline-block; background: var(--mb-bg); border: 1px solid var(--mb-line);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; margin: 2px 4px 2px 0;
}

/* ---------- Forms (checkout) ---------- */
.mb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
@media (max-width: 560px) { .mb-form-grid { grid-template-columns: 1fr; } }
.mb-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.mb-field input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius-sm); font-size: 14px; font-family: inherit;
}
.mb-field input:focus { outline: 2px solid var(--mb-green); outline-offset: 1px; }
.mb-field.full { grid-column: 1 / -1; }

.mb-docs-section { border-top: 1px dashed var(--mb-line); border-bottom: 1px dashed var(--mb-line); padding: 18px 0; margin-bottom: 20px; }

/* ---------- Auth (sign in / create account / reset password) ---------- */
.mb-password-wrap { position: relative; }
.mb-password-wrap input { padding-right: 44px; }
.mb-password-toggle {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 34px; height: 34px; border: none; background: none; cursor: pointer;
  color: var(--mb-muted); display: flex; align-items: center; justify-content: center;
  font-size: 15px; border-radius: var(--mb-radius-sm);
}
.mb-password-toggle:hover { color: var(--mb-ink); }
.mb-password-toggle:focus-visible { outline: 2px solid var(--mb-green); outline-offset: 1px; }

.mb-field input.mb-field-invalid { border-color: #B3261E; }
.mb-field-error { font-size: 12.5px; color: #B3261E; margin: 6px 0 0; }

.mb-auth-links { display: flex; justify-content: flex-end; margin: -10px 0 18px; }
.mb-link-btn {
  background: none; border: none; padding: 0; font: inherit; font-size: 13px;
  color: var(--mb-green-dark); text-decoration: underline; cursor: pointer;
}
.mb-link-btn:hover { color: var(--mb-ink); }

.mb-auth-success {
  text-align: center; padding: 6px 0 4px;
}
.mb-auth-success i {
  font-size: 32px; color: var(--mb-green-dark); margin-bottom: 12px; display: block;
}
.mb-auth-success p { color: var(--mb-body); font-size: 14.5px; line-height: 1.55; margin: 0 0 22px; }

/* "Continue with Google" — white button + "or" divider on the login page */
.mb-btn-google {
  background: var(--mb-surface); color: var(--mb-ink);
  border: 1.5px solid var(--mb-line);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.mb-btn-google:hover { background: var(--mb-bg); border-color: var(--mb-ink); }
.mb-btn-google .mb-google-g { flex: none; }
.mb-auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 16px; color: var(--mb-muted); font-size: 13px;
}
.mb-auth-divider::before, .mb-auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--mb-line);
}

.mb-btn:disabled { opacity: .6; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.mb-form-grid > .mb-docs-hint { grid-column: 1 / -1; }
.mb-docs-hint { font-size: 13px; color: var(--mb-muted); margin: -4px 0 14px; }
.mb-doc-row { margin-bottom: 14px; }
.mb-doc-row label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.mb-doc-requested-tag {
  display: inline-block; font-size: 11px; font-weight: 600; color: var(--mb-green-dark);
  background: var(--mb-green-tint); border-radius: var(--mb-radius-sm);
  padding: 2px 8px; margin: -2px 0 6px;
}
.mb-doc-row input[type="file"] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius-sm); font-size: 13px; font-family: inherit; background: var(--mb-surface);
}
.mb-doc-status { font-size: 12.5px; margin-top: 5px; }
.mb-doc-status-ok { color: var(--mb-green-dark); }
.mb-doc-status-error { color: #B3261E; }
.mb-doc-status-pending { color: #21507D; }
/* "Received externally" — same dashed-underline distinction used on the
   admin dashboard, so a learner immediately reads this as different from
   a normal upload decision. */
.mb-doc-status-external { border-bottom: 1px dashed currentColor; padding-bottom: 1px; }
.mb-docs-demo-notice {
  font-size: 12.5px; color: var(--mb-muted); font-style: italic;
  margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--mb-line);
}

.mb-pending-checkout-banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--mb-gold-tint); border: 1.5px solid var(--mb-gold);
  color: var(--mb-ink); border-radius: var(--mb-radius-sm);
  padding: 12px 16px; margin-bottom: 18px;
  text-decoration: none; font-size: 14px; font-weight: 600;
}
.mb-pending-checkout-banner i:first-child { color: var(--mb-gold); }
.mb-pending-checkout-banner span { flex: 1; }
.mb-pending-checkout-banner i:last-child { color: var(--mb-muted); font-size: 12px; }

/* ---------- Status badges ---------- */
.mb-status-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em;
}
.mb-status-pending      { background: #F2EAD3; color: #7A5B12; }
.mb-status-confirmed    { background: var(--mb-green-tint); color: var(--mb-green-dark); }
.mb-status-processing   { background: #E4EEF9; color: #21507D; }
.mb-status-attention    { background: #FBE7E3; color: #B3401E; }
.mb-status-submitted    { background: #E9E4F7; color: #4B2E9E; }
.mb-status-handed-over  { background: var(--mb-green); color: #fff; }
.mb-status-completed    { background: var(--mb-green); color: #fff; }
.mb-status-failed       { background: #FBE1E1; color: #A3231C; }
.mb-status-refunded     { background: #E7E7E7; color: #4B4B4B; }
.mb-status-cancelled    { background: #E7E7E7; color: #4B4B4B; }

/* ---------- Handover banner (application_submitted -> handed_over) ---------- */
.mb-handover-banner {
  margin-top: 14px; padding: 16px 18px; border-radius: 12px;
  background: var(--mb-green-tint); border: 1px solid var(--mb-green);
}
.mb-handover-title { font-weight: 700; color: var(--mb-green-dark); margin-bottom: 6px; }
.mb-handover-text { font-size: 14px; margin: 6px 0; }
.mb-handover-list { margin: 10px 0; padding-left: 20px; font-size: 13px; color: var(--mb-muted); }
.mb-handover-list li { margin-bottom: 4px; }
.mb-handover-ack-done { font-size: 13px; font-weight: 600; color: var(--mb-green-dark); margin-top: 8px; }

/* Overrides the shared .mb-btn's `white-space: nowrap` + unconstrained
   width (home-redesign.css) for this one button only — its label
   ("I understand — I'll manage my application from here") is far
   longer than any other button's on the site, so it's the first to
   need to wrap instead of overflowing its card. Deliberately NOT
   changed on .mb-btn itself: every other button's short label relies
   on nowrap to avoid an awkward mid-word wrap. On wide screens the
   text already fits on one line, so this has no visible effect there
   — desktop appearance is unchanged. */
.mb-handover-ack-btn {
  white-space: normal;
  max-width: 100%;
  text-align: center;
  line-height: 1.3;
}

/* ---------- Per-application progress tracker (dashboard) ----------
   5-step icon tracker for a single application's status, driven
   entirely by MB_STATUS.order — no new state, just a visual read of
   the same pipeline the status pill/notifications already use. */
.mb-tracker { display: flex; align-items: flex-start; margin: 12px 0 6px; }
.mb-tracker-step {
  flex: 1; position: relative; display: flex; flex-direction: column;
  align-items: center; text-align: center;
}
.mb-tracker-line {
  position: absolute; top: 15px; left: -50%; width: 100%; height: 2px;
  background: var(--mb-line); z-index: 0;
}
.mb-tracker-step:first-child .mb-tracker-line { display: none; }
.mb-tracker-step.done .mb-tracker-line,
.mb-tracker-step.current .mb-tracker-line { background: var(--mb-green); }
.mb-tracker-icon {
  width: 30px; height: 30px; border-radius: 50%; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; background: var(--mb-bg); border: 2px solid var(--mb-line);
}
.mb-tracker-step.done .mb-tracker-icon {
  background: var(--mb-green-tint); border-color: var(--mb-green);
}
.mb-tracker-step.current .mb-tracker-icon {
  background: var(--mb-green); border-color: var(--mb-green);
  box-shadow: 0 0 0 4px var(--mb-green-tint);
}
.mb-tracker-step.upcoming .mb-tracker-icon { opacity: .45; }
.mb-tracker-label {
  font-size: 10.5px; font-weight: 600; color: var(--mb-muted);
  margin-top: 6px; line-height: 1.2;
}
.mb-tracker-step.current .mb-tracker-label { color: var(--mb-green-dark); }
.mb-tracker-current-text { font-size: 12.5px; color: var(--mb-muted); margin: 0 0 4px; }
.mb-tracker-current-text strong { color: var(--mb-ink); }

/* ---------- Dashboard order card ---------- */
.mb-order-card {
  background: var(--mb-surface); border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius-md); padding: 20px; margin-bottom: 18px;
}
.mb-order-card-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mb-order-card-head .oid { font-size: 12px; color: var(--mb-muted); font-family: "IBM Plex Mono", monospace; }
.mb-app-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px dashed var(--mb-line); }
.mb-app-row:first-of-type { border-top: none; }
.mb-app-row .inst { font-weight: 600; font-size: 14px; }

/* ---------- Dashboard overview (learner) ---------- */
.mb-overview-card {
  background: var(--mb-surface); border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius-md); padding: 22px; margin-bottom: 22px;
}
.mb-overview-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.mb-overview-greeting { font-family: "Fraunces", Georgia, serif; font-size: 22px; color: var(--mb-ink); }
.mb-refresh-btn {
  background: none; border: 1px solid var(--mb-line); border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--mb-muted);
  cursor: pointer; white-space: nowrap;
}
.mb-refresh-btn:hover { color: var(--mb-green-dark); border-color: var(--mb-green); }
.mb-overview-row { font-size: 14px; margin: 10px 0 16px; }
.mb-overview-label { color: var(--mb-muted); }
.mb-overview-value { font-weight: 700; }
.mb-overview-progress-wrap { margin-bottom: 12px; }
.mb-overview-progress-label { font-size: 13px; font-weight: 700; color: var(--mb-green-dark); margin-bottom: 6px; }
.mb-overview-progress-bar { width: 100%; height: 10px; border-radius: 999px; background: var(--mb-line); overflow: hidden; }
.mb-overview-progress-fill { height: 100%; border-radius: 999px; background: var(--mb-green); transition: width .2s ease; }
.mb-overview-count { font-size: 13.5px; color: var(--mb-muted); }

/* ---------- Dashboard notifications (learner) ---------- */
.mb-notif-section { margin-bottom: 22px; }
.mb-notif-list {
  background: var(--mb-surface); border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius-md); overflow: hidden;
}
.mb-notif-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px;
  border-top: 1px dashed var(--mb-line); font-size: 14px;
}
.mb-notif-item:first-child { border-top: none; }
.mb-notif-icon { flex: 0 0 auto; }
.mb-notif-text { flex: 1; }
.mb-notif-date { flex: 0 0 auto; font-size: 12px; color: var(--mb-muted); white-space: nowrap; }
@media (max-width: 560px) {
  .mb-notif-item { flex-wrap: wrap; }
  .mb-notif-date { margin-left: 26px; }
}

/* ---------- Dashboard application groups (learner) ---------- */
.mb-app-groups { margin-bottom: 22px; }
.mb-app-group { margin-bottom: 18px; }
.mb-app-group-title { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.mb-app-group-row {
  background: var(--mb-surface); border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius-sm); padding: 12px 14px; margin-bottom: 8px;
}
.mb-app-group-row-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.mb-app-group-emoji { font-size: 14px; margin-right: 2px; }
.mb-app-group-inst { font-weight: 600; font-size: 14px; margin-right: auto; }
.mb-app-group-meta { font-size: 12px; color: var(--mb-muted); }

/* ---------- Dashboard orders summary (learner) ---------- */
.mb-orders-summary { margin-bottom: 6px; }
.mb-order-summary-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-top: 1px dashed var(--mb-line);
}
.mb-order-summary-row:first-of-type { border-top: none; }
.mb-order-summary-row .oid { font-size: 12px; color: var(--mb-muted); font-family: "IBM Plex Mono", monospace; }
.mb-order-summary-right { text-align: right; }
.mb-order-summary-amount { margin-top: 6px; font-weight: 700; }
.mb-order-summary-payment-note { margin-top: 4px; font-size: 12px; color: var(--mb-muted); }
.mb-order-summary-view { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; }

/* ---------- Order detail page (learner) ---------- */
.mb-card {
  background: var(--mb-surface); border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius-sm); padding: 18px 20px; margin-bottom: 18px;
}
.mb-card h3 { margin-top: 0; }
.mb-order-detail-status-row {
  display: flex; gap: 24px; flex-wrap: wrap; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--mb-line);
}
.mb-order-detail-status-row > div { display: flex; flex-direction: column; gap: 4px; }
.mb-order-detail-status-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--mb-muted); }
.mb-order-detail-saved-note { font-size: 12px; font-weight: 600; color: var(--mb-green-dark); margin-top: 2px; }
.mb-order-detail-line { margin-bottom: 16px; }
.mb-order-detail-line:last-child { margin-bottom: 0; }
.mb-order-detail-line-title { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.mb-docs-list { margin-bottom: 12px; }

/* ---------- Order detail messages (learner) ---------- */
.mb-msg-list {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 360px; overflow-y: auto; margin-bottom: 14px; padding-right: 2px;
}
.mb-msg-row { display: flex; }
.mb-msg-row-admin { justify-content: flex-start; }
.mb-msg-row-learner { justify-content: flex-end; }
.mb-msg-bubble {
  max-width: 75%; border-radius: var(--mb-radius-sm); padding: 10px 12px;
  background: var(--mb-bg); border: 1px solid var(--mb-line);
}
.mb-msg-row-learner .mb-msg-bubble { background: var(--mb-accent-soft, var(--mb-bg)); }
.mb-msg-author { font-weight: 700; font-size: 12px; margin-bottom: 2px; }
.mb-msg-text { font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.mb-msg-time { margin-top: 4px; font-size: 11px; color: var(--mb-muted); }
.mb-msg-form { display: flex; gap: 8px; align-items: flex-end; }
.mb-msg-textarea {
  flex: 1; resize: vertical; min-height: 40px; padding: 8px 10px;
  border: 1px solid var(--mb-line); border-radius: var(--mb-radius-sm);
  font-family: inherit; font-size: 14px;
}

/* ---------- Misc ---------- */
.mb-note-box {
  background: var(--mb-gold-tint); border: 1px solid var(--mb-gold);
  border-radius: var(--mb-radius-sm); padding: 14px 16px; font-size: 13.5px; color: var(--mb-ink); margin-bottom: 20px;
}
.mb-empty-state { text-align: center; padding: 60px 20px; color: var(--mb-muted); }
.mb-empty-state a { color: var(--mb-green-dark); font-weight: 600; }

/* ---------- Checkout trust block (checkout.js) ----------
   Uses body-text colour (--mb-body) for all small copy: --mb-muted fails AA
   contrast on the page background at these sizes. */
.mb-summary-note {
  font-size: 13.5px; line-height: 1.55; color: var(--mb-body);
  margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--mb-line);
}
.mb-pay-note {
  font-size: 13.5px; line-height: 1.55; color: var(--mb-body);
  margin: -8px 0 18px;
}
.mb-pay-note i { margin-right: 6px; color: var(--mb-green-dark); }

.mb-checkout-trust {
  background: var(--mb-surface); border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius-md); margin: 0 0 18px;
}
.mb-checkout-trust-section { padding: 16px 18px; }
.mb-checkout-trust-section + .mb-checkout-trust-section { border-top: 1px solid var(--mb-line); }
.mb-checkout-trust h4 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--mb-ink); }
.mb-checkout-trust p, .mb-checkout-trust li { font-size: 14px; line-height: 1.55; color: var(--mb-body); margin: 0; }
.mb-checkout-trust a, .mb-checkout-foot a, .mb-consent a, .mb-pay-note a, .mb-summary-note a {
  color: var(--mb-green-dark); font-weight: 600; text-decoration: underline;
}
.mb-checkout-trust-steps, .mb-checkout-trust-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mb-checkout-trust-steps { counter-reset: mbstep; }
.mb-checkout-trust-steps li { position: relative; padding-left: 32px; counter-increment: mbstep; }
.mb-checkout-trust-steps li::before {
  content: counter(mbstep); position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--mb-green-tint); color: var(--mb-green-dark);
  font-size: 12.5px; font-weight: 700; line-height: 22px; text-align: center;
}

.mb-consent { margin: 0 0 16px; }
.mb-consent-label {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  font-size: 14px; line-height: 1.55; color: var(--mb-ink);
  min-height: 44px; padding: 6px 0;
}
.mb-consent-label input[type="checkbox"] {
  flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--mb-green);
}
.mb-consent-label input[type="checkbox"]:focus-visible { outline: 2px solid var(--mb-green); outline-offset: 2px; }
.mb-consent .mb-field-error { font-size: 13.5px; margin: 2px 0 0 34px; }
.mb-consent .mb-field-error:empty { display: none; }

.mb-checkout-foot { margin-top: 22px; display: grid; gap: 10px; }
.mb-checkout-foot p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--mb-body); }
.mb-nowrap { white-space: nowrap; }

/* ============================================================
   FLOATING CART BUTTON (Pass 3A)
   Injected by js/mb-floating-cart.js. Fixed position, sits above
   the site-wide cookie banner (#mb-cookie-banner, z-index 10000)
   without overlapping it, and stays clear of the mobile nav
   drawer (z-index up to 1100).
   ============================================================ */
.mb-floating-cart {
  position: fixed;
  right: 20px;
  bottom: 96px;
  z-index: 900;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--mb-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  box-shadow: var(--mb-shadow), 0 4px 14px rgba(0, 0, 0, 0.18);
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, opacity .15s ease, visibility .15s ease;
}
.mb-floating-cart:hover { background: var(--mb-green-dark); transform: translateY(-2px); }
.mb-floating-cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--mb-gold);
  color: var(--mb-ink);
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  border: 2px solid var(--mb-bg);
}
.mb-floating-cart-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.8); }

@media (max-width: 560px) {
  .mb-floating-cart { right: 14px; bottom: 88px; width: 48px; height: 48px; font-size: 17px; }
}

/* ============================================================
   FLOATING CHAT WIDGET (Pass 3B — order-detail.html only)
   Reuses .mb-msg-* (bubbles/list/form) from the previous inline
   version unchanged; this only adds the button + collapsible panel
   chrome around them. Positioned like .mb-floating-cart (clear of
   #mb-cookie-banner) but order-detail.html doesn't load the cart
   widget, so no collision there.
   ============================================================ */
.mb-floating-chat-wrap { position: fixed; right: 20px; bottom: 96px; z-index: 900; }

.mb-floating-chat-btn {
  position: relative;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--mb-green); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  box-shadow: var(--mb-shadow), 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: transform .15s ease, background .15s ease, opacity .15s ease, visibility .15s ease;
}
.mb-floating-chat-btn:hover { background: var(--mb-green-dark); transform: translateY(-2px); }

/* Hides the round trigger while its panel is open — see the DOM-order +
   toggleChatPanel() comments in order-detail.js for why this exists
   alongside that fix rather than instead of it. Mirrors the existing
   .mb-floating-cart-hidden pattern used by the other floating widget. */
.mb-floating-chat-btn-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.8); }

.mb-floating-chat-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 4px;
  border-radius: 999px; background: var(--mb-gold); color: var(--mb-ink);
  font-family: "Inter", sans-serif; font-size: 11.5px; font-weight: 700;
  line-height: 20px; text-align: center; border: 2px solid var(--mb-bg);
}
.mb-floating-chat-badge-hidden { display: none; }

.mb-chat-panel {
  position: absolute; right: 0; bottom: 64px;
  width: min(340px, calc(100vw - 32px));
  max-height: min(480px, calc(100vh - 180px));
  background: var(--mb-surface); border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius-md); box-shadow: var(--mb-shadow), 0 10px 30px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  pointer-events: none;
}
.mb-chat-panel.mb-chat-panel-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

.mb-chat-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--mb-line);
  background: var(--mb-green-tint); border-radius: var(--mb-radius-md) var(--mb-radius-md) 0 0;
  flex: 0 0 auto;
}
.mb-chat-panel-title { font-weight: 700; font-size: 14.5px; color: var(--mb-green-dark); }
.mb-chat-panel-close {
  background: none; border: none; cursor: pointer; color: var(--mb-muted);
  font-size: 16px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
}
.mb-chat-panel-close:hover { color: var(--mb-ink); }

.mb-chat-banner { padding: 10px 14px 0; margin: 0; }
.mb-chat-list { flex: 1 1 auto; max-height: none; padding: 10px 14px; margin-bottom: 0; }
.mb-chat-panel .mb-msg-form { padding: 10px 14px; border-top: 1px solid var(--mb-line); }
.mb-chat-panel .mb-doc-status-error { padding: 0 14px 10px; }
.mb-chat-panel .mb-msg-textarea { min-height: 38px; }

@media (max-width: 560px) {
  .mb-floating-chat-wrap { right: 14px; bottom: 88px; }
  .mb-floating-chat-btn { width: 48px; height: 48px; font-size: 17px; }
  .mb-chat-panel {
    position: fixed; right: 10px; left: 10px; bottom: 78px;
    width: auto; max-height: min(70vh, 520px);
  }
}