/* =========================================================================
   SENDPK.COM — Account Verification Center styles
   (verification/index.php + verification/dashboard.php only)
   -------------------------------------------------------------------------
   Page-specific styling only. Every colour, radius, shadow and font comes
   from the shared design tokens in theme.css (:root) so the verification
   flow re-skins with the rest of the site. Everything is scoped under
   #verifyAuth / #verifyCenter so it can never leak onto another page.

   NOTE: the site runs a strict CSP (style-src 'self' — see
   theme_security_headers()), so the markup carries NO style="" attributes.
   Anything that used to be an inline style in the legacy pages lives here
   as a class or a [data-*] state selector instead.
   ========================================================================= */

/* =========================================================================
   0) SHARED PAGE SHELL
   ========================================================================= */
#verifyAuth,
#verifyCenter {
  /* Same green glow recipe as .hero / #loginPage — the verification pages
     have no hero of their own, so the wrapper carries it. */
  background: var(--section-glow), var(--wa-page);
  padding: 1.75rem 0 2.5rem;
}

/* The shell is a flex column so a short page (the sign-in screen, the
   "verified" screen) still pins the footer to the bottom of the viewport
   instead of leaving a pale gap under it. */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; }

/* --- Own app bar: logo left, signed-in account right --------------------
   Deliberately NOT the marketing navbar (theme_header): no Home/Pricing/
   Sign Up links to wander off into halfway through an ID upload. */
.vc-topbar {
  position: sticky; top: 0; z-index: 1030;
  background: var(--wa-surface);
  border-bottom: 1px solid rgba(17, 27, 33, .10);
  box-shadow: 0 1px 3px rgba(17, 27, 33, .04);
}
.vc-topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 64px; padding-top: .55rem; padding-bottom: .55rem;
}

.vc-brand {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--wa-ink); white-space: nowrap;
}
.vc-brand:hover, .vc-brand:focus { color: var(--wa-ink); }
.vc-brand-word {
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em;
}
/* Thin divider + label so the bar says which app you are in */
.vc-brand-sub {
  font-size: .82rem; font-weight: 600; color: var(--wa-muted);
  padding-left: .65rem; margin-left: .15rem; border-left: 1px solid var(--wa-line);
}

/* Sign-in screen has no account, so the right side offers support instead */
.vc-help {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .88rem; font-weight: 600; color: var(--wa-teal);
}
.vc-help i { font-size: 1.1rem; }
.vc-help:hover { color: var(--wa-teal-dark); }

/* Log out is the one destructive action in the bar, so it reads red rather
   than brand green — same red family as .vc-alert-danger and .vc-file-remove.
   Written as .btn.vc-logout (and :hover) so it outranks any .btn-* base rule
   from theme.css regardless of load order. */
.btn.vc-logout {
  white-space: nowrap;
  background: #FDF1F1; color: #A93226; border-color: #F3C6C6;
  box-shadow: var(--shadow-sm);
}
.btn.vc-logout:hover, .btn.vc-logout:focus {
  background: #A93226; color: #fff; border-color: #A93226;
  transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(169, 50, 38, .6);
}
.btn.vc-logout:active { transform: translateY(0); }
.btn.vc-logout:focus-visible { outline: 3px solid rgba(169, 50, 38, .4); outline-offset: 2px; }
.vc-logout i { margin-right: .35rem; }

/* --- Own footer: the copyright line, nothing else ---------------------- */
.vc-footer {
  flex: 0 0 auto;
  background: var(--wa-band); color: rgba(255, 255, 255, .82);
  padding: 1.1rem 0; font-size: .86rem;
}
.vc-footer-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem;
}
.vc-footer p { margin: 0; }

/* =========================================================================
   1) VERIFICATION LOGIN (verification/index.php)
   ========================================================================= */
.vc-auth-shell { max-width: 560px; margin: 0 auto; }

.vc-auth-card {
  background: var(--wa-surface);
  border: 1px solid var(--wa-line);
  border-radius: 24px;
  box-shadow: var(--shadow-md);
  padding: 2rem clamp(1.25rem, 4vw, 2.75rem) 2.25rem;
}

.vc-auth-badge {
  display: flex; align-items: center; gap: .9rem;
  background: var(--wa-page); border: 1px solid var(--wa-line);
  border-radius: 18px; padding: .9rem 1.1rem; margin-bottom: 1.5rem;
}
.vc-auth-badge img { width: 48px; height: 48px; object-fit: contain; flex: 0 0 auto; }
.vc-auth-badge-text { display: flex; flex-direction: column; line-height: 1.35; }
.vc-auth-badge-text strong { font-size: 1rem; font-weight: 800; color: var(--wa-ink); }
.vc-auth-badge-text span { font-size: .85rem; color: var(--wa-muted); }
.vc-auth-badge-check { margin-left: auto; color: var(--wa-action); font-size: 1.8rem; line-height: 1; }

.vc-auth-title { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin: 0 0 .35rem; }
.vc-auth-sub { color: var(--wa-muted); font-size: .93rem; margin: 0 0 1.5rem; }

.vc-auth-help {
  margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--wa-line);
  text-align: center; font-size: .88rem; color: var(--wa-muted);
}
.vc-auth-help a { font-weight: 600; }

.vc-auth-note {
  max-width: 560px; margin: 1.25rem auto 0; text-align: center;
  font-size: .84rem; color: var(--wa-muted);
}
.vc-auth-note i { color: var(--wa-action); margin-right: .35rem; }

/* =========================================================================
   2) CENTER HEADER (verification/dashboard.php)
   ========================================================================= */
.vc-head { max-width: 1120px; margin: 0 auto 1.5rem; }
.vc-head-top { margin-bottom: 1.25rem; }
.vc-head h1 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin: 0 0 .45rem; }
.vc-head-lead { color: var(--wa-muted); font-size: 1rem; margin: 0; max-width: 620px; }

/* Signed-in chip + log out (lives in .vc-topbar) */
.vc-account { display: flex; align-items: center; gap: .75rem; }
.vc-account-chip {
  display: flex; align-items: center; gap: .6rem;
  background: var(--wa-surface); border: 1px solid var(--wa-line);
  border-radius: 50rem; padding: .4rem .95rem .4rem .4rem; box-shadow: var(--shadow-sm);
}
.vc-avatar {
  display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%; background-image: var(--wa-grad); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: .9rem;
}
.vc-account-name { display: flex; flex-direction: column; line-height: 1.2; }
.vc-account-name strong { font-size: .88rem; color: var(--wa-ink); font-weight: 700; }
.vc-account-name span { font-size: .74rem; color: var(--wa-muted); }

/* =========================================================================
   3) PROGRESS + STEPPER
   ========================================================================= */
.vc-progress {
  background: var(--wa-surface); border: 1px solid var(--wa-line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
  padding: 1.35rem 1.35rem 1.15rem;
}
.vc-progress-top {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .5rem; margin-bottom: .7rem;
}
.vc-progress-label { font-family: var(--font-display); font-weight: 700; color: var(--wa-ink); font-size: .95rem; margin: 0; }
.vc-progress-count { font-size: .84rem; font-weight: 600; color: var(--wa-muted); }
.vc-progress-count b { color: var(--wa-teal); }

.vc-bar { height: 8px; border-radius: 50rem; background: var(--wa-soft); overflow: hidden; }
.vc-bar-fill {
  display: block; height: 100%; width: 0; border-radius: 50rem;
  background-image: var(--wa-grad); transition: width .6s var(--wa-ease);
}
/* Fill width is data-driven — CSP forbids style="" attributes. */
.vc-bar[data-done="0"] .vc-bar-fill { width: 4%; }
.vc-bar[data-done="1"] .vc-bar-fill { width: 33.33%; }
.vc-bar[data-done="2"] .vc-bar-fill { width: 66.66%; }
.vc-bar[data-done="3"] .vc-bar-fill { width: 100%; }

/* --- The three step tiles -------------------------------------------- */
.vc-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem;
  margin-top: 1.15rem; padding: 0; list-style: none;
}
.vc-step {
  display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left;
  background: var(--wa-page); border: 1.5px solid var(--wa-line);
  border-radius: 14px; padding: .8rem .9rem; color: var(--wa-body);
  transition: transform .25s var(--wa-ease), box-shadow .25s var(--wa-ease),
              border-color .25s var(--wa-ease), background-color .25s var(--wa-ease);
}
button.vc-step { cursor: pointer; }
button.vc-step:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(34, 197, 94, .45); }
.vc-step:focus-visible { outline: 3px solid rgba(34, 197, 94, .45); outline-offset: 2px; }

.vc-step-mark {
  display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px;
  border-radius: 12px; background: var(--wa-surface); border: 1px solid var(--wa-line);
  color: var(--wa-muted); font-family: var(--font-display); font-weight: 800; font-size: .95rem;
}
.vc-step-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.vc-step-name { font-family: var(--font-display); font-weight: 700; font-size: .93rem; color: var(--wa-ink); }
.vc-step-state { font-size: .76rem; font-weight: 600; color: var(--wa-muted); }

/* Completed */
.vc-step.is-done { background: rgba(34, 197, 94, .09); border-color: rgba(34, 197, 94, .35); }
.vc-step.is-done .vc-step-mark { background: var(--wa-action); border-color: var(--wa-action); color: #fff; }
.vc-step.is-done .vc-step-state { color: var(--wa-teal); }

/* Current */
.vc-step.is-active {
  background: var(--wa-surface); border-color: var(--wa-action);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .14), var(--shadow-sm);
}
.vc-step.is-active .vc-step-mark { background-image: var(--wa-grad); border-color: transparent; color: #fff; }
.vc-step.is-active .vc-step-state { color: var(--wa-teal); }

/* Still to do */
.vc-step.is-todo { opacity: .85; }

/* =========================================================================
   4) PREMIUM CARDS
   ========================================================================= */
.vc-card {
  background: var(--wa-surface); border: 1px solid var(--wa-line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.vc-card + .vc-card { margin-top: 1.15rem; }
.vc-card-head {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--wa-line); background: var(--wa-page);
}
.vc-card-icon {
  display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px;
  border-radius: 10px; background: rgba(34, 197, 94, .12); color: var(--wa-teal); font-size: 1.05rem;
}
.vc-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--wa-ink); margin: 0; }
.vc-card-sub { font-size: .82rem; color: var(--wa-muted); margin: .1rem 0 0; }
.vc-card-body { padding: 1.25rem; }

/* Step intro strip above the cards */
.vc-pane-head { margin-bottom: 1.15rem; }
.vc-pane-head h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 0 0 .3rem; }
.vc-pane-head p { color: var(--wa-muted); font-size: .95rem; margin: 0; }

/* --- Requirement checklist ------------------------------------------- */
.vc-list { list-style: none; margin: 0; padding: 0; }
.vc-list li {
  display: flex; gap: .65rem; align-items: flex-start;
  padding: .45rem 0; font-size: .94rem; color: var(--wa-body);
}
.vc-list li + li { border-top: 1px dashed var(--wa-line); }
.vc-list i { color: var(--wa-action); margin-top: .25rem; flex: 0 0 auto; font-size: .95rem; }
.vc-list b { color: var(--wa-ink); }

/* --- Urdu instruction card ------------------------------------------- */
/* The soft green header band is the marker for "this section is in Urdu" —
   it appears on every Urdu block on the page and nowhere else. */
.vc-urdu .vc-card-head { background: rgba(34, 197, 94, .07); }
/* dir="rtl" on the header (set in the markup) reverses the flex row, so the
   icon moves to the right and the title block packs against the right edge,
   above the RTL list it introduces. The English sub-line rides along; it
   still reads left-to-right, just aligned right with everything else. */
.vc-urdu .vc-card-head[dir="rtl"] .vc-card-sub { text-align: right; }
.vc-urdu-list { list-style: none; margin: 0; padding: 0; direction: rtl; text-align: right; }
.vc-urdu-list li {
  position: relative; padding: .5rem 1.4rem .5rem 0; font-size: 1rem; color: var(--wa-body);
}
.vc-urdu-list li + li { border-top: 1px dashed var(--wa-line); }
.vc-urdu-list li::before {
  content: ""; position: absolute; right: .35rem; top: 1.35rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--wa-green);
}
.vc-urdu-list p { margin: 0; }
/* Single Urdu paragraph (status screens, modal) */
.vc-urdu-text { direction: rtl; text-align: right; font-size: 1rem; color: var(--wa-body); margin: 0; }

/* --- Equal-height split (CNIC + Face ID steps) -------------------------
   The instruction stack on the left and the example card on the right are
   never naturally the same height — the example photo is tall, the
   checklist is not — and the ragged bottom edge is what made the section
   look unfinished. Here both columns end on exactly the same line: the
   taller one sets the height, and the shorter one's cards grow and centre
   their content, so the leftover space reads as generous padding instead
   of a gap. Works whichever side happens to be taller.

   The Documents step deliberately does NOT use this — its left column is
   several times longer than the two example images, so stretching them to
   match would be absurd; that one keeps the sticky preview instead.
   ---------------------------------------------------------------------- */
.vc-split > [class*="col-"] { display: flex; flex-direction: column; gap: 1.15rem; }
.vc-split .vc-card { flex: 1 1 auto; display: flex; flex-direction: column; }
.vc-split .vc-card + .vc-card { margin-top: 0; }        /* the column gap spaces them now */
.vc-split .vc-card-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.vc-split .vc-preview { flex: 1 1 auto; display: flex; flex-direction: column; position: static; }

/* --- Example image preview card --------------------------------------- */
.vc-preview { position: sticky; top: 84px;   /* clears the sticky .vc-topbar */ }
.vc-preview-figure { margin: 0; padding: 1rem; background: var(--wa-page); border-radius: 12px; }
.vc-preview-figure img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--wa-line); background: var(--wa-surface);
}
.vc-preview-figure + .vc-preview-figure { margin-top: .9rem; }
.vc-preview-caption {
  display: block; margin-top: .6rem; font-size: .8rem; color: var(--wa-muted); text-align: center;
}
@media (max-width: 991.98px) { .vc-preview { position: static; } }

/* =========================================================================
   5) FORM CONTROLS
   ========================================================================= */
.vc-field { margin-bottom: 1.15rem; }
.vc-field:last-child { margin-bottom: 0; }
.vc-label {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: .88rem; color: var(--wa-ink); margin-bottom: .45rem;
}
.vc-label .vc-req { color: #C0392B; font-weight: 700; }
.vc-hint { font-size: .81rem; color: var(--wa-muted); margin: .45rem 0 0; }

.vc-input-wrap { position: relative; display: flex; align-items: center; }
.vc-input-wrap > i {
  position: absolute; left: 1rem; color: var(--wa-muted); font-size: 1.05rem; pointer-events: none;
  transition: color .2s ease;
}
.vc-input-wrap:focus-within > i { color: var(--wa-teal); }

.vc-input, .vc-select, .vc-textarea {
  width: 100%; font-family: var(--font-sans); font-size: .97rem; color: var(--wa-ink);
  background: var(--wa-surface); border: 1.5px solid var(--wa-line); border-radius: 12px;
  padding: .8rem 1rem; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.vc-input-wrap .vc-input { padding-left: 2.9rem; }
.vc-input::placeholder, .vc-textarea::placeholder { color: #9AA6AD; }
.vc-input:focus, .vc-select:focus, .vc-textarea:focus {
  outline: none; border-color: var(--wa-action); box-shadow: 0 0 0 4px rgba(34, 197, 94, .15);
}
.vc-textarea { min-height: 130px; line-height: 1.6; resize: vertical; }

/* A field the submit check rejected. Same red family as .vc-side.is-missing,
   so "this one is wrong" looks the same wherever it appears on the page.
   The rule is written .vc-input.is-missing (two classes) so it outranks the
   plain .vc-input border above regardless of source order, and the :focus
   version keeps the red while the customer is fixing it — a green focus ring
   on a field that was just refused reads as "this is fine now" when it is
   not. */
.vc-input.is-missing, .vc-select.is-missing, .vc-textarea.is-missing {
  border-color: #C0392B; background-color: #FDF7F6;
}
.vc-input.is-missing:focus, .vc-select.is-missing:focus, .vc-textarea.is-missing:focus {
  border-color: #C0392B; box-shadow: 0 0 0 4px rgba(192, 57, 43, .15);
}
.vc-input-wrap.is-missing > i { color: #C0392B; }

/* CNIC field — the headline input of the whole flow */
.vc-input-lg {
  font-size: 1.2rem; font-weight: 700; letter-spacing: .06em;
  font-family: var(--font-display); padding-top: .95rem; padding-bottom: .95rem;
}

.vc-select {
  appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer;
  /* Inline SVG caret keeps this self-contained (no extra image request). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23667781'%3E%3Cpath d='M8 11.5 2.5 6h11z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 14px;
}

/* =========================================================================
   5b) SERVICE-TYPE SELECTION CARDS
   -------------------------------------------------------------------------
   A <select>'s open list is painted by the operating system — no CSS can
   reach it, which is why the dropdown looked out of place next to the rest
   of the page. With only three choices, each carrying a short explanation,
   cards beat a dropdown anyway: everything is visible at once, nothing
   opens, and each option gets room for an icon and a line of description.

   The native <select id="serviceType"> is still in the markup and still the
   single source of truth — these cards only write to it. The swap is gated
   on html.js-vc-tiles (added by verification-center.js), so with JavaScript
   off the real dropdown is shown instead and nothing is lost.
   ========================================================================= */
.vc-servicepicker { display: none; }
.js-vc-tiles .vc-servicepicker {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem;
}
.js-vc-tiles #serviceType { display: none; }

/* Grid (not flex) so the same three spans can restack into "icon beside a
   title/description block" on phones without a wrapper element. The radio
   and the tick are position:absolute, so they take no grid cell. */
.vc-service {
  position: relative; cursor: pointer; overflow: hidden;
  display: grid; grid-template-columns: 1fr; grid-template-areas: "icon" "title" "desc";
  /* align-content:start, not the default stretch — the cards are all the
     height of the tallest one, and stretch would pour that extra height
     into the rows of the shorter cards, leaving their titles sitting a few
     pixels lower than their neighbours'. */
  justify-items: start; align-content: start;
  background: var(--wa-page); border: 1.5px solid var(--wa-line);
  border-radius: 14px; padding: 1.05rem 1rem 1rem;
  transition: transform .25s var(--wa-ease), box-shadow .25s var(--wa-ease),
              border-color .25s var(--wa-ease), background-color .25s var(--wa-ease);
}
.vc-service-icon  { grid-area: icon; }
.vc-service-title { grid-area: title; }
.vc-service-desc  { grid-area: desc; }
/* The radio stays a real, focusable input (arrow-key navigation between the
   three options comes free with a shared name) — it is just not painted. */
.vc-service input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.vc-service:hover { border-color: rgba(34, 197, 94, .45); background: var(--wa-surface); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.vc-service:focus-within { outline: 3px solid rgba(34, 197, 94, .45); outline-offset: 2px; }

.vc-service-icon {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: .55rem;
  border-radius: 11px; background: var(--wa-surface); border: 1px solid var(--wa-line);
  color: var(--wa-teal); font-size: 1.1rem;
  transition: background-color .25s var(--wa-ease), color .25s var(--wa-ease), border-color .25s var(--wa-ease);
}
.vc-service-title { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--wa-ink); line-height: 1.25; margin-bottom: .12rem; }
.vc-service-desc { font-size: .8rem; color: var(--wa-muted); line-height: 1.4; }

/* Corner tick, hidden until this card is the chosen one */
.vc-service-tick {
  position: absolute; top: .7rem; right: .7rem;
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background-image: var(--wa-grad); color: #fff; font-size: .8rem;
  opacity: 0; transform: scale(.6);
  transition: opacity .2s var(--wa-ease), transform .2s var(--wa-ease);
}

/* Chosen state — set from JS (.is-selected) rather than :has(), so it works
   the same in every browser that reaches this page. */
.vc-service.is-selected {
  background: var(--wa-surface); border-color: var(--wa-action);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .14), var(--shadow-sm);
}
.vc-service.is-selected .vc-service-icon { background-image: var(--wa-grad); border-color: transparent; color: #fff; }
.vc-service.is-selected .vc-service-tick { opacity: 1; transform: scale(1); }

/* Phones: one card per row, icon to the left of the title/description. */
@media (max-width: 767.98px) {
  .js-vc-tiles .vc-servicepicker { grid-template-columns: 1fr; }
  .vc-service {
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon title" "icon desc";
    align-items: center; column-gap: .85rem;
    padding: .85rem 2.4rem .85rem .9rem;
  }
  .vc-service-icon { margin-bottom: 0; align-self: center; }
}

/* =========================================================================
   6) DRAG & DROP UPLOAD
   ========================================================================= */
.vc-drop {
  position: relative; border: 2px dashed #C9DFD2; border-radius: 16px;
  background: linear-gradient(180deg, rgba(34, 197, 94, .05), rgba(34, 197, 94, .01));
  padding: 1.9rem 1.25rem; text-align: center;
  transition: border-color .25s var(--wa-ease), background-color .25s var(--wa-ease),
              transform .25s var(--wa-ease), box-shadow .25s var(--wa-ease);
}
/* The real <input type="file"> sits invisibly on top of the whole zone.
   It is NOT display:none on purpose — a hidden input with `required` can't
   be focused, and Chrome then refuses to submit the form at all. Keeping it
   in the layout also means native drag-and-drop and click-to-browse work
   with zero JavaScript; the script only adds the highlight + file list. */
.vc-drop-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; z-index: 2; font-size: 0;
}
.vc-drop:hover, .vc-drop.is-dragover {
  border-color: var(--wa-action); background-color: rgba(34, 197, 94, .08);
}
.vc-drop.is-dragover { transform: scale(1.01); box-shadow: 0 0 0 5px rgba(34, 197, 94, .12); }
.vc-drop-input:focus-visible + .vc-drop-inner { outline: 3px solid rgba(34, 197, 94, .45); outline-offset: 6px; border-radius: 10px; }

.vc-drop-inner { position: relative; z-index: 1; pointer-events: none; }
.vc-drop-icon {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto .7rem;
  border-radius: 16px; background: var(--wa-surface); box-shadow: var(--shadow-sm);
  color: var(--wa-teal); font-size: 1.6rem;
}
.vc-drop-title { font-family: var(--font-display); font-weight: 700; color: var(--wa-ink); font-size: 1rem; margin: 0 0 .2rem; }
.vc-drop-sub { font-size: .88rem; color: var(--wa-muted); margin: 0 0 .9rem; }
.vc-drop-sub u { color: var(--wa-teal); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid rgba(34, 197, 94, .5); }
.vc-drop-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; margin: 0; }

.vc-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--wa-surface); border: 1px solid var(--wa-line); color: var(--wa-body);
  border-radius: 50rem; padding: .2rem .65rem; font-size: .73rem; font-weight: 700; letter-spacing: .03em;
}
.vc-chip-max { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .3); color: var(--wa-teal); }

/* --- Front / back side boxes (CNIC step) -------------------------------
   Two labelled boxes side by side instead of one multi-select input.
   Each .vc-side owns its own .vc-drop AND its own [data-vc-filelist], which
   is what keeps the shared "list the chosen files" script working unchanged:
   it looks for the list inside the drop zone's parent. */
.vc-sides { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.vc-side {
  border: 1px solid var(--wa-line); border-radius: 16px;
  background: var(--wa-surface); padding: .85rem;
  transition: border-color .25s var(--wa-ease), box-shadow .25s var(--wa-ease);
}
.vc-side-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.vc-side-num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(34, 197, 94, .12); color: var(--wa-teal);
  font-weight: 800; font-size: .8rem;
}
.vc-side-text { min-width: 0; }
.vc-side-title {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: .88rem; color: var(--wa-ink); margin: 0; cursor: pointer;
}
.vc-side-title .vc-req { color: #C0392B; font-weight: 700; }
.vc-side-sub { font-size: .76rem; color: var(--wa-muted); margin: 0; }

/* The tick only appears once that side actually holds a file. */
.vc-side-tick { margin-left: auto; flex: 0 0 auto; color: var(--wa-action); font-size: 1.15rem; opacity: 0; transition: opacity .2s ease; }
.vc-side.is-filled { border-color: var(--wa-action); box-shadow: 0 0 0 3px rgba(34, 197, 94, .10); }
.vc-side.is-filled .vc-side-tick { opacity: 1; }
.vc-side.is-filled .vc-side-num { background: var(--wa-action); color: #fff; }

/* A missing side is called out in red after a blocked submit. */
.vc-side.is-missing { border-color: #E8B4B0; box-shadow: 0 0 0 3px rgba(192, 57, 43, .09); }
.vc-side.is-missing .vc-side-num { background: #F8DADA; color: #A93226; }

/* Smaller drop zone: two of them sit in the space one used to take. */
.vc-drop-sm { padding: 1.15rem .75rem; border-radius: 14px; }
.vc-drop-sm .vc-drop-icon { width: 44px; height: 44px; font-size: 1.25rem; margin-bottom: .55rem; }
.vc-drop-sm .vc-drop-title { font-size: .9rem; }
.vc-drop-sm .vc-drop-sub { font-size: .8rem; margin-bottom: 0; }

.vc-hint-top { margin: 0 0 .7rem; }
.vc-sides-meta { justify-content: flex-start; margin-top: .8rem; }

/* Thumbnail of the picture that was chosen, so the customer can see at a
   glance that they picked the right side of the card. */
.vc-file-thumb {
  flex: 0 0 auto; width: 44px; height: 30px; border-radius: 6px;
  object-fit: cover; border: 1px solid var(--wa-line); background: var(--wa-page);
}

@media (max-width: 575.98px) {
  .vc-sides { grid-template-columns: 1fr; }
}

/* --- Chosen files list ------------------------------------------------ */
.vc-files { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem; }
.vc-files:empty { margin: 0; }
.vc-file {
  display: flex; align-items: center; gap: .7rem;
  background: var(--wa-page); border: 1px solid var(--wa-line);
  border-radius: 12px; padding: .6rem .85rem;
}
.vc-file-icon { color: var(--wa-teal); font-size: 1.15rem; flex: 0 0 auto; }
.vc-file-meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.vc-file-name {
  font-size: .87rem; font-weight: 600; color: var(--wa-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vc-file-size { font-size: .76rem; color: var(--wa-muted); }
.vc-file-flag {
  margin-left: auto; flex: 0 0 auto; font-size: .72rem; font-weight: 700;
  border-radius: 50rem; padding: .18rem .6rem;
  background: rgba(34, 197, 94, .14); color: var(--wa-teal);
}
.vc-file.is-toobig { border-color: #F3C6C6; background: #FDF1F1; }
.vc-file.is-toobig .vc-file-icon { color: #C0392B; }
.vc-file.is-toobig .vc-file-flag { background: #F8DADA; color: #A93226; }

/* --- Extra "Add another file" rows ------------------------------------ */
.vc-extra { display: grid; gap: .6rem; margin-top: .9rem; }
.vc-extra:empty { margin: 0; }
.vc-file-row {
  display: flex; align-items: center; gap: .65rem;
  background: var(--wa-page); border: 1px solid var(--wa-line);
  border-radius: 12px; padding: .55rem .65rem .55rem .85rem;
}
.vc-file-row-num { color: var(--wa-muted); font-weight: 700; font-size: .85rem; flex: 0 0 auto; }
.vc-file-row input[type="file"] {
  flex: 1 1 auto; min-width: 0; font-size: .85rem; color: var(--wa-body);
}
.vc-file-row input[type="file"]::file-selector-button {
  border: 1px solid var(--wa-line); background: var(--wa-surface); color: var(--wa-teal);
  border-radius: 50rem; padding: .35rem .9rem; margin-right: .7rem;
  font-weight: 600; font-size: .82rem; cursor: pointer;
}
.vc-file-remove {
  flex: 0 0 auto; border: 1px solid #F3C6C6; background: #FDF1F1; color: #A93226;
  border-radius: 50rem; width: 32px; height: 32px; display: grid; place-items: center;
  cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
.vc-file-remove:hover { background: #A93226; color: #fff; border-color: #A93226; }

/* --- Upload actions row ----------------------------------------------- */
.vc-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--wa-line);
}
.vc-actions-note { font-size: .8rem; color: var(--wa-muted); margin: 0; }
.vc-btn-add {
  background: var(--wa-surface); color: var(--wa-teal); border: 1.5px dashed #BCE3CD;
  border-radius: 50rem; font-weight: 600; font-size: .88rem; padding: .5rem 1.1rem; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.vc-btn-add:hover { background: #F4FBF7; border-color: var(--wa-action); color: var(--wa-teal-dark); }

/* =========================================================================
   7) ALERTS / STATUS
   ========================================================================= */
.vc-alert {
  display: flex; gap: .8rem; align-items: flex-start;
  border-radius: 14px; padding: 1rem 1.15rem; margin-bottom: 1.15rem;
  font-size: .92rem; border: 1px solid transparent;
}
.vc-alert i { font-size: 1.2rem; flex: 0 0 auto; margin-top: .05rem; }
.vc-alert strong { display: block; font-family: var(--font-display); font-weight: 700; margin-bottom: .2rem; }
.vc-alert p { margin: 0; }
/* An alert can carry more than one paragraph (the OTP "Important" note has
   two: what to write in the form, and the NTN name-match rule). Without
   this they would run together as one wall of text. */
.vc-alert p + p { margin-top: .6rem; }
.vc-alert a { font-weight: 600; word-break: break-word; }

.vc-alert-danger { background: #FDF1F1; border-color: #F3C6C6; color: #8E2A2A; }
.vc-alert-danger i, .vc-alert-danger strong { color: #A93226; }
.vc-alert-info { background: rgba(52, 183, 241, .08); border-color: rgba(52, 183, 241, .35); color: var(--wa-body); }
.vc-alert-info i { color: #1B7FA8; }
.vc-alert-warning { background: #FFF7E6; border-color: #F5D9A0; color: #7A5A16; }
.vc-alert-warning i { color: #B8860B; }

/* --- Bilingual notice ---------------------------------------------------
   A rule the customer must not miss is written twice, English then Urdu, in
   the SAME box — split across two cards it gets read once and forgotten. The
   divider makes clear where one language ends and the other begins. */
.vc-alert-bi p.urdu {
  direction: rtl; text-align: right; font-size: 1rem; line-height: 2.1;
  margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed currentColor;
}
.vc-alert-bi p.urdu b { font-weight: 700; }

/* Standalone status screens (verified / under review) */
.vc-status-shell { max-width: 640px; margin: 0 auto; }
.vc-status-card {
  background: var(--wa-surface); border: 1px solid var(--wa-line);
  border-radius: 24px; box-shadow: var(--shadow-md); padding: 2.5rem 1.75rem; text-align: center;
}
.vc-status-icon {
  display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 1.2rem;
  border-radius: 50%; font-size: 2.5rem; color: #fff;
}
.vc-status-icon-ok { background-image: var(--wa-grad); box-shadow: var(--shadow-cta); }
.vc-status-icon-wait { background: linear-gradient(120deg, #E9A33A, #F5C466); box-shadow: 0 14px 30px -10px rgba(233, 163, 58, .5); }
.vc-status-icon-blocked { background: linear-gradient(120deg, #A93226, #D9534F); box-shadow: 0 14px 30px -10px rgba(169, 50, 38, .5); }
.vc-status-card h1 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 .6rem; }
.vc-status-card > p { color: var(--wa-body); font-size: 1rem; margin: 0 0 .6rem; }
.vc-status-meta { color: var(--wa-muted); font-size: .88rem; margin-top: 1.1rem; }
.vc-status-divider { height: 1px; background: var(--wa-line); margin: 1.5rem 0 1.25rem; border: 0; }
.vc-status-urdu {
  background: var(--wa-page); border: 1px solid var(--wa-line);
  border-radius: 14px; padding: 1rem 1.15rem; text-align: right;
}
.vc-status-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.2rem; }

/* =========================================================================
   8) LOADER — kept as #newloader so the existing jQuery show/hide still runs
   ========================================================================= */
.vc-loader { display: none; margin: 1rem auto 0; text-align: center; }
.vc-loader::before {
  content: ""; display: block; width: 38px; height: 38px; margin: 0 auto .6rem;
  border-radius: 50%; border: 3px solid var(--wa-line); border-top-color: var(--wa-action);
  animation: vc-spin .9s linear infinite;
}
.vc-loader span { font-size: .84rem; font-weight: 600; color: var(--wa-muted); }
@keyframes vc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .vc-loader::before { animation-duration: 2.4s; }
}

/* =========================================================================
   9) SERVICE-TYPE INSTRUCTION BLOCKS (Documents step)
   -------------------------------------------------------------------------
   Hidden until #serviceType picks one. The legacy inline JS toggles
   element.style.display directly, and it still does — a JS-set style is a
   CSSOM change, which the CSP does not restrict.
   ========================================================================= */
.download-options { display: none; }
.vc-doc-block {
  border: 1px solid var(--wa-line); border-radius: 14px; padding: 1.1rem 1.15rem;
  background: var(--wa-page); margin-top: 1.15rem;
  overflow: hidden;   /* lets the Urdu header band below bleed to the corners */
}
.vc-doc-block h3 {
  font-size: .95rem; margin: 0 0 .8rem; display: flex; align-items: center; gap: .5rem;
}
.vc-doc-block h3 i { color: var(--wa-teal); }

/* Urdu headings sit on the right, over the RTL list they introduce.
   dir="rtl" in the markup is what does the moving: a flex row follows the
   writing direction, so the icon (first child) lands on the right and the
   whole group packs against the right edge — no float or text-align needed.

   font-weight:normal is not optional. theme.css sets h1–h6 to 700, and the
   self-hosted Nafees Nastaleeq webfont has only one weight, so asking for
   bold makes the browser fake it and the connected Nastaliq letterforms
   come out distorted. */
/* font-family has to be restated here, it cannot be left to theme.css's
   .urdu class. Both .urdu and .vc-card-title are single-class selectors, so
   neither out-ranks the other and the cascade falls back to source order —
   and this file loads AFTER theme.css, which means .vc-card-title's display
   font was quietly winning and the Urdu title rendered in Plus Jakarta Sans
   (i.e. whatever Arabic face the OS substituted). Same stack as theme.css's
   .urdu; keep the two in step if that ever changes.

   font-weight:normal is not optional either. theme.css sets h1–h6 to 700
   and .vc-card-title to 700, but the self-hosted Nafees Nastaleeq webfont
   has a single weight — asking for bold makes the browser synthesise it and
   the connected Nastaliq letterforms come out distorted. */
.vc-doc-block h3.urdu,
.vc-urdu .vc-card-title.urdu {
  font-family: 'Nafees Nastaleeq', 'Jameel Noori Nastaleeq', 'Alvi Nastaleeq', serif;
  font-weight: normal; font-size: 1.05rem; line-height: 2.1;
}
/* Same soft green header band the Urdu cards on the CNIC and Face ID steps
   carry, so every Urdu section on the page is marked the same way. Negative
   margins equal to the block's own padding pull it out to the edges; the
   block's overflow:hidden clips it back to the rounded corners. */
.vc-doc-block h3.urdu {
  justify-content: flex-start;                 /* = right edge under dir="rtl" */
  margin: -1.1rem -1.15rem 1rem;
  padding: .7rem 1.15rem;
  background: rgba(34, 197, 94, .07);
  border-bottom: 1px solid var(--wa-line);
}

/* One consistent 1.15rem gap between every block inside a service-type
   panel, whatever the mix is (doc block, warning alert, Urdu block, red
   compliance note). Spacing has to come from margins, not a flex `gap`:
   the legacy script shows these panels with element.style.display='block',
   an inline style that would override any display:flex set here.
   .vc-doc-block already carries the top margin; the alerts did not, which
   is why the OTP panel's "Important" box sat flush against the card above
   it. The last child drops its bottom margin so the panel does not leave a
   dead strip at the bottom of the card. */
.download-options .vc-alert { margin-top: 1.15rem; }
.download-options > :last-child { margin-bottom: 0; }

/* Download-the-form buttons */
.vc-download {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--wa-surface); border: 1.5px solid #BCE3CD; color: var(--wa-teal);
  border-radius: 50rem; padding: .5rem 1.05rem; font-weight: 600; font-size: .87rem;
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.vc-download:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--wa-action); color: var(--wa-teal-dark); }
.vc-download i { font-size: 1rem; }
.vc-download-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .9rem; }

/* =========================================================================
   10) NOTICE MODAL
   ========================================================================= */
.vc-modal .modal-content { border: 0; border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.vc-modal .modal-header {
  background: var(--wa-teal-dark); color: #fff; border-bottom: 0; padding: 1.1rem 1.4rem;
  display: flex; align-items: center; gap: .7rem;
}
.vc-modal .modal-title { color: #fff; font-size: 1.05rem; margin: 0; }
.vc-modal .modal-header i { font-size: 1.35rem; color: var(--wa-green); }
.vc-modal .modal-body { padding: 1.4rem; }
.vc-modal .modal-footer { border-top: 1px solid var(--wa-line); padding: .9rem 1.4rem; }
.vc-modal h4 { font-size: 1rem; margin: 1.25rem 0 .6rem; }
.vc-modal .vc-rules { list-style: none; margin: 0; padding: 0; }
.vc-modal .vc-rules li {
  display: flex; gap: .6rem; align-items: flex-start; padding: .5rem 0; font-size: .91rem; color: var(--wa-body);
}
.vc-modal .vc-rules li + li { border-top: 1px dashed var(--wa-line); }
.vc-modal .vc-rules i { color: #C0392B; margin-top: .2rem; flex: 0 0 auto; }
.vc-modal .vc-rules b { color: var(--wa-ink); }
.vc-modal-urdu {
  background: var(--wa-page); border: 1px solid var(--wa-line); border-radius: 14px;
  padding: 1rem 1.15rem; margin-bottom: 1.1rem;
}

/* =========================================================================
   11) SWEETALERT2 DIALOGS — brand skin
   -------------------------------------------------------------------------
   The upload results (success / "Oops...") come back through SweetAlert2,
   which ships a purple confirm button and its own type scale. This file only
   loads on the two verification pages, so restyling .swal2-* here re-skins
   those dialogs to the SendPK palette without touching SweetAlert anywhere
   else on the site. Layout and behaviour are left completely alone.
   ========================================================================= */
.swal2-popup { border-radius: 20px; font-family: var(--font-sans); padding: 2rem 1.75rem 1.5rem; }
.swal2-title { font-family: var(--font-display); color: var(--wa-ink); font-size: 1.5rem; }
.swal2-html-container { color: var(--wa-body); font-size: 1rem; }
.swal2-actions { margin-top: 1.4rem; }
.swal2-styled.swal2-confirm {
  background-image: var(--wa-grad); background-color: transparent;
  border-radius: var(--radius-btn); font-weight: 600; padding: .7rem 2rem;
  box-shadow: var(--shadow-cta);
}
.swal2-styled.swal2-confirm:focus { box-shadow: var(--shadow-cta), 0 0 0 4px rgba(34, 197, 94, .35); }
.swal2-styled.swal2-cancel { border-radius: var(--radius-btn); font-weight: 600; padding: .7rem 2rem; }
.swal2-icon.swal2-success { border-color: var(--wa-green); color: var(--wa-green); }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--wa-green); }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(34, 197, 94, .35); }
.swal2-footer { border-top-color: var(--wa-line); color: var(--wa-muted); font-size: .84rem; }
.swal2-footer a { color: var(--wa-teal); font-weight: 600; }

/* =========================================================================
   12) RESPONSIVE
   ========================================================================= */
@media (max-width: 767.98px) {
  #verifyAuth, #verifyCenter { padding: 1.25rem 0 2rem; }
  .vc-steps { grid-template-columns: 1fr; }

  /* Example/sample images are hidden on phones. Stacked under the
     instructions they pushed the actual upload form a full screen down, and a
     picture of an ID card is reference material rather than a step. The
     instruction text still describes everything the picture showed.

     Both selectors are needed. The equal-height rule for the CNIC and Face ID
     steps is ".vc-split .vc-preview { display: flex }" — two classes, so it
     outranks a bare ".vc-preview" no matter that this rule sits later in the
     file and inside a media query. Specificity is compared before source
     order, so without the second selector below the card stayed visible on
     exactly the two steps this was meant to fix (the Documents step, which is
     not inside .vc-split, hid correctly — which is what made it look like the
     rule was working). */
  .vc-preview,
  .vc-split .vc-preview { display: none; }
  .vc-step { padding: .7rem .8rem; }
  .vc-brand-sub { display: none; }          /* keep the bar to one line */
  .vc-footer-inner { justify-content: center; text-align: center; }
  .vc-card-body { padding: 1.05rem; }
  .vc-drop { padding: 1.5rem 1rem; }
  .vc-drop-icon { width: 48px; height: 48px; font-size: 1.35rem; }
  .vc-actions { flex-direction: column; align-items: stretch; }
  .vc-actions .btn, .vc-btn-add { width: 100%; }
  .vc-actions-note { order: 3; text-align: center; }
  .vc-status-card { padding: 2rem 1.25rem; }
}

/* This file only loads on the two verification pages, so tucking the
   sitewide WhatsApp float button a little further into the corner here
   (it otherwise overlaps the Submit button on small phones) affects
   nothing else on the site. */
@media (max-width: 575.98px) {
  .wa-float { bottom: 16px; right: 16px; }

  /* Phone app bar: brand + who you are + a way out, all on one line.
     The username line and the "Log out" word are the first to go — the
     avatar, the name and the door icon still say everything they need to. */
  .vc-topbar-inner { min-height: 58px; gap: .5rem; }
  .vc-brand-word { font-size: 1.15rem; }
  .vc-account { gap: .45rem; min-width: 0; }
  .vc-account-chip { padding: .3rem .6rem .3rem .3rem; min-width: 0; }
  .vc-avatar { width: 30px; height: 30px; font-size: .82rem; }
  .vc-account-name span { display: none; }
  .vc-account-name strong { font-size: .82rem; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vc-logout { padding: .5rem .7rem; }
  .vc-logout i { margin-right: 0; }
  .vc-logout-text, .vc-help-text { display: none; }
}

/* --- Face ID "wrong photo" popup ---------------------------------------
   A one-line refusal was being skimmed and the same plain selfie sent
   straight back, so a rejected photo answers with what the checker actually
   saw, the reason, and the example picture.

   Styled here rather than inline on purpose: the site CSP is
   style-src 'self', so a style="" attribute inside the popup markup is
   dropped by the browser and the layout would collapse.

   The .vc-facefix-popup rules deliberately undo SweetAlert's roomy defaults
   (a 2.5em margin above the icon, 2rem of popup padding). This popup carries
   a picture as well as text and has to fit a phone screen. Scoped to the
   class so every other Swal on the site keeps its normal spacing. */
.vc-facefix-popup { padding: .9rem 1.2rem 1.1rem; }
/* Only the icon's MARGIN is touched. SweetAlert's default 2.5em top margin is
   what made the big empty gap; the icon's own 5em box must be left alone,
   because the X inside is drawn with absolutely-positioned children measured
   against that box - shrinking it clips the artwork into a broken arc. */
.vc-facefix-popup .swal2-icon { margin: .25em auto .5em; }
.vc-facefix-popup .swal2-title { font-size: 1.18rem; padding: 0; margin: 0 0 .5rem; }
.vc-facefix-popup .swal2-html-container { margin: 0; font-size: .95rem; }
.vc-facefix-popup .swal2-actions { margin-top: .85rem; }
.vc-facefix-popup .swal2-footer { margin-top: .8rem; padding-top: .65rem; }

.vc-facefix-saw {
  background: #F4F6F8; border: 1px solid #E1E6EB; border-radius: 10px;
  padding: .5rem .75rem; margin: 0 0 .55rem; text-align: left; line-height: 1.45;
}
.vc-facefix-saw span { display: block; font-size: .78rem; color: #6B7280; }
.vc-facefix-saw b { color: var(--wa-ink); }

.vc-facefix-why {
  background: #FDF1F1; border: 1px solid #F3C6C6; color: #8E2A2A;
  border-radius: 10px; padding: .55rem .75rem; margin: 0 0 .65rem;
  font-weight: 600; line-height: 1.45; text-align: left;
}
.vc-facefix-lead { margin: 0 0 .3rem; color: var(--wa-ink); font-weight: 600; }
.vc-facefix-list {
  display: table; margin: 0 auto .55rem; padding-left: 1.2rem;
  text-align: left; line-height: 1.6; color: var(--wa-body);
}
.vc-facefix-list b { color: var(--wa-ink); }
.vc-facefix-img {
  display: block; width: 100%; max-width: 185px; height: auto;
  margin: 0 auto .3rem; background: #fff;
  border: 2px solid #E6E6E6; border-radius: 12px;
}
.vc-facefix-cap { margin: 0 0 .55rem; font-size: .82rem; color: #6B7280; }

/* Urdu line in the Face ID popup. theme.css already maps .urdu to the
   Nafees Nastaleeq webfont (declared in fonts.css); this restates the family
   so the rule stands on its own, and replaces theme.css's fixed 35px
   line-height with spacing that suits a popup. */
.vc-facefix-urdu {
  margin: 0; color: var(--wa-ink);
  font-family: 'Nafees Nastaleeq', 'Jameel Noori Nastaleeq', 'Alvi Nastaleeq', serif;
  font-weight: normal; font-size: 1rem; line-height: 1.85;
  direction: rtl; text-align: right;
}
.vc-facefix-urdu b { font-weight: 700; }

@media (max-width: 480px) {
  .vc-facefix-popup { padding: .8rem .9rem 1rem; }
  .vc-facefix-img { max-width: 155px; }
  .vc-facefix-list { line-height: 1.5; }
}