/* ==========================================================================
   Verification: verifyid.php (hero, stepper, step cards, uploads, Stripe form),
   updateprofile_votes.php and updateprofile_verificationoverview.php.
   Tokens from modern.css; the stepper and ring base styles live there too.
   ========================================================================== */

.bc-vf {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 16px 40px;
}

/* ---------- Hero ---------- */
.bc-vf-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  border-radius: var(--bc-r-lg);
  background:
    radial-gradient(420px 180px at 100% 0%, rgba(91, 75, 209, 0.09), transparent 70%),
    radial-gradient(360px 160px at 0% 100%, rgba(3, 195, 227, 0.08), transparent 70%),
    var(--bc-surface);
  box-shadow: var(--bc-shadow-2), 0 0 0 1px var(--bc-line);
}
.bc-vf-hero-text { min-width: 0; }
.bc-vf-kicker { margin: 0 0 4px; font-size: 11.5px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bc-accent); }
.bc-vf-hero h1 { margin: 0; font-size: 21px; line-height: 1.25; letter-spacing: -0.025em; color: var(--bc-ink); }
.bc-vf-hero p:not(.bc-vf-kicker) { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--bc-muted); }
.bc-vf-hero-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--bc-accent) !important; }
.bc-vf-hero-link:hover { text-decoration: underline; }

/* ---------- Stepper (base in modern.css) ---------- */
/* training.css also has a .bc-stepper (number input); undo its inline-flex pill here */
.bc-vf .bc-vf-stepper {
  display: block;
  gap: 0;
  margin: 14px 0 6px;
  padding: 12px 16px 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--bc-shadow-2), 0 0 0 1px var(--bc-line);
}
.bc-vf .bc-vf-stepper ol li a:hover .bc-stepper-label { color: var(--bc-ink); }

/* ---------- Step cards ---------- */
.bc-vf-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.bc-vf-step {
  scroll-margin-top: 190px;
  border-radius: var(--bc-r-lg);
  background: var(--bc-surface);
  box-shadow: var(--bc-shadow-2), 0 0 0 1px var(--bc-line);
  transition: box-shadow 0.3s var(--bc-ease), opacity 0.3s var(--bc-ease);
}
.bc-vf-step.bc-step-current { box-shadow: 0 0 0 2px rgba(91, 75, 209, 0.5), var(--bc-shadow-3); }
.bc-vf-step.is-locked { opacity: 0.62; }
.bc-vf-step.is-locked .bc-vf-step-body { filter: grayscale(0.4); }

.bc-vf-step-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px 0; }
.bc-vf-step-dot {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--bc-muted);
  background: var(--bc-surface);
  box-shadow: 0 0 0 1px var(--bc-line-strong) inset;
}
.bc-vf-step.is-done .bc-vf-step-dot { color: #fff; background: var(--bc-green); box-shadow: 0 6px 14px -6px rgba(22, 163, 74, 0.7); }
.bc-vf-step.is-pending .bc-vf-step-dot { color: #b45309; background: var(--bc-surface-2); box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35) inset; }
.bc-vf-step.is-next .bc-vf-step-dot,
.bc-vf-step.bc-step-current .bc-vf-step-dot { color: #fff; background: var(--bc-accent); box-shadow: 0 0 0 5px rgba(91, 75, 209, 0.16); }
.bc-vf-step-titles { flex: 1 1 auto; min-width: 0; }
.bc-vf-step-num { margin: 0; font-size: 11px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bc-faint); }
.bc-vf-step-head h2 { margin: 1px 0 0; font-size: 17.5px; line-height: 1.3; letter-spacing: -0.02em; color: var(--bc-ink); }
.bc-vf-step-body { padding: 12px 22px 22px 72px; }

/* Status pill */
.bc-vf-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  color: var(--bc-muted);
  background: var(--bc-surface-2);
  box-shadow: inset 0 0 0 1px var(--bc-line);
}
.bc-vf-pill i { font-size: 10.5px; }
.bc-vf-pill.is-todo i { font-size: 6px; }
.bc-vf-pill.is-done { color: #15803d; background: rgba(22, 163, 74, 0.1); box-shadow: none; }
.bc-vf-pill.is-pending { color: #b45309; background: rgba(245, 158, 11, 0.12); box-shadow: none; }
.bc-vf-pill.is-next { color: #fff; background: var(--bc-accent); box-shadow: none; }

/* Text blocks */
.bc-vf-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--bc-muted); }
.bc-vf-text { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--bc-ink-2); }
.bc-vf-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--bc-ink);
  background: var(--bc-surface-2);
  box-shadow: inset 0 0 0 1px var(--bc-line);
}
.bc-vf-name i { color: var(--bc-faint); letter-spacing: 0; }

.bc-vf-checks { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; }
.bc-vf-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--bc-ink-2); }
.bc-vf-checks li i {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--bc-accent);
  background: rgba(91, 75, 209, 0.1);
}

.bc-vf-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--bc-ink-2);
  background: var(--bc-surface-2);
  box-shadow: inset 0 0 0 1px var(--bc-line);
}
.bc-vf-note > i { flex: 0 0 auto; margin-top: 3px; color: var(--bc-accent); }
.bc-vf-note b { color: var(--bc-ink); }
.bc-vf-note.is-warn { background: rgba(245, 158, 11, 0.09); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.25); }
.bc-vf-note.is-warn > i { color: #b45309; }
.bc-vf-note.is-danger { margin: 12px 0 0; background: rgba(225, 29, 72, 0.06); box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.2); }
.bc-vf-note.is-danger > i { color: #be123c; }

.bc-vf-done { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--bc-ink-2); }
.bc-vf-done-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #15803d;
  background: rgba(22, 163, 74, 0.12);
}
.bc-vf-belt { max-width: 220px; margin: 12px 0 0 32px; }

/* ---------- Buttons ---------- */
.bc-vf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.bc-vf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  font: 650 14px/1.2 var(--bc-font);
  letter-spacing: -0.005em;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--bc-ease), filter 0.2s var(--bc-ease), background-color 0.2s var(--bc-ease);
}
.bc-vf-btn:active { transform: scale(0.98); }
.bc-vf-btn:focus-visible { outline: none; box-shadow: var(--bc-ring); }
.bc-vf-btn[disabled] { cursor: default; }
.bc-vf-btn i { font-size: 13px; }
.bc-vf-btn--primary { color: var(--bc-on-ink) !important; background: var(--bc-ink); box-shadow: 0 10px 22px -12px rgba(11, 11, 16, 0.7); }
.bc-vf-btn--primary:not([disabled]):hover { filter: brightness(1.35); }
.bc-vf-btn--soft { color: var(--bc-ink) !important; background: var(--bc-surface-2); box-shadow: inset 0 0 0 1px var(--bc-line-strong); }
.bc-vf-btn--soft:hover { background: var(--bc-surface-3); }
.bc-vf-btn--danger-soft { min-height: 38px; padding: 0 14px; font-size: 13px; color: #be123c !important; background: rgba(225, 29, 72, 0.07); box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.22); }
.bc-vf-btn--danger-soft:hover { background: rgba(225, 29, 72, 0.12); }
.bc-vf-btn--block { display: flex; width: 100%; }

/* ---------- Step 1: current picture ---------- */
.bc-vf-split { display: flex; align-items: flex-start; gap: 22px; }
.bc-vf-split-main { flex: 1 1 auto; min-width: 0; }
.bc-vf-avatar { flex: 0 0 auto; padding: 5px; border-radius: 50%; background: var(--bc-surface); box-shadow: 0 0 0 1px var(--bc-line), var(--bc-shadow-2); line-height: 0; }

/* ---------- Name: card / document switch ---------- */
.bc-vf-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 0 18px;
  padding: 4px;
  border-radius: 16px;
  background: var(--bc-surface-2);
  box-shadow: inset 0 0 0 1px var(--bc-line);
}
.bc-vf-seg-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 14px;
  border: 0;
  border-radius: 12px;
  text-align: left;
  color: var(--bc-muted);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s var(--bc-ease), box-shadow 0.2s var(--bc-ease), color 0.2s var(--bc-ease);
}
.bc-vf-seg-btn > i { font-size: 17px; }
.bc-vf-seg-btn span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.bc-vf-seg-btn b { font-size: 14px; font-weight: 650; color: inherit; }
.bc-vf-seg-btn small { font-size: 12px; color: var(--bc-faint); }
.bc-vf-seg-btn:hover { color: var(--bc-ink); }
.bc-vf-seg-btn[aria-selected="true"] { color: var(--bc-ink); background: var(--bc-surface); box-shadow: var(--bc-shadow-1), 0 0 0 1px var(--bc-line); }
.bc-vf-seg-btn[aria-selected="true"] > i { color: var(--bc-accent); }
.bc-vf-seg-btn:focus-visible { outline: none; box-shadow: var(--bc-ring); }
.bc-vf-panel[hidden] { display: none !important; }

/* ---------- Stripe form (verifyid_stripeform.php) ---------- */
.bc-vf-field { margin: 0 0 14px; }
.bc-vf-field > label,
.bc-vf-label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--bc-ink-2); }
.bc-vf-input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--bc-line-strong);
  border-radius: 12px;
  font: 400 16px var(--bc-font);
  color: var(--bc-ink);
  background: var(--bc-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bc-vf-input:focus { outline: none; border-color: var(--bc-accent); box-shadow: var(--bc-ring); }
.bc-vf-summary { margin: 0 0 14px; padding: 6px 16px; border-radius: 14px; background: var(--bc-surface-2); box-shadow: inset 0 0 0 1px var(--bc-line); }
.bc-vf-sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px; color: var(--bc-muted); font-variant-numeric: tabular-nums; }
.bc-vf-sum-row > span:last-child { color: var(--bc-ink-2); }
.bc-vf-sum-row.is-total { margin-top: 2px; border-top: 1px solid var(--bc-line-strong); font-weight: 700; color: var(--bc-ink); }
.bc-vf-sum-row.is-total > span:last-child { color: var(--bc-ink); font-size: 15px; }
#payment-form .bc-vf-btn--primary { margin-top: 16px; }
.bc-vf-secure { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--bc-muted); }
.bc-vf-secure > i { color: var(--bc-faint); }
.bc-vf-secure > span { flex: 1 1 200px; }
.bc-vf-secure img { display: block; width: 96px; height: auto; border-radius: 6px; }

/* ---------- Uploads ---------- */
.bc-vf-form { margin: 0; }
.bc-vf-form .bc-vf-btn--block { margin-top: 12px; }
.bc-vf-drop {
  position: relative;
  display: block;
  margin: 0;
  border-radius: 16px;
  border: 1.5px dashed rgba(91, 75, 209, 0.35);
  background: rgba(91, 75, 209, 0.035);
  cursor: pointer;
  transition: border-color 0.2s var(--bc-ease), background-color 0.2s var(--bc-ease), box-shadow 0.2s var(--bc-ease);
}
.bc-vf-drop:hover,
.bc-vf-drop.is-drag { border-color: var(--bc-accent); background: rgba(91, 75, 209, 0.07); }
.bc-vf-drop.is-drag { box-shadow: var(--bc-ring); }
.bc-vf-drop:focus-within { border-color: var(--bc-accent); box-shadow: var(--bc-ring); }
.bc-vf-drop.has-file { border-style: solid; border-color: var(--bc-line-strong); background: var(--bc-surface); }
/* The real input covers the zone, so clicks and drops land on it natively */
.bc-vf-drop-input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.bc-vf-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; text-align: center; }
.bc-vf-drop-empty[hidden], .bc-vf-drop-preview[hidden] { display: none !important; }
.bc-vf-drop-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--bc-accent);
  background: var(--bc-surface);
  box-shadow: var(--bc-shadow-1), 0 0 0 1px var(--bc-line);
}
.bc-vf-drop-empty b { font-size: 14.5px; font-weight: 650; color: var(--bc-ink); }
.bc-vf-drop-empty small { font-size: 12.5px; color: var(--bc-muted); }
.bc-vf-drop-preview { display: flex; align-items: center; gap: 14px; padding: 12px; }
.bc-vf-drop-preview img { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: var(--bc-surface-2); box-shadow: 0 0 0 1px var(--bc-line); }
.bc-vf-drop-preview img.is-missing { visibility: hidden; }
.bc-vf-drop-file { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bc-vf-drop-file b { font-size: 14px; font-weight: 650; color: var(--bc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-vf-drop-file small { font-size: 12.5px; color: var(--bc-muted); }

/* Selfie: example next to the upload */
.bc-vf-selfie { display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: start; }
.bc-vf-selfie-main { min-width: 0; }
.bc-vf-example { position: relative; margin: 0; }
.bc-vf-example img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; box-shadow: var(--bc-shadow-2), 0 0 0 1px var(--bc-line); }
.bc-vf-example figcaption {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  color: #fff;
  background: rgba(11, 11, 16, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Upload waiting for a moderator */
.bc-vf-pending {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(245, 158, 11, 0.07);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.22);
}
.bc-vf-pending-img { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 12px; object-fit: cover; background: var(--bc-surface-2); cursor: zoom-in; }
.bc-vf-pending-img.is-missing { display: none; }
.bc-vf-pending-text { min-width: 0; }
.bc-vf-pending-text p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--bc-ink-2); }
.bc-vf-pending-text .bc-vf-pending-title { margin-bottom: 4px; font-size: 14.5px; font-weight: 700; color: #92400e; }

/* ---------- Votes progress ---------- */
.bc-vf-points { margin: 0 0 16px; }
.bc-vf-points-head { display: flex; align-items: baseline; gap: 6px; }
.bc-vf-points-head b { font-size: 28px; font-weight: 750; letter-spacing: -0.03em; color: var(--bc-ink); font-variant-numeric: tabular-nums; }
.bc-vf-points-head span { font-size: 14px; color: var(--bc-muted); }
.bc-vf-bar { height: 8px; margin: 8px 0 14px; border-radius: 99px; background: var(--bc-surface-3); overflow: hidden; }
.bc-vf-bar span { display: block; height: 100%; border-radius: 99px; background: var(--bc-brand-grad); transition: width 0.8s var(--bc-ease); }
.bc-vf-points-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.bc-vf-points-grid > div { padding: 10px 12px; border-radius: 12px; background: var(--bc-surface-2); box-shadow: inset 0 0 0 1px var(--bc-line); }
.bc-vf-points-grid dt { font-size: 11.5px; font-weight: 600; color: var(--bc-muted); }
.bc-vf-points-grid dd { margin: 2px 0 0; font-size: 17px; font-weight: 700; color: var(--bc-ink); font-variant-numeric: tabular-nums; }

/* ---------- Final ---------- */
.bc-vf-final {
  scroll-margin-top: 190px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--bc-r-lg);
  border: 1.5px dashed var(--bc-line-strong);
  color: var(--bc-muted);
}
.bc-vf-final h2 { margin: 0; font-size: 15.5px; color: var(--bc-ink-2); }
.bc-vf-final p { margin: 2px 0 0; font-size: 13px; line-height: 1.45; }
.bc-vf-final-icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--bc-faint); background: var(--bc-surface-2); }
.bc-vf-final.is-done { border: 0; background: linear-gradient(120deg, #f0fdf4, #ffffff 70%); box-shadow: var(--bc-shadow-2), 0 0 0 1px rgba(22, 163, 74, 0.2); }
.bc-vf-final.is-done h2 { color: #14532d; }
.bc-vf-final.is-done p { color: #3f6b4f; }
.bc-vf-final.is-done .bc-vf-final-icon { color: #fff; background: var(--bc-green); }

/* ---------- Phones ---------- */
@media (max-width: 600px) {
  .bc-vf { padding: 12px 12px 32px; }
  .bc-vf-hero { gap: 14px; padding: 16px; }
  .bc-vf-hero .bc-vring { width: 72px; height: 72px; flex-basis: 72px; }
  .bc-vf-hero .bc-vring-center b { font-size: 18px; }
  .bc-vf-hero h1 { font-size: 17.5px; }
  .bc-vf-hero p:not(.bc-vf-kicker) { font-size: 13px; }
  .bc-vf-step-head { position: relative; padding: 16px 16px 0; gap: 12px; }
  .bc-vf-step-titles { flex: 1 1 0; }
  .bc-vf-step-head h2 { font-size: 16px; }
  .bc-vf-step-head .bc-vf-pill { position: absolute; top: 14px; right: 16px; height: 24px; font-size: 11.5px; }
  .bc-vf-step-body { padding: 12px 16px 18px; }
  .bc-vf-split { flex-direction: column; align-items: center; gap: 16px; }
  .bc-vf-split-main { width: 100%; }
  .bc-vf-selfie { grid-template-columns: 1fr; gap: 14px; }
  .bc-vf-example { max-width: 220px; }
  .bc-vf-seg-btn { gap: 8px; padding: 8px 10px; }
  .bc-vf-seg-btn > i { display: none; }
  .bc-vf-points-grid dd { font-size: 15px; }
  .bc-vf-belt { margin-left: 0; }
  .bc-vf-actions .bc-vf-btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Settings pages: updateprofile_votes.php, updateprofile_verificationoverview.php
   (card and row kit from settings.css)
   ========================================================================== */

.bc-vf-vote-belt { display: block; flex: 0 0 72px; width: 72px; align-self: center; line-height: 0; }
.bc-vf-vote-belt > * { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
.bc-vf-votes .bc-set-chips { align-items: center; gap: 8px; }
.bc-vf-vote-comment {
  margin: 4px 0 0;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--bc-ink-2);
  background: var(--bc-surface-2);
  overflow-wrap: anywhere;
}
.bc-vf-vote-comment::before { content: "\201C"; margin-right: 2px; color: var(--bc-faint); }
.bc-vf-vote-comment::after { content: "\201D"; margin-left: 1px; color: var(--bc-faint); }
.bc-vf-progress-ok { color: #15803d; font-weight: 650; }
.bc-vf-progress-no { color: var(--bc-muted); font-weight: 650; }
.bc-set-row-act .bc-vf-withdraw { min-height: 34px; padding: 0 12px; font-size: 12.5px; }
.bc-vf-pager { display: flex; justify-content: center; margin: 4px 0; }

/* Overview: summary checklist and per-requirement cards */
.bc-vf-ov-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bc-vf-ov-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--bc-ink-2); background: var(--bc-surface-2); box-shadow: inset 0 0 0 1px var(--bc-line); }
.bc-vf-ov-list li i { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
.bc-vf-ov-list li.is-ok i { color: #fff; background: var(--bc-green); }
.bc-vf-ov-list li.is-missing i { color: #be123c; background: rgba(225, 29, 72, 0.1); }
.bc-vf-video { position: relative; margin: 16px 0 8px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.bc-vf-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bc-vf-video-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--bc-accent) !important; }
.bc-vf-ov-photo { display: flex; justify-content: center; margin: 4px 0 16px; line-height: 0; }
.bc-vf-ov-gallery .w3-container { padding: 0 !important; margin: 0 0 8px !important; }
.bc-vf-ov-gallery img { border-radius: 12px !important; }
@media (max-width: 600px) {
  .bc-vf-ov-list { grid-template-columns: 1fr; }
}
.bc-vf-ov-chipline { margin: 0 0 14px; }
.bc-vf-votes .bc-set-row-meta > span { white-space: nowrap; }
/* Narrow lists: withdraw becomes an icon button so the name keeps its width */
@container (max-width: 480px) {
  .bc-vf-withdraw { width: 38px; min-height: 38px; padding: 0 !important; border-radius: 50%; }
  .bc-vf-withdraw span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bc-vf-votes .bc-set-row-extra { padding-left: 0; }
}

/* ---------- Moderation queue backlog (admin_verify.php) ---------- */
.bc-vq-backlog { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 14px; }
.bc-vq-count { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.25; text-decoration: none !important; color: var(--bc-ink-2) !important; background: var(--bc-surface-2); box-shadow: inset 0 0 0 1px var(--bc-line); }
.bc-vq-count.is-clear { color: #15803d !important; background: rgba(22, 163, 74, 0.1); box-shadow: none; }
.bc-vq-count.is-waiting { color: #a16207 !important; background: rgba(245, 158, 11, 0.13); box-shadow: none; }
.bc-vq-count.is-late { color: #be123c !important; background: rgba(225, 29, 72, 0.09); box-shadow: none; }
.bc-vq-count.is-current { box-shadow: inset 0 0 0 1.5px currentColor; }
.bc-vq-note { margin: 4px 0 10px; font-size: 13px; color: var(--bc-muted); text-align: center; }

/* ==========================================================================
   Rejections: which picture to change (functions_verification.php bcVerifyReasonInfo)
   verifyid.php card (vfRejectionCard), stop notice on the selfie step, the site-wide
   banner and its inline twin (bcVerifyRejectionNoticeHtml).
   ========================================================================== */
.bc-vf-reject {
  margin: 14px 0 0;
  padding: 18px 20px 20px;
  border-radius: var(--bc-r-lg);
  background: var(--bc-surface);
  box-shadow: 0 0 0 2px #e11d48, 0 18px 36px -24px rgba(225, 29, 72, 0.55);
}
.bc-vf-reject-kicker { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: 12px; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; color: #be123c; }
.bc-vf-reject-title { margin: 0 0 14px; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 800; color: var(--bc-ink); }
.bc-vf-reject-body { display: flex; align-items: flex-start; gap: 22px; }
.bc-vf-reject-pics { flex: 0 0 auto; display: flex; gap: 14px; }
.bc-vf-reject-text { flex: 1 1 auto; min-width: 0; }
.bc-vf-reject-why { margin: 0 0 10px; font-size: 16px; line-height: 1.5; color: var(--bc-ink); }
.bc-vf-reject-keep { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; font-size: 14.5px; font-weight: 600; line-height: 1.45; color: #15803d; background: rgba(22, 163, 74, 0.08); }
.bc-vf-reject-keep i { margin-top: 3px; }
.bc-vf-reject-actions { display: flex; flex-direction: column; gap: 8px; }

.bc-vf-rpic { margin: 0; width: 132px; text-align: center; }
.bc-vf-rpic-frame { position: relative; display: block; width: 132px; height: 132px; border-radius: 16px; line-height: 0; background: var(--bc-surface-2); }
.bc-vf-rpic-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.bc-vf-rpic-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 40px; color: var(--bc-faint); }
.bc-vf-rpic.is-bad .bc-vf-rpic-frame { box-shadow: 0 0 0 4px #e11d48; }
.bc-vf-rpic.is-good .bc-vf-rpic-frame { box-shadow: 0 0 0 3px #16a34a; }
.bc-vf-rpic.is-warn .bc-vf-rpic-frame { box-shadow: 0 0 0 3px #f59e0b; }
.bc-vf-rpic-mark { position: absolute; right: -8px; top: -8px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; border: 3px solid var(--bc-surface); line-height: 1; }
.bc-vf-rpic.is-bad .bc-vf-rpic-mark { background: #e11d48; }
.bc-vf-rpic.is-good .bc-vf-rpic-mark { background: #16a34a; }
.bc-vf-rpic.is-warn .bc-vf-rpic-mark { background: #f59e0b; }
.bc-vf-rpic figcaption { margin-top: 10px; font-size: 13px; line-height: 1.3; }
.bc-vf-rpic figcaption b { display: block; color: var(--bc-ink); }
.bc-vf-rpic figcaption span { display: block; font-weight: 700; }
.bc-vf-rpic.is-bad figcaption span { color: #be123c; }
.bc-vf-rpic.is-good figcaption span { color: #15803d; }
.bc-vf-rpic.is-warn figcaption span { color: #b45309; }

.bc-vf-btn--fix { min-height: 52px; font-size: 16px; font-weight: 750; color: #fff !important; background: #e11d48; box-shadow: 0 12px 24px -12px rgba(225, 29, 72, 0.8); white-space: normal; text-align: center; }
.bc-vf-btn--fix:hover { filter: brightness(1.08); }

/* Step states */
.bc-vf-step.is-rejected { box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.45), var(--bc-shadow-2); }
.bc-vf-step.is-rejected .bc-vf-step-dot { color: #fff; background: #e11d48; box-shadow: none; }
.bc-vf-pill.is-rejected { color: #be123c; background: rgba(225, 29, 72, 0.1); box-shadow: none; }
.bc-vf .bc-vf-stepper li.is-rejected .bc-step-dot { color: #fff; background: #e11d48; }
.bc-vf .bc-vf-stepper li.is-rejected .bc-stepper-label { color: #be123c; font-weight: 650; }
.bc-vf-rejnote { margin: 0 0 14px; }

/* Selfie step when the profile picture was the problem */
.bc-vf-stop { margin: 0 0 14px; padding: 16px; border-radius: 16px; background: rgba(225, 29, 72, 0.06); box-shadow: inset 0 0 0 2px rgba(225, 29, 72, 0.5); }
.bc-vf-stop p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.5; color: var(--bc-ink); }
.bc-vf-stop .bc-vf-stop-title { display: flex; gap: 8px; align-items: flex-start; font-size: 17px; font-weight: 800; line-height: 1.3; color: #be123c; }
.bc-vf-stop .bc-vf-stop-title i { margin-top: 3px; }
.bc-vf-anyway { margin-top: 6px; }
.bc-vf-anyway > summary { cursor: pointer; padding: 8px 0; font-size: 13px; font-weight: 600; color: var(--bc-muted); }
.bc-vf-anyway[open] > summary { margin-bottom: 10px; }

/* Site-wide banner (below the topbar) and the inline card version */
.bc-vrej { position: relative; margin: 0 0 14px; border-radius: 16px; background: var(--bc-surface-2); box-shadow: inset 0 0 0 2px #e11d48, 0 14px 30px -22px rgba(225, 29, 72, 0.7); }
.bc-vrej--inline { margin: 12px 0; }
.bc-vrej-card .bc-vrej--inline { margin: 8px 0 0; }
.bc-vrej-full { display: flex; align-items: center; gap: 14px; padding: 14px 52px 14px 16px; }
.bc-vrej--inline .bc-vrej-full { padding-right: 16px; }
.bc-vrej-full + .bc-vrej-full, .bc-vrej-mini + .bc-vrej-full { border-top: 1px solid rgba(225, 29, 72, 0.2); }
.bc-vrej-icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; background: #e11d48; }
.bc-vrej-text { flex: 1 1 auto; min-width: 0; }
.bc-vrej-title { display: block; font-size: 16px; line-height: 1.3; font-weight: 800; color: #9f1239; }
.bc-vrej-sub { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: #4c0519; }
.bc-vrej-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 14.5px; font-weight: 750; color: #fff !important; background: #e11d48; text-decoration: none !important; white-space: nowrap; }
.bc-vrej-btn:hover { filter: brightness(1.08); }
.bc-vrej-hide { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #9f1239; background: rgba(225, 29, 72, 0.1); cursor: pointer; }
.bc-vrej-mini { display: none; }
.bc-vrej.is-min { background: var(--bc-surface-2); box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.45); }
.bc-vrej.is-min .bc-vrej-full, .bc-vrej.is-min .bc-vrej-hide { display: none; }
.bc-vrej.is-min .bc-vrej-mini { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 13px; color: #9f1239 !important; text-decoration: none !important; }
.bc-vrej-mini b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-vrej-mini span { flex: 0 0 auto; font-weight: 750; text-decoration: underline; }
.bc-step.is-rejected .bc-step-dot { color: #fff; background: #e11d48; box-shadow: none; }
.bc-step.is-rejected .bc-step-hint { color: #be123c; font-weight: 650; }

@media (max-width: 600px) {
  .bc-vf-reject { padding: 16px; }
  .bc-vf-reject-title { font-size: 21px; }
  .bc-vf-reject-body { flex-direction: column; align-items: stretch; gap: 16px; }
  .bc-vf-reject-pics { justify-content: center; }
  .bc-vf-rpic, .bc-vf-rpic-frame { width: 120px; }
  .bc-vf-rpic-frame { height: 120px; }
  .bc-vrej-full { flex-wrap: wrap; align-items: flex-start; padding: 14px 48px 14px 14px; }
  .bc-vrej--inline .bc-vrej-full { padding-right: 14px; }
  .bc-vrej-text { flex-basis: calc(100% - 54px); }
  .bc-vrej-btn { flex: 1 1 100%; }
}

/* Name document: what to cover, with an example of a covered ID (vfCoverGuide) */
.bc-vf-cover {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  align-items: start;
  margin: 0 0 14px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(245, 158, 11, 0.08);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.28);
}
.bc-vf-cover-example { position: relative; margin: 0; }
.bc-vf-cover-example svg { display: block; width: 100%; height: auto; }
.bc-vf-cover-example figcaption {
  position: absolute;
  right: 8px;
  top: -9px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  color: #fff;
  background: #b45309;
}
.bc-vf-cover-main { min-width: 0; }
.bc-vf-cover-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--bc-ink); }
.bc-vf-cover-title i { color: #b45309; margin-right: 4px; }
.bc-vf-cover-sub { margin: 0 0 6px; font-size: 13.5px; color: var(--bc-ink-2); }
.bc-vf-cover-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.bc-vf-cover-list li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 1.4; color: var(--bc-ink-2); }
.bc-vf-cover-list li i { font-size: 10px; color: var(--bc-ink); }
.bc-vf-cover-tip { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--bc-muted); }
.bc-vf-linkbtn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 650;
  color: var(--bc-accent);
  text-decoration: underline;
  cursor: pointer;
}
@media (prefers-color-scheme: dark) {
  .bc-vf-cover-list li i { color: var(--bc-ink); }
}
.theme-dark .bc-vf-cover-list li i { color: var(--bc-ink); }
@media (max-width: 575px) {
  .bc-vf-cover { grid-template-columns: 1fr; gap: 12px; }
  .bc-vf-cover-example { max-width: 240px; }
}