/* ============================================================================
   Station Owner Registration — public onboarding page.
   Additive to theme.css (loaded after it) — reuses the same --vg-* tokens
   throughout so this reads as the same product as the authenticated panel,
   with its own bespoke layout (split hero + form, stepper, floating labels,
   password strength) the internal ERP screens don't need.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0. Page scaffold
   -------------------------------------------------------------------------- */
.vg-guest-body { background: var(--vg-bg); min-height: 100vh; }

.vg-reg-wrap {
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

.vg-reg-theme-toggle {
  position: fixed; top: 20px; right: 20px; z-index: 40;
  width: 38px; height: 38px; border-radius: var(--vg-r-pill);
  border: 1px solid var(--vg-ink-200); background: var(--vg-surface);
  color: var(--vg-ink-600); display: grid; place-items: center;
  box-shadow: var(--vg-sh-sm); transition: all .15s;
}
.vg-reg-theme-toggle:hover { color: var(--vg-ink-900); border-color: var(--vg-ink-300); }

/* ----------------------------------------------------------------------------
   1. Hero panel (left) — dark gradient, decorative grid + glow, feature list,
      glassmorphism stat card. Same hero tokens the authenticated panel's own
      dashboard hero banners use (--vg-hero-*), so a dark banner elsewhere in
      the product and this page's hero read as the same material.
   -------------------------------------------------------------------------- */
.vg-reg-hero {
  position: relative; height: 100%; overflow: hidden; color: #fff;
  background:
    radial-gradient(1000px 480px at -10% -15%, var(--vg-hero-glow), transparent 55%),
    radial-gradient(800px 560px at 110% 115%, rgba(34,197,94,.22), transparent 55%),
    linear-gradient(155deg, var(--vg-hero-from) 0%, var(--vg-hero-to) 55%, #051914 100%);
  padding: 44px 44px; display: flex; flex-direction: column; justify-content: center;
}
.vg-reg-hero-bg {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 25% 30%, #000, transparent 72%);
}
.vg-reg-hero-inner { position: relative; z-index: 2; max-width: 480px; margin: 0 auto; width: 100%; }

.vg-reg-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.vg-reg-brand-logo {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--vg-brand-400), var(--vg-brand-700));
  display: grid; place-items: center; box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.vg-reg-brand-logo .bi { font-size: 23px; color: #fff; }
.vg-reg-brand .t { font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.vg-reg-brand .s { font-size: 12px; color: rgba(255,255,255,.62); margin-top: 1px; }

/* Trust badge — small credibility signal above the headline, reinforcing
   "premium, reviewed onboarding" before the visitor even reads the pitch. */
.vg-reg-badge {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.28);
  color: var(--vg-brand-300); font-size: 11.5px; font-weight: 700;
  padding: 5px 12px 5px 10px; border-radius: var(--vg-r-pill); margin-bottom: 16px;
  letter-spacing: .01em;
}
.vg-reg-badge .bi { font-size: 12px; }

.vg-reg-hero-inner h1 {
  font-size: 30px; font-weight: 600; line-height: 1.22; letter-spacing: -.03em;
  margin: 0 0 12px; color: #fff;
}
.vg-reg-hero-inner > p.vg-reg-hero-lede {
  font-size: 14.5px; color: rgba(255,255,255,.76); line-height: 1.6; margin: 0 0 26px;
}

.vg-reg-feat { display: flex; flex-direction: column; gap: 13px; margin-bottom: 26px; }
.vg-reg-feat .f { display: flex; gap: 13px; align-items: flex-start; padding: 8px; margin: -8px; border-radius: var(--vg-r-md); transition: background .2s; }
.vg-reg-feat .f:hover { background: rgba(255,255,255,.05); }
.vg-reg-feat .f .ic {
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(74,222,128,.20), rgba(255,255,255,.05));
  border: 1px solid rgba(74,222,128,.24);
  display: grid; place-items: center; transition: transform .2s;
}
.vg-reg-feat .f:hover .ic { transform: scale(1.06); }
.vg-reg-feat .f .ic .bi { font-size: 17px; color: var(--vg-brand-300); }
.vg-reg-feat .f .tx .t { font-weight: 500; font-size: 13.5px; color: #fff; }
.vg-reg-feat .f .tx .d { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 2px; line-height: 1.5; }

/* Glassmorphism stat strip */
.vg-reg-glass {
  position: relative; display: flex; gap: 0;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--vg-r-lg); padding: 15px 8px;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.55);
  transition: transform .25s ease, box-shadow .25s ease;
}
.vg-reg-glass:hover { transform: translateY(-3px); box-shadow: 0 30px 70px -22px rgba(0,0,0,.6); }
.vg-reg-glass .stat { flex: 1; text-align: center; padding: 0 6px; position: relative; }
.vg-reg-glass .stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px;
  background: rgba(255,255,255,.14);
}
.vg-reg-glass .stat .v { font-size: 20px; font-weight: 600; color: #fff; letter-spacing: -.02em; }
.vg-reg-glass .stat .l { font-size: 10.5px; color: rgba(255,255,255,.6); margin-top: 3px; font-weight: 500; }

/* ----------------------------------------------------------------------------
   2. Form panel (right)
   -------------------------------------------------------------------------- */
/* The panel itself no longer scrolls — it's pinned to the row's full height
   and never grows past the viewport. Its inner column (brand/head/card/foot)
   stretches to fill that same height, with only .vg-reg-card's own middle
   (.vg-reg-scroll) able to scroll — see section 3a below. */
.vg-reg-form-panel { background: var(--vg-bg); height: 100%; overflow: hidden; display: flex; justify-content: center; padding: 40px 36px 48px; }
.vg-reg-form-inner { width: 100%; max-width: 560px; height: 100%; display: flex; flex-direction: column; min-height: 0; }

.vg-reg-mobile-brand { display: none; flex: none; align-items: center; gap: 11px; margin-bottom: 24px; }
.vg-reg-mobile-brand .vg-reg-brand-logo { width: 38px; height: 38px; }
.vg-reg-mobile-brand .t { font-weight: 600; font-size: 15px; color: var(--vg-ink-900); }
.vg-reg-mobile-brand .s { font-size: 11.5px; color: var(--vg-ink-500); }

.vg-reg-head { flex: none; margin-bottom: 18px; }
.vg-reg-head h2 { font-size: 24px; font-weight: 600; color: var(--vg-ink-900); letter-spacing: -.03em; margin: 0 0 5px; }
.vg-reg-head p { font-size: 13px; color: var(--vg-ink-500); margin: 0; }
.vg-reg-head a { color: var(--vg-accent); font-weight: 500; }
.vg-reg-head a:hover { color: var(--vg-accent-700); }

/* Contains the stepper + form — a real elevated card (border + shadow)
   rather than the form sitting bare on the page background, so the whole
   registration flow reads as one solid, well-contained "product", not a
   loose stack of elements floating on the canvas.
   Fixed-height, not content-grown: the card is a flex column filling
   whatever vertical space .vg-reg-form-inner has left over after the
   heading above and (implicitly) nothing below it — the progress bar,
   stepper and error notice stay put as its "header", .vg-reg-scroll (3a)
   is the one part that scrolls internally, and .vg-reg-form-footer (3b)
   pins the submit button in view at all times. Nothing about the card
   itself ever grows the page — nothing to the right/left of this section. */
.vg-reg-card {
  background: var(--vg-surface); border: 1px solid var(--vg-ink-200);
  border-radius: var(--vg-r-lg); box-shadow: var(--vg-sh-md);
  padding: 20px 22px 24px;
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
@media (max-width: 480px) { .vg-reg-card { padding: 16px 14px 20px; } }

.vg-reg-progress, .vg-reg-stepper, #regFormError { flex: none; }

/* 3a. The one scrolling surface inside the card — everything else (progress
   bar, stepper, error notice, footer) stays fixed in place. */
#registerForm { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.vg-reg-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding-right: 4px; margin-right: -4px;
}

/* 3b. Sticky footer — submit button + reassurance line always stay visible,
   separated from the scrolling sections by a hairline divider. */
.vg-reg-form-footer { flex: none; padding-top: 14px; margin-top: 6px; border-top: 1px solid var(--vg-ink-100); }
.vg-reg-form-footer .vg-reg-submit { margin-top: 0; }

/* Overall-progress hairline — fills as steps complete (see owner-register.js
   refreshStepper()), sitting flush with the card's own rounded top corners. */
.vg-reg-progress { height: 3px; background: var(--vg-ink-100); border-radius: 2px; margin: -20px -22px 16px; overflow: hidden; }
@media (max-width: 480px) { .vg-reg-progress { margin: -16px -14px 14px; } }
.vg-reg-progress .bar { height: 100%; width: 0%; background: var(--vg-accent); border-radius: 2px; transition: width .3s ease; }

/* ----------------------------------------------------------------------------
   3. Stepper — flat, lives inside .vg-reg-card (no longer its own boxed/
      sticky element — a compact card means less scrolling to begin with).
   -------------------------------------------------------------------------- */
.vg-reg-stepper {
  display: flex; align-items: center; gap: 0; margin-bottom: 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--vg-ink-100);
}
.vg-step {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: none; padding: 2px 4px; flex: 1; min-width: 0;
  cursor: pointer; color: var(--vg-ink-400); transition: color .15s;
}
.vg-step .ix {
  width: 28px; height: 28px; border-radius: var(--vg-r-pill); flex-shrink: 0;
  background: var(--vg-ink-100); color: var(--vg-ink-500);
  display: grid; place-items: center; font-size: 12.5px; font-weight: 500;
  border: 2px solid transparent; transition: all .2s;
}
.vg-step .lb { font-size: 11px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.vg-step.is-active .ix { background: var(--vg-accent-050); color: var(--vg-accent); border-color: var(--vg-accent); }
.vg-step.is-active .lb, .vg-step.is-active { color: var(--vg-ink-900); }
.vg-step.is-complete .ix { background: var(--vg-accent); color: var(--vg-on-accent); }
.vg-step.is-complete .ix::before { content: "\f633"; font-family: "bootstrap-icons"; font-size: 13px; }
.vg-step.is-complete .ix span { display: none; }
.vg-reg-stepper .ln { flex: 0 0 18px; height: 2px; background: var(--vg-ink-200); border-radius: 2px; margin-top: -17px; transition: background .2s; }
.vg-reg-stepper .ln.is-done { background: var(--vg-accent); }

/* ----------------------------------------------------------------------------
   4. Form sections
   -------------------------------------------------------------------------- */
.vg-reg-section {
  animation: vgRegFadeUp .45s cubic-bezier(.2,.8,.2,1) both;
  margin-bottom: 4px;
}
.vg-reg-section-head { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.vg-reg-section-head .n {
  font-family: var(--vg-mono); font-size: 10.5px; font-weight: 500; color: var(--vg-accent);
  background: var(--vg-accent-050); border-radius: var(--vg-r-xs); padding: 3px 7px;
}
.vg-reg-section-head h3 { font-size: 12.5px; font-weight: 600; color: var(--vg-ink-700); text-transform: uppercase; letter-spacing: .05em; margin: 0; }

/* Every field inside this compact form sits a touch tighter than the
   theme's own default .vg-field rhythm (16px, theme.css) — scoped here so
   the panel's own CRUD forms are unaffected. */
.vg-reg-section .vg-field { margin-bottom: 12px; }
.vg-reg-section .row.g-2 > * { margin-bottom: 0; }

/* Floating labels — real Bootstrap .form-floating mechanics, restyled onto
   the --vg-* token system (no .form-control override exists elsewhere in
   this panel, confirmed, so this stays scoped rather than a global rule). */
.vg-reg-floating { position: relative; }
.vg-reg-floating > .form-control {
  height: 48px; padding: 1.35rem .85rem .3rem;
  border: 1.5px solid var(--vg-ink-200); border-radius: var(--vg-r-sm);
  background: var(--vg-surface); color: var(--vg-ink-900);
  font-size: 13.5px; font-family: var(--vg-font); box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
.vg-reg-floating > .form-control:focus {
  border-color: var(--vg-focus-border); box-shadow: var(--vg-ring); outline: none;
}
.vg-reg-floating > .form-control.is-err { border-color: var(--vg-danger); }
.vg-reg-floating > .form-control.is-err:focus { box-shadow: 0 0 0 4px rgba(217,45,32,.12); }
.vg-reg-floating > label {
  padding: .78rem .85rem; color: var(--vg-ink-500); font-size: 13.5px; font-weight: 500;
}
.vg-reg-floating > .form-control:focus ~ label,
.vg-reg-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--vg-ink-500); opacity: 1; transform: scale(.76) translateY(-.5rem) translateX(.15rem);
}
.vg-reg-floating > .form-control:focus ~ label { color: var(--vg-accent); }

.vg-reg-optional { color: var(--vg-ink-400); font-weight: 500; }

/* Password field eye toggle sits inside .form-floating (position:relative by
   Bootstrap default) — absolutely placed so it never disturbs the floating
   label's own sibling layout. */
.vg-reg-password-field .form-control { padding-right: 42px; }
.vg-reg-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: var(--vg-r-xs); border: none; background: transparent;
  color: var(--vg-ink-400); display: grid; place-items: center; z-index: 5;
}
.vg-reg-eye:hover { background: var(--vg-ink-100); color: var(--vg-ink-700); }

/* Password strength meter */
.vg-reg-strength { display: flex; align-items: center; gap: 10px; margin: 6px 2px 2px; }
.vg-reg-strength .bars { display: flex; gap: 4px; flex: 1; }
.vg-reg-strength .bars span { height: 4px; border-radius: 2px; flex: 1; background: var(--vg-ink-150, var(--vg-ink-200)); transition: background .2s; }
.vg-reg-strength .lbl { font-size: 11.5px; font-weight: 500; color: var(--vg-ink-400); min-width: 44px; text-align: right; }
.vg-reg-strength.s-weak .bars span:nth-child(1) { background: var(--vg-danger); }
.vg-reg-strength.s-weak .lbl { color: var(--vg-danger); }
.vg-reg-strength.s-fair .bars span:nth-child(1),
.vg-reg-strength.s-fair .bars span:nth-child(2) { background: var(--vg-warning); }
.vg-reg-strength.s-fair .lbl { color: var(--vg-warning-fg); }
.vg-reg-strength.s-good .bars span:nth-child(1),
.vg-reg-strength.s-good .bars span:nth-child(2),
.vg-reg-strength.s-good .bars span:nth-child(3) { background: #2563EB; }
.vg-reg-strength.s-good .lbl { color: #2563EB; }
.vg-reg-strength.s-strong .bars span { background: var(--vg-success); }
.vg-reg-strength.s-strong .lbl { color: var(--vg-success-fg); }

/* Terms checkbox row */
.vg-reg-terms { display: flex; align-items: flex-start; gap: 9px; margin: 4px 2px 16px; cursor: pointer; }
.vg-reg-terms input { margin-top: 3px; flex-shrink: 0; }
.vg-reg-terms span { font-size: 12.5px; color: var(--vg-ink-600); line-height: 1.5; }
.vg-reg-terms a { color: var(--vg-accent); font-weight: 500; }
.vg-reg-terms a:hover { text-decoration: underline; }
.vg-reg-terms.is-err span { color: var(--vg-danger); }

.vg-reg-submit {
  width: 100%; height: 46px; font-size: 14.5px; justify-content: center; margin-top: 2px;
}
.vg-reg-submit .bi { transition: transform .15s; }
.vg-reg-submit:hover .bi { transform: translateX(3px); }

/* Reassurance micro-copy under the submit button — same idea as the Super
   Admin login page's own .auth-secure, so both entry points to the product
   reinforce trust the same way. */
.vg-reg-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; font-size: 11.5px; color: var(--vg-ink-400); }
.vg-reg-secure .bi { font-size: 12.5px; }

.vg-reg-foot { flex: none; text-align: center; font-size: 13px; color: var(--vg-ink-500); margin: 18px 0 0; }
.vg-reg-foot a { color: var(--vg-accent); font-weight: 500; }
.vg-reg-foot a:hover { color: var(--vg-accent-700); }

/* Section entrance stagger */
.vg-reg-section:nth-of-type(1) { animation-delay: .02s; }
.vg-reg-section:nth-of-type(2) { animation-delay: .08s; }
.vg-reg-section:nth-of-type(3) { animation-delay: .14s; }
.vg-reg-section:nth-of-type(4) { animation-delay: .2s; }

@keyframes vgRegFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------------------
   5. Success page
   -------------------------------------------------------------------------- */
.vg-reg-success-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 32px 20px;
  background:
    radial-gradient(900px 480px at 15% -10%, rgba(34,197,94,.08), transparent 55%),
    var(--vg-bg);
}
.vg-reg-success-card {
  width: 100%; max-width: 480px; background: var(--vg-surface); border: 1px solid var(--vg-ink-200);
  border-radius: var(--vg-r-xl); box-shadow: var(--vg-sh-lg); padding: 44px 38px; text-align: center;
  animation: vgRegFadeUp .5s cubic-bezier(.2,.8,.2,1) both;
}
.vg-reg-success-ic {
  width: 76px; height: 76px; border-radius: var(--vg-r-pill); margin: 0 auto 22px;
  background: var(--vg-success-bg); border: 1px solid var(--vg-success-border);
  display: grid; place-items: center; animation: vgRegPop .5s cubic-bezier(.34,1.56,.64,1) .1s both;
}
.vg-reg-success-ic .bi { font-size: 36px; color: var(--vg-success); }
@keyframes vgRegPop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.vg-reg-success-card h1 { font-size: 22px; font-weight: 600; color: var(--vg-ink-900); letter-spacing: -.02em; margin: 0 0 10px; }
.vg-reg-success-card > p { font-size: 14px; color: var(--vg-ink-600); line-height: 1.6; margin: 0 0 22px; }
.vg-reg-success-card .vg-notice { text-align: left; margin-bottom: 24px; }
.vg-reg-success-steps { text-align: left; display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.vg-reg-success-steps .s { display: flex; gap: 12px; align-items: flex-start; }
.vg-reg-success-steps .s .ix {
  width: 26px; height: 26px; border-radius: var(--vg-r-pill); background: var(--vg-ink-100); color: var(--vg-ink-600);
  font-size: 12px; font-weight: 500; display: grid; place-items: center; flex-shrink: 0; margin-top: 1px;
}
.vg-reg-success-steps .s .tx { font-size: 13px; color: var(--vg-ink-600); line-height: 1.5; }
.vg-reg-success-steps .s .tx b { color: var(--vg-ink-900); }

/* ----------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .vg-reg-wrap { grid-template-columns: 1fr; }
  .vg-reg-hero { display: none; }
  .vg-reg-mobile-brand { display: flex; }
  .vg-reg-form-panel { padding: 28px 18px 40px; }
  .vg-step .lb { display: none; }
}
@media (max-width: 480px) {
  .vg-reg-form-panel { padding: 22px 12px 36px; }
  .vg-reg-head h2 { font-size: 20px; }
  .vg-reg-card { padding: 14px 12px 18px; }
  .vg-reg-progress { margin: -14px -12px 14px; }
  .vg-reg-success-card { padding: 32px 22px; }
}

/* ----------------------------------------------------------------------------
   7. Legal document modals (Terms & Conditions / Privacy Policy) — content is
      rendered dynamically from Settings (see partials/legal-modal.blade.php,
      included twice from register.blade.php), read live via setting() so this
      always matches the standalone /legal/{doc} page and the admin CKEditor
      preview exactly.
   -------------------------------------------------------------------------- */
.vg-legal-modal .modal-content {
  border: none; border-radius: var(--vg-r-lg); box-shadow: var(--vg-sh-lg);
  overflow: hidden; background: var(--vg-surface);
}

/* Custom header — icon badge (tone matches the doc: green for Terms, blue
   for Privacy) + title only, replacing Bootstrap's plain .modal-header —
   deliberately no meta/date line here (kept on the standalone /legal/{doc}
   page's own header instead; this one stays lean since it's a quick popup,
   not a destination page). */
.vg-legal-modal-head {
  display: flex; align-items: center; gap: 13px;
  padding: 18px 22px; border-bottom: 1px solid var(--vg-ink-100);
}
.vg-legal-modal-icon {
  width: 40px; height: 40px; border-radius: var(--vg-r-md); flex-shrink: 0;
  display: grid; place-items: center;
}
.vg-legal-modal-icon .bi { font-size: 19px; }
.vg-legal-modal-icon.green { background: var(--vg-success-bg); color: var(--vg-success); }
.vg-legal-modal-icon.blue  { background: var(--vg-info-bg);    color: var(--vg-info); }
.vg-legal-modal-head .modal-title { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; color: var(--vg-ink-900); letter-spacing: -.01em; }
.vg-legal-modal-head .btn-close { flex-shrink: 0; }

/* Body — a "readable document" treatment rather than a flat wall of text:
   every top-level paragraph becomes a numbered clause card (a small circular
   index badge + a soft inset background), which reads far better for a
   Terms/Privacy-style document than plain stacked <p> tags, and needs no
   real heading structure in the underlying content to look organised. Falls
   back gracefully — any real heading/list/table markup a future edit adds
   via CKEditor is still styled normally below. */
.vg-legal-prose {
  padding: 18px 22px 20px; font-size: 14px; line-height: 1.75; color: var(--vg-ink-700);
  counter-reset: legalClause;
}
.vg-legal-prose > p {
  position: relative; counter-increment: legalClause;
  margin: 0 0 12px; padding: 14px 16px 14px 46px;
  background: var(--vg-surface-2); border: 1px solid var(--vg-ink-100); border-radius: var(--vg-r-md);
}
.vg-legal-prose > p::before {
  content: counter(legalClause); position: absolute; left: 14px; top: 14px;
  width: 20px; height: 20px; border-radius: var(--vg-r-pill);
  background: var(--vg-accent-100); color: var(--vg-accent-700);
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
.vg-legal-prose h1 { font-size: 20px; font-weight: 700; margin: 0 0 12px; color: var(--vg-ink-900); }
.vg-legal-prose h2 { font-size: 16.5px; font-weight: 700; margin: 20px 0 8px; color: var(--vg-ink-900); }
.vg-legal-prose h3 { font-size: 14.5px; font-weight: 700; margin: 16px 0 7px; color: var(--vg-ink-900); }
.vg-legal-prose ul, .vg-legal-prose ol { margin: 0 0 13px; padding-left: 20px; }
.vg-legal-prose li { margin-bottom: 5px; }
.vg-legal-prose blockquote {
  margin: 0 0 13px; padding: 9px 14px; border-left: 3px solid var(--vg-brand-400);
  background: var(--vg-surface-2); color: var(--vg-ink-600); border-radius: 0 var(--vg-r-sm) var(--vg-r-sm) 0;
}
.vg-legal-prose table { width: 100%; border-collapse: collapse; margin: 0 0 13px; }
.vg-legal-prose table td, .vg-legal-prose table th { border: 1px solid var(--vg-ink-200); padding: 7px 9px; }
.vg-legal-prose a { color: var(--vg-accent); font-weight: 600; }
.vg-legal-prose a:hover { color: var(--vg-accent-700); text-decoration: underline; }

/* Nicer scrollbar for the long-form scrollable body (modal-dialog-scrollable
   caps its height and scrolls internally on longer documents). */
.vg-legal-modal .modal-body::-webkit-scrollbar { width: 8px; }
.vg-legal-modal .modal-body::-webkit-scrollbar-thumb { background: var(--vg-ink-200); border-radius: 4px; }
.vg-legal-modal .modal-body::-webkit-scrollbar-thumb:hover { background: var(--vg-ink-300); }

/* Footer — "Open full page" restyled as a ghost link-button (icon + text)
   instead of a bare inline link, Close stays the theme's own .btn-light2. */
.vg-legal-modal-foot { border-top: 1px solid var(--vg-ink-100); padding: 14px 22px; gap: 8px; }
.vg-legal-modal-link {
  display: inline-flex; align-items: center; gap: 6px; margin-right: auto;
  font-size: 13px; font-weight: 500; color: var(--vg-ink-600);
  padding: 7px 11px; border-radius: var(--vg-r-sm); transition: background .15s, color .15s;
}
.vg-legal-modal-link:hover { background: var(--vg-ink-100); color: var(--vg-ink-900); }
.vg-legal-modal-link .bi { font-size: 13px; }

@media (max-width: 480px) {
  .vg-legal-modal-head { padding: 14px 16px; gap: 10px; }
  .vg-legal-modal-icon { width: 36px; height: 36px; }
  .vg-legal-modal-icon .bi { font-size: 17px; }
  .vg-legal-prose { padding: 14px 16px 16px; }
  .vg-legal-prose > p { padding: 12px 12px 12px 40px; }
  .vg-legal-modal-foot { padding: 12px 16px; }
}