/* ============================================================
   Verifeedo Redesign — Design-system FOUNDATION (Task 2)
   ------------------------------------------------------------
   Page-scoped stylesheet for the redesigned ("vf-") surfaces.
   Enqueued via @push('styles') so it lands in the cascade AFTER
   app.css and BEFORE custom.css:

     colors.css (admin tokens) -> app.css -> [verifeedo-redesign.css] -> custom.css

   Because colors.css loads first, every admin theme token
   (--primary_color, --secondary_color, --star_fill_color, ...) is
   still authoritative here — we only REFERENCE them via var(), never
   redefine them, so admin colour editing keeps working unchanged.

   ALPHA SYNTAX: ThemeController emits admin tokens as COMMA-separated
   RGB triplets ("36, 71, 150"). Alpha compositing must therefore use
   the legacy  rgba(var(--token), A)  form. The modern slash form
   rgb(var(--token) / A) is INVALID with comma triplets and is avoided.

   Only genuinely-new "vf-" design tokens are defined in :root below.
   Component CSS (nav, hero, cards, feed, footer, faq, ...) is added by
   the tasks that build those sections (Tasks 3-15).
   ============================================================ */

:root {
  --vf-ink: #101728;
  --vf-ink-soft: #33405b;
  --vf-muted: #5f6b86; /* secondary body text — AA-grade: 5.3:1 on white, ≥4.96:1 on the leaderboard/section row tints */
  --vf-muted-2: #9aa4bd; /* decorative / de-emphasized accents only (2.49:1 on white — NOT AA-grade body text) */
  --vf-line: #e7ebf4;
  --vf-line-soft: #eef1f8;
  --vf-surface: #ffffff;
  --vf-surface-2: #ffffff;
  /* Rating-star colour bridges to the admin token, so an admin star-colour
     change propagates to the new vf- star widgets too. Default #1fa85a (green). */
  --vf-star: rgb(var(--star_fill_color));
  --vf-amber: #f5b820;
  --vf-cyan: #35bef5;
  --vf-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------------- scope base / reset ---------------- */
.vf-scope { font-family: var(--vf-font); color: var(--vf-ink); }
.vf-scope * { box-sizing: border-box; }

/* ---------------- section primitives ---------------- */
.vf-section { padding: 64px 0; }
.vf-section.tint { background: rgb(var(--elements_background_color)); }

.vf-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.vf-sec-head .vf-title2 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.025em; color: var(--vf-ink); margin: 10px 0 6px; }
.vf-sec-sub { font-size: 15.5px; color: var(--vf-muted); max-width: 520px; }
.vf-head-tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.vf-round { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--vf-line); background: #fff;
  display: inline-flex; align-items: center; justify-content: center; color: var(--vf-ink-soft); cursor: pointer; }
.vf-round:hover { border-color: rgb(var(--primary_color)); color: rgb(var(--primary_color)); }

/* eyebrow / section labels */
.vf-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--primary_color)); margin-bottom: 18px; }
.vf-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--secondary_color)); }
.vf-eyebrow.row-pip .live-pip { width: 7px; height: 7px; border-radius: 50%; background: #ff5a5a; margin-left: 2px; animation: vf-pulse 1.6s infinite; }

/* centered section heading */
.vf-center-head { text-align: center; max-width: 760px; margin: 0 auto 38px; }
.vf-center-head .vf-title2 { font-size: clamp(26px, 2.8vw, 34px); font-weight: 800; letter-spacing: -.025em; color: var(--vf-ink); display: inline-block; }
.vf-center-head .vf-title2 .ul { border-bottom: 3px solid rgb(var(--secondary_color)); padding-bottom: 2px; }
.vf-center-head p { font-size: 15px; line-height: 1.6; color: rgb(var(--primary_color)); opacity: .75; margin-top: 14px; }

/* ---------------- buttons ----------------
   These vf-btn-* variants are the THEME/page buttons; all rules below are kept
   page-scoped under .vf-scope. They are intentionally distinct from the same-named
   .vf-btn-* classes in public/widget.js (the embeddable widget renders its own
   isolated CSS and never inside .vf-scope) — the two are not meant to be unified. */
.vf-scope .btn.vf-btn-primary,
.vf-scope .btn.vf-btn-success,
.vf-scope .btn.vf-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; font-size: 15px; border-radius: 12px; padding: 13px 22px;
  border: 1.5px solid transparent; text-decoration: none; cursor: pointer;
}
.vf-scope .btn.vf-btn-primary { background: rgb(var(--primary_color)); color: #fff; box-shadow: 0 4px 12px rgba(var(--primary_color), .18); }
.vf-scope .btn.vf-btn-primary:hover { filter: brightness(.94); color: #fff; }
.vf-scope .btn.vf-btn-success { background: rgb(var(--secondary_color)); color: #fff; box-shadow: 0 4px 12px rgba(var(--secondary_color), .18); }
.vf-scope .btn.vf-btn-success:hover { filter: brightness(.96); color: #fff; }
/* Secondary button = a soft brand-tinted (tonal) fill, NOT a white/outline button.
   The old white surface + --vf-line hairline read as white-on-white (the hero left
   col + section headers are white), so it barely registered as a button. A subtle
   primary tint makes it clearly interactive + on-brand, with NO hard border — used
   app-wide (hero CTAs, every section "View All", the nav Sign-In/account actions).
   Alpha uses rgba() because the token is a comma triplet. */
.vf-scope .btn.vf-btn-outline { background: rgba(var(--primary_color), .08); color: rgb(var(--primary_color)); border-color: transparent; }
.vf-scope .btn.vf-btn-outline:hover { background: rgba(var(--primary_color), .14); color: rgb(var(--primary_color)); border-color: transparent; }
/* Press + keyboard-focus states (Task 26). The fills above declare only base + :hover,
   so on press/keyboard-focus Bootstrap's bare-.btn defaults take over
   (--bs-btn-active-bg: transparent + a dark --bs-btn-active-color) and the white label
   washes out on a (near-)transparent fill. Re-assert each variant's fill on :focus /
   :active, and add a clearly-visible focus-visible ring (WCAG 2.4.7 / non-text-contrast
   1.4.11). The .vf-scope-qualified selectors (0,4,0) beat Bootstrap's (0,3,0) :active
   rules. The ring is the brand primary (solid) so it clears 3:1 against the white page,
   the navy primary button, AND the green success/biz buttons (offset puts it on the page). */
.vf-scope .btn.vf-btn-primary:focus,
.vf-scope .btn.vf-btn-primary:active { background: rgb(var(--primary_color)); color: #fff; }
.vf-scope .btn.vf-btn-primary:active { filter: brightness(.9); }
.vf-scope .btn.vf-btn-success:focus,
.vf-scope .btn.vf-btn-success:active { background: rgb(var(--secondary_color)); color: #fff; }
.vf-scope .btn.vf-btn-success:active { filter: brightness(.94); }
.vf-scope .btn.vf-btn-outline:focus,
.vf-scope .btn.vf-btn-outline:active { background: rgba(var(--primary_color), .14); color: rgb(var(--primary_color)); border-color: transparent; }
.vf-scope .btn.vf-btn-primary:focus-visible,
.vf-scope .btn.vf-btn-success:focus-visible,
.vf-scope .btn.vf-btn-outline:focus-visible { outline: 3px solid rgb(var(--primary_color)); outline-offset: 2px; }

/* shared keyframe consumed by live pips/dots across redesigned sections */
@keyframes vf-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 90, 90, .5); }
  70% { box-shadow: 0 0 0 8px rgba(255, 90, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 90, 90, 0); }
}

/* ---------------- responsive (section rhythm) ---------------- */
@media (max-width: 575.98px) {
  .vf-section { padding: 44px 0; }
}

/* ============================================================
   Verifeedo Redesign — NAV + FOOTER chrome (Task 3)
   ------------------------------------------------------------
   Page-scoped redesign navigation + footer, ported from the
   mockup (verifeedo-hero.css). NO dark-mode block (product
   decision). The mockup's slash-alpha  rgb(var(--token) / A)  is
   converted to the legacy  rgba(var(--token), A)  form because
   admin tokens are emitted as COMMA-separated RGB triplets (see
   the ALPHA SYNTAX note at the top of this file).
   ============================================================ */

/* ---------------- skip link ---------------- */
.vf-skip { position: fixed; top: -60px; left: 12px; z-index: 3000; background: rgb(var(--primary_color)); color: #fff;
  padding: 10px 18px; border-radius: 0 0 10px 10px; font-weight: 700; font-size: 14px; text-decoration: none; transition: top .2s; }
.vf-skip:focus { top: 0; outline: none; }

/* The layout wraps content in <main id="vfMainContent"> on vf-chrome pages. body is a
   flex column (min-height:100vh) whose children default to flex-shrink:0, so the single
   <main> needs flex-grow to keep the footer pinned to the bottom on short pages.
   It is ALSO a flex column itself (Task 16): the auth + error layouts vertically centre
   a `.section.my-auto` that used to be a direct flex child of <body>; once wrapped in
   <main>, the margin:auto centring only works if <main> is the flex container. Multi-
   child content pages stack top-aligned exactly as before (block flow), so this is
   regression-safe for the homepage / listings / profiles. */
#vfMainContent { flex: 1 0 auto; display: flex; flex-direction: column; }

/* ---------------- nav ----------------
   The base theme reserves  body { padding-top: 85px }  (app.css) for the legacy
   FIXED navbar. The redesign nav is position:sticky (in-flow), so vf-chrome pages
   must drop that reserved gap or it shows as dead white space above the nav.
   Scoped to body.vf-scope so every other (legacy-navbar) page keeps its offset. */
body.vf-scope { padding-top: 0; }

/* z-index 1030 (Bootstrap navbar level) keeps the sticky nav + its dropdowns
   above the legacy `.header` hero (z-index:100) it coexists with until Task 4
   replaces the hero; without it the language/user menus paint behind the hero. */
.vf-nav { --vf-nav-height: 78px; position: sticky; top: 0; z-index: 1030; background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--vf-line-soft); }
.vf-nav-inner { display: flex; align-items: center; gap: 20px; height: 78px; }
/* Task 52: shield anchored at 39px (JS untouched), text re-tuned to the original logo-dark.svg
   internal proportions — shield-h : VERIFEEDO-cap : motto-cap = 353 : 116.6 : 42.9, i.e.
   wordmark:motto = 2.72× (the live 18.7/10.2 = 1.83× made the motto read oversized). gap also
   tightened to the original 0.202×shield ratio (≈8px). Keeps the same 45px lockup height. */
.vf-brand { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; text-decoration: none; }
.vf-brand-txt { display: flex; flex-direction: column; line-height: 1; }
.vf-brand-txt b { font-weight: 800; font-size: 20.7px; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--primary_color)); }
/* --vf-muted (not the decorative-only --vf-muted-2) so the readable tagline clears contrast */
.vf-brand-txt i { font-style: normal; font-size: 7.6px; letter-spacing: .02em; color: var(--vf-muted); margin-top: 2.5px; }
.vf-nav-links { flex: 1; display: flex; align-items: center; justify-content: center; gap: 34px; }
.vf-nav-link { font-size: 15.5px; font-weight: 600; color: var(--vf-ink-soft); text-decoration: none; transition: color .15s; }
.vf-nav-link:hover { color: rgb(var(--primary_color)); }
.vf-nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.vf-nav-right .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 14.5px;
  font-weight: 700; border-radius: 11px; white-space: nowrap; }

/* language + user dropdowns (shared toggle pattern: [data-vf-dropdown] + .open) */
.vf-lang, .vf-user { position: relative; }
.vf-lang-btn, .vf-user-btn { display: inline-flex; align-items: center; gap: 8px; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--vf-ink-soft); padding: 8px 6px; }
.vf-lang-btn:hover, .vf-user-btn:hover { color: rgb(var(--primary_color)); }
.vf-lang-flag, .vf-user-avatar { width: 22px; height: 15px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.vf-user-avatar { width: 30px; height: 30px; border-radius: 50%; box-shadow: none; }
.vf-lang-menu, .vf-user-menu { position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border: 1px solid var(--vf-line);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(20, 46, 98, .16); padding: 6px; min-width: 184px; display: none; z-index: 60; }
.vf-lang.open .vf-lang-menu, .vf-user.open .vf-user-menu { display: block; }
.vf-lang-menu a, .vf-user-menu a, .vf-user-menu button { display: flex; align-items: center; gap: 9px; width: 100%; border: none; background: none;
  cursor: pointer; font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--vf-ink-soft); padding: 9px 11px; border-radius: 8px;
  text-align: left; text-decoration: none; }
.vf-lang-menu a:hover, .vf-user-menu a:hover, .vf-user-menu button:hover { background: rgb(var(--elements_background_color)); }
.vf-lang-menu a.active { color: rgb(var(--primary_color)); }
.vf-user-menu .vf-logout { color: #d8365e; }
.vf-user-menu form { margin: 0; }
.vf-user-menu .vf-um-ico { width: 16px; flex: none; text-align: center; }

/* burger + mobile menu */
.vf-burger { display: none; width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--vf-line); background: #fff;
  cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; }
.vf-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--vf-ink); transition: .25s cubic-bezier(.2, .7, .2, 1); }
.vf-burger.on span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vf-burger.on span:nth-child(2) { opacity: 0; }
.vf-burger.on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.vf-mobile-menu { display: none; flex-direction: column; gap: 2px; max-height: calc(100vh - var(--vf-nav-height, 78px));
  max-height: calc(100dvh - var(--vf-nav-height, 78px)); max-height: var(--vf-menu-max-height, calc(100dvh - var(--vf-nav-height, 78px)));
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding: 8px 18px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--vf-line); background: #fff; }
.vf-mm-link { font-size: 16px; font-weight: 700; color: var(--vf-ink); text-decoration: none; padding: 13px 6px; border-bottom: 1px solid var(--vf-line-soft); }
.vf-mm-link:active { color: rgb(var(--primary_color)); }
.vf-mm-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.vf-mm-actions .btn { width: 100%; justify-content: center; padding: 13px 18px !important; font-size: 15px; }
.vf-mm-lang { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vf-mm-lang a { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--vf-ink-soft);
  text-decoration: none; padding: 8px 12px; border: 1px solid var(--vf-line); border-radius: 9px; }
.vf-mm-lang a.active { color: rgb(var(--primary_color)); border-color: rgb(var(--primary_color)); }
.vf-mm-lang img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; }
body.vf-menu-open .vf-mobile-menu { display: flex; animation: vf-mmDown .25s ease; }
@keyframes vf-mmDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.vf-menu-dim { position: fixed; inset: 0; z-index: 1020; background: rgba(10, 17, 30, .42); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; }
body.vf-menu-open .vf-menu-dim { opacity: 1; pointer-events: auto; }

@media (max-height: 700px) {
  .vf-mobile-menu { gap: 0; padding-top: 6px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .vf-mm-link { padding-top: 12px; padding-bottom: 12px; line-height: 1.35; }
  .vf-mm-actions { gap: 8px; margin-top: 10px; }
  .vf-mm-actions .btn { padding-top: 12px !important; padding-bottom: 12px !important; }
  .vf-mm-lang { margin-top: 10px; }
}

/* ---------------- back to top ---------------- */
.vf-top { position: fixed; right: 22px; bottom: 22px; z-index: 1500; width: 46px; height: 46px; border-radius: 50%;
  background: rgb(var(--primary_color)); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px rgba(var(--primary_color), .42); opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: .28s cubic-bezier(.2, .7, .2, 1); }
.vf-top.show { opacity: 1; transform: none; pointer-events: auto; }
.vf-top:hover { filter: brightness(1.1); transform: translateY(-2px); }

/* ---------------- footer ---------------- */
.vf-footer { position: relative; overflow: hidden; background: linear-gradient(180deg, #0c1422, #0a111d); color: #aeb9d0; padding: 0 0 24px; }
.vf-footer::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .04;
  background-image: radial-gradient(#ffffff 1px, transparent 1.6px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000, transparent 70%); mask-image: radial-gradient(120% 80% at 50% 0%, #000, transparent 70%); }
.vf-footer-topline { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgb(var(--primary_color)), rgb(var(--secondary_color)), transparent); opacity: .7; }
.vf-footer-glow { position: absolute; top: -160px; left: 50%; transform: translateX(-50%); width: 760px; height: 320px; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--primary_color), .18), transparent 68%); }
.vf-footer .container { position: relative; z-index: 1; }
.vf-footer-brandrow { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 34px 0 26px; margin-bottom: 34px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.vf-footer-mark { display: inline-flex; align-items: center; gap: 11px; }
.vf-footer-mark b { font-size: 21px; font-weight: 800; letter-spacing: -.01em; background: linear-gradient(120deg, #fff, #bcd0f5);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.vf-footer-tag { font-size: 13.5px; color: #8493b0; max-width: 360px; }
.vf-footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1fr; gap: 40px; padding-bottom: 34px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.vf-footer-news-h { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: #fff; margin-bottom: 11px; }
.vf-footer-brand p { font-size: 13.5px; line-height: 1.6; max-width: 340px; margin-bottom: 20px; color: #8493b0; }
.vf-footer-news { display: flex; gap: 6px; max-width: 420px; margin-bottom: 26px; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 13px; padding: 5px; transition: border-color .18s; }
.vf-footer-news:focus-within { border-color: rgba(var(--secondary_color), .5); }
.vf-footer-news input { flex: 1; min-width: 0; border: none; background: none; color: #fff; padding: 9px 12px; font-family: inherit; font-size: 14px; outline: none; }
.vf-footer-news input::placeholder { color: #7f8bab; }
.vf-footer-news .btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; border-radius: 9px; padding: 10px 16px !important; }
.vf-footer-follow { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 13px; letter-spacing: .01em; }
.vf-footer-social { display: flex; gap: 9px; flex-wrap: wrap; }
.vf-fsoc { width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
  display: flex; align-items: center; justify-content: center; color: #c9d3e8; cursor: pointer; transition: .16s; text-decoration: none; }
.vf-fsoc svg { width: 17px; height: 17px; }
.vf-fsoc:hover { background: rgb(var(--primary_color)); border-color: transparent; color: #fff; transform: translateY(-3px); box-shadow: 0 8px 18px rgba(var(--primary_color), .4); }
.vf-footer-cols { display: contents; }
.vf-footer-cols > div { min-width: 0; }
.vf-footer-col-h { font-size: 12px; font-weight: 800; color: #fff; letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.vf-footer-col-h::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: rgb(var(--secondary_color)); }
.vf-footer-cols ul { list-style: none; padding: 0; margin: 0; }
.vf-footer-cols li { margin-bottom: 12px; }
.vf-footer-cols a { font-size: 13.5px; color: #9aa8c4; text-decoration: none; cursor: pointer; transition: .15s; display: inline-block; }
.vf-footer-cols a:hover { color: #fff; transform: translateX(3px); }
.vf-footer-bot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; font-size: 13px; color: #7f8bab; flex-wrap: wrap; }
.vf-footer-trust { display: inline-flex; align-items: center; gap: 7px; color: #8fe6bd; }
.vf-footer-whatsnew { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: inherit; color: inherit; opacity: .85; padding: 0; }
.vf-footer-whatsnew:hover { opacity: 1; text-decoration: underline; }
.vf-footer-whatsnew:focus-visible { outline: 2px solid #8fe6bd; outline-offset: 3px; border-radius: 4px; }

/* ---------------- chrome responsive ----------------
   Burger appears at <=1199.98px (the point the desktop links vanish) so a
   tablet width never lands in a no-navigation gap — the mockup only surfaced
   the burger at <=600px, leaving 600-1199px with neither links nor burger. */
@media (max-width: 1279.98px) {
  .vf-nav-links { gap: 24px; }
  .vf-nav-right { gap: 8px; }
}
@media (max-width: 1199.98px) {
  .vf-nav-links { display: none; }
  /* Task 54: anchor the burger (the collapsed .vf-nav-right cluster) to the END edge.
     Above this breakpoint the .vf-nav-links{flex:1} spacer pushes .vf-nav-right over; here
     those links are display:none, so without this the cluster would pack toward the brand
     (.vf-nav-inner keeps its default justify-content:flex-start). The auto inline-start
     margin restores the end-anchoring — brand stays at the start, burger thumb-reachable
     on the dominant (end) side. LOGICAL `margin-inline-start` (not physical margin-left) so
     it mirrors correctly under RTL with NO verifeedo-redesign.rtl.css override needed —
     matches the file's existing RTL-safe logical-margin idiom (see `.vf-seal-inline` + the
     `.vf-filters .search-param` RTL-safe note). The signed-in chip (order:-1 below) rides just before
     the burger inside the cluster, so the burger stays the end-most element. */
  .vf-nav-right { margin-inline-start: auto; }
  /* .vf-scope-qualified so these beat the Task-2 `.vf-scope .btn.vf-btn-*`
     button rules (specificity 0,3,0) — otherwise the action buttons leak into
     the collapsed nav-right alongside the burger. */
  .vf-scope .vf-nav-right .vf-lang,
  .vf-scope .vf-nav-right .btn { display: none; }
  .vf-burger { display: flex; }
  /* Keep a COMPACT signed-in user chip (avatar + "Lv.N") in the mobile header so the
     logged-in user + their level are always visible, not hidden behind the burger. The
     name text + chevron are dropped to fit; the chip stays tappable (account dropdown,
     which keeps its right:0 anchor so it never clips off the right edge). */
  .vf-scope .vf-nav-right .vf-user { display: flex; order: -1; }
  .vf-scope .vf-nav-right .vf-user-btn > span:not(.vf-user-lv) { display: none; }
  .vf-scope .vf-nav-right .vf-user-btn > svg { display: none; }
}
@media (max-width: 991.98px) {
  .vf-footer-top { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 767.98px) {
  /* Task 41: the shield stays the FULL 39px on phones too, so it dominates the wordmark/motto
     exactly like desktop (user request). Fit is handled NOT by shrinking the shield but by the
     safety net below — the brand yields by ellipsizing the long tagline only when a signed-in
     chip leaves no room. */
  .vf-nav-inner { gap: 10px; }
  /* Safety net: the lockup must NEVER force horizontal page overflow (the Task-25 /
     mobile-centering regression class). The brand shrinks and ellipsizes its text when a
     signed-in avatar + "Lv." chip (kept in the row ≤1199.98px) leaves no room; the SHIELD is
     protected (never shrinks), so it stays dominant. Guests and roomier phones show the full motto. */
  .vf-brand { min-width: 0; flex-shrink: 1; }
  #navShield { flex-shrink: 0; }
  .vf-brand-txt { min-width: 0; }
  .vf-brand-txt b,
  .vf-brand-txt i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 600px) {
  .vf-footer-brandrow { flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px 0 22px; margin-bottom: 28px; }
  .vf-footer-bot { flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; }
  /* Footer link columns become a 2-column grid on mobile (COMPANIE | TERMENI,
     ASISTENȚĂ below) — matches the mockup, which keeps this 2-col down to the
     smallest widths. Do NOT re-add a `<=575.98px { grid-template-columns:1fr }`
     override: it shadows this rule at the 393px mobile width and collapses the
     links back into one stacked column (regression guarded by responsive.spec). */
  .vf-footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .vf-top { display: none !important; }
}

/* ============================================================
   Verifeedo Redesign — HERO (Task 4)
   ------------------------------------------------------------
   Live ticker + hero (headline, live AJAX search, count-up stats,
   CTA + trust row) + the fractional green star widget (.vf-srow)
   + the funnel-modal SHELL (the full wizard lands in Task 11).
   Ported from the mockup (verifeedo-hero.css); the mockup's
   slash-alpha  rgb(var(--token) / A)  is converted to the legacy
   rgba(var(--token), A)  form (see the ALPHA SYNTAX note above).
   ============================================================ */

/* ---------------- live ticker ---------------- */
.vf-ticker { background: #101728; color: #c9d3e8; height: 40px; overflow: hidden; font-size: 13px; }
.vf-ticker-inner { display: flex; align-items: center; gap: 16px; height: 100%; }
.vf-ticker-live { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-weight: 800; font-size: 11px; letter-spacing: .1em; color: #fff; }
.vf-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff5a5a; animation: vf-pulse 1.6s infinite; }
.vf-ticker-track { position: relative; flex: 1; height: 100%; overflow: hidden; }
.vf-ticker-item { position: absolute; inset: 0; display: flex; align-items: center; gap: 9px; opacity: 0; transform: translateY(100%); transition: opacity .5s, transform .5s; white-space: nowrap; }
.vf-ticker-item.on { opacity: 1; transform: none; }
.vf-ticker-item b { color: #fff; font-weight: 700; }
.vf-ticker-ago { color: #8294bd; font-size: 12px; }
.vf-ticker-count { flex-shrink: 0; color: #8294bd; font-weight: 600; font-size: 12px; white-space: nowrap; }
.vf-ticker-item .vf-stars { font-size: 12px; }
.vf-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 800; flex-shrink: 0; }

/* ---------------- hero ----------------
   No overflow:hidden on the hero box: the search-results dropdown is absolutely
   positioned inside it and overflow:hidden would clip it (the same Safari/clip
   trap the legacy hero documented). The decorative blob/phone that needed it are
   inside .vf-visual { display:none } here. */
.header.header-image.vf-header {
  position: relative; min-height: 450px; border-bottom: 0; color: var(--vf-ink);
  background:
    radial-gradient(38% 50% at 88% 32%, rgba(var(--secondary_color), .14), transparent 72%),
    radial-gradient(46% 56% at 99% 70%, rgba(var(--primary_color), .10), transparent 74%),
    linear-gradient(180deg, rgb(var(--elements_background_color)) 0%, #ffffff 70%);
}
.header.header-image.vf-header .header-inner { color: var(--vf-ink); }
.header-inner.vf-header-inner { position: relative; z-index: 2; justify-content: flex-start; padding-top: 56px; padding-bottom: 52px; }

.vf-title { font-size: clamp(38px, 4.4vw, 60px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--vf-ink); margin-bottom: 18px; }
.vf-title-1line { font-size: clamp(28px, 3.4vw, 46px); letter-spacing: -.03em; white-space: nowrap; }
.vf-title .em { position: relative; color: rgb(var(--primary_color)); white-space: nowrap; }
.vf-title .em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .14em; border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--secondary_color)), var(--vf-cyan)); opacity: .5; }
.vf-sub { font-size: 18px; line-height: 1.55; color: var(--vf-muted); max-width: 520px; margin-bottom: 26px; }

/* ---------------- hero search ----------------
   No `.header-search` class on the markup: that legacy theme hook pulls in
   app.css + custom.css rules that style the INPUT itself as a second bordered
   white pill (double-pill look). The vf hero is styled purely by `.vf-search`. */
.vf-search { max-width: 760px; margin-bottom: 20px; position: relative; }
.vf-search .search-input { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--vf-line);
  border-radius: 999px; padding: 7px 7px 7px 22px; box-shadow: 0 16px 38px rgba(var(--primary_color), .13); }
.vf-search .search-input .vf-search-ico { color: var(--vf-muted-2); flex: none; }
.vf-search .search-input input { flex: 1; min-width: 0; border: none !important; outline: none; background: transparent;
  font-family: inherit; font-size: 16px; color: var(--vf-ink); box-shadow: none !important; }
/* --vf-muted (AA), not the decorative-only --vf-muted-2, for informational text. */
.vf-search .search-input input::placeholder { color: var(--vf-muted); }
.vf-scope .vf-search .search-input .vf-search-btn { flex: none; padding: 13px 26px !important; border-radius: 999px !important;
  display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.vf-search .search-input .vf-search-btn svg { color: #fff; width: 18px; height: 18px; }
.vf-search .search-input:focus-within { border-color: rgba(var(--primary_color), .5);
  box-shadow: 0 0 0 4px rgba(var(--primary_color), .12), 0 16px 38px rgba(var(--primary_color), .13); }

/* live-search dropdown */
.vf-search-results { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 40; background: #fff;
  border: 1px solid var(--vf-line); border-radius: 18px; box-shadow: 0 26px 60px rgba(20, 46, 98, .18); overflow: hidden; display: none; }
.vf-search.open .vf-search-results { display: block; animation: vf-drop .18s ease; }
@keyframes vf-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.vf-sr-head { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vf-muted); padding: 14px 18px 8px; }
.vf-sr-item { display: flex; align-items: center; gap: 13px; padding: 11px 18px; cursor: pointer; transition: background .12s; text-align: left;
  width: 100%; border: none; background: none; text-decoration: none; }
.vf-sr-item:hover, .vf-sr-item.active { background: rgba(var(--primary_color), .06); }
.vf-sr-logo { width: 40px; height: 40px; border-radius: 11px; flex: none; overflow: hidden; background: rgb(var(--elements_background_color));
  display: flex; align-items: center; justify-content: center; }
.vf-sr-logo img { width: 100%; height: 100%; object-fit: cover; }
.vf-sr-main { flex: 1; min-width: 0; }
.vf-sr-main b { font-size: 14.5px; font-weight: 800; color: var(--vf-ink); display: block; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-sr-main span { font-size: 12.5px; color: var(--vf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.vf-sr-rating { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; color: var(--vf-ink); flex: none; }
.vf-sr-rating .vf-srow { font-size: calc(var(--vf-star-size, 16px) * 0.8125); } /* Task 33: proportional to the size knob (13px at 16) */
.vf-sr-empty { padding: 26px 18px; text-align: center; color: var(--vf-muted); font-size: 14px; }
.vf-sr-empty b { color: var(--vf-ink); display: block; margin-bottom: 3px; font-size: 15px; }
/* shared by the results foot and the empty-state add-business row */
.vf-sr-foot { border: 0; border-top: 1px solid var(--vf-line-soft); width: 100%; min-height: 48px; background: none; text-align: left;
  font-family: inherit; padding: 11px 18px; font-size: 13px; font-weight: 700;
  color: rgb(var(--primary_color)); cursor: pointer; display: flex; align-items: center; gap: 7px; text-decoration: none; }
.vf-sr-foot:hover { background: rgba(var(--primary_color), .05); }

/* ---------------- fractional green star widget ---------------- */
/* Size/depth/fill are admin-editable (Task 33). includes/styles.blade.php stamps
   --vf-star-size / --vf-star-3d / --vf-star-fill on .vf-scope from the stars_style
   settings group; these defaults are the safe fallback if that stamp is ever absent
   (degrades to the pre-Task-33 16px flat-green look). The size is em-driven so ONE
   knob rescales every surface; per-surface overrides below stay proportional. */
.vf-scope { --vf-star-size: 18px; }
.vf-srow { position: relative; display: inline-flex; font-size: var(--vf-star-size, 16px); line-height: 0; vertical-align: middle; }
/* Task 47: the .bg/.fg layers are <span>s, so a surface's own bare `… span {font-size}`
   rule (e.g. .vf-rank-meta span:12px for the "· N recenzii" text) would otherwise win over
   the inherited size and clamp the star GLYPH (.vf-star is width:1em of its parent span) —
   it shrank the "Afaceri populare" stars to 12px regardless of the .vf-srow size. Pin the
   layers to 1em so the glyph ALWAYS tracks the .vf-srow font-size (specificity 0,2,0 beats a
   `.surface span` 0,1,1), keeping every surface's star at its intended per-surface size. */
.vf-srow .bg, .vf-srow .fg { display: inline-flex; gap: 0; font-size: 1em; }
/* Depth (3D) is applied to the WHOLE-star base layer only — never the fractional-clip
   .fg overlay, whose overflow:hidden would draw a shadow seam at the fill cut. */
.vf-srow .bg { color: #dde3ec; filter: var(--vf-star-3d, none); }
.vf-srow .fg { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--vf-star); transition: width .9s cubic-bezier(.2, .7, .2, 1); }
.vf-star { width: 1em; height: 1em; display: block; flex: none; fill: currentColor; }
/* The FILLED layer paints with the brand navy→green gradient (or flat green) per the
   admin --vf-star-fill; the empty .bg layer keeps its grey currentColor fill. */
.vf-srow .fg .vf-star { fill: var(--vf-star-fill, currentColor); }
/* High-contrast / forced-colors: drop the gradient + depth, but KEEP a filled/empty
   distinction with system colours so a fractional rating still reads visually (the
   feed card shows stars with no numeric value). Mapping BOTH layers to currentColor
   would collapse them to one solid colour — and gradient url() fills otherwise survive
   forced-colors, so this must preserve the contrast rather than remove it. */
@media (forced-colors: active) {
  .vf-srow .bg { filter: none; }
  .vf-srow .bg .vf-star { fill: GrayText; }
  .vf-srow .fg .vf-star { fill: CanvasText; }
}
/* Hero + ticker trust stars (.vf-stars) — paint the filled glyph with the brand
   gradient (Task 33 round 2). Target the <path> so it overrides BOTH the ticker
   glyph's inline fill="currentColor" AND the inherited currentColor of the
   #trustStars STAR_SVG; flat mode keeps the green currentColor. */
.vf-stars { display: inline-flex; gap: 2px; color: var(--vf-star); }
.vf-stars svg { width: 1em; height: 1em; display: block; }
.vf-stars svg path { fill: var(--vf-star-fill, currentColor); }
@media (forced-colors: active) { .vf-stars svg path { fill: CanvasText; } }
/* Task 47: size the HERO average-rating stars (#trustStars, the .vf-trust block — "X.X out of
   N verified reviews") to the SAME unified content size as the section .vf-srow stars (≈26.73px
   at the 18px knob). Scoped to .vf-trust so the LIVE-ticker stars (.vf-ticker-item .vf-stars:12px)
   are untouched. .vf-stars shares the same star glyph as .vf-srow, so the visual size matches. */
.vf-trust .vf-stars { font-size: calc(var(--vf-star-size, 16px) * 1.485); }

/* ---------------- hero stats ---------------- */
.vf-herostats { display: flex; align-items: stretch; gap: 0; margin-bottom: 26px; }
.vf-herostats div { padding: 2px 26px; display: flex; flex-direction: column; }
.vf-herostats div + div { border-left: 1px solid var(--vf-line); }
.vf-herostats div:first-child { padding-left: 4px; }
.vf-herostats b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--vf-ink); line-height: 1.1; }
.vf-herostats span { font-size: 13px; color: var(--vf-muted); font-weight: 600; margin-top: 2px; }

/* ---------------- hero CTAs ---------------- */
.hero-cta-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.vf-scope .hero-cta-buttons .btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px;
  border-radius: 12px; padding: 13px 22px; border: 1.5px solid transparent; text-decoration: none; }

/* ---------------- trust row ---------------- */
.vf-trust { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.vf-trust-av { display: inline-flex; }
.vf-trust-av span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; margin-right: -9px; }
.vf-trust-av span:nth-child(1) { background: #244796; }
.vf-trust-av span:nth-child(2) { background: #0f9d76; }
.vf-trust-av span:nth-child(3) { background: #6d4ad8; }
.vf-trust-av span:nth-child(4) { background: #d8682a; }
.vf-trust-txt { font-size: 14px; color: var(--vf-muted); }
.vf-trust-txt b { color: var(--vf-ink); font-weight: 800; }

/* ---------------- hero photo + hidden visual ---------------- */
.vf-hero-photo { position: absolute; inset: 0; z-index: 0; background-repeat: no-repeat; background-position: right center; background-size: contain; }
.vf-hero-photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #fff 0%, #fff 40%, rgba(255, 255, 255, .62) 54%, rgba(255, 255, 255, 0) 72%); }
.vf-visual { display: none; }

/* ---------------- quick-review funnel wizard (Task 11) ---------------- */
.vf-modal-overlay { position: fixed; inset: 0; z-index: 1080; background: rgba(16, 23, 40, .55); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 24px; }
.vf-modal-overlay.open { display: flex; }
.vf-modal { width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 26px;
  box-shadow: 0 40px 100px rgba(16, 23, 40, .4); position: relative; }
.vf-modal-close, .vf-wn-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; border: none;
  background: var(--vf-line-soft); color: var(--vf-ink-soft); font-size: 18px; line-height: 1; cursor: pointer; z-index: 2; }
.vf-modal-close:hover, .vf-wn-close:hover { background: var(--vf-line); }
.vf-modal-prog { display: flex; gap: 6px; padding: 20px 60px 0 24px; }
.vf-modal-prog span { flex: 1; height: 5px; border-radius: 999px; background: var(--vf-line); }
.vf-modal-prog span.done { background: rgb(var(--primary_color)); }
.vf-modal-body { padding: 22px 30px 32px; }
.vf-step { display: none; flex-direction: column; }
.vf-step.on { display: flex; }
.vf-step.center { align-items: center; text-align: center; }
.vf-h { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--vf-ink); }
.vf-p { font-size: 14.5px; color: var(--vf-muted); margin-top: 8px; line-height: 1.5; }
.vf-p.vf-funnel-guest { margin-top: 14px; }
.vf-p.vf-funnel-guest a { color: rgb(var(--primary_color)); font-weight: 700; }
.vf-scope .vf-modal .btn.vf-next { width: 100%; margin-top: 22px; }
/* Disabled CTA: WCAG 1.4.11 exempts inactive controls, but keep it more legible
   than a deep fade (a desaturated grey + a clearly-inactive opacity). */
.vf-scope .vf-modal .btn.vf-next:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(35%); }
/* Step 0 — business search + pick-list */
.vf-fsearch { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--vf-line); border-radius: 14px;
  padding: 12px 16px; margin-top: 18px; color: var(--vf-muted); }
.vf-fsearch input { flex: 1; border: none; outline: none; background: none; font-family: inherit; font-size: 15.5px;
  color: var(--vf-ink); }
.vf-fsearch:focus-within { border-color: rgb(var(--primary_color)); }
.vf-bizlist { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.vf-bizrow { display: flex; align-items: center; gap: 13px; padding: 12px; border-radius: 12px; text-align: left;
  border: none; background: none; cursor: pointer; width: 100%; }
.vf-bizrow:hover { background: var(--vf-line-soft); }
.vf-bizrow .vf-logo { width: 40px; height: 40px; border-radius: 11px; flex: none; overflow: hidden;
  background: var(--vf-line-soft); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.vf-bizrow .vf-logo img { width: 100%; height: 100%; object-fit: cover; }
.vf-bizrow-main { flex: 1; min-width: 0; }
.vf-bizrow-main b { font-size: 15px; font-weight: 700; display: block; color: var(--vf-ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.vf-bizrow-main span { font-size: 13px; color: var(--vf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.vf-bizlist-empty { padding: 14px 12px 10px; text-align: center; color: var(--vf-muted); }
/* Reuse the hero-search empty-state row style for the wizard add-business option. */
.vf-bizlist-add { flex: none; }
/* Step 1 — rating */
.vf-bighead { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.vf-bighead .vf-logo { width: 54px; height: 54px; border-radius: 15px; flex: none; color: #fff; font-size: 18px;
  background: rgb(var(--primary_color)); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.vf-bighead-id { text-align: left; }
.vf-bighead-id b { font-size: 17px; font-weight: 800; display: block; color: var(--vf-ink); }
.vf-verif { font-size: 12.5px; color: var(--vf-muted); display: inline-flex; align-items: center; gap: 5px; }
.vf-starpick { display: inline-flex; gap: 8px; margin: 24px 0 10px; }
.vf-starpick button { border: none; background: none; cursor: pointer; color: #dfe4ef; padding: 0; line-height: 0;
  border-radius: 8px; transition: transform .12s; }
.vf-starpick button:hover { transform: scale(1.18); }
.vf-starpick button.on { color: var(--vf-star); }
.vf-rlabel { font-size: 16px; font-weight: 800; color: rgb(var(--primary_color)); min-height: 22px; }
/* Step 2 — write */
/* Read-only rating confirmation at the top of the write step (painted by setRating). */
.vf-write-rating { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 16px;
  padding: 10px 14px; border: 1px solid var(--vf-line); border-radius: 12px; background: var(--vf-line-soft); }
.vf-write-rlead { font-size: 13px; font-weight: 700; color: var(--vf-muted); }
.vf-write-stars { display: inline-flex; gap: 2px; line-height: 0; }
.vf-write-stars i { display: inline-flex; color: #dfe4ef; }
.vf-write-stars i svg { width: 18px; height: 18px; }
.vf-write-stars i.on { color: var(--vf-star); }
.vf-write-rlabel { font-size: 14px; font-weight: 800; color: var(--vf-ink); }
.vf-write-edit { margin-left: auto; border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 700; color: rgb(var(--primary_color)); padding: 4px 6px; border-radius: 8px; }
.vf-write-edit:hover { text-decoration: underline; }
.vf-write-edit:focus-visible { outline: 2px solid rgb(var(--primary_color)); outline-offset: 2px; }
.vf-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px; }
.vf-tag { font-size: 13px; font-weight: 700; color: var(--vf-ink-soft); background: var(--vf-line-soft);
  border: 1.5px solid var(--vf-line); padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.vf-tag.on { border-color: rgb(var(--primary_color)); color: rgb(var(--primary_color)); background: rgb(var(--primary_color) / .08); }
.vf-textarea { width: 100%; min-height: 110px; resize: vertical; border: 1.5px solid var(--vf-line); border-radius: 14px;
  padding: 14px 16px; font-family: inherit; font-size: 15px; line-height: 1.55; outline: none; color: var(--vf-ink); }
.vf-textarea:focus { border-color: rgb(var(--primary_color)); }

/* Review form inline validation — length hints + on-submit field errors.
   Self-contained so the full-page create/edit form AND the quick-review wizard
   highlight invalid fields whether or not Bootstrap's own form-validation CSS is
   active in the theme. The hint is always visible; the feedback shows when its
   field carries .is-invalid (server @error) or the JS adds .d-block. */
.vf-field-hint { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--vf-muted, #5f6b86); }
.invalid-feedback { display: none; width: 100%; margin-top: 6px; font-size: 13px; line-height: 1.45; color: #dc3545; }
.is-invalid ~ .invalid-feedback,
.invalid-feedback.d-block { display: block; }
.form-control.is-invalid,
input.is-invalid,
textarea.is-invalid { border-color: #dc3545; }
.form-control.is-invalid:focus,
input.is-invalid:focus,
textarea.is-invalid:focus { border-color: #dc3545; box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .2); }
/* The star picker is a radiogroup, not a .form-control — its message carries the cue. */
.ratings.is-invalid { outline: none; }
/* Quick-review wizard inline error (mirrors .invalid-feedback for the vf- textarea). */
.vf-textarea.is-invalid { border-color: #dc3545; }
.vf-textarea.is-invalid:focus { border-color: #dc3545; box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .2); }
.vf-field-error { margin-top: 6px; font-size: 13px; line-height: 1.45; color: #dc3545; }
.vf-field-error[hidden] { display: none; }
/* Step 3 — success */
.vf-success-check { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%;
  background: rgb(var(--secondary_color) / .12); display: flex; align-items: center; justify-content: center; }
.vf-success-check svg { width: 46px; height: 46px; }
.vf-success-check .ring { stroke: rgb(var(--secondary_color)); stroke-width: 2.2; fill: none; stroke-dasharray: 130; stroke-dashoffset: 130; }
.vf-success-check .tick { stroke: rgb(var(--secondary_color)); stroke-width: 2.6; fill: none; stroke-linecap: round;
  stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; }
.vf-step.on .vf-success-check .ring { animation: vf-draw .5s ease forwards; }
.vf-step.on .vf-success-check .tick { animation: vf-draw .4s .42s ease forwards; }
@keyframes vf-draw { to { stroke-dashoffset: 0; } }
.vf-reward { width: 100%; background: var(--vf-line-soft); border: 1px solid var(--vf-line); border-radius: 16px;
  padding: 18px; margin-top: 16px; }
.vf-reward-pts { font-size: 34px; font-weight: 800; color: rgb(var(--secondary_color)); }
.vf-reward-pts span { font-size: 15px; color: var(--vf-muted); font-weight: 700; }
/* Keyboard focus rings (WCAG 2.4.7) on the wizard's interactive controls */
.vf-bizrow:focus-visible, .vf-starpick button:focus-visible, .vf-tag:focus-visible,
.vf-bizlist-add:focus-visible, .vf-modal-close:focus-visible, .vf-wn-close:focus-visible {
  outline: 2px solid rgb(var(--primary_color)); outline-offset: 2px;
}
/* Confetti burst on a successful post (vanilla, self-contained → no vendor lib) */
.vf-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 4000; overflow: hidden; }
.vf-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; opacity: .95;
  animation: vf-conf 2.4s cubic-bezier(.3, .6, .5, 1) forwards; }
@keyframes vf-conf { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(105vh) rotate(720deg); opacity: .9; } }
/* Mobile sticky "Write a review" CTA */
.vf-sticky-cta { display: none; }
@media (max-width: 600px) {
  .vf-sticky-cta { position: fixed; left: 12px; right: 12px; z-index: 1400; bottom: calc(12px + env(safe-area-inset-bottom));
    display: block; transform: translateY(150%); transition: transform .32s cubic-bezier(.2, .7, .2, 1); }
  .vf-sticky-cta.show { transform: none; }
  body.vf-menu-open .vf-sticky-cta { transform: translateY(150%); pointer-events: none; }
  .vf-sticky-cta .btn { width: 100%; justify-content: center; padding: 15px; font-size: 15.5px; border-radius: 14px;
    box-shadow: 0 12px 32px rgb(var(--secondary_color) / .42); }
  .vf-modal-overlay { padding: 12px 12px calc(12px + var(--vf-keyboard-inset, 0px)); align-items: flex-end; }
  .vf-modal { max-height: min(94vh, calc(var(--vf-visual-vh, 100vh) - 24px)); border-radius: 22px; }
  .vf-modal-body { padding: 20px 18px 24px; }
  /* Bigger, well-spaced rating stars on mobile so a tap can't land on the wrong star.
     40px glyph + 6px padding each side = a 52px tap target (≥ the 44px WCAG 2.5.5 / HIG
     minimum), centred, with a roomier gap. touch-action avoids the double-tap-zoom delay. */
  .vf-starpick { gap: 12px; justify-content: center; margin: 22px 0 12px; }
  .vf-starpick button { padding: 6px; touch-action: manipulation; }
  .vf-starpick button svg { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .vf-confetti { display: none; }
  .vf-success-check .ring, .vf-success-check .tick { animation: none; stroke-dashoffset: 0; }
  .vf-sticky-cta { transition: none; }
}

/* ---------------- level-up / badge celebration splash ---------------- */
/* Reuses .vf-modal-overlay / .vf-modal / .vf-success-check / .vf-confetti from the
   funnel wizard. Shown by verifeedo-redesign.js (initLevelSplash) when the server
   renders a pending celebration. */
.vf-splash .vf-modal { max-width: 440px; text-align: center; padding: 40px 32px 32px; }
.vf-splash-card { display: flex; flex-direction: column; align-items: center; }
.vf-splash-check { animation: vf-splash-pop .5s cubic-bezier(.2, .8, .3, 1.2) both; }
/* The funnel's draw animation is scoped to .vf-step.on; re-trigger it when the splash opens. */
.vf-splash.open .vf-success-check .ring { animation: vf-draw .5s ease forwards; }
.vf-splash.open .vf-success-check .tick { animation: vf-draw .4s .42s ease forwards; }
.vf-splash-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--vf-ink); margin: 0; }
.vf-splash-title:focus-visible { outline: none; }
.vf-splash-sub { font-size: 14.5px; color: var(--vf-muted); margin: 14px 0 4px; }
.vf-splash-level { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 2px; }
.vf-splash-lvnum { font-size: 30px; font-weight: 800; color: rgb(var(--primary_color)); letter-spacing: -.02em; }
.vf-splash-rank { font-size: 15px; font-weight: 700; color: var(--vf-ink-soft); }
.vf-splash-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.vf-splash-badge { font-size: 13px; }
.vf-splash-cta { margin-top: 26px; min-width: 160px; justify-content: center; }
.vf-splash-cta:focus-visible { outline: 2px solid rgb(var(--primary_color)); outline-offset: 2px; }
@keyframes vf-splash-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .vf-splash-check { animation: none; }
  .vf-splash.open .vf-success-check .ring, .vf-splash.open .vf-success-check .tick { animation: none; stroke-dashoffset: 0; }
}

/* ---------------- "What's New" feature-announcement splash (Task 18) ---------------- */
/* Reuses the funnel wizard's .vf-modal-overlay / .vf-modal shell + focus-trap. Shown by
   verifeedo-redesign.js (initWhatsNew) once per release (versioned localStorage) or via the
   footer "What's new" re-entry link. */
.vf-whatsnew .vf-modal { max-width: 600px; }
.vf-whatsnew-card { padding: 40px 34px 30px; }
.vf-wn-head { text-align: center; margin-bottom: 22px; }
.vf-wn-spark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: 16px; margin-bottom: 14px; color: rgb(var(--primary_color)); background: rgb(var(--primary_color) / .1); }
.vf-wn-title { font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: var(--vf-ink); margin: 0; }
.vf-wn-title:focus-visible { outline: none; }
.vf-wn-sub { font-size: 14.5px; color: var(--vf-muted); margin: 8px 0 0; line-height: 1.5; }
.vf-wn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Task 46: an ODD-count last card (e.g. the 5th "ranks & levels" card, shown only when
   gamification is enabled) spans the full row so the 2-col grid never leaves a dangling
   empty cell — and gives that headline highlight extra emphasis. No-op at the even 4-card
   default; harmless on mobile (the grid collapses to a single column below). */
.vf-wn-grid > .vf-wn-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.vf-wn-item { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 16px;
  border: 1px solid var(--vf-line); background: var(--vf-line-soft); text-align: left; text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s; }
.vf-wn-item:hover { border-color: rgb(var(--primary_color) / .55); transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(16, 23, 40, .08); }
.vf-wn-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 11px; color: rgb(var(--secondary_color)); background: rgb(var(--secondary_color) / .12); }
.vf-wn-tx { min-width: 0; }
.vf-wn-tx b { display: block; font-size: 15px; font-weight: 800; color: var(--vf-ink); }
.vf-wn-tx span { display: block; font-size: 13px; color: var(--vf-muted); line-height: 1.45; margin-top: 2px; }
.vf-scope .vf-whatsnew .btn.vf-wn-cta { width: 100%; margin-top: 22px; justify-content: center; }
.vf-wn-item:focus-visible, .vf-wn-cta:focus-visible { outline: 2px solid rgb(var(--primary_color)); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .vf-whatsnew.open .vf-modal { animation: vf-wn-in .32s cubic-bezier(.2, .8, .3, 1.05) both; }
}
@keyframes vf-wn-in { 0% { transform: translateY(14px) scale(.98); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (max-width: 600px) {
  .vf-whatsnew-card { padding: 26px 18px 22px; }
  .vf-wn-grid { grid-template-columns: 1fr; }
  .vf-wn-title { font-size: 22px; }
}

/* ---------------- hero responsive ---------------- */
@media (min-width: 1200px) {
  .header.header-image.vf-header { min-height: 600px; }
  .header-inner.vf-header-inner { padding-top: 46px; }
}
@media (max-width: 1199.98px) {
  .vf-title-1line { white-space: normal; }
  .vf-herostats { justify-content: center; }
}
@media (max-width: 991.98px) {
  /* Task 66 (faithful to the verifeedo_redesign mockup; supersedes Task 65's `65% center`):
     anchor the cover photo at `center top` so the phone's VERIFEEDO shield + wordmark — which
     sit at the TOP of the source frame — read at the top-right of the hero, with the phone
     pushed RIGHT and the empty left third of the image kept clean behind the centred copy
     (exactly the user's reference / "picture 2"). `cover` keeps the LARGE framing.
     Geometry note: on portrait phones the image is HEIGHT-bound under cover (drawnH == boxH, no
     vertical crop), so the `top` Y is a visual no-op here — but it is the mockup's literal value,
     kept verbatim for parity. The visible change vs Task 65 is purely the X (`65% → center`):
     lowering P reveals MORE of the empty left side and shifts the phone RIGHT, off the copy,
     instead of Task-65's centre-right pin (≈0.65) that crowded the centred text. The shield (the
     logo the user wants legible, source-x ≈ 0.585) stays on-screen on every phone; the wordmark's
     tail softens past the right edge below ~390px — the same behaviour as the mockup. RTL needs
     NO mobile mirror: `center` is symmetric (the mirror lives only on the desktop anchor).
     Faint opacity:.5 decorative layer under the 180deg legibility scrim. */
  .vf-hero-photo { opacity: .5; background-position: center top; background-size: cover; }
  .vf-hero-photo::after { background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .32) 40%, rgba(255, 255, 255, .7) 78%, #fff 100%); }
  .header-inner.vf-header-inner { padding-top: 40px; padding-bottom: 28px; text-align: center; }
  /* Task 63: the restored cover image (above) is prominent enough that the navy in-app
     "Trusted by thousands" card bleeds behind the centred hero copy. Darken the subtitle
     from --vf-muted to the --vf-ink-soft token on mobile so it clears WCAG AA (≥4.5:1) over
     that dark region — measured 2.4:1 with --vf-muted, ≥4.5:1 with --vf-ink-soft (the title
     is --vf-ink, already ~9.5:1). Desktop keeps --vf-muted: there the copy sits on the LEFT,
     over the empty/white side of the right-anchored image, so it stays light & airy. */
  .vf-sub { margin-left: auto; margin-right: auto; color: var(--vf-ink-soft); }
  .vf-search { margin-left: auto; margin-right: auto; }
  .vf-trust { justify-content: center; }
  /* Task 63: keep the two hero CTAs ("Scrie o recenzie" + "Pentru afaceri") on ONE row, as
     in the "picture 1" reference. The base `.hero-cta-buttons` is `flex-wrap:wrap` and the
     content-width buttons only just exceed a narrow phone's width → they wrapped to two
     stacked rows. Force a single shared row: `nowrap` + each button `flex:1 1 0` (equal
     halves, `min-width:0` so they may shrink), with trimmed inline padding + a slightly
     smaller label so both fit without their own text wrapping down to the narrowest phones.
     SCOPED to `.vf-header` (the homepage hero) so the separate for-business hero — which
     reuses `.hero-cta-buttons` but lives in a plain `.header-inner`, not `.vf-header` — keeps
     its own CTA layout untouched. */
  .vf-header .hero-cta-buttons { flex-wrap: nowrap; gap: 10px; }
  .vf-scope .vf-header .hero-cta-buttons .btn { flex: 1 1 0; min-width: 0; justify-content: center;
    padding-left: 14px; padding-right: 14px; font-size: 14px; white-space: nowrap; }
}
/* Task 66 — match the mockup's (verifeedo-hero.css) mobile hero TYPOGRAPHY at ≤600px so the live
   hero reads like the reference / "picture 2-3". The default `.vf-title-1line` font (clamp 28px,
   3.4vw) is small enough that "Găsește afaceri de încredere" fits on ONE line on a phone — which
   left the subtitle starting high, over the photo's VERIFEEDO shield band, so "…verificați" bled
   into the brand. Bump it with the mockup's `clamp(26px, 8vw, 34px)` (the `.vf-title.vf-title-1line`
   0,2,0 selector beats both 0,1,0 bases): at phone widths this is large enough that the line wraps,
   and the `.em` (`white-space:nowrap`) drops "de încredere" onto a SECOND line — exactly the mockup.
   The taller two-line title pushes the centred subtitle BELOW the shield band (clears the overlap),
   and trimming the subtitle to the mockup's 14.5px keeps it ~3 compact lines. Hero TYPOGRAPHY only —
   the nav/footer/section rules in the mockup's ≤600px block are intentionally NOT ported (the live
   app already owns its own mobile nav/footer/section behaviour). */
@media (max-width: 600px) {
  .vf-title.vf-title-1line { font-size: clamp(26px, 8vw, 34px); }
  .vf-sub { font-size: 14.5px; }
}
/* Task 67 — make the hero search PLACEHOLDER fully visible on small screens.
   The descriptive placeholder (~50 chars, ~359px wide) clips for EVERY viewport below the
   Bootstrap `md` tier: under 768px the hero `.container` is ≤540px (sm) / fluid, so after the
   leading magnifier + the "Căutare/Search" button the flex input is left far too narrow
   (measured: ~305px at 700px, ~140px at 375px). The mockup's ≤600px "airy" rules help but
   (a) never covered the 600–767px sm-container zone and (b) can't fit the full string next to
   the button on a phone regardless (the full text alone needs ~359px; the whole bar is ~351px
   at 375px). So extend the airy rules across the WHOLE sub-md clip zone, NARROW the button
   (the leading magnifier already cues search → drop the redundant trailing arrow), and pair
   this with the JS placeholder swap (initHeroSearch → data-placeholder-compact) at the SAME
   767.98px width. Desktop (≥768px) keeps the full descriptive placeholder + the roomy bar. */
@media (max-width: 767.98px) {
  .vf-search .search-input { padding: 6px 6px 6px 16px; gap: 8px; }
  /* 14px (not 15px): the Romanian compact placeholder mirrors the desktop wording
     ("Caută printre <count> afaceri", count abbreviated to k/M past 5 digits — see
     heroSearchCompactPlaceholder()), and 14px is what keeps that phrase fully visible down to
     a 360px phone. The shorter EN/fallback placeholder fits comfortably at 14px too. */
  .vf-search .search-input input { font-size: 14px; }
  .vf-scope .vf-search .search-input .vf-search-btn { padding: 11px 16px !important; font-size: 14px; }
  .vf-search .search-input .vf-search-btn svg { display: none; }
}
@media (max-width: 420px) {
  .vf-herostats div { padding: 2px 16px; }
  .vf-herostats b { font-size: 22px; }
}

/* Reduced-motion: stop the looping pulse + tween the hero introduces (WCAG 2.3.3).
   The ticker JS also skips auto-rotation under the same media query. */
@media (prefers-reduced-motion: reduce) {
  .vf-dot { animation: none; }
  .vf-ticker-item { transition: none; }
  .vf-srow .fg { transition: none; }
  .vf-search.open .vf-search-results { animation: none; }
}

/* ============================================================
   Verifeedo Redesign — CATEGORIES + ACCENT BAND + HOW-IT-WORKS (Task 5)
   ------------------------------------------------------------
   The categories scroller (#vfCatRow), the navy trust-stat band
   (count-ups on scroll-in) and the 3-step how-it-works flow.
   Ported from the mockup (verifeedo-hero.css); the mockup's
   slash-alpha  rgb(var(--token) / A)  is converted to the legacy
   rgba(var(--token), A)  form (see the ALPHA SYNTAX note above).
   No dark-mode block; the mockup's decorative desktop step
   keyframe animations are intentionally dropped (static flow).
   ============================================================ */

/* ---------------- categories scroller ---------------- */
.vf-cat-row { display: flex; gap: 10px; overflow-x: auto; padding: 10px 2px 16px; scroll-snap-type: x mandatory; }
.vf-cat-row::-webkit-scrollbar { height: 6px; }
.vf-cat-row::-webkit-scrollbar-thumb { background: var(--vf-line); border-radius: 999px; }
.vf-cat-card { scroll-snap-align: start; flex: 0 0 auto; width: 158px; background: none; border: none; padding: 8px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; text-decoration: none; transition: .18s; }
.vf-cat-card:hover { transform: translateY(-4px); }
.vf-cat-icon { position: relative; width: 108px; height: 108px; display: flex; align-items: center; justify-content: center; margin: 0; transition: .18s; }
.vf-cat-icon::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 92px; height: 92px; border-radius: 50%; box-shadow: 0 5px 11px rgba(var(--primary_color), .20); }
.vf-cat-icon::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 92px; height: 92px; border: 2px solid rgba(var(--primary_color), .35); border-radius: 50%;
  -webkit-mask: radial-gradient(circle at 30% 72%, #000 0 62%, transparent 63%);
  mask: radial-gradient(circle at 30% 72%, #000 0 62%, transparent 63%); transition: border-color .18s; }
.vf-cat-card:hover .vf-cat-icon::after { border-color: rgba(var(--secondary_color), .65); }
.vf-cat-icon img { position: relative; z-index: 1; width: 56px; height: 56px; object-fit: contain; display: block;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.vf-cat-card:hover .vf-cat-icon img { transform: scale(1.12) rotate(-3deg); }
.vf-cat-name { font-size: 14px; font-weight: 700; color: rgb(var(--primary_color)); line-height: 1.25; }
.vf-cat-card:focus-visible, .vf-round:focus-visible { outline: 3px solid rgba(var(--primary_color), .4); outline-offset: 2px; }

/* ---------------- /categorii index — redesign card + animated icon (Task 5c) ----------------
   The legacy `.category.box` index card was a faint 5px-radius / no-shadow / washed
   #F1F5F9 tile with a static icon — out of place next to the redesign business cards
   (.vf-biz-card) and the homepage scroller (.vf-cat-icon). Bring it up to the redesign:
   a crisp business-card-style surface + the scroller's animated icon halo. `.category` is
   unique to /categorii (the only header_v3 page), so these legacy-class rules are contained;
   verifeedo-redesign.css loads globally but is inert elsewhere (no `.category` markup). */
.category.box {
  background: var(--vf-surface);
  border: 1px solid var(--vf-line);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(var(--primary_color), .05);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.category.box:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 46px rgba(var(--primary_color), .16);
  border-color: transparent;
}
/* Animated icon halo + hover scale/rotate, mirroring the homepage scroller's .vf-cat-icon. */
.category .category-icon {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: visible;
  flex-shrink: 0;
  transition: .18s;
}
.category .category-icon::before {
  content: "";
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%;
  box-shadow: 0 5px 11px rgba(var(--primary_color), .18);
}
.category .category-icon::after {
  content: "";
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border: 2px solid rgba(var(--primary_color), .35); border-radius: 50%;
  -webkit-mask: radial-gradient(circle at 30% 72%, #000 0 62%, transparent 63%);
  mask: radial-gradient(circle at 30% 72%, #000 0 62%, transparent 63%);
  transition: border-color .18s;
}
.category.box:hover .category-icon::after { border-color: rgba(var(--secondary_color), .65); }
.category .category-icon img {
  position: relative; z-index: 1;
  width: 44px; height: 44px;
  object-fit: contain; border-radius: 0;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
.category.box:hover .category-icon img { transform: scale(1.12) rotate(-3deg); }

/* Public search inputs (the /categorii header search + the listing/category
   search-params sidebar + contact, etc.) — crisp redesign border + focus ring.
   The legacy `.form-control` border (faint #97AEDD, 5px radius, no shadow) read as
   "no border"; bring all `.form-search` inputs up to a clear rounded field. The
   homepage hero search uses `.vf-search` (not `.form-search`) and is unaffected;
   admin search lives in a separate stylesheet, so this is public-theme only. */
.form-search .form-control {
  border: 1px solid var(--vf-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(var(--primary_color), .04);
}
.form-search .form-control:focus {
  border-color: rgb(var(--primary_color));
  box-shadow: 0 0 0 3px rgba(var(--primary_color), .12);
}
/* On the gray `.item-box` sidebar panel (--elements_background_color #f1f5f9) the
   light --vf-line border (1.09:1) all but vanishes; keep the stronger admin
   --border_color there so the field reads (white-bg search uses keep --vf-line). */
.item-box .form-search .form-control {
  border-color: rgb(var(--border_color));
}

@media (prefers-reduced-motion: reduce) {
  .category.box, .category.box:hover,
  .category .category-icon, .category .category-icon::after,
  .category .category-icon img, .category.box:hover .category-icon img {
    transition: none; transform: none;
  }
}

/* ---------------- accent trust-stat band ---------------- */
.vf-accent { padding: 8px 0 56px; }
.vf-accent-band { position: relative; overflow: hidden; border-radius: 24px; padding: 40px 48px;
  background: linear-gradient(118deg, color-mix(in srgb, rgb(var(--primary_color)) 94%, #0a2050) 0%, color-mix(in srgb, rgb(var(--primary_color)) 48%, #060f28) 100%);
  box-shadow: 0 26px 60px rgba(var(--primary_color), .30), inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(255, 255, 255, .06);
  display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; color: #fff; }
.vf-accent-shine { position: absolute; top: 0; bottom: 0; left: -30%; width: 22%; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .1) 45%, rgba(255, 255, 255, .16) 50%, transparent); transform: skewX(-14deg); }
.vf-accent-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(40% 120% at 88% 20%, rgba(var(--secondary_color), .32), transparent 70%),
              radial-gradient(30% 90% at 12% 90%, rgba(var(--secondary_color), .15), transparent 70%); }
.vf-accent-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .9) .9px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 100% at 50% 0%, #000, transparent 70%); mask-image: radial-gradient(60% 100% at 50% 0%, #000, transparent 70%); opacity: .06; }
.vf-accent-copy { position: relative; z-index: 1; }
.vf-accent-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 10.5px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: #9fd9c8; margin-bottom: 16px; background: rgba(var(--secondary_color), .1); border: 1px solid rgba(var(--secondary_color), .22);
  padding: 5px 13px 5px 11px; border-radius: 999px; }
.vf-accent-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--secondary_color)); box-shadow: 0 0 8px rgb(var(--secondary_color)); }
.vf-accent-copy h2 { font-size: clamp(23px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.025em; line-height: 1.16; }
.vf-accent-copy p { font-size: 14.5px; line-height: 1.55; color: #b8caea; max-width: 400px; margin-top: 13px; }
.vf-accent-stats { position: relative; z-index: 1; display: flex; align-items: stretch; }
.vf-accent-stats > div { position: relative; text-align: center; padding: 0 30px; display: flex; flex-direction: column; align-items: center; }
.vf-accent-stats > div + div::before { content: ""; position: absolute; left: 0; top: 6%; bottom: 6%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .18) 30%, rgba(255, 255, 255, .18) 70%, transparent); }
.vf-accent-stats > div:first-child { padding-left: 0; }
.vf-accent-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  margin-bottom: 14px; color: #7fe6bd; background: rgba(var(--secondary_color), .1); box-shadow: inset 0 0 0 1px rgba(var(--secondary_color), .28); }
.vf-accent-ic svg { width: 15px; height: 15px; }
.vf-accent-stats b { display: block; font-size: 32px; font-weight: 800; letter-spacing: -.025em; line-height: 1;
  background: linear-gradient(180deg, #ffffff, #d7e4fb); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* The unit suffix (e.g. the "M" of "2,4M" million, the "%" of "98%") must read as a
   UNIT on the baseline — `vertical-align: top` + a .5em glyph made "2,4M" look like
   "2,4 to the power M" (Task 13b fix). Baseline + a larger glyph reads as a multiplier. */
.vf-accent-stats b .pl { -webkit-text-fill-color: rgb(var(--secondary_color)); color: rgb(var(--secondary_color)); font-size: .66em; vertical-align: baseline; margin-left: 2px; font-weight: 800; }
/* #b3c4e0 (not the mockup's #90a6cc) clears WCAG AA (~5:1) for this 10.5px text on
   the navy band — #90a6cc was ~3.7:1 at the band's lightest point (review fix). */
.vf-accent-lbl { font-size: 10.5px; color: #b3c4e0; font-weight: 700; margin-top: 11px; display: block; white-space: nowrap; letter-spacing: .1em; text-transform: uppercase; }

/* ---------------- how-it-works flow ---------------- */
.vf-how-head { text-align: center; max-width: 640px; margin: 0 auto 54px; }
.vf-how-kicker { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: rgb(var(--secondary_color)); background: rgba(var(--secondary_color), .1); border: 1px solid rgba(var(--secondary_color), .2);
  padding: 5px 13px; border-radius: 999px; margin-bottom: 16px; }
.vf-how-head .vf-title2 { font-size: clamp(27px, 2.9vw, 35px); font-weight: 800; letter-spacing: -.028em; color: var(--vf-ink); }
.vf-how-head p { font-size: 15px; line-height: 1.6; color: var(--vf-muted); margin-top: 13px; }
.vf-how-flow { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.vf-how-seg { position: absolute; top: 40px; height: 2px; z-index: 0;
  background: repeating-linear-gradient(90deg, var(--vf-line) 0 7px, transparent 7px 14px); }
.vf-how-seg.s1 { left: calc(16.66% + 44px); width: calc(33.34% - 88px); }
.vf-how-seg.s2 { left: calc(50% + 44px); width: calc(33.34% - 88px); }
/* the green fill bar (animated to width 0→100%) + its glowing leading dot */
.vf-how-seg i { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(var(--secondary_color), .85) 0%, rgb(var(--secondary_color)) 60%, #6affc4 100%);
  box-shadow: 0 0 8px rgba(var(--secondary_color), .5); }
.vf-how-seg i::after { content: ""; position: absolute; right: -3px; top: 50%; transform: translateY(-50%);
  width: 11px; height: 11px; border-radius: 50%; background: #eafff6;
  box-shadow: 0 0 6px 2px rgb(var(--secondary_color)), 0 0 14px 5px rgba(var(--secondary_color), .5); opacity: 0; }
.vf-how-step { position: relative; z-index: 1; text-align: center; padding: 0 14px; }
.vf-how-node { position: relative; width: 80px; height: 80px; margin: 0 auto 24px; }
.vf-how-ic { width: 80px; height: 80px; border-radius: 24px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #ffffff, rgba(var(--primary_color), .05)); border: 1px solid var(--vf-line); color: rgb(var(--primary_color));
  box-shadow: 0 14px 32px rgba(20, 46, 98, .08), inset 0 1px 0 #fff; transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s; }
.vf-how-ic svg { width: 30px; height: 30px; }
.vf-how-step:hover .vf-how-ic { transform: translateY(-5px); border-color: transparent; box-shadow: 0 20px 40px rgba(var(--primary_color), .18); }
.vf-how-num { position: absolute; top: -8px; right: -8px; min-width: 25px; height: 25px; padding: 0 7px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; color: #fff;
  background: rgb(var(--primary_color)); box-shadow: 0 4px 12px rgba(var(--primary_color), .35), 0 0 0 3px #fff; letter-spacing: .03em; }
.vf-how-step h3 { font-size: 18px; font-weight: 800; color: var(--vf-ink); margin-bottom: 9px; letter-spacing: -.015em; }
.vf-how-step p { font-size: 13.5px; line-height: 1.6; color: var(--vf-muted); max-width: 250px; margin: 0 auto; }

/* ---------------- responsive (Task 5) ---------------- */
@media (max-width: 1100px) {
  .vf-accent-band { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 767.98px) {
  .vf-accent-band { padding: 24px 20px; gap: 20px; border-radius: 20px; }
  .vf-accent-copy h2 { font-size: 20px; }
  .vf-accent-copy p { font-size: 13.5px; margin-top: 9px; }
  .vf-accent-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .vf-accent-stats > div { padding: 14px 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; }
  .vf-accent-stats > div + div::before { display: none; }
  .vf-accent-ic { width: 26px; height: 26px; margin-bottom: 9px; }
  .vf-accent-ic svg { width: 13px; height: 13px; }
  .vf-accent-stats b { font-size: 21px; }
  .vf-accent-lbl { font-size: 9.5px; margin-top: 6px; letter-spacing: .08em; }
  .vf-how-flow { display: flex; flex-direction: column; gap: 0; max-width: 420px; margin: 0 auto; }
  .vf-how-seg { display: none; }
  .vf-how-step { display: grid; grid-template-columns: 80px 1fr; column-gap: 16px; text-align: left; align-items: start; padding: 0 0 24px; position: relative; }
  .vf-how-step:last-child { padding-bottom: 0; }
  .vf-how-node { margin: 0; grid-row: 1 / span 3; }
  .vf-how-step h3 { text-align: left; margin: 6px 0; }
  .vf-how-step p { text-align: left; margin: 0; max-width: none; }
  .vf-how-ic { background: none; border: none; box-shadow: none; }
  .vf-how-ic svg { width: 36px; height: 36px; }
  .vf-how-num { display: none; }
  /* Mobile uses a VERTICAL dashed connector + green fill instead of the horizontal
     segments (which are display:none here); the desktop tile pulse is dropped. */
  .vf-how-step.st1::before, .vf-how-step.st2::before { content: ""; position: absolute; left: 39px; top: 84px; bottom: 0; width: 2px;
    background: repeating-linear-gradient(180deg, var(--vf-line) 0 7px, transparent 7px 14px); }
  .vf-how-step.st1::after, .vf-how-step.st2::after { content: ""; position: absolute; left: 38px; top: 84px; bottom: 0; width: 3px; border-radius: 3px;
    background: linear-gradient(180deg, rgb(var(--secondary_color)), #4fe0a6); box-shadow: 0 0 8px rgba(var(--secondary_color), .5);
    transform: scaleY(0); transform-origin: top; }
  .vf-how-flow .st2 .vf-how-ic, .vf-how-flow .st3 .vf-how-ic { animation: none !important; }
}
@media (max-width: 575.98px) {
  .vf-accent { padding: 6px 0 30px; }
  .vf-how-head { margin-bottom: 30px; }
  .vf-cat-card:active { transform: scale(.93); }
}
@media (max-width: 400px) {
  .vf-cat-card { width: 138px; }
}

/* How-it-works animated sequence (Task 5): a looping green aura travels through the
   3 steps — magnifier vibrates → segment 1 fills (glowing dot) → step 2 tile/icon/
   badge light up green → segment 2 fills → step 3 lights up. Gated on reduced-motion
   (WCAG 2.3.3); slash-alpha converted to rgba; no dark-mode. Desktop = horizontal
   flow; ≤767px = a vertical-fill variant (the tile pulse is dropped there). */
@media (prefers-reduced-motion: no-preference) {
  .vf-how-flow .st1 .vf-how-ic svg { animation: vf-howVibrate 6.5s ease-in-out infinite; transform-origin: 54% 46%; }
  .vf-how-seg.s1 i { animation: vf-howFill1 6.5s ease-in-out infinite; }
  .vf-how-seg.s2 i { animation: vf-howFill2 6.5s ease-in-out infinite; }
  .vf-how-seg.s1 i::after { animation: vf-howDot1 6.5s ease-in-out infinite; }
  .vf-how-seg.s2 i::after { animation: vf-howDot2 6.5s ease-in-out infinite; }
  .vf-how-flow .st2 .vf-how-ic svg { animation: vf-howIcon2 6.5s ease-in-out infinite; transform-origin: center; }
  .vf-how-flow .st3 .vf-how-ic svg { animation: vf-howIcon3 6.5s ease-in-out infinite; transform-origin: center; }
  .vf-how-flow .st2 .vf-how-ic { animation: vf-howTile2 6.5s ease-in-out infinite; }
  .vf-how-flow .st3 .vf-how-ic { animation: vf-howTile3 6.5s ease-in-out infinite; }
  .vf-how-flow .st2 .vf-how-num { animation: vf-howBadge2 6.5s ease-in-out infinite; }
  .vf-how-flow .st3 .vf-how-num { animation: vf-howBadge3 6.5s ease-in-out infinite; }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  .vf-how-step.st1::after { animation: vf-howVFill1 6.5s ease-in-out infinite; }
  .vf-how-step.st2::after { animation: vf-howVFill2 6.5s ease-in-out infinite; }
}
@keyframes vf-howVFill1 { 0%, 17% { transform: scaleY(0); } 35%, 50% { transform: scaleY(1); } 57%, 100% { transform: scaleY(0); } }
@keyframes vf-howVFill2 { 0%, 47% { transform: scaleY(0); } 65%, 100% { transform: scaleY(1); } }
@keyframes vf-howFill1 { 0%, 17% { width: 0; } 35%, 50% { width: 100%; } 57%, 100% { width: 0; } }
@keyframes vf-howFill2 { 0%, 47% { width: 0; } 65%, 100% { width: 100%; } }
@keyframes vf-howDot1 { 0%, 17% { opacity: 0; } 21% { opacity: 1; } 33% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes vf-howDot2 { 0%, 47% { opacity: 0; } 51% { opacity: 1; } 63% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes vf-howTile2 {
  0%, 36% { border-color: var(--vf-line); background: linear-gradient(160deg, #fff, rgba(var(--primary_color), .05)); box-shadow: 0 10px 26px rgba(20, 46, 98, .07); }
  42% { border-color: rgb(var(--secondary_color)); background: rgba(var(--secondary_color), .12); box-shadow: 0 0 0 4px rgba(var(--secondary_color), .14), 0 14px 30px rgba(var(--secondary_color), .22); }
  48%, 100% { border-color: rgba(var(--secondary_color), .5); background: rgba(var(--secondary_color), .07); box-shadow: 0 10px 26px rgba(var(--secondary_color), .14); }
}
@keyframes vf-howTile3 {
  0%, 64% { border-color: var(--vf-line); background: linear-gradient(160deg, #fff, rgba(var(--primary_color), .05)); box-shadow: 0 10px 26px rgba(20, 46, 98, .07); }
  70% { border-color: rgb(var(--secondary_color)); background: rgba(var(--secondary_color), .12); box-shadow: 0 0 0 4px rgba(var(--secondary_color), .14), 0 14px 30px rgba(var(--secondary_color), .22); }
  76%, 100% { border-color: rgba(var(--secondary_color), .5); background: rgba(var(--secondary_color), .07); box-shadow: 0 10px 26px rgba(var(--secondary_color), .14); }
}
@keyframes vf-howBadge2 {
  0%, 38% { background: rgb(var(--primary_color)); box-shadow: 0 4px 10px rgba(var(--primary_color), .3); }
  44%, 100% { background: rgb(var(--secondary_color)); box-shadow: 0 4px 10px rgba(var(--secondary_color), .35); }
}
@keyframes vf-howBadge3 {
  0%, 66% { background: rgb(var(--primary_color)); box-shadow: 0 4px 10px rgba(var(--primary_color), .3); }
  72%, 100% { background: rgb(var(--secondary_color)); box-shadow: 0 4px 10px rgba(var(--secondary_color), .35); }
}
@keyframes vf-howVibrate {
  0%, 17%, 100% { transform: rotate(0) scale(1); }
  3% { transform: rotate(-14deg) scale(1.08); }
  6% { transform: rotate(12deg) scale(1.07); }
  9% { transform: rotate(-9deg) scale(1.05); }
  12% { transform: rotate(7deg) scale(1.04); }
  15% { transform: rotate(0) scale(1); }
}
@keyframes vf-howIcon2 {
  0%, 35% { transform: scale(1); color: rgb(var(--primary_color)); }
  39% { transform: scale(1.3); color: rgb(var(--secondary_color)); }
  43% { transform: scale(.94); }
  47% { transform: scale(1.14); }
  51%, 100% { transform: scale(1); color: rgb(var(--secondary_color)); }
}
@keyframes vf-howIcon3 {
  0%, 63% { transform: scale(1); color: rgb(var(--primary_color)); }
  67% { transform: scale(1.3); color: rgb(var(--secondary_color)); }
  71% { transform: scale(.94); }
  75% { transform: scale(1.14); }
  79%, 100% { transform: scale(1); color: rgb(var(--secondary_color)); }
}

/* ============================================================
   TASK 6 — Recommended grid + recent-reviews live feed
   (.vf-biz-card, .vf-feed-*, .vf-rev-card, helpful/heart, skeleton, toasts).
   Ported from the mockup: slash-alpha → rgba(); NO dark mode; the inline rate
   widget + reused .vf-srow use the GREEN star token (full-adopt decision).
   ============================================================ */

/* tinted section decorative blob */
.vf-section.tint { position: relative; overflow: hidden; }
.vf-section.tint::before { content: ""; position: absolute; z-index: 0; width: 340px; height: 340px; right: -90px; top: -120px;
  background: radial-gradient(circle, rgba(var(--primary_color), .06), transparent 70%); pointer-events: none; }
.vf-section.tint > .container { position: relative; z-index: 1; }

/* business card (recommended grid; Task 7 promotes it app-wide) */
/* minmax(0,1fr) — NOT a bare 1fr (= minmax(auto,1fr), whose `auto` min resolves to the
   grid item's min-content). A card carrying a long unbreakable token (a long business
   name / a URL in a review) would otherwise size the track to that intrinsic width,
   overflow the grid (overflow:visible), and — because the fixed .vf-menu-dim follows the
   inflated ICB even though body has overflow-x:hidden — widen the whole page on mobile
   (Chrome Android: ~55px dead band on the right → content looks off-centre; iOS Safari
   tolerated it). Same fix class as Task 25 (.vf-rank-list / .vf-score-card). */
.vf-biz-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.vf-biz-card { position: relative; min-width: 0; background: var(--vf-surface); border: 1px solid var(--vf-line); border-radius: 16px; padding: 17px; height: 100%;
  transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s ease, border-color .22s ease; }
.vf-biz-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(var(--primary_color), .16); border-color: transparent; }
.vf-biz-card::before, .vf-rev-card::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, rgb(var(--primary_color)), rgb(var(--secondary_color))); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.vf-biz-card:hover::before, .vf-rev-card:hover::before { transform: scaleX(1); }
.vf-biz-top { display: flex; align-items: flex-start; gap: 12px; }
/* Task 37: +12.5% brand anchor (50→56px box, radius 14→16px). The only OTHER consumer of
   .vf-biz-logo is the feed/review-card business chip (.vf-rc-biz .vf-biz-logo), which re-pins
   it to 34px via a higher-specificity override below — so this bump reaches the business card only. */
.vf-biz-logo { position: relative; width: 56px; height: 56px; border-radius: 16px; flex: none; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; text-decoration: none;
  transition: transform .22s cubic-bezier(.2, .7, .2, 1); }
.vf-biz-card:hover .vf-biz-logo, .vf-rev-card:hover .vf-biz-logo { transform: scale(1.07) rotate(-3deg); }
.vf-biz-logo-img { overflow: visible; background: rgb(var(--elements_background_color)); }
.vf-biz-logo-img img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }
.vf-biz-tick { position: absolute; right: -5px; bottom: -5px; background: #fff; border-radius: 50%; padding: 1px; line-height: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.vf-biz-id { min-width: 0; padding-top: 1px; }
.vf-biz-name { display: inline-block; font-size: 15.5px; font-weight: 800; letter-spacing: -.015em; color: var(--vf-ink); line-height: 1.18; text-decoration: none; overflow-wrap: anywhere; }
.vf-biz-name:hover { color: rgb(var(--primary_color)); }
.vf-biz-domain { font-size: 12.5px; color: var(--vf-muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-biz-rating { display: flex; align-items: center; gap: 6px; margin: 13px 0 10px; font-size: 13px; color: var(--vf-muted); }
.vf-biz-rating b { color: var(--vf-ink); font-weight: 800; font-size: 13.5px; }
/* Task 47 (supersedes Task 44's *1.35 here + Task 33's per-surface sizes on the siblings):
   UNIFY every content review-star DISPLAY to ONE size so the rating reads consistently across
   all sections — *1.485 (= the Task-44 card size 1.35 × 1.10, "the size you just increased plus
   another 10%"), ≈26.73px at the 18px --vf-star-size default. The SAME multiplier is applied to
   all six section/card surfaces that show a review rating: .vf-biz-rating (business cards — every
   home grid + /businesses listing + category pages + the profile "similar" grid, grid AND list
   view), .vf-rc-stars (the "Recenzii recente" live-feed card), .vf-rank-meta ("Afaceri populare"),
   .vf-score-rate ("cele mai bune evaluări" / top-rated), .vf-review-meta (the full review card)
   and .vf-review-mini-who (the compact review preview). Still proportional to the Task-33 admin
   --vf-star-size knob (a calc(), not a hardcoded px) so one knob rescales them together.
   DELIBERATELY left on their own sizes — they are NOT repeated content-section ratings:
   .vf-sr-rating (the transient hero search-autocomplete dropdown rows, a dense result list) and
   .vf-biz-head-rating (the single business-profile page HERO rating, ×1.6 — already larger than
   this unified size, and the correct top of the size hierarchy). */
.vf-biz-rating .vf-srow { font-size: calc(var(--vf-star-size, 16px) * 1.485); }
/* Task 68 — match the rating-FILTER stars to the business-card stars (×1.485, Task 47).
   Identical markup on the public listing side filter (.vf-filters → search-params: desktop
   #searchFilters + mobile offcanvas #searchFiltersMenu) and the owner-dashboard reviews filter
   (body.bz-dash → business/reviews): a name="stars" checkbox + <label.form-check-label> …
   <div.ratings><.vf-srow>. Keying on the .ratings INSIDE a .form-check-label confines it to the
   filter rows, so it can NEVER reach the dashboard's per-review/Average .ratings-lg (×1.444),
   the Latest-Reviews compact .ratings-sm (18px), nor any public card (.vf-biz-rating et al. are
   not in a .ratings) — none of those sit inside a .form-check-label. The review create/edit
   pickers use .ratings-selective with .vf-star (no .vf-srow), so they are also untouched. */
.vf-scope .form-check-label .ratings .vf-srow { font-size: calc(var(--vf-star-size, 16px) * 1.485); }
/* Safety net for the enlarged strip in a NARROW filter column (the owner-dashboard reviews
   filter sits in a col-lg-3 double-nested card; the public sidebar shrinks to col-xxl-3 on very
   wide screens). The 5-glyph strip is rigid (~5em ≈ 133px at the 18px knob), so where the row is
   narrower than label + strip it would otherwise overflow / clip the stars. Let ONLY the rating-
   filter label (the one holding a .ratings .vf-srow — never the plain verified/trending checkbox
   labels) wrap the strip cleanly onto its own line; wherever there is room (the public sidebar +
   mobile offcanvas at their normal widths) label + stars stay on one line, so the look is unchanged. */
.vf-scope .form-check-label:has(.ratings .vf-srow) { flex-wrap: wrap; }
.vf-biz-blurb { font-size: 13.5px; line-height: 1.5; color: var(--vf-ink-soft); margin-bottom: 15px; min-height: 40px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vf-biz-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 13px; border-top: 1px solid var(--vf-line-soft); }
.vf-chip2 { font-size: 12px; font-weight: 700; color: var(--vf-ink-soft); background: rgb(var(--elements_background_color));
  border: 1px solid var(--vf-line); padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.vf-biz-rate { display: flex; align-items: center; gap: 3px; }
.vf-biz-rate-lbl { font-size: 12px; font-weight: 600; color: var(--vf-muted); margin-right: 5px; }
.vf-biz-rate button { border: none; background: none; cursor: pointer; color: #dfe4ef; padding: 0; line-height: 0;
  transition: transform .14s ease, color .14s ease; }
.vf-biz-rate button:hover { transform: scale(1.22); }
.vf-biz-rate button:hover, .vf-biz-rate button.on, .vf-biz-rate button:focus-visible { color: var(--vf-star); }

/* review feed */
.vf-feed-tabs { position: relative; display: inline-flex; gap: 4px; background: rgb(var(--elements_background_color));
  border: 1px solid var(--vf-line); border-radius: 12px; padding: 4px; flex-shrink: 0; }
.vf-feed-ind { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 9px; background: #fff;
  box-shadow: 0 2px 6px rgba(20, 46, 98, .08); transition: transform .25s cubic-bezier(.2, .7, .2, 1), width .25s ease; }
.vf-feed-tab { position: relative; z-index: 1; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--vf-muted); padding: 8px 14px; border-radius: 9px; transition: color .2s ease; }
/* Bolder weight + primary colour so "selected" is conveyed by MORE than hue alone
   (WCAG 1.4.1) and stays visible even before the JS-positioned .vf-feed-ind runs. */
.vf-feed-tab.on { color: rgb(var(--primary_color)); font-weight: 800; }
/* Keyboard focus ring — this scope has no global button:focus-visible fallback, and the
   leaderboard tab bar (Task 73) gates whole-table visibility, so make focus visible
   (WCAG 2.4.7), mirroring the per-control ring convention (.vf-bizrow etc.). */
.vf-feed-tab:focus-visible { outline: 2px solid rgb(var(--primary_color)); outline-offset: 2px; border-radius: 9px; }
.vf-feed-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; transition: opacity .15s ease; }
.vf-rev-card { position: relative; min-width: 0; display: flex; flex-direction: column; background: var(--vf-surface); border: 1px solid var(--vf-line); border-radius: 16px; padding: 18px; height: 100%;
  transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s ease, border-color .22s ease; }
.vf-rev-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(var(--primary_color), .14); border-color: transparent; }
.vf-rc-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 13px; }
.vf-rc-avatar { width: 42px; height: 42px; border-radius: 50%; flex: none; overflow: hidden; background: rgb(var(--elements_background_color)); }
.vf-rc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-rc-who { flex: 1; min-width: 0; }
.vf-rc-name { font-size: 14.5px; font-weight: 800; color: var(--vf-ink); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-rc-grade { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 12px; font-weight: 700; color: rgb(var(--secondary_color)); white-space: nowrap; }
.vf-rc-grade svg { flex: none; }
.vf-rc-when { font-size: 12px; color: var(--vf-muted); margin-top: 5px; }
.vf-rc-stars { flex: none; }
.vf-rc-stars .vf-srow { font-size: calc(var(--vf-star-size, 16px) * 1.485); } /* Task 47: unified review-star size (see .vf-biz-rating). The "Recenzii recente" feed card. */
.vf-rc-text { position: relative; font-size: 13.5px; line-height: 1.55; color: var(--vf-ink-soft); margin: 0 0 14px; overflow-wrap: anywhere;
  flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vf-rc-biz { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: rgb(var(--elements_background_color));
  border-radius: 11px; text-decoration: none; color: var(--vf-muted); transition: background .15s; }
.vf-rc-biz:hover { background: rgba(var(--primary_color), .06); }
.vf-rc-biz .vf-biz-logo { width: 34px; height: 34px; border-radius: 9px; font-size: 12px; }
.vf-rc-biz-main { min-width: 0; flex: 1; }
.vf-rc-biz b { font-size: 13px; font-weight: 800; color: var(--vf-ink); display: block; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* --vf-muted (AA), not the decorative-only --vf-muted-2: this chevron is a
   meaningful "go to business" affordance and must meet 1.4.11 (>=3:1). */
.vf-rc-biz > svg { flex: none; color: var(--vf-muted); }
.vf-verif-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: rgb(var(--secondary_color)); margin-top: 2px; }
.vf-rc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 13px; margin-top: 13px; border-top: 1px solid var(--vf-line-soft); }
.vf-helpful { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--vf-line); background: var(--vf-surface);
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; color: var(--vf-ink-soft); cursor: pointer;
  transition: transform .14s ease, color .14s ease, background .15s ease, border-color .15s ease; }
.vf-helpful:hover { transform: translateY(-1px); }
.vf-helpful.on { border-color: rgb(var(--secondary_color)); color: rgb(var(--secondary_color)); background: rgba(var(--secondary_color), .08); }
.vf-hc { font-variant-numeric: tabular-nums; }
.vf-react { display: inline-flex; align-items: center; gap: 6px; }
.vf-reaction { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--vf-line); background: var(--vf-surface);
  border-radius: 999px; padding: 6px 11px; font-size: 12.5px; font-weight: 700; color: var(--vf-ink-soft); cursor: pointer;
  transition: transform .14s ease, color .15s ease, background .15s ease, border-color .15s ease; }
.vf-reaction:hover { border-color: rgba(var(--primary_color), .4); color: var(--vf-ink); transform: translateY(-1px); }
.vf-reaction .em { font-size: 14px; line-height: 1; }
.vf-reaction .ct { font-variant-numeric: tabular-nums; }
.vf-reaction.on { background: rgba(var(--primary_color), .07); border-color: rgba(var(--primary_color), .45); color: rgb(var(--primary_color)); }
.vf-reaction.on .em { animation: vf-pop .4s ease; }
.vf-reaction.fav.on { background: rgba(216, 54, 94, .08); border-color: rgba(216, 54, 94, .4); color: #d8365e; }
.vf-feed-more { text-align: center; margin-top: 30px; }

/* load-more entrance + skeleton */
.vf-rev-card-enter { opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s ease; }
.vf-rev-card-in { opacity: 1; transform: none; }
.vf-skel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; }
.vf-skel-card { height: 190px; border-radius: 16px; background: var(--vf-line-soft); position: relative; overflow: hidden; }
.vf-skel-card::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); animation: vf-shimmer 1.3s infinite; }
@keyframes vf-shimmer { 100% { transform: translateX(100%); } }

/* fly-up "+1 / ❤" + toast stack */
.vf-fly { position: fixed; z-index: 3200; font-weight: 800; font-size: 16px; color: rgb(var(--secondary_color)); pointer-events: none;
  animation: vf-fly-up 1s ease forwards; }
@keyframes vf-fly-up { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-34px) scale(1.2); } }
.vf-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 3000; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.vf-toast { display: flex; align-items: center; gap: 11px; background: var(--vf-ink); color: #fff; border-radius: 13px;
  padding: 12px 16px; box-shadow: 0 18px 40px rgba(20, 46, 98, .26); transform: translateY(14px); opacity: 0; transition: .35s; max-width: 320px; }
.vf-toast.in { transform: none; opacity: 1; }
.vf-toast .tic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center;
  background: rgb(var(--secondary_color)); color: #fff; }
.vf-toast .tic.gold { background: #f5b820; }
.vf-toast b { color: #fff; font-weight: 800; }
.vf-toast small { display: block; font-weight: 600; color: rgba(255, 255, 255, .66); font-size: 12px; margin-top: 1px; }

@keyframes vf-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* carousel-section mobile reflow (the recommended grid + categories share .vf-carsec) */
@media (max-width: 991.98px) {
  .vf-carsec { display: flex; flex-direction: column; }
  .vf-carsec .vf-sec-head { display: contents; }
  .vf-carsec .vf-sec-head > div:first-child { order: 1; margin-bottom: 18px; text-align: center; }
  .vf-carsec .vf-sec-head > div:first-child .vf-sec-sub { margin-left: auto; margin-right: auto; }
  /* Task 25 follow-up: include the popular rank list (.vf-rank-list) + the top-rated
     scroller wrapper (.vf-hscroll-wrap) so their cards sit BELOW the order:1 heading.
     Task 13 reused .vf-carsec but never extended this rule, so those blocks kept the
     default order:0 and floated above the heading (heading-after-cards, misplaced View All). */
  .vf-carsec > .vf-cat-row, .vf-carsec > .vf-biz-grid,
  .vf-carsec > .vf-rank-list, .vf-carsec > .vf-hscroll-wrap { order: 2; }
  .vf-carsec .vf-head-tools, .vf-carsec .vf-sec-head > a.btn { order: 3; align-self: flex-end; margin-top: 14px; }
  .vf-carsec .vf-head-tools .vf-round { display: none; }
}

/* responsive grids */
@media (max-width: 991.98px) {
  .vf-biz-grid, .vf-feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Stack every section header (heading over its tools/tabs) on tablet & below so the
     heading always gets the FULL width. The live-feed section is a plain .container (NOT
     a .vf-carsec), so the carsec reflow above doesn't cover it — and its .vf-feed-tabs go
     full-width at <=600px, which used to squeeze the still-row heading into a cramped
     narrow left column in the 576-600px gap. The .vf-carsec sections override this with
     `display:contents` (above), so they keep their own reflow and are unaffected. */
  .vf-sec-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .vf-biz-grid, .vf-feed-grid, .vf-skel-grid { grid-template-columns: minmax(0, 1fr); }
  .vf-feed-tabs { display: flex; width: 100%; }
  .vf-feed-tab { flex: 1; text-align: center; padding: 7px 4px; font-size: 11.5px; white-space: nowrap; }
  .vf-toasts { left: 14px; right: 14px; bottom: 14px; align-items: stretch; }
  .vf-toast { max-width: none; }
  .vf-feed-more .btn { width: 100%; justify-content: center; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vf-rev-card-enter { transition: none; opacity: 1; transform: none; }
  .vf-skel-card::after { animation: none; }
  .vf-fly { display: none; }
  .vf-reaction.on .em { animation: none; }
  .vf-feed-ind { transition: none; }
  .vf-feed-grid { transition: none; }
  .vf-toast { transition: opacity .2s; transform: none; }
}

/* ============================================================
   TASK 7 — shared vf-business-card rolled app-wide.
   The card now also renders on the listing / category / "similar businesses"
   surfaces (replacing the legacy partials/business.blade.php). On those pages it
   carries the legacy `item` class so the existing grid/list view toggle
   (app.js → `.item-inline`) still reveals the contact-links + category-breadcrumb
   + "Ultimele recenzii" footer (user decision 2026-06-15: keep the whole footer;
   the footer reuses the legacy .item-footer markup + review-box until Task 7b).
   ============================================================ */
/* The business name is wrapped in a semantic heading (.vf-biz-name-h) for the document
   outline / screen-reader heading nav; strip the heading's default margin + font so the
   card looks identical (the inner .vf-biz-name anchor carries the real type styles). */
.vf-biz-name-h { margin: 0; font: inherit; }
/* Keep the redesign card's padding on listing cards — the legacy `.item` rule forces
   24px with !important, so the override must also be !important + more specific. */
.vf-biz-card.item { padding: 17px !important; }
/* In list view the footer already shows the full category breadcrumb, so drop the
   redundant top chip row (and its divider) to avoid a doubled category + border. */
.vf-biz-card.item-inline .vf-biz-foot { display: none; }
/* The inline rate widget ("Evaluează" + 5 stars) plus the category chip can exceed a
   narrow 4-column card; allow the foot to wrap so the rate widget drops to its own line
   instead of overflowing past the card's right edge (the star-leak bug). */
.vf-biz-foot { flex-wrap: wrap; row-gap: 8px; }
/* Task 58 — even out the foot across cards. With only `flex-wrap:wrap` the rate widget
   dropped to its own line ONLY when the chip + widget couldn't share the card's width, so
   a SHORT category chip ("Servicii", "Auto") kept the widget INLINE on the chip's row
   while a LONG chip ("Medicina și Sanatate") pushed it down — leaving sibling cards uneven
   (user-reported 2026-06-21 on the narrow mobile swipe-carousel; the same mix also showed
   on the 4-column desktop grid's short-chip cards). A full-width flex basis forces the
   widget onto its OWN line on every card, so the "Evaluează" CTA always sits under the
   chip regardless of category-name length or column count. Harmless on a chip-less foot
   (the widget is then the lone item and simply fills its line). */
.vf-biz-rate { flex-basis: 100%; }

/* ============================================================
   TASK 7b — redesigned review cards rolled app-wide.
   .vf-review*      = the FULL review card (business profile / per-review / user
                      profile) replacing the legacy partials/review.blade.php.
   .vf-review-mini* = the COMPACT card inside the vf-business-card list footer
                      ("Ultimele recenzii") replacing partials/review-box.blade.php.
   Like the Task-7 business card these are top-level .vf-* selectors (NOT gated on
   .vf-scope) so they render correctly inside the legacy page chrome that still wraps
   these surfaces (Task 16 promotes the chrome). The green star is the shared .vf-srow.
   Comma-triplet tokens → rgba() alpha (never slash-alpha); no dark mode.
   ============================================================ */

/* full review card shell */
.vf-review { position: relative; background: var(--vf-surface); border: 1px solid var(--vf-line); border-radius: 18px;
  padding: 22px 24px; transition: box-shadow .22s ease, border-color .22s ease; }
.vf-review:hover { box-shadow: 0 14px 34px rgba(var(--primary_color), .08); border-color: rgba(var(--primary_color), .16); }
@media (max-width: 575.98px) { .vf-review { padding: 18px; border-radius: 16px; } }
.vf-review-context { font-size: 13px; color: var(--vf-muted); margin: 0 0 14px; }
.vf-review-context a { color: rgb(var(--primary_color)); font-weight: 700; text-decoration: none; }
.vf-review-context a:hover { text-decoration: underline; }

/* head: avatar + author/date + report flag */
.vf-review-head { display: flex; align-items: flex-start; gap: 13px; }
.vf-review-avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; overflow: hidden; background: rgb(var(--elements_background_color)); }
.vf-review-avatar a, .vf-review-avatar img { display: block; width: 100%; height: 100%; }
.vf-review-avatar img { object-fit: cover; }
.vf-review-who { flex: 1; min-width: 0; }
.vf-review-name { font-size: 15px; font-weight: 800; color: var(--vf-ink); line-height: 1.25; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vf-review-name a { color: inherit; text-decoration: none; }
.vf-review-name a:hover { color: rgb(var(--primary_color)); }
.vf-review-when { display: inline-block; margin-top: 3px; font-size: 12.5px; color: var(--vf-muted); text-decoration: none; }
.vf-review-when:hover { color: rgb(var(--primary_color)); }
.vf-review-flag { flex: none; }
.vf-review-flag-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--vf-line); background: var(--vf-surface); color: var(--vf-muted); cursor: pointer; text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease; }
.vf-review-flag-btn:hover, .vf-review-flag-btn:focus-visible { color: #d8365e; border-color: rgba(216, 54, 94, .4); background: rgba(216, 54, 94, .06); }

/* rating + experience date meta row */
.vf-review-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 16px 0 12px; }
.vf-review-meta .vf-srow { font-size: calc(var(--vf-star-size, 16px) * 1.485); } /* Task 47: unified review-star size (see .vf-biz-rating); was Task-33 *1.1875. */
.vf-review-date { font-size: 12.5px; color: var(--vf-muted); display: inline-flex; align-items: center; gap: 6px; }
.vf-review-date b { color: var(--vf-ink-soft); font-weight: 700; }

/* body */
.vf-review-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--vf-ink); margin: 0 0 8px; line-height: 1.3; }
.vf-review-text { font-size: 14.5px; line-height: 1.65; color: var(--vf-ink-soft); word-break: break-word; }
.vf-review-text p:last-child { margin-bottom: 0; }
.vf-review-photos { margin-top: 16px; }

/* footer actions — the real <livewire:review-likes> button (.item-review-action) is
   restyled here to match the redesign action buttons so the row reads as one set. */
.vf-review-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--vf-line-soft); }
.vf-review-act, .vf-review-foot .item-review-action { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--vf-line);
  background: var(--vf-surface); color: var(--vf-ink-soft); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700;
  font-family: inherit; line-height: 1; cursor: pointer; text-decoration: none; transition: color .15s ease, border-color .15s ease, background .15s ease, transform .14s ease; }
.vf-review-act:hover, .vf-review-foot .item-review-action:hover { color: rgb(var(--primary_color)); border-color: rgba(var(--primary_color), .4); transform: translateY(-1px); }
.vf-review-foot .item-review-action.btn-like { color: rgb(var(--secondary_color)); border-color: rgb(var(--secondary_color)); background: rgba(var(--secondary_color), .08); }
.vf-review-act i, .vf-review-foot .item-review-action i { font-size: 14px; }
.vf-review-owner { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.vf-review-owner form { margin: 0; }
.vf-review-report { margin-top: 16px; padding: 18px; border: 1px solid var(--vf-line); border-radius: 14px; background: rgb(var(--elements_background_color)); }
.vf-review-report h5 { font-size: 15px; color: var(--vf-ink); }

/* business reply */
.vf-review-reply { display: flex; gap: 12px; margin-top: 18px; padding: 16px 18px; border-radius: 14px;
  background: rgb(var(--elements_background_color)); border-inline-start: 3px solid rgb(var(--primary_color)); }
.vf-review-reply-icon { color: rgb(var(--primary_color)); font-size: 17px; line-height: 1.4; flex: none; }
.vf-review-reply-main { min-width: 0; flex: 1; }
.vf-review-reply-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vf-review-reply-logo { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; flex: none; background: var(--vf-surface); }
.vf-review-reply-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-review-reply-by { font-size: 13.5px; font-weight: 800; color: var(--vf-ink); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vf-review-reply-by a { color: inherit; text-decoration: none; }
.vf-review-reply-by a:hover { color: rgb(var(--primary_color)); }
.vf-review-reply-when { font-size: 12px; font-weight: 600; color: var(--vf-muted); }
.vf-review-reply-text { font-size: 14px; line-height: 1.6; color: var(--vf-ink-soft); margin: 8px 0 0; }

/* compact review card (vf-business-card list footer "Ultimele recenzii") */
.vf-review-mini { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 15px; border: 1px solid var(--vf-line);
  border-radius: 14px; background: var(--vf-surface); text-decoration: none; transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
.vf-review-mini:hover { border-color: rgba(var(--primary_color), .25); box-shadow: 0 10px 26px rgba(var(--primary_color), .08); transform: translateY(-2px); }
.vf-review-mini-head { display: flex; align-items: center; gap: 10px; }
.vf-review-mini-avatar { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none; background: rgb(var(--elements_background_color)); }
.vf-review-mini-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-review-mini-who { min-width: 0; }
.vf-review-mini-name { display: block; font-size: 13.5px; font-weight: 800; color: var(--vf-ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-review-mini-who .vf-srow { font-size: calc(var(--vf-star-size, 16px) * 1.485); margin-top: 3px; } /* Task 47: unified review-star size (see .vf-biz-rating); was Task-33 *0.8125. */
.vf-review-mini-text { font-size: 13px; line-height: 1.55; color: var(--vf-ink-soft); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vf-review-mini-biz { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--vf-line-soft); }
.vf-review-mini-biz-logo { position: relative; width: 32px; height: 32px; border-radius: 8px; overflow: hidden; flex: none; background: rgb(var(--elements_background_color)); }
.vf-review-mini-biz-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-review-mini-biz-logo i { position: absolute; right: -3px; bottom: -3px; font-size: 12px; color: rgb(var(--secondary_color)); background: var(--vf-surface); border-radius: 50%; line-height: 1; }
.vf-review-mini-biz-main { min-width: 0; }
.vf-review-mini-biz-main b { display: block; font-size: 12.5px; font-weight: 800; color: var(--vf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-review-mini-biz-main small { display: block; font-size: 11.5px; color: var(--vf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Visible keyboard focus (WCAG 2.4.7) for every interactive review control. The legacy
   .btn-reset:focus provided one; the redesign full-card action pills + the grouped
   Livewire like-button, the whole-card compact link, and the homepage feed helpful/heart
   buttons all need a focus ring (.vf-review-flag-btn already carries :focus-visible). */
.vf-review-act:focus-visible,
.vf-review-foot .item-review-action:focus-visible,
.vf-review-mini:focus-visible,
.vf-helpful:focus-visible,
.vf-reaction:focus-visible {
  outline: 3px solid rgba(var(--primary_color), .45);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .vf-review, .vf-review-mini, .vf-review-act, .vf-review-foot .item-review-action { transition: none; }
  .vf-review-mini:hover, .vf-review-act:hover, .vf-review-foot .item-review-action:hover { transform: none; }
}

/* ============================================================================
   TASK 9 — Contributor leaderboard + onboarding banner (+ /clasament page)
   Ported from the mockup (verifeedo-hero.css). Slash-alpha converted to the
   legacy rgba(var(--token), A) form (admin tokens are comma triplets). No dark
   mode. Avatars are CSS-only initials chips (size/bg via inline style).
   ============================================================================ */

/* contributor / leaderboard */
/* Task 73: a full-width promo header (.vf-lb-intro) over a 2-card parallel grid
   (.vf-lb-cards) — "Top Recenzenți" beside "Top Recenzați". */
.vf-lb-wrap { display: block; }
.vf-lb-intro { text-align: center; max-width: 760px; margin: 0 auto 30px; }
.vf-lb-intro .vf-title2 { text-wrap: balance; }
.vf-lb-intro .vf-sec-sub { margin-left: auto; margin-right: auto; text-wrap: pretty; }
.vf-lb-intro .vf-lb-badges { justify-content: center; }
.vf-lb-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.vf-lb-badges { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0 24px; }
.vf-lb-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--vf-ink-soft);
  background: #fff; border: 1px solid var(--vf-line); padding: 8px 14px; border-radius: 999px; }
.vf-lb-badge svg, .vf-lb-badge i { color: #d99a09; font-size: 15px; line-height: 1; }
.vf-lb-card { background: #fff; border: 1px solid var(--vf-line); border-radius: 22px; padding: 10px 14px 14px;
  box-shadow: 0 24px 60px rgba(20, 46, 98, .10); }
.vf-lb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 16px 8px 14px; border-bottom: 1px solid var(--vf-line-soft); }
.vf-lb-head span:first-child { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 15px; color: var(--vf-ink); }
.vf-lb-week { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(var(--primary_color), .10);
  background: rgba(var(--primary_color), .055); font-size: 12px; font-weight: 800; color: rgb(var(--primary_color)); white-space: nowrap; }
.vf-lb-row { display: grid; grid-template-columns: 24px 34px minmax(0, 1fr) max-content; align-items: center; column-gap: 12px; row-gap: 4px; min-height: 58px; padding: 11px 8px; border-radius: 12px; }
.vf-lb-row.top { background: rgba(var(--primary_color), .03); }
.vf-lb-pos { width: 24px; text-align: center; font-weight: 800; font-size: 14px; color: var(--vf-muted-2); flex: none; }
.vf-lb-pos-1 { color: #e8a400; }
.vf-lb-pos-2 { color: #9aa4bd; }
.vf-lb-pos-3 { color: #cd7f32; }
.vf-lb-main { flex: 1; min-width: 0; }
.vf-lb-main b { font-size: 14px; font-weight: 800; line-height: 1.25; color: var(--vf-ink); display: -webkit-box;
  -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.vf-lb-main > span:not(.vf-blb-sub) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; line-height: 1.35; color: var(--vf-muted); }
.vf-lb-main .vf-blb-sub { font-size: 12.5px; line-height: 1.35; color: var(--vf-muted); }
.vf-lb-pts { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; padding: 6px 9px; border-radius: 999px;
  border: 1px solid rgba(var(--primary_color), .10); background: rgba(var(--primary_color), .055); font-weight: 800; font-size: 14px;
  line-height: 1; text-align: center; color: rgb(var(--primary_color)); flex: none; }
.vf-lb-you { display: grid; grid-template-columns: 24px 34px minmax(0, 1fr) max-content; align-items: center; column-gap: 12px; row-gap: 4px; padding: 13px 8px; margin-top: 6px; border-top: 1px dashed var(--vf-line);
  background: linear-gradient(90deg, rgba(var(--secondary_color), .07), transparent); border-radius: 12px; }
.vf-lb-empty { padding: 22px 10px; text-align: center; font-size: 13.5px; color: var(--vf-muted); }
.vf-lb-foot { padding: 14px 8px 4px; display: flex; justify-content: center; }
.vf-lb-cta { padding: 14px 24px; }

/* contributor onboarding banner */
.vf-onb { position: relative; overflow: hidden; border-radius: 20px; padding: 24px 26px; margin-bottom: 26px;
  background: linear-gradient(120deg, rgba(var(--primary_color), .06), rgba(var(--secondary_color), .07));
  border: 1px solid rgba(var(--primary_color), .12); display: flex; align-items: center; gap: 20px; }
.vf-onb .ob-ic { width: 54px; height: 54px; border-radius: 15px; flex: none; display: flex; align-items: center; justify-content: center;
  background: #fff; box-shadow: 0 8px 20px rgba(var(--primary_color), .14); color: #d99a09; }
.vf-onb .ob-tx { flex: 1; min-width: 0; }
.vf-onb .ob-tx b { font-size: 16.5px; font-weight: 800; color: var(--vf-ink); display: block; }
.vf-onb .ob-tx span { font-size: 13.5px; color: var(--vf-muted); }
/* Darker amber for the reward FIGURE (text) — #8a6200 is 5.5:1 on the banner tint (AA);
   the decorative icon glyphs stay on the lighter #d99a09 (aria-hidden, label-redundant). */
.vf-onb .ob-tx b.vf-onb-points { display: inline; color: #8a6200; }
.vf-onb-cta { padding: 12px 22px; flex: none; }
.vf-onb .ob-close { position: absolute; top: 10px; right: 12px; border: none; background: none; cursor: pointer; color: var(--vf-muted-2);
  font-size: 18px; line-height: 1; padding: 4px; }
.vf-onb .ob-close:hover { color: var(--vf-ink); }
.vf-onb .ob-close:focus-visible { outline: 3px solid rgba(var(--primary_color), .45); outline-offset: 2px; border-radius: 6px; }

/* Top Recenzați (most-reviewed businesses) rows — mirror .vf-lb-row, but each row is a
   real link to the business profile. Reuses .vf-lb-pos / .vf-lb-main (Task 73). */
.vf-blb-row { display: grid; grid-template-columns: 24px 34px minmax(0, 1fr) max-content; align-items: center; column-gap: 12px; row-gap: 4px; min-height: 58px; padding: 11px 8px; border-radius: 12px;
  text-decoration: none; color: inherit; transition: background .18s ease; }
.vf-blb-row:hover { background: rgba(var(--primary_color), .05); }
/* Each business row is a NEW keyboard-focusable <a>; give it the brand focus ring
   (WCAG 2.4.7), inset to sit inside the 12px-rounded row. */
.vf-blb-row:focus-visible { outline: 2px solid rgb(var(--primary_color)); outline-offset: -2px; background: rgba(var(--primary_color), .05); }
.vf-blb-row.top { background: rgba(var(--primary_color), .03); }
.vf-blb-row.top:hover { background: rgba(var(--primary_color), .06); }
.vf-blb-logo { width: 34px; height: 34px; flex: none; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--vf-line-soft); background: #fff; }
.vf-blb-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-blb-sub { display: flex; align-items: center; max-width: 100%; min-width: 0; }
/* The category can be long; truncate it so the avg star+number (flex:none) stays visible
   even on a narrow mobile column. */
.vf-blb-cat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.vf-blb-dot { flex: none; padding: 0 5px; }
.vf-blb-avg { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.vf-blb-star { color: #e8a400; }
.vf-blb-count { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; padding: 5px 9px;
  border-radius: 12px; border: 1px solid rgba(var(--primary_color), .10); background: rgba(var(--primary_color), .055); flex: none; text-align: center; line-height: 1.05; }
.vf-blb-count b { font-weight: 800; font-size: 14px; color: rgb(var(--primary_color)); display: block; }
.vf-blb-count small { font-size: 10px; font-weight: 700; color: var(--vf-muted); }

/* /clasament full-page layout */
.vf-lb-page-head { text-align: center; max-width: 640px; margin: 0 auto 28px; }
.vf-lb-page-head .vf-sec-sub { margin: 10px auto 18px; }
/* The 3-tab time-window control (reuses the .vf-feed-tabs segmented control). */
.vf-lb-tabbar { display: flex; justify-content: center; margin: 0 auto 26px; }
.vf-lb-pane[hidden] { display: none; }
.vf-lb-page { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }

@media (max-width: 991.98px) {
  .vf-lb-cards { grid-template-columns: 1fr; gap: 22px; }
  .vf-lb-page { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 575.98px) {
  .vf-lb-intro { margin-bottom: 22px; }
  .vf-lb-card { border-radius: 18px; padding: 8px 10px 12px; }
  .vf-lb-head { align-items: flex-start; padding: 13px 4px 12px; }
  .vf-lb-head span:first-child { max-width: 100%; font-size: 14px; line-height: 1.25; }
  .vf-lb-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .vf-lb-badge { justify-content: center; padding: 9px 10px; font-size: 12.5px; }
  .vf-lb-row, .vf-blb-row, .vf-lb-you { grid-template-columns: 22px 32px minmax(0, 1fr) max-content; column-gap: 8px; min-height: 56px; padding: 10px 4px; border-radius: 10px; }
  .vf-lb-pos { width: 22px; font-size: 13px; }
  .vf-lb-row .vf-avatar, .vf-lb-you .vf-avatar { width: 32px !important; height: 32px !important; font-size: 11px !important; }
  .vf-blb-logo { width: 32px; height: 32px; border-radius: 8px; }
  .vf-lb-main b { -webkit-line-clamp: 2; font-size: 13.5px; }
  .vf-lb-main > span:not(.vf-blb-sub) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; font-size: 11.5px; }
  .vf-lb-main .vf-blb-sub { display: flex; font-size: 11.5px; }
  .vf-lb-pts { min-width: 52px; padding: 6px 7px; font-size: 13px; }
  .vf-blb-count { min-width: 50px; padding: 5px 7px; }
  .vf-blb-count small { font-size: 9.5px; }
  .vf-lb-foot .btn { width: 100%; min-height: 44px; justify-content: center; white-space: normal; line-height: 1.2; }
  .vf-lb-you { margin-top: 6px; }
  .vf-onb { flex-direction: column; align-items: flex-start; text-align: left; padding: 18px; gap: 14px; border-radius: 16px; margin-bottom: 20px; }
  .vf-onb .ob-ic { width: 46px; height: 46px; }
  .vf-onb .ob-tx b { font-size: 15px; }
  .vf-onb .ob-tx span { font-size: 13px; }
  .vf-onb .vf-onb-cta, .vf-lb-cta { width: 100%; justify-content: center; }
}

/* ============================================================================
   TASK 10 — Gamification progress band + enhanced profile + scroll polish.
   Ported from the mockup (verifeedo-hero.css). Slash-alpha over admin tokens
   converted to rgba(var(--token), A) (tokens are comma triplets); color-mix()
   kept for the band's signature dark gradient (already used by .branded-card,
   Chrome 111+/FF 113+/Safari 16.2+ baseline). No dark mode. The band values are
   server-rendered (ring conic-gradient + bar width inline), so no band JS runs;
   the reveal system below only fades blocks in on scroll.
   ============================================================================ */

/* scroll progress bar (top of viewport) — fed by initScrollProgress() */
.vf-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 2000;
  background: linear-gradient(90deg, rgb(var(--primary_color)), rgb(var(--secondary_color))); transition: width .12s linear; }

/* scroll reveal — JS adds .vf-r (hide) then .in (reveal). No-JS keeps content visible
   (the class is never added); reduced motion shows everything immediately.
   Task 40 — two cascade bugs let the entrance leak into the card's :hover lift:
   (1) .vf-r's .6s entrance transition (+ will-change, + an inline stagger delay up to
       350ms) overrode each card's OWN short transition (later in source, equal
       specificity), so the lift crawled over .6s while box-shadow [absent from .vf-r's
       transition list] snapped, and the inline delay leaked into :hover.
   (2) the revealed end-state `.vf-r.in { transform: none }` (0,2,0) TIED and beat the
       card's `…:hover { transform: translateY(-6px) }` (also 0,2,0, earlier in source),
       so the lift's transform was suppressed entirely on every revealed card.
   Fix: scope the entrance transition + will-change to .vf-r:not(.vf-revealed); express the
   revealed resting transform via `.in:where(.vf-r)` whose :where() keeps the match scoped to
   reveal elements WITHOUT adding specificity, so it stays (0,1,0) — below a card's :hover
   (0,2,0) — and the hover lift wins even DURING the entrance window, not only once settled.
   initScrollReveal() stamps .vf-revealed when the entrance settles (transitionend + a timed
   fallback) and clears the inline delay, handing :hover back to each card's own short
   transition (incl. box-shadow) and releasing will-change. .vf-r + .in stay on the element
   (the reveal contract other code/tests rely on). Reduced motion (below) keeps the transform
   lift suppressed by design — box-shadow/border-color still give a hover affordance. */
.vf-r { opacity: 0; transform: translateY(26px); }
.vf-r:not(.vf-revealed) {
  transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform; }
.vf-r.in { opacity: 1; }
.in:where(.vf-r) { transform: none; } /* revealed resting; (0,1,0) so a card :hover (0,2,0) wins, even mid-entrance */
@media (prefers-reduced-motion: reduce) {
  .vf-r { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto !important; } }

/* gamification progress band (homepage) */
.vf-band-sec { padding: 0 0 64px; }
.vf-band { position: relative; overflow: hidden;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, rgb(var(--primary_color)) 78%, #1aa0c8) 0%, transparent 55%),
    linear-gradient(118deg, color-mix(in srgb, rgb(var(--primary_color)) 96%, #0a1f44) 0%, color-mix(in srgb, rgb(var(--primary_color)) 50%, #060f28) 100%);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 24px; padding: 30px 36px; display: flex; align-items: center; justify-content: space-between; gap: 28px;
  color: #fff; flex-wrap: wrap; box-shadow: 0 30px 64px rgba(var(--primary_color), .34), inset 0 1px 0 rgba(255, 255, 255, .1); }
.vf-band-glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(6px); }
.vf-band-glow.g1 { width: 280px; height: 280px; right: 8%; top: -160px; background: radial-gradient(circle, rgba(var(--secondary_color), .32), transparent 68%); }
.vf-band-glow.g2 { width: 220px; height: 220px; left: 30%; bottom: -150px; background: radial-gradient(circle, rgba(53, 190, 245, .2), transparent 70%); }
.vf-band-l { display: flex; align-items: center; gap: 22px; position: relative; z-index: 1; }
.vf-band-ring { width: 78px; height: 78px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 8px 22px rgba(0, 0, 0, .25); }
.vf-band-ring-in { width: 62px; height: 62px; border-radius: 50%; background: color-mix(in srgb, rgb(var(--primary_color)) 80%, #07152e);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.vf-band-ring-in small { font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #c4d8f7; margin-bottom: 2px; }
.vf-band-ring-in b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.vf-band-info { min-width: 0; }
.vf-band-streak { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; letter-spacing: .01em;
  color: #ffd66b; background: rgba(245, 184, 32, .14); border: 1px solid rgba(245, 184, 32, .28); padding: 3px 10px; border-radius: 999px; }
.vf-band-title { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 11px 0 12px; color: #fff; }
.vf-band-title span { color: #7fe6bd; }
.vf-band-track { display: flex; align-items: center; gap: 11px; }
.vf-band-bar { position: relative; width: 300px; max-width: 54vw; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.vf-band-bar span { position: relative; display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--secondary_color)), #4fe0a6); box-shadow: 0 0 12px rgba(var(--secondary_color), .65); transition: width 1.1s cubic-bezier(.2, .7, .2, 1); }
.vf-band-bar span::after { content: ""; position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 60%); }
.vf-band-pct { font-size: 13px; font-weight: 800; color: #7fe6bd; font-variant-numeric: tabular-nums; }
.vf-band-meta { font-size: 12.5px; color: #c2d3ef; margin-top: 9px; }
.vf-band-hint { font-size: 12.5px; color: #c2d3ef; margin-top: 9px; }
.vf-band-r { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; position: relative; z-index: 1; }
.vf-band-rewards { display: flex; gap: 10px; }
.vf-band-reward { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #dce7fb;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); padding: 7px 13px 7px 8px; border-radius: 999px; }
.vf-band-reward .ic { width: 24px; height: 24px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .12); color: #ffd66b; }
.vf-band-reward .vf-band-pts { font-weight: 800; color: #ffd66b; }
.vf-scope .btn.vf-band-cta { background: #fff; color: rgb(var(--primary_color)); border-color: #fff; padding: 13px 26px; font-weight: 800;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .22); transition: transform .18s, box-shadow .18s; }
.vf-scope .btn.vf-band-cta:hover { background: #fff; color: rgb(var(--primary_color)); transform: translateY(-2px); box-shadow: 0 18px 34px rgba(0, 0, 0, .28); }
.vf-scope .btn.vf-band-cta:focus-visible { outline: 3px solid rgba(255, 255, 255, .8); outline-offset: 3px; }

/* public reviewer gamification card (profile page — light theme, legacy layout) */
.vf-pg { background: #fff; border: 1px solid var(--vf-line); border-radius: 18px; padding: 18px 20px; box-shadow: 0 14px 40px rgba(20, 46, 98, .07); }
.vf-pg-head { display: flex; align-items: center; gap: 18px; }
.vf-pg-ring { width: 72px; height: 72px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px var(--vf-line); }
.vf-pg-ring-in { width: 58px; height: 58px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; box-shadow: inset 0 0 0 1px var(--vf-line-soft); }
.vf-pg-ring-in small { font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--vf-muted); margin-bottom: 2px; }
.vf-pg-ring-in b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: rgb(var(--primary_color)); }
.vf-pg-main { flex: 1; min-width: 0; }
.vf-pg-toprow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.vf-pg-rank { font-size: 17px; font-weight: 800; color: var(--vf-ink); }
.vf-pg-streak { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: #8a6200;
  background: rgba(245, 184, 32, .14); border: 1px solid rgba(245, 184, 32, .3); padding: 3px 10px; border-radius: 999px; }
.vf-pg-points { font-size: 13.5px; color: var(--vf-muted); margin-top: 3px; }
.vf-pg-points b { color: var(--vf-ink); font-weight: 800; font-size: 15px; }
.vf-pg-bar { position: relative; height: 8px; border-radius: 999px; background: var(--vf-line); overflow: hidden; margin-top: 11px; }
.vf-pg-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgb(var(--primary_color)), rgb(var(--secondary_color))); }
.vf-pg-meta { font-size: 12px; color: var(--vf-muted); margin-top: 7px; }
.vf-pg-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--vf-line-soft); }
.vf-pg-badges-h { font-size: 12px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--vf-muted); margin-right: 4px; }
.vf-pg-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--vf-ink-soft);
  background: #fff; border: 1px solid var(--vf-line); padding: 7px 13px; border-radius: 999px; }
.vf-pg-badge i { color: #d99a09; font-size: 14px; line-height: 1; }
.vf-pg-badge-empty { font-size: 13px; color: var(--vf-muted); }

/* navbar gamification: compact level chip in the user-menu trigger + a rank/progress
   header inside the dropdown (Task 10). Always-on status signal for logged-in users. */
.vf-user-lv { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 11.5px; font-weight: 800; line-height: 1;
  color: rgb(var(--primary_color)); background: rgba(var(--primary_color), .09); border-radius: 999px; padding: 3px 8px; }
.vf-user-lv svg { width: 11px; height: 11px; color: #e8a400; }
.vf-um-gam { display: flex; align-items: center; gap: 10px; padding: 11px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--vf-line-soft); }
.vf-um-gam-ring { width: 38px; height: 38px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px var(--vf-line); }
.vf-um-gam-ring b { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: rgb(var(--primary_color)); box-shadow: inset 0 0 0 1px var(--vf-line-soft); }
.vf-um-gam-tx { min-width: 0; max-width: 168px; }
.vf-um-gam-tx b { display: block; font-size: 13.5px; font-weight: 800; color: var(--vf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vf-um-gam-tx span { font-size: 11.5px; color: var(--vf-muted); }
/* mobile menu rank line */
.vf-mm-gam { display: flex; align-items: center; gap: 9px; text-decoration: none; padding: 10px 12px; border-radius: 12px;
  background: rgba(var(--primary_color), .05); border: 1px solid rgba(var(--primary_color), .12); }
.vf-mm-gam-lv { flex: none; font-size: 12px; font-weight: 800; color: rgb(var(--primary_color)); background: #fff;
  border-radius: 999px; padding: 4px 10px; box-shadow: 0 0 0 1px rgba(var(--primary_color), .15); }
.vf-mm-gam-rank { min-width: 0; font-size: 13px; font-weight: 700; color: var(--vf-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 991.98px) {
  .vf-band { flex-direction: column; align-items: flex-start; }
  .vf-band-r { align-items: flex-start; }
}

@media (max-width: 575.98px) {
  .vf-band-sec { padding: 0 0 30px; }
  .vf-band { flex-direction: column; align-items: stretch; padding: 24px 20px; gap: 20px; }
  .vf-band-l { align-items: center; gap: 16px; }
  .vf-band-info { flex: 1; }
  .vf-band-title { font-size: 17.5px; margin: 9px 0 11px; }
  .vf-band-track { width: 100%; }
  .vf-band-bar { width: 100%; max-width: none; }
  .vf-band-meta { white-space: normal; }
  .vf-band-r { align-items: stretch; width: 100%; gap: 14px; }
  .vf-band-rewards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .vf-band-reward { justify-content: center; gap: 6px; padding: 9px 6px; font-size: 10.5px; white-space: nowrap; }
  .vf-band-reward .ic { width: 20px; height: 20px; flex: none; }
  .vf-band-reward .ic svg { width: 12px; height: 12px; }
  .vf-pg-head { gap: 14px; }
  .vf-pg-ring { width: 64px; height: 64px; }
  .vf-pg-ring-in { width: 51px; height: 51px; }
}

/* ============================================================================
   TASK 13 — Statistics surfaces: "Afaceri populare" rank list (#vfPopularGrid)
   + "Afaceri cu cele mai bune evaluări" score-card scroller (#vfTopGrid).
   Ported from the redesign mockup; slash-alpha → rgba() (comma-triplet rule),
   no dark mode. AA-conscious: meaningful text uses --vf-muted (≥4.5:1 on white);
   the rank-1/2 number tints + the rank medals are decorative (redundant with the
   visual order). Adds the overlay-button (rank rows = one funnel control) + the
   stretched-link (score cards = one profile link) + focus-visible rings.
   ============================================================================ */

/* ---- Popular: rank-clasament list ---- */
/* Task 25: minmax(0,1fr) tracks + min-width:0 on the row remove the grid item's
   default `min-width:auto`, which was leaking a long business name's intrinsic
   width past the track so the row overflowed the container and was clipped by the
   section's overflow:hidden on mobile (the chevron/trend column fell off-screen).
   Now the inner flex children (name ellipsis etc.) shrink to fit — desktop 2-col
   + mobile 1-col (see the ≤820px rule below). */
.vf-rank-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 26px; }
.vf-rank-row { position: relative; display: flex; align-items: center; gap: 15px; min-width: 0; background: #fff;
  border: 1px solid var(--vf-line); border-radius: 15px; padding: 14px 18px;
  transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s, border-color .18s; }
.vf-rank-row:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(20, 46, 98, .10); border-color: transparent; }
/* Stretched overlay button: the single keyboard-operable control for the whole row. */
.vf-rank-hit { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0;
  border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; border-radius: 15px; }
.vf-rank-hit:focus-visible { outline: 2px solid rgb(var(--primary_color)); outline-offset: 2px; }
.vf-rank-num { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--vf-muted);
  width: 30px; flex: none; text-align: center; }
.vf-rank-row:nth-child(1) .vf-rank-num { color: #a87900; } /* leader: dark gold, ≥3:1 large-text */
.vf-rank-row:nth-child(2) .vf-rank-num { color: #6b7793; } /* runner-up: ≥4.5:1 */
.vf-rank-logo { width: 46px; height: 46px; border-radius: 13px; flex: none; overflow: hidden;
  background: var(--vf-line-soft); display: flex; align-items: center; justify-content: center; }
.vf-rank-logo img { width: 100%; height: 100%; object-fit: cover; }
.vf-rank-main { flex: 1; min-width: 0; }
.vf-rank-name { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--vf-ink); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vf-rank-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.vf-rank-meta .vf-srow { font-size: calc(var(--vf-star-size, 16px) * 1.485); } /* Task 47: unified review-star size (see .vf-biz-rating); was Task-33 *0.8125. "Afaceri populare". */
.vf-rank-meta b { font-size: 12.5px; font-weight: 800; color: var(--vf-ink); }
.vf-rank-meta span { font-size: 12px; color: var(--vf-muted); }
.vf-rank-bar { height: 5px; border-radius: 999px; background: var(--vf-line-soft); margin-top: 9px; overflow: hidden; }
.vf-rank-bar i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--primary_color)), rgb(var(--secondary_color))); }
.vf-rank-go { flex: none; color: var(--vf-muted-2); transition: transform .18s, color .18s; }
.vf-rank-row:hover .vf-rank-go { color: rgb(var(--secondary_color)); transform: scale(1.08); }
/* mini trend sparkline (up/down) */
.vf-rank-trend { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; width: 66px; }
.vf-rank-spark { width: 64px; height: 28px; display: block; overflow: visible; }
.vf-rank-spark .line { transition: stroke-dashoffset 1s cubic-bezier(.3,.7,.3,1); }
.vf-rank-delta { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.vf-rank-delta.up { color: #0f7a40; }   /* ≥4.5:1 on white (mockup #16a45a is 2.9:1) */
.vf-rank-delta.down { color: #c43a52; } /* ≥4.5:1 on white */
@media (max-width: 820px) { .vf-rank-list { grid-template-columns: minmax(0, 1fr); } } /* Task 25: minmax(0,…) so the single track can shrink below the row's content width */
@media (max-width: 520px) { .vf-rank-spark { width: 48px; height: 24px; } .vf-rank-trend { width: 54px; } }
@media (max-width: 480px) {
  .vf-rank-row { gap: 10px; padding: 12px 13px; }
  .vf-rank-num { width: 16px; font-size: 15px; }
  .vf-rank-logo { width: 40px; height: 40px; border-radius: 11px; }
  .vf-rank-go { display: none; }
  .vf-rank-meta { flex-wrap: wrap; gap: 4px 6px; }
  .vf-rank-trend { width: 50px; }
  .vf-rank-spark { width: 44px; height: 22px; }
}

/* ---- Top-rated: horizontal score-card scroller ---- */
.vf-hscroll-wrap { position: relative; }
.vf-hscroll-wrap::after { content: ""; position: absolute; top: 0; bottom: 14px; right: 0; width: 54px;
  pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff); }
.vf-hscroll { display: flex; gap: 18px; overflow-x: auto; padding: 6px 2px 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vf-hscroll::-webkit-scrollbar { display: none; }
/* Task 25: min-width:0 clamps the card to its flex-basis — without it the flex
   item's default `min-width:auto` leaked a long business name's intrinsic width
   (cards rendered 296–537px → one card never fit the viewport, "cut off mid-card").
   The mobile @media below makes the basis responsive so exactly one full card
   shows with a peek of the next; desktop keeps the fixed 296px. */
.vf-score-card { position: relative; scroll-snap-align: start; flex: 0 0 296px; min-width: 0; background: #fff;
  border: 1px solid var(--vf-line); border-radius: 20px; padding: 22px;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, border-color .2s; }
.vf-score-card:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(20, 46, 98, .12); border-color: transparent; }
.vf-score-card:focus-within { outline: 2px solid rgb(var(--primary_color)); outline-offset: 2px; }
/* whole-card link (stretched-link pattern): the business name is the single real link */
/* Task 25: the anchor is the sole child of the h3.vf-score-name-h (which already
   ellipsizes); make it self-clipping too so the truncation guarantee never depends
   only on the parent — a long unbreakable name otherwise leaks the anchor's box past
   the card. display:block is layout-safe (sole child) and doesn't affect the stretched
   ::after, which is positioned against the position:relative card, not the anchor. */
.vf-score-name { display: block; color: var(--vf-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-score-name::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 20px; }
.vf-score-name:focus-visible { outline: none; } /* the card's :focus-within carries the ring */
.vf-score-card:hover .vf-score-name { color: rgb(var(--primary_color)); }
/* rank medal (decorative, redundant with scroll order) */
.vf-score-rank { position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 800; color: #fff; padding: 3px 9px; border-radius: 999px; letter-spacing: .02em;
  background: var(--vf-muted-2); box-shadow: 0 4px 10px rgba(20, 46, 98, .18); text-shadow: 0 1px 1px rgba(0, 0, 0, .28); }
.vf-score-rank svg { margin-top: -1px; }
.vf-score-rank.r1 { background: linear-gradient(135deg, #f5b820, #e8901f); box-shadow: 0 4px 12px rgba(245, 184, 32, .45); }
.vf-score-rank.r2 { background: linear-gradient(135deg, #aab4c6, #8b97ad); }
.vf-score-rank.r3 { background: linear-gradient(135deg, #cd8a52, #b5723a); }
.vf-score-top { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; }
/* overflow:visible (not hidden) so the corner verified badge (.vf-score-tick, at -5px) is
   not CLIPPED — the image keeps its rounded corners via border-radius:inherit. Sized 56px/16px
   to match the recommended .vf-biz-logo (Task 37) so both card families read identically. */
.vf-score-logo { position: relative; width: 56px; height: 56px; border-radius: 16px; flex: none; overflow: visible;
  background: var(--vf-line-soft); display: flex; align-items: center; justify-content: center; }
.vf-score-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.vf-score-tick { position: absolute; right: -5px; bottom: -5px; z-index: 1; background: #fff; border-radius: 50%; line-height: 0; }
.vf-score-id { min-width: 0; padding-right: 30px; }
.vf-score-name-row { display: flex; align-items: center; gap: 6px; }
.vf-score-name-h { margin: 0; font-size: 16px; font-weight: 800; color: var(--vf-ink); line-height: 1.2; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vf-score-dom { font-size: 12.5px; color: var(--vf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Task 25: ellipsis so a long/unbreakable domain can't force the card past its basis */
.vf-score-rate { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.vf-score-num { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--vf-ink); line-height: 1; }
.vf-score-rate .vf-srow { font-size: calc(var(--vf-star-size, 16px) * 1.485); } /* Task 47: unified review-star size (see .vf-biz-rating); was Task-33 *0.875. "Cele mai bune evaluări". */
.vf-score-out { font-size: 12px; color: var(--vf-muted); font-weight: 600; }
/* distribution (decorative trust signal) */
.vf-score-dist { display: flex; flex-direction: column; gap: 4px; margin-bottom: 15px; }
.vf-sd-row { display: flex; align-items: center; gap: 8px; }
.vf-sd-n { display: inline-flex; align-items: center; gap: 1px; width: 22px; flex: none; font-size: 11px; font-weight: 700; color: var(--vf-muted); }
.vf-sd-n svg { color: #d99a09; } /* darker gold than the mockup #f5b820 for the tiny glyph */
.vf-sd-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--vf-line-soft); overflow: hidden; }
.vf-sd-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, rgb(var(--secondary_color)), #45d39a); }
.vf-sd-row:first-child .vf-sd-bar i { background: linear-gradient(90deg, #22a85d, #45d39a); }
.vf-sd-row:nth-last-child(-n+2) .vf-sd-bar i { background: linear-gradient(90deg, #e0a13a, #f0c04a); }
.vf-score-card .vf-biz-blurb { min-height: 42px; margin-bottom: 16px; font-size: 13.5px; line-height: 1.5; color: var(--vf-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vf-score-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 14px; border-top: 1px solid var(--vf-line-soft); }
.vf-score-foot .vf-chip2 { font-size: 12px; }
.vf-score-foot .n { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 12.5px; color: var(--vf-muted); font-weight: 600; }
.vf-score-foot .n svg { color: var(--vf-muted-2); }

/* scroll-in bar-fill + sparkline draw (verifeedo-redesign.js initStatBars), reduced-motion safe */
@media (prefers-reduced-motion: no-preference) {
  .vf-rank-bar i, .vf-sd-bar i { transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
}

/* mobile carousel dots (#vfTopGrid auto-scroll on small screens) */
.vf-dots { display: none; order: 2; }
.vf-cdot { width: 6px; height: 6px; border-radius: 50%; background: var(--vf-line); transition: width .25s, background .25s; }
.vf-cdot.on { width: 18px; border-radius: 3px; background: rgb(var(--primary_color)); }
@media (max-width: 600px) {
  .vf-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
  /* Task 25: shrink the fixed 296px basis below the viewport content width on narrow
     phones (only kicks in under ~344px CSS-px) so the card is never wider than the
     screen — one full card per view + a small peek of the next; snap lands on a whole
     card. The auto-scroll/dots JS reads the rendered card width, so it adapts. */
  .vf-score-card { flex-basis: min(296px, 86vw); }
}

/* ============================================================================
   TASK 43 — Mobile swipe carousel for the "Afaceri recomandate" (#vfRecGrid,
   .vf-biz-grid) + "Servicii de top" (the shared category-showcase Bootstrap .row)
   home sections. On phones (≤600px) both grids — which the responsive rules above
   collapse to a single stacked column — instead become a horizontal scroll-snap
   carousel, exactly like the categories scroller (.vf-cat-row) and the top-rated
   score-card scroller (.vf-hscroll). Desktop/tablet are UNTOUCHED: every rule lives
   inside the ≤600px media query, so above the breakpoint #vfRecGrid stays a CSS grid
   and the category .row stays a Bootstrap multi-column row.

   The single hook class `.vf-mcar` is added (in Blade) to BOTH tracks so one rule set
   serves both — a class (not an id) on the SHARED category template, so a second
   admin-added category showcase can't collide on a duplicate id. `> *` targets each
   track's direct children (the .vf-biz-card for recommended; the .col wrapper for the
   category row) so the card-fit + snap apply to whichever child shape a section uses.

   Dots are reused (.vf-dots, JS-inserted, mobile-only). Auto-scroll is deliberately
   NOT enabled here (the user asked for a *swipeable* carousel) — only #vfTopGrid keeps
   the timed auto-scroll; these are swipe/scroll-only.

   Horizontal-overflow safety (the Task 25 / 2026-06-20 ICB-inflation bug class): the
   track owns `overflow-x:auto` so it clips its own overflow instead of leaking to the
   page, each card carries `min-width:0` + a `min(296px,86vw)` basis (never wider than
   the viewport), and the Bootstrap row's negative gutter margins + the .col gutter
   padding are zeroed so the track aligns flush inside its container.
   ============================================================================ */
@media (max-width: 600px) {
  .vf-mcar {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* neutralise the Bootstrap .row negative gutter on the category showcase (no-op on
       the .vf-biz-grid, which has no margin) so the flex track aligns to its container. */
    margin-left: 0;
    margin-right: 0;
    /* a little bottom padding so a card's hover/lift shadow isn't clipped by overflow. */
    padding-bottom: 4px;
  }
  .vf-mcar::-webkit-scrollbar { display: none; }
  .vf-mcar > * {
    flex: 0 0 min(296px, 86vw);
    min-width: 0;
    scroll-snap-align: start;
  }
  /* Only the Bootstrap .col wrappers (the category showcase nests its .vf-biz-card INSIDE a
     .col) carry the gutter padding + `g-3` row y-gutter margin that must be neutralised so
     the flex track aligns and the cards don't sink. Scope this to `.col` — the recommended
     carousel's children ARE the .vf-biz-card directly, and it owns its 17px inner padding,
     which must be KEPT: a blanket `.vf-mcar > *` reset stripped it, flushing the card content
     against the left/right border on phones (desktop kept the grid's full 17px, so the bug
     was mobile-only). The track's own `gap` provides the inter-card spacing either way. */
  .vf-mcar > .col {
    padding-left: 0;
    padding-right: 0;
    margin-top: 0;
  }
  /* Task 61 — even out the recommended-carousel card heights. In this flex track the
     card's base `height:100%` (load-bearing inside the desktop CSS grid, where it fills a
     definite grid-row height) is EXCLUDED from `align-items:stretch` and its `100%` resolves
     against the indefinite flex-container height → collapses to the card's own content height,
     so a longer business name makes one card taller than its siblings. `height:auto` re-arms
     the default flex cross-stretch, equalising every direct-child card to the tallest.
     The `>` child combinator is deliberate: the category showcase nests its .vf-biz-card INSIDE
     a Bootstrap .col (the .col is the flex item → already stretches; the inner height:100% then
     fills the now-definite .col), so it must NOT be flattened. Scoped to ≤600px → the base
     .vf-biz-card{height:100%} (desktop grid + listing/profile grids) is untouched. */
  .vf-mcar > .vf-biz-card {
    height: auto;
  }
}

/* ============================================================================
   TASK 15 — Blog cards (#vfBlogGrid) + final CTA (.vf-final-card) + FAQ accordion
   (#vfFaqGrid). Ported from the mockup; slash-alpha rgb(var(--t) / a) is rewritten
   as legacy rgba(var(--t), a) because ThemeController emits COMMA-separated triplets.
   .vf-center-head / .vf-title2 / .ul / .vf-btn-outline / .vf-r already exist above.
   ============================================================================ */

/* final CTA — sibling cards (user → funnel, business → owner area) */
.vf-section-flush-top { padding-top: 0; }
.vf-final-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vf-final-card { position: relative; overflow: hidden; border-radius: 20px; padding: 16px 24px; isolation: isolate;
  border: 1px solid var(--vf-line); transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease, border-color .2s ease; }
.vf-final-card.c-user { background: linear-gradient(135deg, rgba(var(--primary_color), .07), rgba(var(--primary_color), .015) 60%); }
.vf-final-card.c-biz { background: linear-gradient(135deg, rgba(var(--secondary_color), .08), rgba(var(--secondary_color), .015) 60%); }
.vf-final-card:hover { transform: translateY(-4px); border-color: transparent; }
.vf-final-card.c-user:hover { box-shadow: 0 22px 46px rgba(var(--primary_color), .18); }
.vf-final-card.c-biz:hover { box-shadow: 0 22px 46px rgba(var(--secondary_color), .18); }
.vf-final-deco { position: absolute; right: -22px; top: -22px; width: 130px; height: 130px; z-index: -1; opacity: .06; }
.vf-final-card.c-user .vf-final-deco { color: rgb(var(--primary_color)); }
.vf-final-card.c-biz .vf-final-deco { color: rgb(var(--secondary_color)); }
.vf-final-head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.vf-final-icon { width: 40px; height: 40px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgb(var(--primary_color)); box-shadow: 0 8px 20px rgba(var(--primary_color), .3); }
.vf-final-icon svg { width: 20px; height: 20px; }
.vf-final-icon.alt { background: rgb(var(--secondary_color)); box-shadow: 0 8px 20px rgba(var(--secondary_color), .3); }
.vf-final-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: rgb(var(--primary_color)); background: rgba(var(--primary_color), .1); padding: 5px 11px; border-radius: 999px; }
/* The default secondary token (#08b186) is a LIGHT teal — as text on its own .12 tint it
   is ~2.4:1 (sub-AA for this 10.5px label). Darken it toward black so it clears WCAG AA
   while staying hue-tied to the admin theme (the primary eyebrow above is already dark). */
.vf-final-eyebrow.alt { color: color-mix(in srgb, rgb(var(--secondary_color)), #000 45%); background: rgba(var(--secondary_color), .12); }
.vf-final-card h3 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--vf-ink); margin-bottom: 4px; }
/* The mockup truncates this to one line (nowrap/ellipsis); we keep the CTA copy fully
   visible so a longer translation is never silently clipped. */
.vf-final-card p { font-size: 13px; line-height: 1.45; color: var(--vf-muted); margin: 0 0 13px; max-width: none; }
.vf-final-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vf-final-btn { flex: none; padding: 12px 22px !important; font-size: 14.5px; font-weight: 700; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px; }
.vf-final-btn svg { transition: transform .18s; }
.vf-final-btn:hover svg { transform: translateX(3px); }
.vf-final-btn-biz { background: rgb(var(--secondary_color)); color: #fff; box-shadow: 0 4px 12px rgba(var(--secondary_color), .18); }
.vf-final-btn-biz:hover { filter: brightness(1.05); color: #fff; }
/* Press + keyboard-focus states (Task 26 — the user-reported bug). The base
   .vf-final-btn-biz fill is only (0,1,0), so Bootstrap's .btn:active default
   (--bs-btn-active-bg: transparent, 0,3,0) won on press and washed the green out
   (white label on a near-transparent background). Hold the green fill + white text on
   :focus/:active and add the brand-primary focus-visible ring, matching the shared
   .vf-btn-* block above. (The sibling user-card button is .vf-btn-primary → covered there.) */
.vf-scope .btn.vf-final-btn-biz:focus,
.vf-scope .btn.vf-final-btn-biz:active { background: rgb(var(--secondary_color)); color: #fff; }
.vf-scope .btn.vf-final-btn-biz:active { filter: brightness(.96); }
.vf-scope .btn.vf-final-btn-biz:focus-visible { outline: 3px solid rgb(var(--primary_color)); outline-offset: 2px; }
.vf-final-perk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--vf-muted); }
.vf-final-perk svg { color: #f5b820; }
.vf-final-perk.alt svg { color: rgb(var(--secondary_color)); }

/* FAQ accordion */
.vf-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.vf-faq { position: relative; background: #fff; border: 1px solid var(--vf-line); border-radius: 14px; overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.vf-faq::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgb(var(--primary_color));
  transform: scaleY(0); transform-origin: center; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.vf-faq:hover { border-color: #cfdaec; }
.vf-faq.open { border-color: rgba(var(--primary_color), .35); box-shadow: 0 14px 30px rgba(var(--primary_color), .1); }
.vf-faq.open::before { transform: scaleY(1); }
/* Task 59: the question button is wrapped in a real heading (<h2..h5>, per caller) so
   heading-rotor users can jump between questions + each FAQ page gains a document outline.
   display:contents removes the heading's OWN box entirely — the button keeps its exact
   flex flow/spacing and the card stays pixel-identical — while the element (with role
   "heading") stays in the accessibility tree (all current browsers). */
.vf-faq-h { display: contents; }
.vf-faq-q { display: flex; align-items: center; gap: 13px; width: 100%; cursor: pointer;
  border: none; background: none; font-family: inherit; text-align: left; padding: 16px 18px;
  font-size: 15px; font-weight: 700; color: var(--vf-ink); }
.vf-faq-q:focus-visible { outline: 2px solid rgb(var(--primary_color)); outline-offset: -2px; border-radius: 14px; }
.vf-faq-qm { width: 26px; height: 26px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: rgb(var(--primary_color)); background: rgba(var(--primary_color), .1); transition: .2s; }
.vf-faq.open .vf-faq-qm { background: rgb(var(--primary_color)); color: #fff; }
.vf-faq-qt { flex: 1; min-width: 0; line-height: 1.3; }
.vf-faq-chev { width: 28px; height: 28px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--vf-line-soft); color: var(--vf-muted); transition: transform .25s, background .2s, color .2s; }
.vf-faq.open .vf-faq-chev { transform: rotate(180deg); background: rgba(var(--primary_color), .12); color: rgb(var(--primary_color)); }
.vf-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
/* Wrapper (not a bare <p>) — Faq.body is admin rich HTML, possibly multi-paragraph. */
.vf-faq-a-body { padding: 0 18px 17px 57px; font-size: 14px; line-height: 1.6; color: var(--vf-muted); }
.vf-faq-a-body > :last-child { margin-bottom: 0; }
.vf-faq-a-body p { margin: 0 0 8px; }
.vf-faq-a-body a { color: rgb(var(--primary_color)); text-decoration: underline; }
.vf-faq.open .vf-faq-a { max-height: 800px; }
.vf-faq-foot { text-align: center; margin-top: 30px; }
/* /faqs standalone page (Task 27): reuse the homepage .vf-faq disclosure grid, but the
   dedicated page reads as a single full-width column (the home teaser is 2-col) inside the
   narrow container-custom-xs. Pagination footer gets a little breathing room. */
.vf-faq-page .vf-faq-grid { grid-template-columns: 1fr; }
.vf-faq-page .vf-faq-page-foot { margin-top: 28px; }
.vf-faq-page .vf-faq-page-foot .pagination { margin-bottom: 0; justify-content: center; }

/* Blog cards */
.vf-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.vf-blog-card { background: #fff; border: 1px solid var(--vf-line); border-radius: 18px; overflow: hidden; text-decoration: none;
  display: flex; flex-direction: column;
  transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s ease, border-color .22s ease; }
.vf-blog-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(var(--primary_color), .18); border-color: transparent; }
.vf-blog-card:focus-visible { outline: 2px solid rgb(var(--primary_color)); outline-offset: 2px; }
.vf-blog-thumb { position: relative; aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px; overflow: hidden; background-color: rgb(var(--primary_color)); background-size: cover; background-position: center; }
/* Dark gradient so the white category chip + watermark stay legible over any real photo. */
.vf-blog-thumb::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .45)); }
/* Real article photos back the thumb (the mockup used a dark gradient), and the ::after
   overlay only darkens the BOTTOM — so a white-on-translucent-white chip would vanish over
   a light photo. Use a dark, opaque-enough pill (+ text-shadow) so the white label clears
   AA over ANY photo, including pure white. */
.vf-blog-cat { position: absolute; top: 14px; left: 14px; z-index: 2; font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #fff; background: rgba(15, 23, 42, .62); border: 1px solid rgba(255, 255, 255, .22);
  padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px); text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.vf-blog-thumb .wm { position: absolute; right: 14px; top: 14px; z-index: 2; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: rgba(255, 255, 255, .6); }
.vf-blog-body { padding: 16px 19px 18px; display: flex; flex-direction: column; flex: 1; }
.vf-blog-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 11px; }
.vf-blog-date, .vf-blog-read { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vf-muted); font-weight: 600; }
.vf-blog-date svg, .vf-blog-read svg { color: var(--vf-muted-2); }
.vf-blog-title { font-size: 16.5px; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; color: var(--vf-ink); margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vf-blog-card:hover .vf-blog-title { color: rgb(var(--primary_color)); }
.vf-blog-ex { font-size: 13px; line-height: 1.55; color: var(--vf-muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 14px; }
.vf-blog-more { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 800; color: rgb(var(--primary_color)); }
.vf-blog-more svg { transition: transform .18s; }
.vf-blog-card:hover .vf-blog-more svg { transform: translateX(4px); }

/* Task 74 — "Related articles" internal-linking block at the end of a /blog/{slug}
   article. A light top divider + spacing separates it from the comments above; the
   grid itself reuses .vf-blog-grid. All non-directional (border-top / margin / padding)
   so no RTL mirror is needed. */
.vf-blog-related { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--vf-line); }
.vf-blog-related-title { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.025em; color: var(--vf-ink); margin: 0 0 22px; }

@media (max-width: 991.98px) {
  .vf-final-grid { grid-template-columns: 1fr; }
  .vf-blog-grid { grid-template-columns: 1fr; }
  .vf-blog-related { margin-top: 36px; padding-top: 30px; }
}
@media (max-width: 767.98px) {
  .vf-faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .vf-final-foot { gap: 12px; }
  .vf-final-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   TASK 20 — filter-sidebar "side cards" (/businesses + category pages)
   The left filter panels (Search / Location / Categories / Rating / Verification /
   Status / Review Time) were the legacy `.item-box.box`: a flat #F1F5F9 tile with
   45px→32px padding, a faint #97AEDD border and a 5px radius — dated next to the
   redesign `.vf-biz-card`/`.vf-review-card` they now sit beside. Reskin the PANELS to
   the redesign card language (white surface, --vf-line border, 16px radius, soft
   shadow) + a clear section-label heading + redesign field/list/button styling,
   WITHOUT touching the cascade-filter behaviour (a visual reskin only).
   Scoped to `.vf-filters` (added to `#searchFilters` desktop + the `#searchFiltersMenu`
   offcanvas-body) so it can never leak onto other `.item-box`/`.box` surfaces —
   verifeedo-redesign.css loads globally and the `.vf-filters` hook keeps these inert
   everywhere else. The Task-5c `.form-search .form-control` field border already shipped;
   this reverses its gray-panel exception now that the panel is white (see below).
   RTL-safe via logical `margin-inline-end`; load-bearing JS hooks (.search-param,
   .search-form, .search-select, .selectpicker, .cat-filter-*, .item-inline) are kept.
   ------------------------------------------------------------ */

/* Panel surface — mirror .vf-biz-card / .category.box (Task 5c). */
.vf-filters .item-box.box {
  background: var(--vf-surface);
  border: 1px solid var(--vf-line);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(var(--primary_color), .05);
  padding: 20px;
  /* Static form panels: deepen the shadow + brighten the border on hover for a subtle
     "lift" WITHOUT a translateY — sliding inputs under the pointer while the user aims
     at a checkbox/select is a real UX regression, so this DELIBERATELY diverges from
     the card translateY hover. */
  transition: box-shadow .2s ease, border-color .2s ease;
}
.vf-filters .item-box.box:hover {
  box-shadow: 0 14px 32px rgba(var(--primary_color), .10);
  border-color: #dbe2f0;
}
@media (max-width: 575.98px) {
  .vf-filters .item-box.box { padding: 18px; }
}

/* Panel heading — redesign section-label with a modern icon chip (was a plain
   `p.fw-medium`). Every `p.fw-medium` inside a panel is a section heading. */
.vf-filters .item-box p.fw-medium {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 800 !important; /* beat Bootstrap's .fw-medium { font-weight: 500 !important } */
  letter-spacing: -.01em; color: var(--vf-ink); margin-bottom: 12px;
}
/* The heading's leading Bootstrap Icon (added as the first child) sits in a rounded
   primary-tint chip — the same chip language as .vf-faq-qm / .vf-accent-ic. Scoped to a
   DIRECT child so it never touches the search-button or list-group `bi-tag` icons.
   RTL-neutral (a leading flex item flips automatically; `gap` is direction-agnostic). */
.vf-filters .item-box p.fw-medium > .bi {
  width: 26px; height: 26px; flex: none; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; color: rgb(var(--primary_color));
  background: rgba(var(--primary_color), .1);
  transition: background .18s, color .18s;
}
/* Solid deep-primary chip ONLY when that section's filter is ACTIVE (a value is
   applied in the request) — NOT on panel hover. The blade stamps `.vf-fh-on` on a
   heading whose filter currently has a selection (server-rendered). */
.vf-filters .item-box p.fw-medium.vf-fh-on > .bi {
  background: rgb(var(--primary_color)); color: #fff;
}
/* The category-filter's heading is tight (mb-1) above its "Select levels…" hint. */
.vf-filters .item-box p.fw-medium.mb-1 { margin-bottom: 4px; }
/* The category cascade ends with the full-width Apply button, which has NO bottom
   margin — so the next section heading (Evaluare/Rating) sat flush against it. Give the
   cascade block a clear gap below to restore the inter-section rhythm. */
.vf-filters .item-box .category-filter { margin-bottom: 20px; }

/* Inputs — the white panel makes --vf-line read fine, so reverse the Task-5c
   gray-panel exception (`.item-box .form-search .form-control` → --border_color) back
   to the lighter redesign border, matching every other vf field on the page. */
.vf-filters .item-box .form-search .form-control { border-color: var(--vf-line); }

/* selectpicker buttons (Country / State / City + the 3-level category cascade) — match
   the redesign field border/radius/focus. Scoped to the sidebar so the bootstrap-select
   class-copy (it mirrors the <select> classes onto its wrapper) can't leak elsewhere. */
.vf-filters .bootstrap-select .btn {
  border: 1px solid var(--vf-line) !important;
  border-radius: 12px !important;
  /* !important: the wrapper toggle carries the `btn` class, and app.css's
     `.btn { box-shadow: none !important }` would otherwise suppress these — same
     reason border/radius above need it. The focus glow pairs with the (already
     !important) primary border below as the WCAG 2.4.7 indicator. */
  box-shadow: 0 1px 2px rgba(var(--primary_color), .04) !important;
}
/* Open state: bootstrap-select puts `.show` + aria-expanded on the BUTTON itself
   (not the wrapper), and app.css `.btn.show { border-color: transparent !important }`
   would otherwise blank the border — so target the button and override it. */
.vf-filters .bootstrap-select .btn:focus,
.vf-filters .bootstrap-select .btn:focus-visible,
.vf-filters .bootstrap-select .btn.show,
.vf-filters .bootstrap-select .btn[aria-expanded="true"] {
  border-color: rgb(var(--primary_color)) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary_color), .12) !important;
}

/* Category list-group ("Categorii" / "Related Categories") — redesign hover rows. */
.vf-filters .list-group-item {
  border-radius: 9px;
  padding: 9px 11px !important;          /* override the blade's px-0 utility */
  color: var(--vf-ink-soft); font-weight: 600;
  transition: background .15s, color .15s;
}
.vf-filters .list-group-item:hover,
.vf-filters .list-group-item:focus-visible {
  background: rgba(var(--primary_color), .06);
  color: rgb(var(--primary_color));
}
.vf-filters .list-group-item:focus-visible { outline: 2px solid rgb(var(--primary_color)); outline-offset: -2px; }
.vf-filters .list-group-item .bi-tag { color: var(--vf-muted-2); transition: color .15s; }
.vf-filters .list-group-item:hover .bi-tag,
.vf-filters .list-group-item:focus-visible .bi-tag { color: rgb(var(--primary_color)); }

/* Buttons + interactive controls — redesign radius + a clear focus-visible ring
   (Apply / Reset All / the search input / the rating-&-flag checkboxes) — WCAG 2.4.7. */
.vf-filters .cat-filter-apply,
.vf-filters .btn-outline-primary { border-radius: 12px; }
.vf-filters .cat-filter-apply:focus-visible,
.vf-filters .btn-outline-primary:focus-visible,
.vf-filters .form-search .form-control:focus-visible,
.vf-filters .search-param:focus-visible {
  outline: 2px solid rgb(var(--primary_color)); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .vf-filters .item-box.box,
  .vf-filters .item-box p.fw-medium > .bi,
  .vf-filters .list-group-item,
  .vf-filters .list-group-item .bi-tag { transition: none; }
}

/* =====================================================================
   TASK 49 — business-owner dashboard UI bug fixes (surfaced once the
   "for business" UI adopted vf-scope/bz-scope in Task 36a/b/c). Two CSS-only
   fixes, each tightly scoped so it cannot leak to other surfaces.

   (1) Rating-filter checkboxes. The 5 `.form-check.d-flex` rating rows in
   partials/search-params.blade.php pair a `.form-check-input` with a
   `flex-grow-1` label. Bootstrap's legacy float model (float:left;
   margin-left:-1.5em on `.form-check .form-check-input`, with the parent's
   padding-left:1.5em) is dead under `.d-flex`, but the negative margin plus the
   default flex-shrink:1 let the checkbox collapse to an inconsistent sliver/pill
   across the rows (each row's label text + star-strip width differ). Neutralise
   the float model and stop the shrink so every checkbox is a square, full-size
   control. Scoped to `.vf-filters` so it can never reshape `.form-check`
   elsewhere; net input position is unchanged (padding-left:0 cancels the now-zero
   negative margin) and the `name="stars"` value + the `:checked` navy fill stay
   (Bootstrap `.form-check-input:checked` paints `rgb(var(--primary_color))` = navy).

   TASK 53 — make that square STATE-INVARIANT (was: square only at REST). Task 49's
   rule (`flex:0 0 auto; min-width:1em`) leaned on Bootstrap's `.form-check-input
   {width:1em;height:1em}` resolving through `flex-basis:auto` to size the box, and
   `min-width` only floors the WIDTH — nothing floored the HEIGHT. A live DevTools pass
   on `/businesses?stars=2` confirmed the post-Task-49 build already renders the
   `:checked`/focused box a clean 16×16 square with no stray green underline (the
   user's "Acceptabil collapses to a sliver" screenshot was a STALE-CACHE artifact: an
   older `?v=` still served the pre-Task-49 sheet, where every box collapses to a ~2px
   sliver — reproduced). So this is hardening, not a live regression: pin an explicit
   `1em` square + a fixed `1em` flex-basis so the control can NEVER depend on the
   `:checked` background swap, focus side effects, or Bootstrap's intrinsic width/height
   (which `min-width` alone doesn't backstop for height). Pseudo-classes don't lower
   specificity, so this single rule already holds under `:hover`/`:focus`/`:focus-
   visible`/`:checked`/`:active` — no `:checked` companion needed (verified live).
   Applies to BOTH the desktop rows AND the mobile-offcanvas duplicates (#rating55…#rating11).

   TASK 57 — the SAME five rating rows ALSO live on the business-OWNER dashboard
   "Recenzii" page (business/reviews.blade.php), but there they sit in a plain
   `.card > .card-body` with NO `.vf-filters` ancestor, so the `.vf-filters …` rule never
   matched them and each box collapsed to a sliver (the original Task-49 bug, on the
   surface Tasks 49+53 never covered — Task 53 verified the PUBLIC page, the wrong
   surface). Re-key the square on the SHARED, semantic hook
   `.form-check .form-check-input[name="stars"]` (present on EVERY rating-filter checkbox:
   public desktop + mobile-offcanvas + owner dashboard) so the two DOM-identical filters
   are squared by ONE declaration block and can't drift again. The `.vf-filters` arm is
   kept because it is the ONLY one covering the public filter's NON-rating checkboxes
   (verified/trending/review_time — they carry no name="stars"); the public RATING rows
   are matched by BOTH arms at once (byte-identical declarations — a deliberate, benign
   overlap, since `.vf-filters` is always nested in `.vf-scope`). Leak-safe: settings/KYC
   checkboxes don't carry
   name="stars"; the write-review star PICKER (Task 30/55) uses name="stars" on RADIOs
   that are NOT `.form-check-input` inside a `.form-check`, so it stays untouched.
   `.vf-scope`-prefixed (every vf surface body — public + owner — carries it) for
   file-consistent scoping; the owner layout (business/layouts/app.blade.php) is
   `vf-scope bz-scope bz-dash`.
   ------------------------------------------------------------ */
.vf-filters .form-check,
.vf-scope .form-check:has(> .form-check-input[name="stars"]) { padding-left: 0; }
.vf-filters .form-check .form-check-input,
.vf-scope .form-check .form-check-input[name="stars"] {
  flex: 0 0 1em;      /* Task 53: was 0 0 auto — pin the basis so it can't resolve from content/Bootstrap */
  width: 1em;         /* Task 53: explicit square, independent of Bootstrap's .form-check-input{width:1em} */
  height: 1em;        /* Task 53: floor the HEIGHT (min-width only floored the width) */
  min-width: 1em;
  margin-left: 0;
  float: none;
}

/* (2) Owner sidebar menu titles. `d_trans('Reviews')` resolves (case-insensitive
   collation, no unique index) to the LOWERCASE "recenzii" row — a shared row that
   must stay lowercase mid-sentence elsewhere (sections/popular, vf-lb-row) — so the
   owner menu rendered lowercase. Uppercase ONLY the first letter of each owner-
   sidebar menu title via CSS, which leaves the shared translation untouched and is a
   no-op on the already-capitalised siblings. The admin sidebar ALSO uses
   `.dashboard-sidebar` / `.dashboard-sidebar-link-title`, but (a) it never loads this
   stylesheet (admin runs the separate vendor/admin theme) and (b) its menu titles are
   `<p>` whereas the OWNER titles are `<a>` — so we scope to `a.dashboard-sidebar-link-title`
   for a selector-level no-leak guarantee that doesn't rely on the stylesheet boundary.
   The span is a flex item inside the link (display:flex) so it is already block-level
   for ::first-letter; `display:inline-block` is a defensive guard should that change.
   Direction-agnostic → no RTL mirror needed. */
.dashboard-sidebar a.dashboard-sidebar-link-title span { display: inline-block; }
.dashboard-sidebar a.dashboard-sidebar-link-title span::first-letter { text-transform: uppercase; }

/* =====================================================================
   TASK 30 — write-a-review rating picker → redesign green star
   ---------------------------------------------------------------------
   The legacy `.ratings-selective` picker (businesses/review/{create,edit})
   was a grey "chip + white glyph" control styled in app.css (L2696+,
   L2761+). Those pages are body.vf-scope and load verifeedo-redesign.css
   globally (Task 7/16), so we restyle the picker IN PLACE to the same green
   STAR_SVG the wizard uses (`.vf-starpick`) — the glyph was swapped to the
   inline `<svg class="vf-star">` in the blades; here we drop the chip,
   colour the glyph (grey -> green), mirror app.css's hover preview, and make
   the radios keyboard-operable. The `name="stars"` radio contract + the
   app.js click handler are untouched. All rules are `.vf-scope`-scoped so the
   legacy chip styling is inert everywhere else (this picker is the only
   `.ratings-selective` surface in the public theme).
   ===================================================================== */
.vf-scope .ratings.ratings-xxl.ratings-selective { gap: 6px; }
.vf-scope .ratings-selective .rating {
  /* padding gives a ≥44px tap target (WCAG 2.5.5) without a visible chip; the
     explicit star size below beats app.css's `.rating{font-size:30px}` (which the
     glyph would otherwise inherit at the wrong size). */
  background: none; padding: 5px; border-radius: 8px; line-height: 0; color: #dfe4ef;
  cursor: pointer; transition: color .12s, transform .12s;
}
/* Kill the legacy chip overlay (app.css `.rating::before { content: "" }`) so
   the star renders as a plain glyph, not a filled square. */
.vf-scope .ratings-selective .rating::before { content: none; }
.vf-scope .ratings-selective .rating .vf-star { width: 36px; height: 36px; }
.vf-scope .ratings-selective .rating:hover { transform: scale(1.08); }
/* Selected (server-stamped on prefill/edit OR toggled by app.js on click). */
.vf-scope .ratings-selective .rating.rating-active { color: var(--vf-star); }
/* Keyboard a11y (WCAG 2.1.1 / 2.4.7): the radio is the control. app.css hides
   it with display:none (not focusable) — make it sr-only-but-focusable and ring
   its star on focus. Native radio-group arrow keys then drive selection, and the
   app.js `change` listener repaints. */
.vf-scope .ratings-selective .rating input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; display: inline-block;
}
.vf-scope .ratings-selective .rating:has(input:focus-visible) {
  outline: 2px solid rgb(var(--primary_color)); outline-offset: 3px; border-radius: 6px;
}
/* Hover preview (mirrors app.css L2769-2791, colouring the glyph not a chip): on
   hover, reset the server-selected stars, then green stars 1..hovered. */
.vf-scope .ratings-selective:hover .rating.rating-active { color: #dfe4ef; }
.vf-scope .ratings-selective:has(.rating:nth-child(1):hover) .rating:nth-child(1),
.vf-scope .ratings-selective:has(.rating:nth-child(2):hover) .rating:nth-child(-n+2),
.vf-scope .ratings-selective:has(.rating:nth-child(3):hover) .rating:nth-child(-n+3),
.vf-scope .ratings-selective:has(.rating:nth-child(4):hover) .rating:nth-child(-n+4),
.vf-scope .ratings-selective:has(.rating:nth-child(5):hover) .rating:nth-child(-n+5) { color: var(--vf-star); }
@media (prefers-reduced-motion: reduce) {
  .vf-scope .ratings-selective .rating { transition: none; }
  .vf-scope .ratings-selective .rating:hover { transform: none; }
}

/* =====================================================================
   TASK 33 — write-review picker CELEBRATION (admin stars_celebration:
   off / subtle / full). initStarCelebration() in verifeedo-redesign.js
   stamps `.vf-cel-on` on the wizard `.vf-starpick` and the review-page
   `.ratings-selective` from the admin setting, and
   toggles `.vf-cel-peak` on a committed 5★. `off` (no class) and
   reduced-motion both leave this inert. The display stars (cards/feed)
   never get this — celebration is the PICKER's delight only.
   ===================================================================== */
@keyframes vf-star-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  /* Staggered spring bounce-in when the picker first appears (wizard step-1 show,
     where the step un-hides from display:none; or review-page load when JS adds
     .vf-cel-on). */
  .vf-step.on .vf-starpick.vf-cel-on button,
  .ratings-selective.vf-cel-on .rating { animation: vf-star-pop .42s cubic-bezier(.34, 1.56, .64, 1) both; }
  .vf-starpick.vf-cel-on button:nth-child(1), .ratings-selective.vf-cel-on .rating:nth-child(1) { animation-delay: .03s; }
  .vf-starpick.vf-cel-on button:nth-child(2), .ratings-selective.vf-cel-on .rating:nth-child(2) { animation-delay: .08s; }
  .vf-starpick.vf-cel-on button:nth-child(3), .ratings-selective.vf-cel-on .rating:nth-child(3) { animation-delay: .13s; }
  .vf-starpick.vf-cel-on button:nth-child(4), .ratings-selective.vf-cel-on .rating:nth-child(4) { animation-delay: .18s; }
  .vf-starpick.vf-cel-on button:nth-child(5), .ratings-selective.vf-cel-on .rating:nth-child(5) { animation-delay: .23s; }
  /* Press squash — a compositor-only transform, feels responsive on the bigger star. */
  .vf-starpick.vf-cel-on button:active { transform: scale(.92); }
  .vf-scope .ratings-selective.vf-cel-on .rating:active { transform: scale(.94); }
}
/* Earned 5★ gold glow — fires ONLY on a committed 5 (the 5% peak reward; green stays
   the resting brand colour). Requires .vf-cel-on so `off` mode never glows. The wizard
   picker glyph is a bare <svg> (no .vf-star class), the review-page picker glyph carries
   .vf-star — target each accordingly. */
.vf-starpick.vf-cel-on.vf-cel-peak button.on svg,
.vf-scope .ratings-selective.vf-cel-on.vf-cel-peak .rating.rating-active .vf-star {
  filter: drop-shadow(0 0 6px rgba(245, 184, 32, .7));
  transition: filter .2s ease;
}
@media (forced-colors: active) {
  .vf-starpick.vf-cel-peak button.on svg,
  .vf-scope .ratings-selective.vf-cel-peak .rating.rating-active .vf-star { filter: none; }
}
/* The earned-glow STATE is fine under reduced motion (it is a cue, not motion); only
   its .2s fade-in is motion — snap it in for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  .vf-starpick.vf-cel-peak button.on svg,
  .vf-scope .ratings-selective.vf-cel-peak .rating.rating-active .vf-star { transition: none; }
}

/* =====================================================================
   TASK 33 (round 2) — extend the brand gradient beyond .vf-srow to the
   business-profile HEADER + both write-review PICKERS (user-requested:
   the new gradient look on every star surface, not just the cards/feed).
   ===================================================================== */
/* Business-profile header rating — the gradient .vf-srow replaces the flat star
   strip; size it up for the header (proportional to the admin size knob). */
.vf-biz-head-rating { display: inline-flex; }
.vf-biz-head-rating .vf-srow { font-size: calc(var(--vf-star-size, 16px) * 1.6); }

/* Write-review pickers — the FILLED glyphs adopt the brand gradient (empty stay grey
   via currentColor). The wizard glyph hardcodes fill="currentColor" on its <path>, so it
   must be targeted at the path; the review-picker glyph leaves its path unset, so the
   .vf-star <svg> fill is enough (the path inherits it). The hover-preview + hover-reset
   MIRROR the existing colour cascade (same structure → same specificity order) so the
   gradient tracks the committed selection AND the live hover preview. Flat mode
   (--vf-star-fill:currentColor) transparently keeps the solid green. */
.vf-starpick button.on svg path { fill: var(--vf-star-fill, currentColor); }
.vf-scope .ratings-selective .rating.rating-active .vf-star { fill: var(--vf-star-fill, currentColor); }
.vf-scope .ratings-selective:hover .rating.rating-active .vf-star { fill: currentColor; }
.vf-scope .ratings-selective:has(.rating:nth-child(1):hover) .rating:nth-child(1) .vf-star,
.vf-scope .ratings-selective:has(.rating:nth-child(2):hover) .rating:nth-child(-n+2) .vf-star,
.vf-scope .ratings-selective:has(.rating:nth-child(3):hover) .rating:nth-child(-n+3) .vf-star,
.vf-scope .ratings-selective:has(.rating:nth-child(4):hover) .rating:nth-child(-n+4) .vf-star,
.vf-scope .ratings-selective:has(.rating:nth-child(5):hover) .rating:nth-child(-n+5) .vf-star { fill: var(--vf-star-fill, currentColor); }
@media (forced-colors: active) {
  .vf-starpick button.on svg path,
  .vf-scope .ratings-selective .rating.rating-active .vf-star { fill: CanvasText; }
}

/* =====================================================================
   TASK 55 — finish the star-STYLE sweep across the NON-widget surfaces.
   ---------------------------------------------------------------------
   The Task-30/33 picker pass migrated the two obvious pickers
   (.vf-starpick + .ratings-selective, above) to the brand gradient, but
   an end-to-end audit found two MORE interactive/echo star surfaces still
   painting FLAT green (color:var(--vf-star), no gradient companion):
     • .vf-write-stars — the wizard write-step read-only rating ECHO
       (#vfWriteStars; setRating() toggles `.on` on 1..value). Its glyph is
       $vfFunnelStar, whose <path> hardcodes fill="currentColor" → target
       the path, mirroring .vf-starpick.
     • .vf-biz-rate    — the business-card "Rate it" hover/preview widget
       ($vfRateStar, same currentColor <path>). hoverRate() toggles `.on`
       on 1..hovered; :hover/:focus-visible mirror the colour rule's states
       so the gradient tracks pointer + keyboard + the no-JS hover too.
   .vf-write-stars renders only inside the funnel modal (home + clasament);
   .vf-biz-rate only on the home card sections (show_rate) — both pages
   already carry #vfStarGrad + the --vf-star-fill stamp, so the FILLED glyph
   adopts the gradient; the empty glyph stays grey via currentColor; flat
   mode (--vf-star-fill:currentColor) keeps the solid green.
   The admin <img> strips (Business::getAvgRatingImageLink) stay a CONSCIOUS
   exception — internal-facing, and the admin theme loads neither this CSS
   nor the #vfStarGrad defs (would need the iframe-style port; see memory).
   ===================================================================== */
.vf-write-stars i.on svg path { fill: var(--vf-star-fill, currentColor); }
.vf-biz-rate button:hover svg path,
.vf-biz-rate button.on svg path,
.vf-biz-rate button:focus-visible svg path { fill: var(--vf-star-fill, currentColor); }
@media (forced-colors: active) {
  .vf-write-stars i.on svg path,
  .vf-biz-rate button.on svg path { fill: CanvasText; }
}

/* ============================================================
   TASK 23 — header "Clasament" (reviewer leaderboard) link
   ============================================================ */
/* Focus-visible ring on the primary nav links (WCAG 2.4.7 — the Task-7b lesson;
   the base .vf-nav-link/.vf-mm-link had hover only). Applies to ALL nav links. */
.vf-nav-link:focus-visible,
.vf-mm-link:focus-visible {
  outline: 2px solid rgb(var(--primary_color)); outline-offset: 4px; border-radius: 4px;
}
/* Active-page cue (semantic via aria-current; this is the visual mirror). */
.vf-nav-link[aria-current="page"] { color: rgb(var(--primary_color)); }
.vf-mm-link[aria-current="page"] { color: rgb(var(--primary_color)); font-weight: 700; }
/* The leaderboard link carries an inline label + optional "New" badge. */
.vf-nav-link--lb, .vf-mm-link--lb { display: inline-flex; align-items: center; gap: 7px; }
/* White-on-primary (navy) for WCAG 1.4.3: ~8.69:1 at the default palette, and the
   redesign's "solid deep-primary chip" emphasis treatment (Task 20). White on the
   secondary green (#08b186) was only ~2.75:1 — failing for this 10px badge text. */
.vf-nav-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 999px; color: #fff; background: rgb(var(--primary_color));
}

/* =====================================================================
   TASK 34 — business-profile cards → redesign white-card look
   ---------------------------------------------------------------------
   The business-profile page (businesses/show.blade.php) renders its side
   panels — Average Rating, Business Details, Filter Reviews (+ its nested
   Review-Time tile), the "Is this your business?" claim card, Business
   Social Links, Similar/More Businesses, and the @include'd Category
   Rankings card — as the legacy `.item-box.box`: a flat tile on the legacy
   --elements_background_color / --border_color / --border_radius tokens, no
   soft shadow, an 18px-margin header. The layout is already body.vf-scope
   (Task 16) and the review list already renders the redesign vf-review-card
   (Task 7b), so the legacy panels read as stale right beside the modern
   review cards.

   This block reskins them to the same white card the rest of the site uses
   (--vf-surface / --vf-line hairline / 16px radius / soft shadow /
   800-weight heading), SCOPED to the `.vf-profile` hook on #searchPage so a
   bare `body.vf-scope .item-box.box` rule can NEVER leak onto other pages'
   legacy panels (business-owner area, admin) — the Task-20 `.vf-filters`
   lesson.

   VISUAL only: the rating-distribution rows stay functional review filters
   (their `name="stars[]"` search-param checkboxes + the .progress
   role/aria-valuenow are preserved), and so is the purifier() description
   HTML + the contact list. User decisions: PLAIN 800-weight headings (no icon
   chip); Task 79 replaces the old green "5/5" block with the pure halo score.
   ------------------------------------------------------------ */

/* Panel surface — mirror .vf-biz-card / .vf-filters .item-box.box (Task 20).
   Specificity (0,3,0) beats both legacy `.box` (0,1,0) and `.item-box` (0,1,0). */
.vf-profile .item-box.box {
  background: var(--vf-surface);
  border: 1px solid var(--vf-line);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(var(--primary_color), .05);
  padding: 24px;
  /* Subtle "lift" WITHOUT a translateY — these panels hold interactive controls
     (the rating-filter checkboxes, the claim form, the More-Filters search/select),
     and sliding them under the pointer while the user aims is a UX regression. Same
     deliberate divergence from the card translateY hover as the Task-20 form panels. */
  transition: box-shadow .2s ease, border-color .2s ease;
}
.vf-profile .item-box.box:hover {
  box-shadow: 0 14px 32px rgba(var(--primary_color), .10);
  border-color: #dbe2f0;
}
@media (max-width: 575.98px) {
  .vf-profile .item-box.box { padding: 18px; }
}

/* Nested Review-Time tile (`.item-box.box.p-3` inside the Filter-Reviews panel) —
   flatten it so it reads as a grouped sub-panel, not a second floating card: a faint
   tint surface, the soft line, no shadow/hover. (`.p-3` keeps its own 1rem padding.) */
.vf-profile .item-box.box .item-box.box,
.vf-profile .item-box.box .item-box.box:hover {
  background: var(--vf-line-soft);
  border-color: var(--vf-line);
  box-shadow: none;
}

/* Headings — redesign 800-weight ink (legacy .item-box-title is 1.4em/600).
   Plain headings, no icon chip (user decision 2026-06-19). */
.vf-profile .item-box-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--vf-ink);
}
.vf-profile .item-box .item-box-header { margin-bottom: 16px; }
/* The Review-Time tile labels its group with a `p.fw-medium` (no header wrapper) —
   bring it to the same 800-weight ink, smaller (it is a sub-label, not a card title). */
.vf-profile .item-box p.fw-medium {
  font-size: 14px;
  font-weight: 800 !important; /* beat Bootstrap .fw-medium { font-weight: 500 !important } */
  letter-spacing: -.01em;
  color: var(--vf-ink);
}

/* Average Rating halo (Task 79) — selected Option 16B "Pure Halo Score".
   Replaces the old solid green 180px block with a centered numeric score inside a
   navy → green → mint conic halo. The star icon is deliberately absent; the rating
   rows below carry the filter affordance and remain real `name="stars[]"` controls. */
.vf-profile .rating-box {
  align-items: center;
  gap: 28px;
}
.vf-profile .rating-number.vf-rating-halo {
  flex: 0 0 184px;
  width: 184px;
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  color: var(--vf-ink);
  gap: 12px;
}
.vf-profile .vf-rating-halo-ring {
  display: grid;
  place-items: center;
  width: 158px;
  height: 158px;
  border-radius: 50%;
  background: rgb(var(--star_fill_color));
  background:
    conic-gradient(
      from 210deg,
      rgb(var(--primary_color)) 0deg,
      rgb(var(--star_fill_color)) 135deg,
      rgb(var(--secondary_color)) 245deg,
      rgb(var(--primary_color)) 360deg
    );
  box-shadow: 0 18px 34px rgba(var(--star_fill_color), .17);
}
.vf-profile .vf-rating-halo-core {
  display: grid;
  place-items: center;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: var(--vf-surface);
  box-shadow:
    inset 0 0 0 1px rgba(var(--primary_color), .08),
    0 8px 22px rgba(var(--primary_color), .10);
  text-align: center;
}
.vf-profile .vf-rating-halo-score {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  color: var(--vf-ink);
  font-size: 46px;
  font-weight: 900;
  line-height: .95;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vf-profile .vf-rating-halo-score-main {
  letter-spacing: -.065em;
}
.vf-profile .vf-rating-halo-score small {
  display: inline-block;
  color: var(--vf-ink);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  margin-left: 0;
  transform: translateX(-1px);
}
.vf-profile .rating-number.vf-rating-halo .rating-desc {
  color: var(--vf-muted);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
.vf-profile .vf-rating-filter-panel {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
}
.vf-profile .vf-rating-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--vf-line);
  border-radius: 12px;
  background: var(--vf-line-soft);
  color: var(--vf-ink);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  text-align: start;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.vf-profile .vf-rating-filter-toggle:hover,
.vf-profile .vf-rating-filter-toggle:focus-visible,
.vf-profile .vf-rating-filter-toggle:not(.collapsed) {
  background: #fff;
  border-color: #dbe2f0;
  box-shadow: 0 8px 18px rgba(var(--primary_color), .07);
}
.vf-profile .vf-rating-filter-toggle:focus-visible {
  outline: 2px solid rgb(var(--primary_color));
  outline-offset: 2px;
}
.vf-profile .vf-rating-filter-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.vf-profile .vf-rating-filter-toggle-label .bi {
  color: rgb(var(--primary_color));
  font-size: 14px;
}
.vf-profile .vf-rating-filter-chevron {
  flex: 0 0 auto;
  color: rgb(var(--primary_color));
  font-size: 14px;
  transition: transform .18s ease;
}
.vf-profile .vf-rating-filter-toggle:not(.collapsed) .vf-rating-filter-chevron {
  transform: rotate(180deg);
}
.vf-profile .vf-rating-filter-collapse {
  margin-top: 12px;
}
.vf-profile .vf-rating-filter-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  color: var(--vf-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}
.vf-profile .vf-rating-filter-hint .bi {
  color: rgb(var(--primary_color));
  font-size: 14px;
}
.vf-profile .vf-rating-filter-panel .ratings-rows {
  gap: 10px;
  width: 100%;
}
.vf-profile .vf-rating-filter-row {
  min-height: 44px;
  margin-inline: -8px;
  padding: 6px 8px;
  border-radius: 10px;
  color: var(--vf-muted);
  cursor: pointer;
  transition: background-color .18s ease, box-shadow .18s ease;
}
.vf-profile .vf-rating-filter-row:hover,
.vf-profile .vf-rating-filter-row:focus-within,
.vf-profile .vf-rating-filter-row:has(.form-check-input:checked) {
  background: var(--vf-line-soft);
}
.vf-profile .vf-rating-filter-row:focus-within {
  box-shadow: inset 0 0 0 1px rgba(var(--primary_color), .18);
}
.vf-profile .vf-rating-filter-row > span {
  width: auto;
  text-align: start;
}
.vf-profile .vf-rating-filter-row .ratings-row-text {
  flex: 0 0 auto;
}
.vf-profile .vf-rating-filter-row .ratings-row-text .form-check-input {
  flex: 0 0 1.15rem;
  width: 1.15rem;
  height: 1.15rem;
  min-width: 1.15rem;
}
.vf-profile .vf-rating-filter-row .ratings-row-text span {
  margin-left: 0;
  margin-right: 0;
  margin-inline-start: .65rem;
  min-width: 50px;
}
.vf-profile .vf-rating-filter-row .progress {
  flex: 1 1 auto;
  min-width: 64px;
  width: 100%;
}
.vf-profile .vf-rating-filter-percent {
  flex: 0 0 45px;
  color: var(--vf-muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

@media (max-width: 767.98px) {
  .vf-profile .rating-box { gap: 22px; }
  .vf-profile .rating-number.vf-rating-halo {
    flex-basis: auto;
    width: 100%;
  }
}
@media (max-width: 575.98px) {
  .vf-profile .vf-rating-halo-ring {
    width: 146px;
    height: 146px;
  }
  .vf-profile .vf-rating-halo-core {
    width: 114px;
    height: 114px;
  }
  .vf-profile .vf-rating-halo-score { font-size: 42px; }
  .vf-profile .vf-rating-halo-score small { font-size: 20px; }
  .vf-profile .vf-rating-filter-row {
    gap: 10px;
    margin-inline: -6px;
    padding: 7px 6px;
  }
  .vf-profile .vf-rating-filter-row .ratings-row-text span {
    margin-inline-start: .5rem;
    min-width: 42px;
  }
  .vf-profile .vf-rating-filter-percent { flex-basis: 38px; }
}

/* Body / muted copy → redesign muted ink (legacy --text_muted_color reads heavier
   on the white card). The halo score/review count is styled above. */
.vf-profile .item-box-text,
.vf-profile .ratings-row { color: var(--vf-muted); }
/* Contact-list links (Business Details) — a clear redesign hover. */
.vf-profile .item-box-body a.item-box-text:hover { color: rgb(var(--primary_color)); }
.vf-profile .vf-profile-details-toggle {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--vf-ink);
  cursor: pointer;
  font: inherit;
  line-height: 1.25;
  text-align: start;
  list-style: none;
}
.vf-profile .vf-profile-details-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  font-weight: 800;
}
/* Folded-state description teaser: clamp to 4 wrapped lines (fewer when the text is
   shorter). The soft fade is applied only when the text actually overflows (the
   `is-clamped` class is toggled by JS) so short descriptions are NOT faded. */
.vf-profile .vf-profile-details-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: var(--vf-muted);
  overflow-wrap: anywhere;
}
.vf-profile .vf-profile-details-preview.is-clamped {
  -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
}
/* When the card is expanded the full description shows in the body, so drop the teaser. */
.vf-profile .vf-profile-details-native[open] .vf-profile-details-preview {
  display: none;
}
.vf-profile .vf-profile-details-toggle::-webkit-details-marker {
  display: none;
}
.vf-profile .vf-profile-details-toggle::marker {
  content: "";
}
.vf-profile .vf-profile-details-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.vf-profile .vf-profile-details-toggle-label .bi,
.vf-profile .vf-profile-details-chevron {
  color: rgb(var(--primary_color));
  font-size: 15px;
}
.vf-profile .vf-profile-details-chevron {
  flex: 0 0 auto;
  transition: transform .18s ease;
}
.vf-profile .vf-profile-details-native[open] .vf-profile-details-chevron {
  transform: rotate(180deg);
}
.vf-profile .vf-profile-details-toggle:focus-visible {
  outline: 2px solid rgb(var(--primary_color));
  outline-offset: 4px;
}
.vf-profile .vf-profile-details-collapse {
  padding-top: 16px;
}
.vf-profile .vf-profile-details-list h6 {
  color: var(--vf-ink);
  font-size: 14px;
  font-weight: 800;
}
.vf-profile .vf-profile-details-list .item-box-text {
  overflow-wrap: anywhere;
}
.vf-profile .vf-profile-details-list a.item-box-text {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

/* WCAG 2.4.7 — a visible focus-visible ring on the page's interactive controls: the
   rating-filter + review-time checkboxes and the contact / similar-business links inside
   the reskinned panels, PLUS every profile button — the claim button sits in a panel, but
   the "More Filters" + "Reset" buttons sit just ABOVE the #filters collapse (not inside an
   .item-box), so `.vf-profile .btn` (scoped to #searchPage) reaches them too. Mirrors the
   Task-20 `.vf-filters .btn-outline-primary:focus-visible` precedent. */
.vf-profile .item-box .search-param:focus-visible,
.vf-profile .item-box .form-check-input:focus-visible,
.vf-profile .item-box a:focus-visible,
.vf-profile .btn:focus-visible {
  outline: 2px solid rgb(var(--primary_color));
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .vf-profile .item-box.box,
  .vf-profile .vf-rating-filter-toggle,
  .vf-profile .vf-rating-filter-chevron,
  .vf-profile .vf-rating-filter-row,
  .vf-profile .vf-profile-details-chevron { transition: none; }
}

/* =====================================================================
   TASK 35 — redesign white-card across the remaining public legacy-card
   surfaces (auth · user settings/KYC · blog · write-review forms ·
   contact/add/gallery · shared empty-state partials).
   ---------------------------------------------------------------------
   Generalises the Task-20 `.vf-filters` / Task-34 `.vf-profile` reskin to
   the rest of the public site. A single OPT-IN `.vf-card` class is added
   to each legacy panel; every rule is SCOPED under `.vf-scope` so the
   class stays inert on the business-owner / admin surfaces that ALSO
   render `.box` / Bootstrap `.card` (those layouts are NOT body.vf-scope).
   A bare `body.vf-scope .box`/`.card` rule is forbidden — it would leak
   through the high-reach shared `partials/empty-box` +
   `add-business-box` into any future owner/admin include.

   Two legacy primitives are covered:
     • `.box` / `.item-box.box`  — padding lives on the box itself
     • Bootstrap `.card`         — padding on `.card-body`, title in `.card-header`

   VISUAL only — every form, field name/id, the OAuth `list-group`, the KYC
   upload inputs (`attach-img`), the gallery lightbox trigger, captcha and
   the Task-30 `.ratings-selective` star picker are untouched. The cards
   are static (no hover lift): they are content/form containers the user
   reads & types in, not clickable link cards. Inner Bootstrap controls
   keep their existing focus styling — the reskin only changes the panel
   surface, so no control-level focus override is introduced here.
   ===================================================================== */

/* Shared card surface — the redesign white card (mirrors .vf-biz-card /
   .vf-filters / .vf-profile). Applies to BOTH primitives; specificity
   (0,2,0) beats legacy `.box` / `.card` / `.box-bg` (0,1,0). */
.vf-scope .vf-card {
  background: var(--vf-surface);
  border: 1px solid var(--vf-line);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(var(--primary_color), .05);
}

/* `.box` / `.item-box.box` cards carry their padding on the box itself
   (legacy `.box` 45px / `.item-box` 32px) — bring it to the redesign 24px.
   Cards that set an explicit Bootstrap padding utility keep it via
   `!important`: `.p-5` empty states, `.p-4` blog comments, `.p-0` gallery
   tile all win, so this only retouches the un-utilitied form boxes
   (auth / contact / add-business / write-review). */
.vf-scope .box.vf-card,
.vf-scope .item-box.box.vf-card { padding: 24px; }
@media (max-width: 575.98px) {
  .vf-scope .box.vf-card,
  .vf-scope .item-box.box.vf-card { padding: 18px; }
}

/* Auth card title / subtitle — the legacy `.sign-title` is a weight-less
   2rem; bring it to the redesign 800-weight ink + a muted lede. */
.vf-scope .vf-card .sign-title { font-weight: 800; letter-spacing: -.02em; color: var(--vf-ink); }
.vf-scope .vf-card .sign-text { color: var(--vf-muted); }

/* Bootstrap `.card` cards (user settings / KYC) keep their padding on
   `.card-body.p-4` (already 24px) — reskin the legacy cap `.card-header`
   into a flush 800-weight redesign title sitting on the white surface. */
.vf-scope .card.vf-card > .card-header {
  background: transparent;
  border-bottom: 1px solid var(--vf-line-soft);
  color: var(--vf-ink);
  font-weight: 800 !important; /* beat Bootstrap .fw-medium { font-weight:500!important } */
  font-size: 16px;
  letter-spacing: -.015em;
  padding: 16px 24px;
  /* Pin the header's top corners to the card's 16px (Bootstrap's
     `.card-header:first-child` rounds to the smaller --bs-card-inner-border-radius).
     Currently invisible (transparent header), but keeps the contract exact if the
     header ever gains a fill. */
  border-radius: 16px 16px 0 0;
}

/* Connected-Accounts OAuth list (`list-group-flush` inside a `.vf-card`) —
   keep the rows flush/borderless; just give the row divider the redesign
   hairline so it reads on the white card. */
.vf-scope .card.vf-card .list-group-flush > .list-group-item {
  border-color: var(--vf-line-soft);
}

/* Focus-within affordance — on the long multi-card pages (user/settings stacks 5
   panels, the write-review form, KYC) a soft primary-tint border tells the user
   which card they are currently typing in. Border-only (no transform/transition) so
   the cards stay motion-static; every inner control keeps its own focus ring too. */
.vf-scope .box.vf-card:focus-within,
.vf-scope .card.vf-card:focus-within {
  border-color: rgba(var(--primary_color), .35);
}

/* The gallery media tile is the one reskinned card that legitimately animates
   (image zoom on hover, a useful affordance) — but the legacy `.gallery-item`
   motion in app.css carries NO reduced-motion guard. Now that it is a redesign
   `.vf-card` surface, honor the redesign's motion contract for that preference. */
@media (prefers-reduced-motion: reduce) {
  .vf-scope .gallery-item.vf-card,
  .vf-scope .gallery-item.vf-card .gallery-image,
  .vf-scope .gallery-item.vf-card .gallery-overlay { transition: none; }
}

/* =====================================================================
   TASK 36 — extend the redesign to the "for business" UI
   (36a public landing `business/home/*` + 36b owner dashboard `business/*`)
   ---------------------------------------------------------------------
   The for-business layouts were the last NON-redesigned surface (Task 16
   left "business-owner + admin layouts untouched — own chrome"). They now
   carry BOTH `vf-scope` (so the `--vf-*` tokens + Plus Jakarta Sans + ink
   resolve) AND a `bz-scope` marker (dashboard pages add `bz-dash`).

   ⚠️ Why a BLANKET `bz-scope .card`/`.box` rule is allowed here, when
   Task 35 explicitly FORBADE a bare `vf-scope .box`/`.card` rule:
   Task 35's ban protected the for-business / admin surfaces from the
   CONSUMER scope leaking onto the `.box`/`.card` they share. Here we are
   deliberately styling the for-business surface itself, and `bz-scope`
   exists ONLY on `business/home/layouts/*` + `business/layouts/*` — the
   consumer site is `vf-scope` WITHOUT `bz-scope`, and admin is a separate
   layout + stylesheet (`vendor/admin/*`). So a `bz-scope`-scoped blanket
   rule has no leak target. (Approach 1 / "cards + pricing tiles + match
   chrome", user-confirmed 2026-06-19.)

   VISUAL only — no form/field-name/id, no payment-gateway markup, no
   checkout/subscription SELECTION behaviour is touched.
   ===================================================================== */

/* The for-business public landing keeps the LEGACY fixed `.nav-bar`
   (position:fixed → needs the base theme's 85px body clearance). The
   shared `body.vf-scope { padding-top: 0 }` (the sticky-nav reset for the
   consumer site) would slide the hero under the fixed nav, so restore the
   offset for non-dashboard for-business pages. The dashboard sets its own
   `.body-dashboard { padding: 0 }` and is exempt. */
body.vf-scope.bz-scope:not(.body-dashboard) { padding-top: 85px; }

/* Shared for-business card surface — the redesign white card, applied to
   every for-business card primitive in one place: Bootstrap `.card`, the
   dashboard `.box.dashboard-box` widgets (counters / charts / table cards),
   the owner-account `.settings-box`, the error card, the pricing `.plan`
   tile, and any other plain `.box` (gallery editor, review reply panel).
   Specificity (≥0,2,1) beats the legacy primitives (0,1,0). */
body.bz-scope .card,
body.bz-scope .box.dashboard-box,
body.bz-scope .settings-box,
body.bz-scope .error-card,
body.bz-scope .plan,
body.bz-scope .box:not(.dashboard-box):not(.branded-card):not(.plan) {
  background: var(--vf-surface);
  border: 1px solid var(--vf-line);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(var(--primary_color), .05);
}

/* Plain `.box` panels carry their own padding (legacy 45px) — bring the
   un-utilitied ones to the redesign 24px. Boxes with an explicit Bootstrap
   padding utility (`.p-4` gallery editor, `.p-5`, `.p-0`) keep it via the
   utility's `!important`. The `.dashboard-box` (30px) + `.plan` density and
   the flex `.settings-box` (padding lives on its inner side/content) are
   left as-is. */
body.bz-scope .box:not(.dashboard-box):not(.branded-card):not(.plan) { padding: 24px; }
@media (max-width: 575.98px) {
  body.bz-scope .box:not(.dashboard-box):not(.branded-card):not(.plan) { padding: 18px; }
}

/* Bootstrap `.card-header` (dashboard reviews / payments / KYC) → flush
   transparent 800-weight redesign title on the white surface, hairline
   divider, top corners pinned to the card's 16px. Mirrors Task 34/35. */
body.bz-scope .card > .card-header {
  background: transparent;
  border-bottom: 1px solid var(--vf-line-soft);
  color: var(--vf-ink);
  /* `!important` to beat Bootstrap `.fw-medium { font-weight:500 !important }`,
     which the dashboard/payment card-headers carry (the Task-35 precedent). */
  font-weight: 700 !important;
  border-radius: 16px 16px 0 0;
}

/* Preserve the pricing-tile emphasis borders the surface rule would flatten
   (the `featured` / `plan-secondary` accent ring is the plan hierarchy). */
body.bz-scope .plan.featured { border-color: rgb(var(--primary_color)); }
body.bz-scope .plan.plan-secondary { border-color: rgb(var(--secondary_color)); }
body.bz-scope .plan .plan-header { border-bottom-color: var(--vf-line); }

/* Task 32 — the pricing-plan price figure used to be hardcoded `Roboto`
   (`app.css .plan .plan-price p`) while the whole public site is Plus Jakarta
   Sans. Task 32 removed that source override AND trimmed Roboto from the app.css
   @import, so the price now inherits Plus Jakarta Sans theme-wide. This bz-scope
   rule keeps an explicit `font-family: inherit` as a defensive guard for the
   for-business surfaces, plus the 36a/36b ink-alignment. */
body.bz-scope .plan .plan-price p {
  font-family: inherit;
  color: var(--vf-ink);
}

/* Chrome match (structure kept, palette/shape aligned to the redesign).
   36a fixed top nav: soften the legacy full border to the redesign hairline.
   36b dashboard sticky top-bar + footer: redesign hairline instead of the
   legacy translucent-black shadow. The dark sidebar shell is left intact. */
body.bz-scope .nav-bar { border-color: var(--vf-line); }
body.bz-dash .dashboard-nav { box-shadow: 0 1px 0 var(--vf-line); }
body.bz-dash .dashboard-footer { box-shadow: 0 -1px 0 var(--vf-line); }

/* On the long owner-account settings + dashboard form pages, a soft
   primary-tint border tells the user which card they are typing in
   (border-only, no motion — mirrors the Task 35 affordance). */
body.bz-scope .card:focus-within,
body.bz-scope .settings-box:focus-within,
body.bz-scope .box:not(.dashboard-box):not(.branded-card):not(.plan):focus-within {
  border-color: rgba(var(--primary_color), .35);
}

/* The legacy `.box` carries a bare `transition: .3s`; honor the redesign's
   reduced-motion contract on the reskinned for-business surfaces. */
@media (prefers-reduced-motion: reduce) {
  body.bz-scope .box,
  body.bz-scope .nav-bar { transition: none; }
}

/* ---- Review-cycle fixes (Task 36) ---- */

/* (review P2) A dashboard data-table card is `.box.dashboard-box > .dashboard-table`,
   and the legacy `.dashboard-box:has(.dashboard-table){padding:0}` makes the inner
   table sit FLUSH against the box edge. The inner `.dashboard-table` already draws
   its OWN bordered/rounded/clipped chrome (app.css ~4386), so the blanket outer
   surface doubled it — two adjacent 1px rings in different colors (--vf-line vs the
   legacy bluish --border_color) and mismatched radii (16px vs 5px) at every corner.
   Let the inner table own the chrome, recolored to the redesign tokens. */
body.bz-scope .box.dashboard-box:has(.dashboard-table) {
  border: 0;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
}
body.bz-scope .box.dashboard-box .dashboard-table {
  border-color: var(--vf-line);
  border-radius: 16px;
}

/* (review P3) Nested `.card` inside a `.card` (the Reviews filter sidebar groups
   Search/Date/Rating inside an outer filter card) — the blanket surface doubled the
   white card chrome. Flatten the inner level to a plain group (the `p.fw-medium`
   group headings keep the separation). */
body.bz-scope .card .card {
  border: 0;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
}

/* (review P3) The owner-settings `.settings-box` was reskinned to the --vf-line
   hairline, but its inner `.settings-side` divider rail kept the legacy bluish
   --border_color. Align it (mirrors the `.plan .plan-header` divider recolor). */
body.bz-scope .settings-side { border-color: var(--vf-line); }

/* =====================================================================
   TASK 48 — owner-dashboard rating strips → the brand gradient .vf-srow
   ---------------------------------------------------------------------
   The owner dashboard + reviews pages swapped their flat-green strip <img>
   for the shared gradient .vf-srow (the Average-Rating widget, the
   Latest-Reviews list, the review-card rating, and the 5 reviews-filter
   rows). The owner layout is `body.bz-dash` (vf-scope) and includes the
   shared #vfStarGrad <defs> (business/layouts/app), so the core .vf-srow
   rules + the --vf-star-fill stamp already resolve here — this block only
   RE-SIZES the migrated rows to the legacy `.ratings` strip heights.

   Scoped `body.bz-dash .ratings …` so it can NEVER reach a public card
   surface: the unified card stars (.vf-biz-rating et al., Task 47 ×1.485)
   are NOT inside a `.ratings` wrapper, and `.bz-dash` only exists on the
   owner dashboard. The bare `.ratings` rows (the 5 filter rows + the
   Latest-Reviews compact list) keep the natural --vf-star-size (18px);
   only the `.ratings-lg` surfaces (Average-Rating + the per-review rating)
   take the larger size. ===================================================*/
body.bz-dash .ratings.ratings-lg .vf-srow { font-size: calc(var(--vf-star-size, 16px) * 1.444); } /* ≈26px — matches the old .ratings-lg img height */

/* =====================================================================
   TASK 36c — owner-auth (`business/auth/*`) reskin.
   ---------------------------------------------------------------------
   The last for-business slice. `business/auth/layout.blade.php` carries a
   DELIBERATELY DIFFERENT premium SPLIT-SCREEN layout (`.sign-page`: the
   form column on the left, an admin-set brand image on the right) — NOT
   the consumer auth chrome (vf-navbar/footer + a `.box.vf-card` form card)
   and NOT the dashboard. The locked 36b decision was "match chrome, KEEP
   structure", so this slice keeps the split-screen and only aligns its
   TYPOGRAPHY + hairline TOKENS to the redesign (the `--vf-*` tokens + Plus
   Jakarta Sans now resolve because the body adopted `vf-scope`). It mirrors
   the consumer treatment `.vf-scope .vf-card .sign-title` (above, ~L2292)
   — here the owner-auth form has no `.box`/`.card`, so the rules target the
   `.sign` form container directly.

   Scoped `body.bz-scope.bz-auth` so it CANNOT leak: `.sign`/`.sign-title`/
   `.login-with` are SHARED with the CONSUMER auth (`auth/layout`, which is
   `vf-scope` WITHOUT `bz-scope`), and the for-business landing/dashboard
   (`bz-scope` WITHOUT `bz-auth`) do not use `.sign-page`. `bz-auth` exists
   ONLY on the owner-auth layout → no leak target.

   VISUAL only — no form field-name/id, no captcha, no claim/setup/verify
   flow markup is touched (CSS keyed on the body class, like 36a/36b).
   ===================================================================== */

/* The split-screen owner-auth layout has NO fixed navbar (its body is
   `bg-body pt-0`), so it must NOT inherit the public-landing's 85px
   fixed-nav clearance (`body.vf-scope.bz-scope:not(.body-dashboard)` above
   matches the auth body too). Equal specificity (0,3,1) + later position
   wins; the layout's own `.pt-0` already zeroes it — this makes the intent
   explicit and independent of that Bootstrap utility. */
body.vf-scope.bz-scope.bz-auth { padding-top: 0; }

/* Title/subtitle → the redesign heading weight + ink + muted, mirroring the
   consumer `.vf-card .sign-title`/`.sign-text` treatment so both auth
   surfaces read the same. (Size stays the layout's 2rem.) */
body.bz-scope.bz-auth .sign .sign-title {
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--vf-ink);
}
body.bz-scope.bz-auth .sign .sign-text { color: var(--vf-muted); }

/* The "Or" divider (OAuth split on login/register, the logout/cancel split
   on 2fa/complete/setup/verify/claim) → redesign hairline + muted label,
   replacing the legacy bluish `--border_color` / `--text_muted_color`. */
body.bz-scope.bz-auth .login-with .login-with-divider::before,
body.bz-scope.bz-auth .login-with .login-with-divider::after {
  background-color: var(--vf-line);
}
body.bz-scope.bz-auth .login-with .login-with-divider span { color: var(--vf-muted); }

/* =====================================================================
   TASK 39 — blog cards get the redesign card surface everywhere.
   ---------------------------------------------------------------------
   The shared `partials/blog-post` was migrated from the legacy borderless
   `.blog-post` (transparent / no border / no shadow → no visible card
   boundary) to the single-anchor `.vf-blog-card` (Task 15, the full block
   above) and PROMOTED to the single source of truth — the homepage
   `#vfBlogGrid` now @includes the same partial, so the consumer blog
   listing/category + the for-business landing render the SAME blog card as
   the homepage: one blog-card language site-wide, no drift.

   The `.vf-blog-card` surface/border/radius/hover-lift/focus-ring/reveal are
   ALL inherited from the Task-15 block. Two net-new rules here:
   (1) equal-height fill — the consumer/for-business pages lay the cards in a
       Bootstrap `row row-cols-* > .col` grid (NOT the homepage's CSS-grid
       `.vf-blog-grid`, whose items stretch by default), so the card must fill
       its column for equal-height rows (the legacy `.blog-post` set
       `height:100%` for the same reason). Scoped to a direct `.col` parent so
       the homepage grid card (a `.vf-blog-grid` child, never under `.col`) is
       untouched.
   (2) the reduced-motion guard (review P2 — close the no-JS hover path + the
       child arrow's own motion that Task 40's `.vf-r` rule didn't cover).
   ===================================================================== */
.vf-scope .col > .vf-blog-card { height: 100%; }

/* Reduced motion (WCAG 2.3.3) — the card's hover lift (translateY) + the
   `.vf-blog-more` arrow nudge (translateX) are decorative motion. Task 40
   already suppresses the lift on JS pages via `.vf-r { transform:none!important }`,
   but the no-JS hover path + the child arrow's own transform/transition were
   unguarded; now that the card is exposed on the always-visible blog listing
   (not just one homepage section), honor the preference for the whole
   `.vf-blog-card` family. The color / box-shadow / border-color hover
   affordances stay (they are not motion), mirroring `.vf-review-mini`. */
@media (prefers-reduced-motion: reduce) {
  .vf-blog-card:hover { transform: none; }
  .vf-blog-card .vf-blog-more svg { transition: none; }
  .vf-blog-card:hover .vf-blog-more svg { transform: none; }
}

/* =====================================================================
   Task 33b — "Verified on Verifeedo" trust seal (partials/vf-seal.blade.php).
   A STATIC, brand-locked two-tone shield seal kept SEPARATE from the rating row
   (a single seal reads as ONE certification, not a 5-glyph score). Variants:
   .vf-seal--crest (shield + white star, the workhorse), .vf-seal--spine
   (vertical-split shield + white check monogram + sparkle), .vf-seal--sigil
   (crest inside a concentric microtext ring, ≥48px). The SVG is server-rendered
   inline and never on a fill-clipped layer, so it needs no JS and the microtext
   never shreds. The seal is a LINK (authority-transfer) → it carries a real
   focus ring (WCAG 2.4.7). `#how-it-works` gets scroll-margin so the sticky nav
   doesn't cover it when the seal scrolls there. */
#how-it-works { scroll-margin-top: 92px; }
.vf-seal { display: inline-flex; align-items: center; justify-content: center; line-height: 0;
  flex-shrink: 0; vertical-align: middle; border-radius: 50%;
  -webkit-tap-highlight-color: transparent; }
.vf-seal-inline { margin-inline-start: 8px; }
.vf-seal-svg { display: block; }
.vf-seal:focus-visible { outline: 3px solid rgb(var(--primary_color)); outline-offset: 3px; border-radius: 50%; }
/* Sigil disc + microtext are themed here (CSS var() does not resolve inside SVG
   presentation attributes, only inside CSS property values). */
.vf-seal-disc { stroke: var(--vf-line); }
.vf-seal-ring-text { fill: rgb(var(--primary_color)); text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  .vf-seal { transition: filter .18s ease, transform .18s ease; }
  .vf-seal:hover { filter: drop-shadow(0 3px 6px rgba(var(--primary_color), .28)); transform: translateY(-1px); }
}

/* High-contrast / forced-colors: drop the gradient depth → a solid system-colour
   shield OUTLINE + the white knockout glyph painted as CanvasText. Gradient url()
   fills otherwise SURVIVE forced-colors, so the two-tone shield fills must be
   overridden explicitly (the Task-33 `.vf-srow` lesson). The check is stroked
   (vf-seal-glyph-stroke) and the star/sparkle filled (vf-seal-glyph), so the two
   are mapped separately to avoid filling the open check path. */
@media (forced-colors: active) {
  .vf-seal-svg .vf-seal-fill { fill: Canvas; }
  .vf-seal-svg .vf-seal-disc { fill: Canvas; stroke: CanvasText; }
  .vf-seal-svg .vf-seal-edge { stroke: CanvasText; stroke-width: 2; }
  .vf-seal-svg .vf-seal-glyph { fill: CanvasText; }
  .vf-seal-svg .vf-seal-glyph-stroke { stroke: CanvasText; }
  .vf-seal-svg .vf-seal-ring-text { fill: CanvasText; }
}

/* ── HTML sitemap hub page (Task 77, /sitemap) ──────────────────────────────
   A human-readable sitemap: stacked sections, each a heading + a responsive
   multi-column list of crawlable internal links. Tokens only (no hard-coded
   brand hues) so it inherits the redesign palette. */
.vf-scope .vf-sitemap { display: flex; flex-direction: column; gap: 40px; }
.vf-scope .vf-sitemap-section { margin: 0; }
.vf-scope .vf-sitemap-title {
  font-family: var(--vf-font);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--vf-ink);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--vf-line);
}
.vf-scope .vf-sitemap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 4;
  column-gap: 28px;
}
.vf-scope .vf-sitemap-list li { break-inside: avoid; margin: 0 0 4px; }
.vf-scope .vf-sitemap-list a {
  display: block;
  padding: 6px 0;
  color: var(--vf-ink-soft);
  text-decoration: none;
  line-height: 1.35;
  transition: color .15s ease;
}
.vf-scope .vf-sitemap-list a:hover,
.vf-scope .vf-sitemap-list a:focus-visible { color: rgb(var(--primary_color)); text-decoration: underline; }
.vf-scope .vf-sitemap-list a:focus-visible { outline: 2px solid rgb(var(--primary_color)); outline-offset: 2px; border-radius: 3px; }
.vf-scope .vf-sitemap-all { margin: 18px 0 0; }
.vf-scope .vf-sitemap-all a {
  font-weight: 700;
  color: rgb(var(--primary_color));
  text-decoration: none;
}
.vf-scope .vf-sitemap-all a:hover,
.vf-scope .vf-sitemap-all a:focus-visible { text-decoration: underline; }
@media (max-width: 991.98px) { .vf-scope .vf-sitemap-list { columns: 3; } }
@media (max-width: 767.98px)  { .vf-scope .vf-sitemap-list { columns: 2; } }
@media (max-width: 479.98px)  { .vf-scope .vf-sitemap-list { columns: 1; } }