/* =========================================================================
   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; }

/* 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); }

/* --- 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; }

/* 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; }
}