/* ══════════════════════════════════════════════════════════════════
   Cycle 17 — Platform component layer (the C17 component home).
   Re-skin of the platform to the v2 prototype identity:
   navy-anchored, flat, solid, premium. Applies
   `Docs/design/brand_identity_v2.md` §5 precisely.

   Additive cycle-namespaced layer. Loads AFTER app.css + cycle4-*.css,
   BEFORE components/*.css (see the 3 base layouts). All colour values
   reference Lane A's v2 tokens BY NAME with inline fallbacks so this
   file renders standalone before Lane A merges:
     --wasla-navy  #1D3A5E   --wasla-navy-deep  #152C49
     --wasla-navy-700 #2C4F78
     --wasla-blue  #0557E7   --wasla-blue-hover #0246C4
     --wasla-gold  #D4AF36   --wasla-gold-soft  #F2E6BE
     --wasla-success #1F9D6B --wasla-success-soft #E4F5EE
     --wasla-ai-tint #E5ECFC --wasla-ai-tint-strong #D5E1FB
     --wasla-ink #1D3A5E     --wasla-body #56606F
     --wasla-muted #8A93A1   --wasla-line #E4E7EC
     --wasla-surface #FFFFFF --wasla-canvas #F4F6F9

   Glass-morphism is demoted (brand_identity_v2.md §2.4 / §11): the
   platform is flat + solid. Glass survives only on transient toasts
   (components/toast.css). The --glass-* / --surface-glass-* tokens are
   NOT deleted — Lane A keeps them defined.
   ══════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   1. BUTTON SYSTEM — one electric-blue primary (§5.1)
   The blue's scarcity is what makes it read as "the action".
   ════════════════════════════════════════════════════════════ */

/* Re-skin Bootstrap's .btn-primary so it IS the electric-blue. */
.btn-primary,
.btn-primary.btn,
.wasla-btn-primary {
  background-color: var(--wasla-blue, #0557E7);
  border-color: var(--wasla-blue, #0557E7);
  color: #ffffff;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus-visible,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active,
.wasla-btn-primary:hover,
.wasla-btn-primary:focus {
  background-color: var(--wasla-blue-hover, #0246C4);
  border-color: var(--wasla-blue-hover, #0246C4);
  color: #ffffff;
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--wasla-blue, #0557E7);
  border-color: var(--wasla-blue, #0557E7);
  opacity: 0.5;
}

/* Sizing carve-out: small / icon buttons keep a compact pad so the
   navbar + table-row actions don't balloon. */
.btn-primary.btn-sm,
.btn-sm.wasla-btn-primary {
  padding: 0.35rem 0.85rem;
}

/* Secondary — white fill, blue text, 1.5px blue border. */
.btn-secondary,
.btn-outline-primary,
.wasla-btn-secondary {
  background-color: #ffffff;
  border: 1.5px solid var(--wasla-blue, #0557E7);
  color: var(--wasla-blue, #0557E7);
  font-weight: 600;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.wasla-btn-secondary:hover,
.wasla-btn-secondary:focus {
  background-color: var(--wasla-ai-tint, #E5ECFC);
  border-color: var(--wasla-blue, #0557E7);
  color: var(--wasla-blue-hover, #0246C4);
}

.btn-secondary.btn-sm,
.btn-outline-primary.btn-sm {
  padding: 0.3rem 0.85rem;
}

/* Ghost-on-navy — transparent fill, white text, white border.
   For use inside navy bands / the navy hero. */
.wasla-btn-ghost {
  background-color: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  color: #ffffff;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
}

.wasla-btn-ghost:hover,
.wasla-btn-ghost:focus {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
}

/* Neutralise Bootstrap's btn-warning / btn-info misuse — they must
   NOT read as a primary action. Re-tone them to the secondary (white
   + blue) treatment so only the real electric-blue says "do this". */
.btn-warning:not(.wasla-keep-warning),
.btn-info:not(.wasla-keep-info) {
  background-color: #ffffff;
  border: 1.5px solid var(--wasla-blue, #0557E7);
  color: var(--wasla-blue, #0557E7);
  font-weight: 600;
}

.btn-warning:not(.wasla-keep-warning):hover,
.btn-warning:not(.wasla-keep-warning):focus,
.btn-info:not(.wasla-keep-info):hover,
.btn-info:not(.wasla-keep-info):focus {
  background-color: var(--wasla-ai-tint, #E5ECFC);
  border-color: var(--wasla-blue, #0557E7);
  color: var(--wasla-blue-hover, #0246C4);
}

/* btn-success keeps green but is reserved for confirm/verify actions
   only (Nafath confirm, "Yes, Confirm") — re-toned to the v2 green. */
.btn-success {
  background-color: var(--wasla-success, #1F9D6B);
  border-color: var(--wasla-success, #1F9D6B);
  color: #ffffff;
  font-weight: 600;
  border-radius: 8px;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #18815A;
  border-color: #18815A;
  color: #ffffff;
}

/* ════════════════════════════════════════════════════════════
   2. CARDS — flat feature + selectable cards (§5.2)
   The base `.card` flat surface lives in components/cards.css.
   These are the prototype-specific card variants.
   ════════════════════════════════════════════════════════════ */

/* Feature card — icon chip (44×44 tinted) + title + one-line desc. */
.wasla-feature-card {
  background: var(--wasla-surface, #ffffff);
  border: 1px solid var(--wasla-line, #E4E7EC);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.wasla-feature-card:hover {
  box-shadow: 0 4px 12px rgba(20, 40, 70, 0.10);
  transform: translateY(-1px);
}

.wasla-feature-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wasla-ai-tint, #E5ECFC);
  color: var(--wasla-blue, #0557E7);
  flex-shrink: 0;
}

.wasla-feature-card__icon svg {
  width: 22px;
  height: 22px;
}

/* Icon-chip tint variants — used to give each feature card its own
   accent without breaking the flat solid look. */
.wasla-feature-card__icon--success {
  background: var(--wasla-success-soft, #E4F5EE);
  color: var(--wasla-success, #1F9D6B);
}
.wasla-feature-card__icon--gold {
  background: var(--wasla-gold-soft, #F2E6BE);
  color: #93741C;
}
.wasla-feature-card__icon--navy {
  background: var(--wasla-ai-tint, #E5ECFC);
  color: var(--wasla-heading, #1D3A5E);
}

.wasla-feature-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--wasla-ink, #1D3A5E);
  margin: 0;
}

.wasla-feature-card__desc {
  font-size: 0.9375rem;
  color: var(--wasla-body, #56606F);
  line-height: 1.6;
  margin: 0;
}

/* Selectable card — product type / route / plan. The `.is-selected`
   state adds a 2px blue border + a faint blue tint fill. */
.wasla-selectable-card {
  background: var(--wasla-surface, #ffffff);
  border: 2px solid var(--wasla-line, #E4E7EC);
  border-radius: 12px;
  padding: 1.25rem;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease,
              box-shadow 150ms ease;
}

.wasla-selectable-card:hover {
  border-color: var(--wasla-ai-tint-strong, #D5E1FB);
}

.wasla-selectable-card.is-selected {
  border-color: var(--wasla-blue, #0557E7);
  background: var(--wasla-ai-tint, #E5ECFC);
}

/* ════════════════════════════════════════════════════════════
   3. AI SUGGESTION CARD (§5.2 / §5)
   #E5ECFC fill, left 4px #0557E7 accent strip, AI glyph slot,
   recommendation text, confirm/change actions.
   ════════════════════════════════════════════════════════════ */
.wasla-ai-suggestion-card {
  background: var(--wasla-ai-tint, #E5ECFC);
  border: 1px solid var(--wasla-ai-tint-strong, #D5E1FB);
  border-inline-start: 4px solid var(--wasla-blue, #0557E7);
  border-radius: 12px;
  padding: 1.125rem 1.25rem;
  display: flex;
  gap: 0.875rem;
}

/* Plain modifier — drop the accent strip when the card is part of a
   tight grid where the strip reads as visual noise. */
.wasla-ai-suggestion-card--plain {
  border-inline-start: 1px solid var(--wasla-ai-tint-strong, #D5E1FB);
}

/* AI glyph slot — sits left of the recommendation text. A real AI /
   robot-mascot SVG drops in here later (deferred; see §10). */
.wasla-ai-suggestion-card__glyph {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--wasla-blue, #0557E7);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wasla-ai-suggestion-card__glyph svg {
  width: 18px;
  height: 18px;
}

.wasla-ai-suggestion-card__main {
  flex: 1 1 auto;
  min-width: 0;
}

.wasla-ai-suggestion-card__title {
  color: var(--wasla-heading, #1D3A5E);
  font-weight: 600;
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
}

.wasla-ai-suggestion-card__body {
  color: var(--wasla-body, #56606F);
  line-height: 1.5;
  margin: 0;
}

.wasla-ai-suggestion-card__cta {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════
   4. PROGRESS STEPPER (§5.3)
   done = #1F9D6B filled + check · current = #0557E7 filled ·
   upcoming = white circle + #E4E7EC ring + muted number.
   ════════════════════════════════════════════════════════════ */
.wasla-onboarding-stepper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .wasla-onboarding-stepper {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    /* 13 milestones can exceed the card width on a narrow desktop; scroll as a
       graceful fallback rather than letting the columns/labels collide. */
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }
}

.wasla-onboarding-stepper__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 768px) {
  .wasla-onboarding-stepper__item {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
    /* Fixed-ish column so the label wraps INSIDE its step instead of spilling
       into the neighbour. The old `flex: 1 1 auto` (inherited) sized each item
       to its label width, so 13 wide labels overlapped. Connectors keep
       flex-grow, so the line still links the circles. The column is wide enough
       (paired with the smaller label below) for the longest single word
       ("Subscription") to sit on one line rather than snapping mid-word. */
    flex: 0 1 4.75rem;
    min-width: 3.75rem;
  }
}

/* Upcoming (default) — white circle, line ring, muted number. */
.wasla-onboarding-stepper__marker {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--wasla-line, #E4E7EC);
  color: var(--wasla-muted, #8A93A1);
  font-weight: 600;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 150ms ease-out, border-color 150ms ease-out,
              color 150ms ease-out;
}

/* Current — electric-blue filled. */
.wasla-onboarding-stepper__item.is-current .wasla-onboarding-stepper__marker {
  background: var(--wasla-blue, #0557E7);
  border-color: var(--wasla-blue, #0557E7);
  color: #ffffff;
}

/* Done — green filled (+ a check glyph if the markup provides one). */
.wasla-onboarding-stepper__item.is-done .wasla-onboarding-stepper__marker {
  background: var(--wasla-success, #1F9D6B);
  border-color: var(--wasla-success, #1F9D6B);
  color: #ffffff;
}

.wasla-onboarding-stepper__label {
  color: var(--wasla-muted, #8A93A1);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.25;
  /* Wrap within the step's column; never spill sideways into the next label.
     The smaller label + slightly wider column (above) let the longest single
     word ("Subscription") sit on one line instead of snapping mid-word.
     overflow-wrap:break-word stays as a safety net so an unexpectedly long word
     still never spills out — do NOT use white-space:nowrap / word-break:keep-all
     (they overflow the column). hyphens:auto is a no-op fallback where supported. */
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.wasla-onboarding-stepper__item.is-current .wasla-onboarding-stepper__label {
  color: var(--wasla-heading, #1D3A5E);
  font-weight: 600;
}

.wasla-onboarding-stepper__item.is-done .wasla-onboarding-stepper__label {
  color: var(--wasla-heading, #1D3A5E);
}

/* Skipped — a milestone this merchant's lane bypasses (Phase 4B: the manual
   store-builder lane, or image-only catalog processing). Rendered muted +
   dashed with a "·" marker so the canonical N=13 map stays visible without
   implying the merchant must complete it. */
.wasla-onboarding-stepper__item.is-skipped .wasla-onboarding-stepper__marker {
  background: transparent;
  border-style: dashed;
  border-color: var(--wasla-line, #E4E7EC);
  color: var(--wasla-muted, #8A93A1);
  opacity: 0.6;
}

.wasla-onboarding-stepper__item.is-skipped .wasla-onboarding-stepper__label {
  color: var(--wasla-muted, #8A93A1);
  text-decoration: line-through;
  opacity: 0.7;
}

.wasla-onboarding-stepper__connector {
  flex: 1 1 auto;
  height: 24px;
  width: 2px;
  background: var(--wasla-line, #E4E7EC);
  margin-inline-start: 19px; /* center under the 40px marker */
  align-self: stretch;
}

@media (min-width: 768px) {
  .wasla-onboarding-stepper__connector {
    width: auto;
    height: 2px;
    margin: 19px 0 0; /* center against marker row */
    align-self: auto;
  }
}

.wasla-onboarding-stepper__connector.is-done {
  background: var(--wasla-success, #1F9D6B);
}

/* ════════════════════════════════════════════════════════════
   5. BADGES (§5.6)
   success = #1F9D6B on #E4F5EE · "Recommended" = navy on gold-tint
   (gold badge is a brand signature) · AI = white-on-blue / blue-on-tint
   ════════════════════════════════════════════════════════════ */
.wasla-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
}

.wasla-badge--success {
  background: var(--wasla-success-soft, #E4F5EE);
  color: var(--wasla-success, #1F9D6B);
}

/* Gold "Recommended" / "Best Pick" / "Most Popular" — brand signature. */
.wasla-badge--recommended,
.wasla-badge--gold {
  background: var(--wasla-gold-soft, #F2E6BE);
  color: var(--wasla-heading, #1D3A5E);
}

.wasla-badge--ai {
  background: var(--wasla-blue, #0557E7);
  color: #ffffff;
}

.wasla-badge--ai-soft {
  background: var(--wasla-ai-tint, #E5ECFC);
  color: var(--wasla-blue, #0557E7);
}

.wasla-badge--navy {
  background: var(--wasla-navy, #1D3A5E);
  color: #ffffff;
}

/* Re-tone Bootstrap badge utilities so they match the v2 palette
   when used directly on platform surfaces. */
.badge.text-bg-success,
.badge.bg-success {
  background-color: var(--wasla-success, #1F9D6B) !important;
  color: #ffffff !important;
}

.badge.text-bg-primary,
.badge.bg-primary {
  background-color: var(--wasla-blue, #0557E7) !important;
  color: #ffffff !important;
}

/* Bootstrap warning/info badges should not read as a brand accent —
   the gold-tint is reserved for "recommended"; re-tone these to a
   neutral so only the deliberate .wasla-badge--gold carries gold. */
.badge.text-bg-warning,
.badge.bg-warning {
  background-color: var(--wasla-canvas, #F4F6F9) !important;
  color: var(--wasla-body, #56606F) !important;
}

/* ════════════════════════════════════════════════════════════
   6. SECTION BANDS (§5.8)
   Marketing / landing pages alternate white canvas and navy bands.
   ════════════════════════════════════════════════════════════ */
.wasla-band-navy {
  background: var(--wasla-navy, #1D3A5E);
  color: #ffffff;
}

.wasla-band-navy h1,
.wasla-band-navy h2,
.wasla-band-navy h3,
.wasla-band-navy h4,
.wasla-band-navy h5,
.wasla-band-navy h6 {
  color: #ffffff;
}

.wasla-band-navy p,
.wasla-band-navy .wasla-band__sub {
  color: #C8D2E2; /* light navy-tint sub-text */
}

/* The signature lockup: navy headline + gold sub-headline. On a navy
   band the headline is white; the gold sub-headline still pops. */
.wasla-band-navy .wasla-subhead,
.wasla-subhead--gold {
  color: var(--wasla-gold, #D4AF36);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.wasla-band-white {
  background: var(--wasla-surface, #ffffff);
  color: var(--wasla-body, #56606F);
}

.wasla-band-white h1,
.wasla-band-white h2,
.wasla-band-white h3 {
  color: var(--wasla-ink, #1D3A5E);
}

/* Decorative gold underline — for section-intro headings. */
.wasla-underline-gold {
  position: relative;
  padding-bottom: 0.4rem;
}
.wasla-underline-gold::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: 3px;
  background: var(--wasla-gold, #D4AF36);
}

/* ════════════════════════════════════════════════════════════
   7. TRUST BADGES ROW (carried from C15 — re-toned to v2)
   ════════════════════════════════════════════════════════════ */
.wasla-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (min-width: 768px) {
  .wasla-trust-badges {
    gap: 1.5rem;
  }
}

.wasla-trust-badges__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 1.25rem;
  background: var(--wasla-surface, #ffffff);
  border: 1px solid var(--wasla-line, #E4E7EC);
  border-radius: 12px;
  flex: 1 1 200px;
  min-width: 200px;
}

.wasla-trust-badges__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wasla-heading, #1D3A5E);
  flex-shrink: 0;
}

.wasla-trust-badges__icon svg {
  width: 100%;
  height: 100%;
}

.wasla-trust-badges__title {
  color: var(--wasla-heading, #1D3A5E);
  font-weight: 600;
  font-size: 0.9375rem;
  margin: 0.25rem 0 0;
}

.wasla-trust-badges__sub {
  color: var(--wasla-body, #56606F);
  font-size: 0.8125rem;
  line-height: 1.4;
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
   8. VERIFICATION CHECKLIST (carried from C15 — re-toned to v2)
   Done items use weight emphasis (not strike-through) so completed
   labels stay scannable; the green icon is the state signal.
   ════════════════════════════════════════════════════════════ */
.wasla-verification-checklist {
  list-style: none;
  padding-inline-start: 0; /* logical property: mirrors correctly in RTL */
  margin: 0;
}

.wasla-verification-checklist__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.wasla-verification-checklist__icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--wasla-canvas, #F4F6F9);
  color: var(--wasla-muted, #8A93A1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wasla-verification-checklist__icon svg {
  width: 14px;
  height: 14px;
}

.wasla-verification-checklist__item.is-done .wasla-verification-checklist__icon {
  background: var(--wasla-success-soft, #E4F5EE);
  color: var(--wasla-success, #1F9D6B);
}

.wasla-verification-checklist__label {
  color: var(--wasla-ink, #1D3A5E);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.wasla-verification-checklist__item.is-done .wasla-verification-checklist__label {
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   9. TABLE — explicit navy-header component (§5.7)
   The generic Bootstrap `.table` thead is already re-skinned navy in
   app.css. `.wasla-table` is the explicit, opt-in component class for
   data tables that want the prototype treatment guaranteed.
   ════════════════════════════════════════════════════════════ */
.wasla-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.wasla-table thead th {
  background: var(--wasla-navy, #1D3A5E);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.8125rem;
  text-align: start;
  padding: 0.75rem 1rem;
}

.wasla-table thead th:first-child { border-start-start-radius: 8px; }
.wasla-table thead th:last-child  { border-start-end-radius: 8px; }

.wasla-table tbody td {
  background: var(--wasla-surface, #ffffff);
  color: var(--wasla-body, #56606F);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--wasla-line, #E4E7EC);
}

.wasla-table tbody tr:hover td {
  background: var(--wasla-canvas, #F4F6F9);
}

/* ════════════════════════════════════════════════════════════
   10. RESERVED COMPONENT SLOTS (§ locked decision — mascot/logo
   SVG deferred). Empty, styled placeholders so Lanes C/D/E can place
   them now and a real SVG illustration drops in later.
   ════════════════════════════════════════════════════════════ */

/* The friendly AI robot mascot's reserved box (AI-onboarding welcome
   screen, AI-suggestion contexts). Sized + centered; renders as a
   faint dashed placeholder until the real SVG is supplied. */
.wasla-mascot-slot {
  width: 120px;
  height: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--wasla-ai-tint, #E5ECFC);
  color: var(--wasla-blue, #0557E7);
  flex-shrink: 0;
}

.wasla-mascot-slot svg,
.wasla-mascot-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Empty-state hint: a dashed outline only while the slot has no
   child content, so a placeholder is visible during development but
   invisible once a real asset is dropped in. */
.wasla-mascot-slot:empty {
  border: 1.5px dashed var(--wasla-ai-tint-strong, #D5E1FB);
}

.wasla-mascot-slot--lg { width: 200px; height: 200px; }
.wasla-mascot-slot--sm { width: 64px;  height: 64px;  }

/* The wordmark container — holds the Wasla logotype / logomark.
   Until a real logomark SVG is supplied it simply lays out the
   existing text wordmark; the gold logomark accent stroke drops in
   here later. */
.wasla-logomark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: inherit;
  text-decoration: none;
}

.wasla-logomark svg,
.wasla-logomark img {
  height: 28px;
  width: auto;
  flex-shrink: 0;
}

/* The logomark's gold accent stroke target (a real SVG path / mark
   slots here later — gold per brand_identity_v2.md §1/§3). */
.wasla-logomark__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wasla-gold, #D4AF36);
}

/* Post-C32 hotfix: original logo.jpeg restored as the brand mark across
   public_base / auth_base / dashboard_base. The JPEG is 1080×1080 (square),
   so we render it as a small rounded square in the navbar — visually
   compact, no wordmark spelled out separately. The prototype-v2 redesign
   is meant to be an UPDATE on top of this brand, not a replacement. */
.wasla-brand-logo {
  height: 36px;
  width: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   11. DARK MODE — Cycle 19 Lane C (v2 dark counterpart)
   The C17 components above consume the --wasla-* tokens by name, so
   most flip automatically once tokens.css re-points those tokens under
   [data-bs-theme="dark"]. The rules below cover ONLY the cases where a
   component hard-codes a light value (#ffffff fills, light-gold glyph,
   light rgba shadows) and so cannot flip on its own.
   Dark palette: page #0E1726 · surface #1B2A47 · raised #16223C ·
   hover #22335A · line #2B3A57 · blue #3C7BF0 · gold #E0C25C.
   ════════════════════════════════════════════════════════════ */

/* ── Buttons — secondary/outline hard-code a white fill ── */
[data-bs-theme="dark"] .btn-secondary,
[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .wasla-btn-secondary,
[data-bs-theme="dark"] .btn-warning:not(.wasla-keep-warning),
[data-bs-theme="dark"] .btn-info:not(.wasla-keep-info) {
  background-color: transparent;
  border-color: var(--wasla-blue, #3C7BF0);
  color: var(--wasla-blue, #3C7BF0);
}

[data-bs-theme="dark"] .btn-secondary:hover,
[data-bs-theme="dark"] .btn-secondary:focus,
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-primary:focus,
[data-bs-theme="dark"] .wasla-btn-secondary:hover,
[data-bs-theme="dark"] .wasla-btn-secondary:focus,
[data-bs-theme="dark"] .btn-warning:not(.wasla-keep-warning):hover,
[data-bs-theme="dark"] .btn-warning:not(.wasla-keep-warning):focus,
[data-bs-theme="dark"] .btn-info:not(.wasla-keep-info):hover,
[data-bs-theme="dark"] .btn-info:not(.wasla-keep-info):focus {
  background-color: var(--wasla-ai-tint, #16294D);
  border-color: var(--wasla-blue, #3C7BF0);
  color: #ffffff;
}

/* btn-success:hover hard-codes the light-mode dark-green #18815A —
   on dark we want to lighten on hover, not darken. */
[data-bs-theme="dark"] .btn-success:hover,
[data-bs-theme="dark"] .btn-success:focus {
  background-color: #57D3A2;
  border-color: #57D3A2;
  color: #0A1322;
}

/* ── Cards — hover shadow hard-codes a light-mode rgba ── */
[data-bs-theme="dark"] .wasla-feature-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* The gold icon-chip glyph (#93741C) is a dark gold tuned for the
   light gold-soft tint — invisible on the dark gold-brown fill.
   Lift it to the dark-mode soft gold. */
[data-bs-theme="dark"] .wasla-feature-card__icon--gold {
  color: var(--wasla-gold, #E0C25C);
}

/* Feature-card title/desc + selectable card flip via the --wasla-ink /
   --wasla-body / --wasla-line / --wasla-blue / --wasla-ai-tint tokens
   automatically — no override needed. */

/* ── Progress stepper — the upcoming marker hard-codes a white fill ── */
[data-bs-theme="dark"] .wasla-onboarding-stepper__marker {
  background: var(--wasla-surface-raised, #16223C);
  border-color: var(--wasla-line-strong, #3A4D70);
  color: var(--wasla-muted, #7C879B);
}
/* Current (blue) + done (green) markers flip via --wasla-blue /
   --wasla-success; the connector flips via --wasla-line. */

/* ── AI suggestion card — fill/border/strip flip via the
   --wasla-ai-tint / --wasla-ai-tint-strong / --wasla-blue tokens.
   The deep-navy ai-tint is dark enough that the navy title needs
   lifting to off-white. ── */
[data-bs-theme="dark"] .wasla-ai-suggestion-card__title {
  color: var(--wasla-ink, #E8ECF3);
}

/* ── Badges — the AI-soft + gold/recommended badges work on the
   token fills, but the gold "recommended" badge uses navy text on a
   gold-soft fill; on dark the fill is a deep gold-brown so the text
   must lift to the soft gold. ── */
[data-bs-theme="dark"] .wasla-badge--recommended,
[data-bs-theme="dark"] .wasla-badge--gold {
  color: var(--wasla-gold, #E0C25C);
}

/* Bootstrap warning badge re-tone uses --wasla-canvas (now deep navy)
   + --wasla-body — that flips fine; raise the contrast border-free. */
[data-bs-theme="dark"] .badge.text-bg-warning,
[data-bs-theme="dark"] .badge.bg-warning {
  background-color: var(--wasla-surface-hover, #22335A) !important;
  color: var(--wasla-body, #AEB9CC) !important;
}

/* ── Section bands — .wasla-band-navy stays navy via --wasla-navy;
   the C8D2E2 sub-text reads fine on the deepened navy. .wasla-band-white
   hard-codes nothing problematic (flips via --wasla-surface /
   --wasla-ink / --wasla-body). No override needed. ── */

/* ── Tables — .wasla-table thead flips via --wasla-navy; tbody td
   flips via --wasla-surface / --wasla-body / --wasla-line; the hover
   tint flips via --wasla-canvas. The hover tint (deep-navy canvas) is
   barely distinct from the surface — lift it to the hover surface. ── */
[data-bs-theme="dark"] .wasla-table tbody tr:hover td {
  background: var(--wasla-surface-hover, #22335A);
}

/* ── Trust badges + verification checklist — surface/border/text all
   flip via tokens. The verification checklist idle icon uses
   --wasla-canvas (deep navy) which is fine; done state flips via
   --wasla-success-soft / --wasla-success. No override needed. ── */

/* ── Mascot slot — flips via --wasla-ai-tint / --wasla-blue. ── */

/* ── Navy-text components — the stepper labels, trust-badge icon/title
   and the navy feature-card icon-chip glyph all consume --wasla-heading
   now (Cycle 20 Lane F), which flips to off-white under
   [data-bs-theme="dark"] via the token. The reactive PR #135 override
   block is retired — no per-component dark rule is needed. ── */

/* ── Cycle 26 Lane A: extract the C24+C25 inline H1 navy style into a class.
   Default 1.75rem for dashboard feature-headers; --sm modifier 1.5rem for
   wizard pages (lighter chrome since wizards have their own stepper nav).
   Uses --wasla-heading (C20 Lane F token) so it auto-flips to off-white
   under [data-bs-theme="dark"]. ── */
.wasla-feature-header__title {
  color: var(--wasla-heading, var(--wasla-navy, #1D3A5E));
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.wasla-feature-header__title--sm {
  font-size: 1.5rem;
  line-height: 1.25;
}

/* DES-01: the auth/onboarding headline, previously copy-pasted into 19
   template <style> blocks. Defined once here (cycle15 is loaded by both
   auth_base and base_public). Theme-aware via --wasla-heading. */
.wasla-auth-headline {
  color: var(--wasla-heading, #1D3A5E);
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════
   9. LANDING — trust-signals band + FAQ accordion (audit 2026-06-07)
   ════════════════════════════════════════════════════════════ */
.wasla-trust-band {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2rem;
}
.wasla-trust-band__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--wasla-body, #56606F);
  font-weight: 600;
  font-size: 0.9375rem;
}
.wasla-trust-band__item i {
  color: var(--wasla-blue, #0557E7);
  font-size: 1.15rem;
  line-height: 1;
}
.wasla-faq__accordion .accordion-button {
  font-weight: 600;
  color: var(--wasla-heading, #1D3A5E);
}
.wasla-faq__accordion .accordion-button:not(.collapsed) {
  color: var(--wasla-blue, #0557E7);
  background-color: var(--wasla-ai-tint, #E5ECFC);
}
.wasla-faq__accordion .accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(5, 87, 231, 0.25);
}