/* ============================================================
   BYLD Wave 3 — Shared components for KYC/AA/MIA/Settings screens
   Extends _prototype-base.css with form/stepper/chat/list patterns.
   Authored 2026-04-08.
   ============================================================ */

/* ---------- Stepper pips ---------- */
.w3-stepper {
  display: flex;
  gap: var(--space-8);
  padding: 0 var(--space-24);
}
.w3-stepper__pip {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-white-06);
}
.w3-stepper__pip--done {
  background: var(--brand-secondary);
}
.w3-stepper__pip--active {
  background: var(--brand-primary);
  box-shadow: 0 0 8px var(--color-gold-40);
}

/* ---------- Headline block ---------- */
.w3-headline {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-24) var(--space-24) 0;
}
.w3-headline__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}
.w3-headline__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
  margin: 0;
}
.w3-headline__lede {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* ---------- Form field ---------- */
.w3-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: 0 var(--space-24);
}
.w3-field__label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}
.w3-field__input {
  width: 100%;
  padding: var(--space-16) var(--space-20);
  background: var(--surface-glass);
  border: var(--border-width-hair) solid var(--border-default);
  border-radius: var(--radius-card);
  font-family: var(--font-mono);
  font-size: var(--font-size-xl);
  color: var(--text-default);
  outline: none;
  letter-spacing: 0.1em;
}
.w3-field__input--mono-lg {
  font-size: var(--font-size-2xl);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.w3-field__input--filled {
  border-color: var(--color-gold-24);
  box-shadow: 0 0 0 3px var(--color-gold-12);
}
.w3-field__input--error {
  border-color: var(--feedback-error);
  box-shadow: 0 0 0 3px rgba(239,68,68,0.12);
}
.w3-field__help {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.w3-field__help--error { color: var(--feedback-error); }
.w3-field__help-dot {
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: currentColor;
}

/* ---------- Trust / info micro-card ---------- */
.w3-trust {
  margin: 0 var(--space-16);
  padding: var(--space-16) var(--space-20);
  background: var(--surface-glass);
  border: var(--border-width-hair) solid var(--border-default);
  border-radius: var(--radius-card);
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
}
.w3-trust__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-gold-12);
  border: var(--border-width-hair) solid var(--color-gold-24);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand-primary);
  font-size: 16px;
}
.w3-trust__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}
.w3-trust__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
}
.w3-trust__copy {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  line-height: var(--line-height-relaxed);
}

/* ---------- Sticky CTA footer ---------- */
.w3-sticky-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-16) var(--space-16) var(--space-24);
  background: linear-gradient(180deg, transparent, rgba(10,10,11,0.94) 30%);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.w3-btn-primary {
  width: 100%;
  padding: var(--space-16) var(--space-24);
  background: var(--brand-primary);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-card);
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  cursor: pointer;
  box-shadow: var(--elevation-cta);
}
.w3-btn-secondary {
  width: 100%;
  padding: var(--space-16) var(--space-24);
  background: transparent;
  color: var(--text-default);
  border: var(--border-width-hair) solid var(--border-raised);
  border-radius: var(--radius-card);
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.w3-btn-danger {
  width: 100%;
  padding: var(--space-16) var(--space-24);
  background: var(--feedback-error);
  color: var(--text-default);
  border: none;
  border-radius: var(--radius-card);
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.w3-btn-ghost {
  padding: var(--space-12) var(--space-16);
  background: transparent;
  color: var(--text-link);
  border: none;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

/* ---------- OTP boxes ---------- */
.w3-otp {
  display: flex;
  gap: var(--space-12);
  padding: 0 var(--space-24);
  justify-content: center;
}
.w3-otp__box {
  width: 48px;
  height: 56px;
  border-radius: var(--radius-card);
  border: var(--border-width-hair) solid var(--border-default);
  background: var(--surface-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  color: var(--text-default);
}
.w3-otp__box--filled {
  border-color: var(--color-gold-24);
  background: var(--color-gold-12);
  color: var(--brand-primary);
}
.w3-otp__box--cursor {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--color-gold-12);
}

/* ---------- FIP / bank list rows ---------- */
.w3-fip-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: 0 var(--space-16);
}
.w3-fip {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16);
  background: var(--surface-glass);
  border: var(--border-width-hair) solid var(--border-default);
  border-radius: var(--radius-card);
  cursor: pointer;
}
.w3-fip--selected {
  border-color: var(--color-gold-24);
  background: var(--color-gold-12);
}
.w3-fip__logo {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--surface-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  color: var(--text-default);
  flex-shrink: 0;
}
.w3-fip__logo--hdfc { background: #004C8F; color: #fff; }
.w3-fip__logo--icici { background: #B02A30; color: #fff; }
.w3-fip__logo--sbi { background: #22409A; color: #fff; }
.w3-fip__logo--axis { background: #97144D; color: #fff; }
.w3-fip__logo--kotak { background: #ED1C24; color: #fff; }
.w3-fip__logo--idfc { background: #782F8F; color: #fff; }
.w3-fip__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.w3-fip__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
}
.w3-fip__meta {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.w3-fip__check {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  border: var(--border-width-hair) solid var(--border-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.w3-fip--selected .w3-fip__check {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-inverse);
  font-size: 14px;
}

/* ---------- Settings row ---------- */
.w3-settings-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: 0 var(--space-16);
}
.w3-settings-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16);
  background: var(--surface-glass);
  border: var(--border-width-hair) solid var(--border-default);
  border-radius: var(--radius-card);
  cursor: pointer;
}
.w3-settings-row__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--surface-card-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--brand-primary);
  flex-shrink: 0;
}
.w3-settings-row__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.w3-settings-row__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
}
.w3-settings-row__meta {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.w3-settings-row__chevron {
  color: var(--text-muted);
  font-size: 18px;
  flex-shrink: 0;
}

/* ---------- Toggle switch ---------- */
.w3-toggle {
  width: 44px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--color-white-12);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}
.w3-toggle::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-neutral-0);
  transition: left var(--duration-fast);
}
.w3-toggle--on {
  background: var(--brand-primary);
}
.w3-toggle--on::after {
  left: 21px;
}

/* ---------- Chat input bar ---------- */
.w3-chat-input {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16) var(--space-20);
  background: linear-gradient(180deg, transparent, rgba(10,10,11,0.94) 30%);
}
.w3-chat-input__field {
  flex: 1;
  padding: var(--space-12) var(--space-20);
  background: var(--surface-glass-raised);
  border: var(--border-width-hair) solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--text-default);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
}
.w3-chat-input__field::placeholder {
  color: var(--text-muted);
}
.w3-chat-input__send {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  color: var(--text-inverse);
  border: none;
  font-size: 18px;
  cursor: pointer;
  box-shadow: var(--elevation-cta);
  flex-shrink: 0;
}

/* ---------- Starter prompts ---------- */
.w3-starters {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: 0 var(--space-16);
}
.w3-starter {
  padding: var(--space-16);
  background: var(--surface-glass);
  border: var(--border-width-hair) solid var(--border-default);
  border-radius: var(--radius-card);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.w3-starter__icon {
  color: var(--brand-primary);
  font-size: 18px;
}

/* ---------- Holdings table ---------- */
.w3-holdings {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-16);
  gap: var(--space-8);
}
.w3-holding {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16);
  background: var(--surface-glass);
  border: var(--border-width-hair) solid var(--border-default);
  border-radius: var(--radius-card);
}
.w3-holding__leaf-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.w3-holding__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.w3-holding__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.w3-holding__meta {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.w3-holding__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}
.w3-holding__value {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-default);
}
.w3-holding__delta {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}
.w3-holding__delta--gain { color: var(--finance-gain); }
.w3-holding__delta--loss { color: var(--finance-loss); }

/* ---------- Segment tabs ---------- */
.w3-segment {
  display: flex;
  gap: var(--space-4);
  margin: 0 var(--space-16);
  padding: var(--space-4);
  background: var(--surface-glass);
  border: var(--border-width-hair) solid var(--border-default);
  border-radius: var(--radius-full);
}
.w3-segment__tab {
  flex: 1;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-full);
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}
.w3-segment__tab--active {
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-weight: var(--font-weight-semibold);
}

/* ---------- Goal projection bar ---------- */
.w3-goal-bar {
  width: 100%;
  height: 10px;
  background: var(--color-white-06);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.w3-goal-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-gold-500), var(--color-gold-300));
  border-radius: var(--radius-full);
}

/* ---------- Insight card (MIA) ---------- */
.w3-insight {
  margin: 0 var(--space-16);
  padding: var(--space-20);
  background: linear-gradient(135deg, var(--color-gold-12), transparent);
  border: var(--border-width-hair) solid var(--color-gold-24);
  border-radius: var(--radius-card);
  display: flex;
  gap: var(--space-12);
}
.w3-insight__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle at 30% 30%, var(--color-gold-200), var(--color-gold-500) 55%, var(--color-gold-900));
  box-shadow: 0 0 10px var(--color-gold-24);
  flex-shrink: 0;
}
.w3-insight__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.w3-insight__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--brand-primary);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
}
.w3-insight__copy {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--text-default);
  line-height: var(--line-height-relaxed);
}