/* =============================================================
   Brandlevate CBT — Student Onboarding  v2.3.0
   Bright, professional, card-based design.
   Fully scoped under .blv-ob-wrap — theme-proof.
   ============================================================= */

/* ── Google Font import (Outfit — clean, modern, educational) ── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ── Design tokens ──────────────────────────────────────────── */
.blv-ob-wrap {
  /* Brand palette */
  --blv-primary:       #1d6ef5 !important;   /* vivid blue */
  --blv-primary-dk:    #1457d0 !important;
  --blv-primary-lt:    #dbeafe !important;
  --blv-purple:        #7c3aed !important;
  --blv-purple-lt:     #ede9fe !important;
  --blv-green:         #059669 !important;
  --blv-green-lt:      #d1fae5 !important;
  --blv-amber:         #d97706 !important;
  --blv-amber-lt:      #fef3c7 !important;
  --blv-red:           #dc2626 !important;

  /* Page & cards */
  --blv-page:          #f0f4ff !important;
  --blv-hero-from:     #1d3c72 !important;
  --blv-hero-to:       #1d6ef5 !important;
  --blv-card:          #ffffff !important;
  --blv-card-shadow:   0 4px 24px rgba(29,110,245,.10), 0 1px 4px rgba(0,0,0,.05) !important;
  --blv-card-radius:   16px !important;

  /* Text */
  --blv-text:          #0f172a !important;
  --blv-text-2:        #334155 !important;
  --blv-muted:         #64748b !important;
  --blv-hint:          #94a3b8 !important;

  /* Inputs */
  --blv-input-bg:      #ffffff !important;
  --blv-input-border:  #cbd5e1 !important;
  --blv-input-foc:     #1d6ef5 !important;
  --blv-input-radius:  10px !important;
  --blv-input-ph:      #94a3b8 !important;

  /* Divider */
  --blv-divider:       #e2e8f0 !important;

  /* Transitions */
  --blv-t:             .18s ease !important;

  /* Fonts */
  --blv-font:          'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ── Outer wrapper ──────────────────────────────────────────── */
.blv-ob-wrap {
  all: initial !important;
  display: block !important;
  box-sizing: border-box !important;
  font-family: var(--blv-font) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--blv-text) !important;
  background: var(--blv-page) !important;
  max-width: 720px !important;
  margin: 32px auto !important;
  padding: 0 !important;
  border-radius: var(--blv-card-radius) !important;
  overflow: hidden !important;
}

/* ── Form reset ─────────────────────────────────────────────── */
.blv-ob-wrap form {
  all: unset !important;
  display: block !important;
}

/* ══════════════════════════════════════════════════════════════
   HERO HEADER
══════════════════════════════════════════════════════════════ */
.blv-ob-hero {
  background: linear-gradient(135deg, var(--blv-hero-from) 0%, var(--blv-hero-to) 100%) !important;
  padding: 36px 32px 32px !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
}

.blv-ob-hero::before {
  content: '' !important;
  position: absolute !important;
  top: -60px !important; right: -60px !important;
  width: 220px !important; height: 220px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.07) !important;
  pointer-events: none !important;
}

.blv-ob-hero::after {
  content: '' !important;
  position: absolute !important;
  bottom: -40px !important; left: 40px !important;
  width: 140px !important; height: 140px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.05) !important;
  pointer-events: none !important;
}

.blv-ob-hero__badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 5px 14px !important;
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #fff !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
}

.blv-ob-hero__badge svg {
  display: block !important;
  flex-shrink: 0 !important;
}

.blv-ob-hero__title {
  all: unset !important;
  display: block !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.2 !important;
  margin: 0 0 8px !important;
}

.blv-ob-hero__sub {
  all: unset !important;
  display: block !important;
  font-size: 14px !important;
  color: rgba(255,255,255,.75) !important;
  max-width: 460px !important;
}

/* ══════════════════════════════════════════════════════════════
   STEP INDICATORS
══════════════════════════════════════════════════════════════ */
.blv-ob-steps {
  display: flex !important;
  align-items: center !important;
  padding: 20px 32px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--blv-divider) !important;
  gap: 0 !important;
}

.blv-ob-step {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.blv-ob-step__dot {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: var(--blv-divider) !important;
  color: var(--blv-muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  transition: background var(--blv-t), color var(--blv-t) !important;
}

.blv-ob-step--active .blv-ob-step__dot {
  background: var(--blv-primary) !important;
  color: #fff !important;
  box-shadow: 0 0 0 4px var(--blv-primary-lt) !important;
}

.blv-ob-step__label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--blv-muted) !important;
}

.blv-ob-step--active .blv-ob-step__label {
  color: var(--blv-primary) !important;
}

.blv-ob-step__line {
  flex: 1 !important;
  height: 2px !important;
  background: var(--blv-divider) !important;
  margin: 0 10px !important;
}

/* ══════════════════════════════════════════════════════════════
   CARDS  (one per step)
══════════════════════════════════════════════════════════════ */
.blv-ob-card {
  background: var(--blv-card) !important;
  margin: 20px 20px 0 !important;
  border-radius: var(--blv-card-radius) !important;
  box-shadow: var(--blv-card-shadow) !important;
  overflow: hidden !important;
  display: block !important;
}

.blv-ob-card:last-of-type {
  margin-bottom: 0 !important;
}

.blv-ob-card__head {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 20px 24px 16px !important;
  border-bottom: 1px solid var(--blv-divider) !important;
}

.blv-ob-card__icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #fff !important;
}

.blv-ob-card__icon--blue   { background: var(--blv-primary) !important; }
.blv-ob-card__icon--purple { background: var(--blv-purple)  !important; }
.blv-ob-card__icon--green  { background: var(--blv-green)   !important; }

.blv-ob-card__title {
  all: unset !important;
  display: block !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--blv-text) !important;
  line-height: 1.2 !important;
}

.blv-ob-card__desc {
  all: unset !important;
  display: block !important;
  font-size: 13px !important;
  color: var(--blv-muted) !important;
  margin-top: 2px !important;
}

/* ══════════════════════════════════════════════════════════════
   TAB BUTTONS  (inside the registration card)
══════════════════════════════════════════════════════════════ */
.blv-ob-tabs {
  display: flex !important;
  gap: 10px !important;
  padding: 16px 20px !important;
  background: #f8faff !important;
  border-bottom: 1px solid var(--blv-divider) !important;
}

.blv-ob-tab {
  all: unset !important;
  box-sizing: border-box !important;
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border: 1.5px solid var(--blv-input-border) !important;
  border-radius: 12px !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: border-color var(--blv-t), background var(--blv-t), box-shadow var(--blv-t) !important;
}

.blv-ob-tab:hover {
  border-color: #93c5fd !important;
  background: #f0f7ff !important;
}

.blv-ob-tab--active {
  border-color: var(--blv-primary) !important;
  background: var(--blv-primary-lt) !important;
  box-shadow: 0 0 0 3px rgba(29,110,245,.12) !important;
}

.blv-ob-tab__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: var(--blv-primary) !important;
  color: #fff !important;
  flex-shrink: 0 !important;
}

.blv-ob-tab--active .blv-ob-tab__icon {
  background: var(--blv-primary-dk) !important;
}

.blv-ob-tab__text {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

.blv-ob-tab__text strong {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--blv-text) !important;
  line-height: 1.2 !important;
}

.blv-ob-tab__text small {
  display: block !important;
  font-size: 11px !important;
  color: var(--blv-muted) !important;
  font-weight: 400 !important;
}

/* ══════════════════════════════════════════════════════════════
   PANELS
══════════════════════════════════════════════════════════════ */
.blv-ob-panel {
  display: none !important;
  padding: 20px 24px !important;
}

.blv-ob-panel--active {
  display: block !important;
}

/* ══════════════════════════════════════════════════════════════
   PREVIEW BAR
══════════════════════════════════════════════════════════════ */
.blv-ob-preview-bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: linear-gradient(90deg, #0f2d6b 0%, #1d6ef5 100%) !important;
  border-radius: 10px !important;
  padding: 13px 18px !important;
  margin-bottom: 20px !important;
}

.blv-ob-preview-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.65) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.blv-ob-preview-value {
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: .06em !important;
  word-break: break-all !important;
}

/* ══════════════════════════════════════════════════════════════
   GRID ROWS
══════════════════════════════════════════════════════════════ */
.blv-ob-row {
  display: grid !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}
.blv-ob-row--2 { grid-template-columns: 1fr 1fr !important; }
.blv-ob-row--3 { grid-template-columns: 1fr 1fr 1fr !important; }

/* ══════════════════════════════════════════════════════════════
   FIELDS + LABELS
══════════════════════════════════════════════════════════════ */
.blv-ob-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
}

.blv-ob-row .blv-ob-field {
  margin-bottom: 0 !important;
}

.blv-ob-label {
  all: unset !important;
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--blv-text-2) !important;
}

.blv-ob-req {
  color: var(--blv-red) !important;
  margin-left: 2px !important;
}

.blv-ob-optional {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--blv-hint) !important;
  margin-left: 6px !important;
}

.blv-ob-field-hint {
  display: block !important;
  font-size: 11.5px !important;
  color: var(--blv-hint) !important;
  margin-top: 2px !important;
}

/* ══════════════════════════════════════════════════════════════
   INPUTS
══════════════════════════════════════════════════════════════ */
.blv-ob-input {
  all: unset !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  padding: 11px 14px !important;
  border: 1.5px solid var(--blv-input-border) !important;
  border-radius: var(--blv-input-radius) !important;
  background: var(--blv-input-bg) !important;
  font-size: 14px !important;
  font-family: var(--blv-font) !important;
  color: var(--blv-text) !important;
  line-height: 1.4 !important;
  transition: border-color var(--blv-t), box-shadow var(--blv-t) !important;
}

.blv-ob-input::placeholder { color: var(--blv-input-ph) !important; opacity: 1 !important; }
.blv-ob-input:focus {
  border-color: var(--blv-input-foc) !important;
  box-shadow: 0 0 0 3px rgba(29,110,245,.15) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════════
   SELECTS
══════════════════════════════════════════════════════════════ */
.blv-ob-select-wrap {
  position: relative !important;
  display: block !important;
}

.blv-ob-select {
  all: unset !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  padding: 11px 36px 11px 14px !important;
  border: 1.5px solid var(--blv-input-border) !important;
  border-radius: var(--blv-input-radius) !important;
  background: var(--blv-input-bg) !important;
  font-size: 14px !important;
  font-family: var(--blv-font) !important;
  color: var(--blv-text) !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: border-color var(--blv-t), box-shadow var(--blv-t) !important;
}

.blv-ob-select:focus {
  border-color: var(--blv-input-foc) !important;
  box-shadow: 0 0 0 3px rgba(29,110,245,.15) !important;
  outline: none !important;
}

.blv-ob-caret {
  position: absolute !important;
  right: 11px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  color: var(--blv-muted) !important;
  display: flex !important;
}

/* ══════════════════════════════════════════════════════════════
   AUTO-GENERATE NOTICE
══════════════════════════════════════════════════════════════ */
.blv-ob-auto-notice {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  background: var(--blv-primary-lt) !important;
  border: 1px solid #93c5fd !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  color: #1e3a8a !important;
  line-height: 1.5 !important;
}

.blv-ob-auto-notice__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: var(--blv-primary) !important;
  color: #fff !important;
  flex-shrink: 0 !important;
}

.blv-ob-auto-notice strong {
  display: block !important;
  font-weight: 700 !important;
  margin-bottom: 3px !important;
}

.blv-ob-auto-notice p {
  all: unset !important;
  display: block !important;
  font-size: 13px !important;
  opacity: .85 !important;
}

/* ══════════════════════════════════════════════════════════════
   CLASS & SUBJECTS SECTION
══════════════════════════════════════════════════════════════ */
.blv-ob-subsection {
  padding: 20px 24px !important;
  display: block !important;
}

.blv-ob-subsection + .blv-ob-subsection {
  border-top: 1px solid var(--blv-divider) !important;
}

.blv-ob-subsection__title {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--blv-text) !important;
  margin-bottom: 14px !important;
}

.blv-ob-subsection__num {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  background: var(--blv-purple) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
}

/* Spinner */
.blv-ob-spinner {
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid rgba(29,110,245,.25) !important;
  border-top-color: var(--blv-primary) !important;
  border-radius: 50% !important;
  animation: blvSpin .7s linear infinite !important;
  flex-shrink: 0 !important;
}

.blv-ob-spinner--white {
  border-color: rgba(255,255,255,.3) !important;
  border-top-color: #fff !important;
}

@keyframes blvSpin {
  to { transform: rotate(360deg); }
}

.blv-ob-subjects-loading {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: var(--blv-muted) !important;
  padding: 8px 0 !important;
}

.blv-ob-subjects-empty {
  all: unset !important;
  display: block !important;
  font-size: 13px !important;
  color: var(--blv-muted) !important;
  background: #f8fafc !important;
  border: 1px dashed var(--blv-divider) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
}

.blv-ob-subjects-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 10px !important;
}

/* Checkbox item */
.blv-ob-subject-item {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 14px !important;
  border: 1.5px solid var(--blv-input-border) !important;
  border-radius: 10px !important;
  background: #fff !important;
  cursor: pointer !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--blv-text-2) !important;
  transition: border-color var(--blv-t), background var(--blv-t), box-shadow var(--blv-t) !important;
  box-sizing: border-box !important;
}

.blv-ob-subject-item:hover {
  border-color: #93c5fd !important;
  background: #f0f7ff !important;
}

/* Hide native checkbox */
.blv-ob-subject-check {
  all: unset !important;
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Custom checkbox box */
.blv-ob-subject-check__box {
  width: 18px !important;
  height: 18px !important;
  border: 2px solid var(--blv-input-border) !important;
  border-radius: 5px !important;
  background: #fff !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color var(--blv-t), background var(--blv-t) !important;
}

.blv-ob-subject-check:checked ~ .blv-ob-subject-check__box {
  background: var(--blv-purple) !important;
  border-color: var(--blv-purple) !important;
}

.blv-ob-subject-check:checked ~ .blv-ob-subject-check__box::after {
  content: '' !important;
  display: block !important;
  width: 5px !important;
  height: 9px !important;
  border: 2px solid #fff !important;
  border-top: none !important;
  border-left: none !important;
  transform: rotate(45deg) !important;
  margin-top: -2px !important;
}

/* Checked card style */
.blv-ob-subject-item:has(.blv-ob-subject-check:checked) {
  border-color: var(--blv-purple) !important;
  background: var(--blv-purple-lt) !important;
  color: var(--blv-purple) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.10) !important;
}

.blv-ob-subject-check__label {
  flex: 1 !important;
  line-height: 1.3 !important;
}

/* ══════════════════════════════════════════════════════════════
   PHOTO SECTION
══════════════════════════════════════════════════════════════ */
.blv-ob-photo-row {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 20px 24px 0 !important;
}

.blv-ob-photo-preview {
  width: 88px !important;
  height: 100px !important;
  border: 2px dashed var(--blv-input-border) !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.blv-ob-photo-ph {
  display: block !important;
  color: #c0ccd8 !important;
}

.blv-ob-photo-ph-label {
  font-size: 10px !important;
  color: var(--blv-hint) !important;
  text-align: center !important;
}

.blv-ob-photo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.blv-ob-photo-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.blv-ob-photo-desc {
  all: unset !important;
  display: block !important;
  font-size: 13px !important;
  color: var(--blv-muted) !important;
  line-height: 1.5 !important;
}

.blv-ob-photo-btn {
  all: unset !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 9px 18px !important;
  border: 1.5px solid var(--blv-primary) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--blv-primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--blv-font) !important;
  cursor: pointer !important;
  transition: background var(--blv-t), color var(--blv-t) !important;
  align-self: flex-start !important;
}

.blv-ob-photo-btn:hover {
  background: var(--blv-primary) !important;
  color: #fff !important;
}

.blv-ob-file-hidden {
  all: unset !important;
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   DIVIDER inside cards
══════════════════════════════════════════════════════════════ */
.blv-ob-divider {
  height: 1px !important;
  background: var(--blv-divider) !important;
  margin: 20px 24px !important;
}

/* ══════════════════════════════════════════════════════════════
   PERSONAL INFO padding inside card
══════════════════════════════════════════════════════════════ */
.blv-ob-card .blv-ob-row,
.blv-ob-card .blv-ob-field:not(.blv-ob-row .blv-ob-field) {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Override: row handles its own padding */
.blv-ob-panel .blv-ob-row,
.blv-ob-panel .blv-ob-field {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Photo-section rows */
.blv-ob-card > .blv-ob-row,
.blv-ob-card > .blv-ob-field {
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-bottom: 0 !important;
}

/* Tighter: the rows live inside the card but outside a panel */
#blvStep3 .blv-ob-row,
#blvStep3 > .blv-ob-field {
  padding: 0 24px !important;
  margin-bottom: 14px !important;
}

#blvStep3 .blv-ob-row:last-child,
#blvStep3 > .blv-ob-field:last-child {
  padding-bottom: 24px !important;
}

/* ══════════════════════════════════════════════════════════════
   SUBMIT BUTTON ROW
══════════════════════════════════════════════════════════════ */
.blv-ob-submit-row {
  padding: 20px 20px 24px !important;
  display: block !important;
}

.blv-ob-submit {
  all: unset !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 15px 24px !important;
  background: linear-gradient(135deg, var(--blv-primary) 0%, #0d4fd4 100%) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: var(--blv-font) !important;
  cursor: pointer !important;
  letter-spacing: .01em !important;
  transition: box-shadow var(--blv-t), transform var(--blv-t), opacity var(--blv-t) !important;
  box-shadow: 0 4px 20px rgba(29,110,245,.35) !important;
}

.blv-ob-submit:hover {
  box-shadow: 0 8px 28px rgba(29,110,245,.45) !important;
  transform: translateY(-1px) !important;
}

.blv-ob-submit:active { transform: translateY(0) !important; }

.blv-ob-submit:disabled,
.blv-ob-submit[disabled] {
  opacity: .65 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

.blv-ob-submit__text,
.blv-ob-submit__loader {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ══════════════════════════════════════════════════════════════
   SUCCESS CARD
══════════════════════════════════════════════════════════════ */
.blv-ob-success {
  margin: 20px 20px 24px !important;
  background: #fff !important;
  border-radius: var(--blv-card-radius) !important;
  box-shadow: var(--blv-card-shadow) !important;
  text-align: center !important;
  padding: 40px 32px 32px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Confetti burst */
.blv-ob-success__confetti {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.blv-ob-success__confetti span {
  position: absolute !important;
  top: -20px !important;
  width: 10px !important; height: 10px !important;
  border-radius: 2px !important;
  animation: blvFetti 2.5s ease-out forwards !important;
  opacity: 0 !important;
}

.blv-ob-success__confetti span:nth-child(1)  { left:10%;  background:#1d6ef5; width:8px;  height:14px; animation-delay:.1s; }
.blv-ob-success__confetti span:nth-child(2)  { left:25%;  background:#7c3aed; width:12px; height:8px;  animation-delay:.2s; }
.blv-ob-success__confetti span:nth-child(3)  { left:40%;  background:#059669; width:6px;  height:12px; animation-delay:.05s; }
.blv-ob-success__confetti span:nth-child(4)  { left:55%;  background:#d97706; width:10px; height:10px; animation-delay:.3s; }
.blv-ob-success__confetti span:nth-child(5)  { left:70%;  background:#dc2626; width:8px;  height:8px;  animation-delay:.15s; }
.blv-ob-success__confetti span:nth-child(6)  { left:80%;  background:#1d6ef5; width:14px; height:6px;  animation-delay:.25s; }
.blv-ob-success__confetti span:nth-child(7)  { left:20%;  background:#059669; width:6px;  height:6px;  border-radius:50%; animation-delay:.35s; }
.blv-ob-success__confetti span:nth-child(8)  { left:60%;  background:#7c3aed; width:10px; height:10px; border-radius:50%; animation-delay:.4s; }
.blv-ob-success__confetti span:nth-child(9)  { left:45%;  background:#d97706; width:8px;  height:14px; animation-delay:.12s; }
.blv-ob-success__confetti span:nth-child(10) { left:88%;  background:#dc2626; width:12px; height:6px;  animation-delay:.28s; }

@keyframes blvFetti {
  0%   { opacity:1; transform: translateY(0) rotate(0deg); }
  100% { opacity:0; transform: translateY(300px) rotate(720deg); }
}

.blv-ob-success__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #059669, #10b981) !important;
  color: #fff !important;
  margin: 0 auto 16px !important;
  box-shadow: 0 8px 24px rgba(5,150,105,.35) !important;
}

.blv-ob-success__title {
  all: unset !important;
  display: block !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--blv-text) !important;
  margin-bottom: 8px !important;
}

.blv-ob-success__msg {
  all: unset !important;
  display: block !important;
  font-size: 15px !important;
  color: var(--blv-muted) !important;
  margin-bottom: 28px !important;
}

/* Credentials box */
.blv-ob-credentials {
  background: #f8faff !important;
  border: 1.5px solid #bfdbfe !important;
  border-radius: 14px !important;
  padding: 22px 24px !important;
  text-align: left !important;
}

.blv-ob-credentials__title {
  all: unset !important;
  display: block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--blv-text) !important;
  margin-bottom: 6px !important;
}

.blv-ob-credentials__note {
  all: unset !important;
  display: block !important;
  font-size: 12.5px !important;
  color: var(--blv-muted) !important;
  margin-bottom: 16px !important;
  line-height: 1.5 !important;
}

.blv-ob-cred-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.blv-ob-cred-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  background: #fff !important;
  border: 1px solid var(--blv-divider) !important;
  border-radius: 10px !important;
}

.blv-ob-cred-item__label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--blv-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  min-width: 160px !important;
  flex-shrink: 0 !important;
}

.blv-ob-cred-item__value {
  flex: 1 !important;
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--blv-primary) !important;
  word-break: break-all !important;
}

.blv-ob-cred-copy {
  all: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  background: var(--blv-primary-lt) !important;
  color: var(--blv-primary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: var(--blv-font) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background var(--blv-t) !important;
}

.blv-ob-cred-copy:hover {
  background: #bfdbfe !important;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSE BOX (used by existing JS)
══════════════════════════════════════════════════════════════ */
.blv-ob-wrap .blv-response {
  display: none !important; /* hidden — we show our own success card instead */
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .blv-ob-wrap { margin: 0 !important; border-radius: 0 !important; }
  .blv-ob-hero { padding: 24px 20px 20px !important; }
  .blv-ob-hero__title { font-size: 22px !important; }
  .blv-ob-steps { padding: 14px 16px !important; overflow-x: auto !important; }
  .blv-ob-step__label { display: none !important; }
  .blv-ob-card { margin: 12px 12px 0 !important; border-radius: 12px !important; }
  .blv-ob-tabs { flex-direction: column !important; }
  .blv-ob-tab { flex: none !important; }
  .blv-ob-row--2, .blv-ob-row--3 { grid-template-columns: 1fr !important; }
  .blv-ob-subjects-grid { grid-template-columns: 1fr !important; }
  .blv-ob-submit-row { padding: 14px 12px 20px !important; }
  .blv-ob-success { margin: 12px 12px 20px !important; padding: 28px 20px 24px !important; }
  .blv-ob-cred-item { flex-wrap: wrap !important; }
  .blv-ob-cred-item__label { min-width: auto !important; }
  #blvStep3 .blv-ob-row, #blvStep3 > .blv-ob-field { padding: 0 16px !important; }
}