/* =========================================================
   OnlineVisaCenter — Visual refresh v2 (loads LAST, overrides earlier sheets)
   Light, institutional, trustworthy.
   Blue  #2563EB  — brand, headings, primary buttons
   Teal  #14B8A6  — icons, progress, highlights (decorative, not body text)
   Amber #F59E0B  — secondary CTAs, badges (dark text on amber)
   ========================================================= */

:root {
  --color-primary: #2563EB;
  --color-primary-dark: #1D4ED8;
  --color-primary-light: #EFF6FF;
  --color-cta: #2563EB;
  --color-cta-hover: #1D4ED8;
  --color-primary-text: #1D4ED8;
  --color-secondary: #1E3A8A;
  --color-secondary-dark: #172C6B;
  --color-navy-light: #EFF6FF;
  --color-teal: #14B8A6;
  --color-teal-light: #E6FAF7;
  --color-amber: #F59E0B;
  --color-amber-light: #FFF7E6;
  --color-bg: #F8FAFC;
  --color-card: #FFFFFF;
  --color-border: #E2E8F0;
  --color-text: #0F172A;
  --color-text-muted: #475569;
  --color-text-faint: #64748B;

  --radius-card: 18px;
  --radius-btn: 12px;
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 18px 44px rgba(37, 99, 235, 0.12);
}

body { background: var(--color-bg); color: var(--color-text); }

/* ---------- Navbar: light, sticky, soft border ---------- */
.navbar,
.hp-navbar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
}
.brand-name { color: var(--color-text); }
.brand-tag { color: var(--color-text-faint); }
.nav-link { color: var(--color-text-muted); }
.nav-link:hover { color: var(--color-primary); }

/* ---------- Buttons ---------- */
.btn-primary,
.hp-form-submit,
.hp-appt-submit-btn {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-btn);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.22);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.btn-primary:hover,
.hp-form-submit:hover,
.hp-appt-submit-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28);
}
.btn-secondary,
.btn-amber {
  background: var(--color-amber);
  color: #0F172A;
  border-radius: var(--radius-btn);
  font-weight: 700;
}
.btn-secondary:hover,
.btn-amber:hover { background: #D98A06; color: #0F172A; }

/* ---------- Hero: light gradient, graphic background ---------- */
.hp-hero {
  --hp-navy: #F8FAFC;
  --hp-on-dark: #0F172A;
  --hp-muted: #475569;
  --hp-accent: #2563EB;
  --hp-gold: #14B8A6;
  background:
    radial-gradient(ellipse 70% 60% at 85% 0%, rgba(37, 99, 235, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(20, 184, 166, 0.14) 0%, transparent 60%),
    linear-gradient(180deg, #EFF6FF 0%, #F8FAFC 100%);
  color: var(--hp-on-dark);
}
.hp-hero-bg { display: none; }
.hp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  pointer-events: none;
}
.hp-hero-badge {
  background: #fff;
  border: 1px solid #BFDBFE;
  color: #1E40AF;
  box-shadow: var(--shadow-md);
}
.hp-hero-h1 { color: #0F172A; }
.hp-h1-accent {
  background: linear-gradient(90deg, #2563EB 0%, #14B8A6 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hp-hero-lead { color: #475569; }
.hp-hero-card,
.hp-hero-card-wrap .hp-hero-card {
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  border-radius: var(--radius-card);
}

/* ---------- Sections: clear separation ---------- */
.section { padding-top: 72px; padding-bottom: 72px; }
.section + .section { border-top: 1px solid var(--color-border); }
.section h2 { color: var(--color-text); }

/* ---------- Dark blocks → light blocks ---------- */
.site-footer {
  background: #FFFFFF;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}
.site-footer a,
.site-footer h3,
.site-footer h4 { color: var(--color-text); }
.cta-banner,
.hp-cta-section .cta-banner,
.hp-appt-banner-section {
  background: linear-gradient(135deg, #EFF6FF 0%, #ECFEFF 100%);
  color: var(--color-text);
  border: 1px solid #DBEAFE;
  border-radius: var(--radius-card);
}
.hp-appt-banner {
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
}

/* ---------- Cards: consistent, lightly elevated ---------- */
.card,
.hp-offer-card,
.destination-card,
.blog-card,
.article-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.card:hover,
.hp-offer-card:hover,
.destination-card:hover,
.blog-card:hover,
.article-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: #BFDBFE;
}

/* ---------- Icon tiles: teal accent, graphic ---------- */
.icon-tile {
  background: var(--color-teal-light);
  color: #0F766E;
  border-radius: 14px;
}
.icon-tile.dark { background: var(--color-primary-light); color: var(--color-primary); }

/* ---------- Motion (respects reduced-motion) ---------- */
@keyframes v2-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hp-hero-copy,
.hp-hero-card-wrap {
  animation: v2-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hp-hero-card-wrap { animation-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   Phase 2 — Destination (country) card: redesigned
   Clear hierarchy: flag tile → name + one status pill →
   one plain-language line → one primary CTA + one text link.
   No jargon fields (wave/source level/channel) on the public card.
   ========================================================= */
.destinations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) { .destinations-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .destinations-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 460px)  { .destinations-grid { grid-template-columns: 1fr; } }

.destination-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  overflow: visible;
}
.destination-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: #BFDBFE;
}
.destination-card.is-live { border-color: #BBF7D0; }
.destination-card.is-live:hover { border-color: #86EFAC; }
.destination-card-body { padding: 20px; }

.dest-head { display: flex; align-items: flex-start; gap: 12px; margin: 0; }
.dest-flag-tile {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
  background: var(--color-primary-light);
  border-radius: 12px;
}
.dest-head-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.destination-card-name {
  font-size: 16px; font-weight: 800; color: var(--color-text);
  margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dest-status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  align-self: flex-start;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
}
.dest-status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.dest-status-pill.is-ready { background: #EAFBF0; color: #15803D; }
.dest-status-pill.is-ready::before { background: #22C55E; }
.dest-status-pill.is-guide { background: var(--color-teal-light); color: #0F766E; }
.dest-status-pill.is-guide::before { background: #14B8A6; }
.dest-status-pill.is-pending { background: var(--color-amber-light); color: #92400E; }
.dest-status-pill.is-pending::before { background: #F59E0B; }

.dest-subline {
  margin: 12px 0 0;
  font-size: 13px; line-height: 1.7;
  color: var(--color-text-muted);
  min-height: 2.6em;
}

.dest-nat {
  margin-top: 10px; font-size: 12px; font-weight: 600; line-height: 1.6;
  border-radius: 10px; padding: 8px 10px;
}
.dest-nat.is-checking { color: var(--color-text-muted); background: #F8FAFC; }
.dest-nat.is-found { color: #14532D; background: #EAFBF0; }
.dest-nat.is-none { color: #92400E; background: var(--color-amber-light); }
.dest-nat.is-error { color: #7F1D1D; background: #FEF2F2; }

.destination-card-actions { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.destination-card-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 42px;
  font-size: 13px; font-weight: 700;
  border-radius: var(--radius-btn);
}
.destination-card-cta.primary { background: var(--color-primary); color: #fff; }
.destination-card-cta.primary:hover { background: var(--color-primary-dark); }
.destination-card-cta.ghost { background: transparent; color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.destination-card-cta.ghost:hover { color: var(--color-primary); }
.destination-card-cta i { width: 14px; height: 14px; }

/* =========================================================
   Phase 2 — Country detail page: light hero + distinct sections
   ========================================================= */
.country-hero {
  background:
    radial-gradient(ellipse 70% 70% at 90% 0%, rgba(37, 99, 235, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #EFF6FF 0%, #F8FAFC 100%);
  border-bottom: 1px solid var(--color-border);
}
.country-hero-back,
.country-hero-desc { color: var(--color-text-muted); }
.country-hero-title { color: var(--color-text); }
.country-hero-eyebrow { background: #fff; color: var(--color-primary); border: 1px solid #DBEAFE; }
.country-hero-eyebrow .dot { background: var(--color-teal); }
.country-hero-flag {
  width: 72px; height: 72px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  background: #fff; border: 1px solid var(--color-border);
  border-radius: 18px; box-shadow: var(--shadow-md);
  filter: none;
}

.country-section {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  padding: 28px 28px 32px;
}
.country-section + .country-section { margin-top: 24px; }
.country-section .section-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 20px;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}
.country-section .section-title::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-teal);
  flex-shrink: 0;
}

/* "Outline light" buttons were designed for dark hero backgrounds; the hero is light now. */
.country-hero .btn-outline-light,
.portal-hero .btn-outline-light {
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.country-hero .btn-outline-light:hover,
.portal-hero .btn-outline-light:hover {
  background: var(--color-primary-light);
  border-color: #BFDBFE;
}

/* =========================================================
   Phase 3 — Afghan nationals page
   This is a flagship page: clear category status, scannable
   cards for ~190 destinations, collapsible detail so the page
   does not read as one long technical dump.
   ========================================================= */
.afg-main { max-width: 1080px; padding-top: 32px; padding-bottom: 72px; }

.afg-intro { text-align: center; max-width: 720px; margin: 0 auto 28px; }
.afg-intro-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--color-primary);
  background: var(--color-primary-light); border: 1px solid #DBEAFE;
  padding: 5px 14px; border-radius: 999px; margin-bottom: 14px;
}
.afg-intro-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-teal); }
.afg-intro-title { color: var(--color-text); }
.afg-intro-lead { margin-left: auto; margin-right: auto; }

.afg-alert {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--color-amber-light);
  border: 1px solid #FDE68A;
  border-radius: var(--radius-card);
  padding: 20px 22px;
  margin-bottom: 20px;
}
.afg-alert-icon {
  flex-shrink: 0; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: #FDE68A; color: #92400E;
}
.afg-alert-icon i { width: 20px; height: 20px; }
.afg-alert-title { font-size: 15px; font-weight: 800; color: #92400E; margin: 0 0 10px; }
.afg-alert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.afg-alert-list li {
  font-size: 13.5px; line-height: 1.8; color: #78350F;
  padding-inline-start: 18px; position: relative;
}
.afg-alert-list li::before {
  content: ''; position: absolute; inset-inline-start: 2px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: #D97706;
}

.afg-filter-section {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-md);
  padding: 22px; margin-bottom: 24px;
}
.afg-section-title { font-size: 15px; font-weight: 800; color: var(--color-text); margin: 0 0 14px; }

.afg-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.afg-filter-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #fff; color: var(--color-text-muted);
  transition: var(--transition);
}
.afg-filter-btn i { width: 14px; height: 14px; }
.afg-filter-btn:hover { border-color: #BFDBFE; color: var(--color-text); }
.afg-filter-count {
  font-size: 11px; font-weight: 800; min-width: 20px; text-align: center;
  background: var(--color-bg); border-radius: 999px; padding: 1px 6px;
}
/* Active state per category — dot/icon tone carries through from unpressed too */
.afg-filter-btn--free i { color: #16A34A; }
.afg-filter-btn--evisa i { color: #2563EB; }
.afg-filter-btn--arrival i { color: #D97706; }
.afg-filter-btn--required i { color: #DC2626; }
.afg-filter-btn--unverified i { color: #64748B; }
.afg-filter-btn--all i { color: var(--color-teal); }
.afg-filter-btn[aria-pressed="true"] {
  background: var(--color-text); border-color: var(--color-text); color: #fff;
}
.afg-filter-btn[aria-pressed="true"] i { color: #fff; }
.afg-filter-btn[aria-pressed="true"] .afg-filter-count { background: rgba(255,255,255,0.18); color: #fff; }

.afg-search-row {
  position: relative; margin-top: 16px;
}
.afg-search-icon {
  position: absolute; top: 50%; transform: translateY(-50%);
  inset-inline-start: 14px; width: 16px; height: 16px; color: var(--color-text-faint);
  pointer-events: none;
}
.afg-search {
  width: 100%; padding: 11px 14px 11px 40px;
  border: 1px solid var(--color-border); border-radius: var(--radius-btn);
  font-size: 14px; background: var(--color-bg);
}
html[dir="rtl"] .afg-search { padding: 11px 40px 11px 14px; }
html[dir="rtl"] .afg-search-icon { inset-inline-start: auto; inset-inline-end: 14px; }
.afg-search:focus { outline: none; border-color: var(--color-primary); background: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.afg-result-count { margin: 10px 2px 0; font-size: 12.5px; color: var(--color-text-faint); }

.afg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 760px) { .afg-grid { grid-template-columns: 1fr; } }

.afg-dest {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-md);
  padding: 20px; display: flex; flex-direction: column;
}
.afg-dest-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }

.afg-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
}
.afg-status-pill i { width: 13px; height: 13px; }
.afg-status-pill--free { background: #EAFBF0; color: #15803D; }
.afg-status-pill--evisa { background: var(--color-primary-light); color: #1D4ED8; }
.afg-status-pill--arrival { background: var(--color-amber-light); color: #92400E; }
.afg-status-pill--required { background: #FEF2F2; color: #B91C1C; }
.afg-status-pill--unverified { background: #F1F5F9; color: #475569; }

.afg-priority-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: #92400E;
  background: var(--color-amber-light); padding: 4px 9px; border-radius: 999px;
}
.afg-priority-chip i { width: 11px; height: 11px; }

.afg-dest-name { font-size: 18px; font-weight: 800; color: var(--color-text); margin: 0 0 12px; }

.afg-dest-progress { height: 4px; border-radius: 999px; background: var(--color-bg); overflow: hidden; }
.afg-dest-progress-bar { height: 100%; background: var(--color-teal); border-radius: 999px; }
.afg-dest-meta { font-size: 12px; color: var(--color-text-faint); margin: 6px 0 14px; }

.afg-status-box { border-radius: 12px; padding: 14px; background: var(--color-bg); margin-bottom: 4px; }
.afg-status-summary { font-size: 13.5px; line-height: 1.75; color: var(--color-text); margin: 0 0 6px; }
.afg-status-missing { font-size: 13px; color: var(--color-text-muted); margin: 0; }
.afg-source-line { font-size: 11.5px; color: var(--color-text-faint); margin: 0; }
.afg-source-line a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }

.afg-details { margin-top: 12px; border-top: 1px solid var(--color-border); padding-top: 12px; }
.afg-details-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  cursor: pointer; list-style: none;
  font-size: 12.5px; font-weight: 700; color: var(--color-primary);
}
.afg-details-toggle::-webkit-details-marker { display: none; }
.afg-details-toggle i { width: 15px; height: 15px; transition: transform 200ms ease; flex-shrink: 0; }
.afg-details[open] .afg-details-toggle i { transform: rotate(180deg); }

.afg-dest-fields { margin: 14px 0 0; display: flex; flex-direction: column; gap: 14px; }
.afg-field-row dt { font-size: 12px; font-weight: 800; color: var(--color-text-muted); margin-bottom: 4px; }
.afg-field-row dd { margin: 0; }
.afg-field-entry + .afg-field-entry { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--color-border); }
.afg-fee-amount { font-size: 15px; font-weight: 800; color: var(--color-text); direction: ltr; text-align: start; margin: 0 0 4px; }
.afg-field-body { font-size: 13px; line-height: 1.75; color: var(--color-text); margin: 0 0 4px; }

.afg-empty {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 40px 0; color: var(--color-text-faint); font-size: 14px;
}
.afg-disclaimer-wrap { margin-top: 28px; }
.afg-urgent-note { margin-top: 14px; font-size: 13px; color: var(--color-text-muted); text-align: center; }
.afg-urgent-note a { color: var(--color-primary); font-weight: 700; }

/* =========================================================
   Phase 4 — Shared "flow" system: assessment wizard, result,
   appointment, urgent appointment, track, blog. One pass here
   upgrades every page built on these components; no markup/JS
   is touched, only how they look.
   ========================================================= */
.flow-page { background: var(--color-bg); }

/* Inputs: slightly rounder, consistent with v2 cards */
.flow-field input,
.flow-field select,
.flow-field textarea,
.flow-page input[type="search"] {
  border-radius: var(--radius-btn);
  height: 46px;
}
.flow-field textarea { height: auto; }
.flow-label, .flow-field > label { color: var(--color-text); }

/* Cards */
.flow-card {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}
.flow-card-title { color: var(--color-text); }

/* Dark "navy" blocks → light, on-brand gradient card (no dark backgrounds) */
.flow-card--navy,
.flow-advisor {
  background: linear-gradient(135deg, #EFF6FF 0%, #ECFEFF 100%);
  border: 1px solid #DBEAFE;
  color: var(--color-text);
}
.flow-card--navy .flow-card-title,
.flow-advisor .flow-card-title { color: var(--color-text); }
.flow-advisor-text { color: var(--color-text-muted); }
.flow-paid { background: #fff; color: var(--color-primary); border: 1px solid #DBEAFE; }
.flow-advisor-status { color: var(--color-text-muted); }
.flow-advisor-fine { color: var(--color-text-faint); }
.flow-advisor .btn-outline-light {
  background: #fff; border: 1px solid var(--color-border); color: var(--color-text);
}
.flow-advisor .btn-outline-light:hover { background: var(--color-primary-light); border-color: #BFDBFE; }

/* Progress stepper: connecting line, teal for done, blue for current */
.flow-stepper { position: relative; }
.flow-step { position: relative; }
.flow-step-num { position: relative; z-index: 1; border-width: 2px; }
.flow-step.is-done .flow-step-num { background: var(--color-teal); border-color: var(--color-teal); }
.flow-step.is-current .flow-step-num {
  background: var(--color-primary); border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-light);
}
.flow-step.is-current .flow-step-name { color: var(--color-primary); font-weight: 800; }
.progress-track { background: var(--color-border); border-radius: 999px; overflow: hidden; }
.progress-fill { background: linear-gradient(90deg, var(--color-primary), var(--color-teal)); border-radius: 999px; }

/* Choice cards (country / purpose / visa type pickers) */
.flow-choice { border-radius: var(--radius-btn); }
.flow-choice:hover:not([aria-disabled="true"]) {
  border-color: #BFDBFE;
  box-shadow: var(--shadow-sm);
}
.flow-choice[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.flow-choice-title { color: var(--color-text); }
.flow-choice[aria-pressed="true"] .flow-choice-tick {
  background: var(--color-primary); border-color: var(--color-primary);
}

/* Capability / status chips */
.flow-cap--on { background: #EAFBF0; color: #15803D; }
.flow-cap--guide { background: var(--color-teal-light); color: #0F766E; }
.flow-cap--partial { background: var(--color-amber-light); color: #92400E; }

/* Notices */
.flow-notice { background: var(--color-primary-light); color: var(--color-primary-text); border-radius: var(--radius-btn); }
.flow-notice--ok { background: #EAFBF0; color: #15803D; }
.flow-notice--warn { background: var(--color-amber-light); color: #92400E; }
.flow-notice--danger { background: #FEF2F2; color: #B91C1C; }

/* Result page: score ring + verdict */
.flow-ring {
  width: 168px; height: 168px;
  box-shadow: var(--shadow-lg);
}
.flow-ring-inner { width: 138px; height: 138px; }
.flow-verdict-level.is-good { background: #EAFBF0; color: #15803D; }
.flow-verdict-level.is-warn { background: var(--color-amber-light); color: #92400E; }
.flow-verdict-level.is-bad { background: #FEF2F2; color: #B91C1C; }
.flow-verdict-title { color: var(--color-text); }

.flow-bar .progress-track { background: var(--color-bg); }
.flow-issue { border-radius: var(--radius-btn); }
.flow-issue.is-critical { background: #FEF2F2; color: #B91C1C; }
.flow-issue.is-warning { background: var(--color-amber-light); color: #92400E; }
.flow-issue.is-info { background: var(--color-primary-light); color: var(--color-primary-text); }

.flow-chip { border-radius: 999px; }
.flow-chip--ok { background: #EAFBF0; color: #15803D; }
.flow-chip--missing { background: #FEF2F2; color: #B91C1C; }
.flow-chip--pending { background: var(--color-amber-light); color: #92400E; }

.flow-icon-tile { background: var(--color-primary-light); border-radius: 12px; }
.flow-icon-tile i, .flow-icon-tile svg { color: var(--color-primary); }
.flow-icon-tile--ok { background: #EAFBF0; }
.flow-icon-tile--ok i, .flow-icon-tile--ok svg { color: #15803D; }

.flow-blockers { border-inline-start: 4px solid #DC2626; border-radius: var(--radius-card); }

/* Hero used by blog/track detail headers */
.flow-hero h1 { color: var(--color-text); }

/* Doc upload dropzone */
.flow-dropzone { border-radius: var(--radius-btn); }
.flow-dropzone:hover, .upload-zone .flow-dropzone.is-dragging {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.flow-dropzone > i, .flow-dropzone > svg { color: var(--color-primary); }