/* ==========================================================================
   Jebly vendor registration — /vendor/apply (vendor-views/auth/general-info).

   Loaded after landing.css, which supplies every token, the .jb element
   reset and the shared components this sheet composes (.jb-btn, .jb-input,
   .jb-disc, .jb-container, .jb-enter), and after the legacy main.css, whose
   registration rules (.__form-control, .upload-area, .delivery-time-*, the
   map controls, .plan-check-item, .__plan-item) still reach this page. The
   view keeps those class names because its own scripts, map-functionality.js,
   store-join-us.js and the shared package partial select some of them, so
   every rule below is scoped under .vreg and outranks the legacy ones.

   Nothing here may contain a raw hex colour, radius, duration or easing
   curve — reference a --jb-* token instead.

   Order: 1 shell · 2 hero · 3 rail + character · 4 progress · 5 sheet
          6 fields · 7 composite controls · 8 business plan · 9 responsive
          10 reduced motion · 11 keyframes · 12 dark theme
   ========================================================================== */

/* ============================== 1 · SHELL ================================ */

.vreg {
  --vreg-rail: 328px;
  --vreg-control-h: var(--jb-control-h-inline);
  --vreg-lead: calc(var(--jb-sp-16) + var(--jb-icon) + var(--jb-sp-12));
  --vreg-ring: 0 0 0 3px var(--jb-primary-a25);
  position: relative;
  /* The site header is fixed, so the page reserves its height itself. */
  padding-block: calc(var(--jb-nav-height) + var(--jb-sp-32)) var(--jb-sp-96);
  background:
    radial-gradient(56% 42% at 14% 0%, var(--jb-soft-primary) 0%, transparent 72%),
    var(--jb-background);
}

/* bs4: Bootstrap's reboot puts a bottom margin on headings, <p>, <ul> and
   <label>, which beats the zero-specificity reset in landing.css. Restated
   inside :where() so every component class below still outranks it. */
.vreg :where(h1, h2, h3, h4, h5, p, label, ul, ol, figure) { margin: 0; }
.vreg :where(ul, ol) { padding: 0; list-style: none; }
.vreg :where(label) { display: inline-block; }
.vreg :where(small) { font-size: var(--jb-fs-xs); }
/* bs4: .text-danger is !important in Bootstrap, so the brand error colour
   needs the same weight. */
.vreg .text-danger { color: var(--jb-error) !important; }

.vreg-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--vreg-rail)) minmax(0, 1fr);
  gap: var(--jb-sp-32);
  align-items: start;
}
.vreg-grid > *, .vreg-row > *, .vreg-field, .vreg-control { min-inline-size: 0; }


/* =============================== 2 · HERO ================================ */

.vreg-hero {
  display: grid;
  gap: var(--jb-sp-12);
  max-inline-size: 760px;
  margin-block-end: var(--jb-sp-48);
}
.vreg-chip {
  display: inline-flex; align-items: center; gap: var(--jb-sp-8);
  inline-size: fit-content;
  padding: var(--jb-sp-8) var(--jb-sp-16);
  padding-inline-start: var(--jb-sp-12);
  border: var(--jb-hairline) solid var(--jb-chip-border);
  border-radius: var(--jb-radius-pill);
  background: var(--jb-surface);
  color: var(--jb-accent-primary-text);
  font-size: var(--jb-fs-sm); font-weight: var(--jb-fw-medium);
  box-shadow: var(--jb-shadow-glow);
}
.vreg-chip svg { inline-size: var(--jb-icon-sm); block-size: var(--jb-icon-sm); flex: none; }
.vreg-hero__title {
  font-size: var(--jb-fs-h1); line-height: var(--jb-lh-h1);
  letter-spacing: -0.01em;
}
.vreg-hero__lead {
  max-inline-size: 52ch;
  font-size: var(--jb-fs-lead); line-height: var(--jb-lh-lead);
  color: var(--jb-text-secondary);
}
.vreg-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--jb-sp-8);
  font-size: var(--jb-fs-sm); color: var(--jb-text-secondary);
}
.vreg-crumbs a { color: var(--jb-accent-primary-text); font-weight: var(--jb-fw-medium); }
.vreg-crumbs a:hover { text-decoration: underline; }
.vreg-crumbs__sep { color: var(--jb-hint); }


/* ========================= 3 · RAIL + CHARACTER ========================== */

.vreg-rail {
  position: sticky;
  inset-block-start: calc(var(--jb-nav-height) + var(--jb-sp-24));
  display: grid;
  gap: var(--jb-sp-16);
}

/* The stage: a brand-gradient panel the character stands in. */
.vreg-stage {
  --vreg-stage: 212px;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center;
  min-block-size: calc(var(--vreg-stage) + var(--jb-sp-64));
  padding: var(--jb-sp-24);
  border: var(--jb-hairline) solid var(--jb-on-inverse-70);
  border-radius: var(--jb-radius-extra-large);
  background:
    radial-gradient(40% 36% at 86% 90%, var(--jb-primary-a12) 0%, transparent 100%),
    var(--jb-gradient-brand);
}
/* Two decorative rings, clipped to the panel. */
.vreg-stage::before, .vreg-stage::after {
  content: "";
  position: absolute; z-index: -1;
  inline-size: 80%; aspect-ratio: 1;
  inset-inline-end: -34%; inset-block-end: -30%;
  border: var(--jb-hairline) solid var(--jb-on-inverse-70);
  border-radius: 50%;
  pointer-events: none;
}
.vreg-stage::after { inline-size: 104%; inset-inline-end: -46%; inset-block-end: -42%; }

.vreg-stage__route {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  pointer-events: none;
}
.vreg-stage__route path {
  stroke: var(--jb-accent-primary-text); stroke-opacity: .28;
  stroke-width: 1.5; stroke-dasharray: 4 10; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: vreg-route calc(var(--jb-motion-slow) * 40) linear infinite;
}
.vreg-stage__route path + path { animation-direction: reverse; }

/* The disc the character stands on, with one ring breathing out of it. */
.vreg-stage__disc {
  position: absolute;
  inset-inline-start: 50%; inset-block-start: 52%;
  translate: -50% -50%;
  inline-size: var(--vreg-stage); aspect-ratio: 1;
  border-radius: 50%;
  border: var(--jb-hairline) solid var(--jb-on-inverse-70);
  background: radial-gradient(circle at 50% 40%, var(--jb-surface) 0%, var(--jb-on-inverse-56) 55%, transparent 72%);
  pointer-events: none;
}
[dir="rtl"] .vreg-stage__disc { translate: 50% -50%; }
.vreg-stage__disc::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  border: var(--jb-focus-width) solid var(--jb-primary-a25);
  animation: vreg-ring calc(var(--jb-motion-slow) * 8) var(--jb-ease-out) infinite;
}

.vreg-stage__chip {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--jb-sp-8);
  min-inline-size: var(--jb-disc); block-size: var(--jb-disc);
  padding-inline: var(--jb-sp-12);
  border: var(--jb-hairline) solid var(--jb-primary-a12);
  border-radius: var(--jb-radius-card);
  background: var(--jb-surface); color: var(--jb-accent-primary-text);
  box-shadow: var(--jb-shadow-float);
  pointer-events: none;
  animation: vreg-bob calc(var(--jb-motion-slow) * 9) var(--jb-ease-in-out) infinite;
}
.vreg-stage__chip svg { inline-size: var(--jb-icon-lg); block-size: var(--jb-icon-lg); flex: none; }
.vreg-stage__chip i {
  display: block; inline-size: var(--jb-sp-32); block-size: var(--jb-sp-4);
  border-radius: var(--jb-radius-pill); background: var(--jb-primary-a25);
}
.vreg-stage__chip i + i { inline-size: var(--jb-sp-20); }
.vreg-stage__chip--receipt { inset-inline-start: 6%; inset-block-start: 10%; rotate: calc(var(--jb-dir) * -6deg); }
.vreg-stage__chip--store { inset-inline-end: 7%; inset-block-start: 14%; animation-delay: calc(var(--jb-motion-slow) * -3); }
.vreg-stage__chip--done {
  inset-inline-start: 10%; inset-block-end: 12%;
  min-inline-size: var(--jb-disc-sm); block-size: var(--jb-disc-sm); padding: 0;
  border-radius: var(--jb-radius-pill);
  background: var(--jb-primary); color: var(--jb-on-primary); border-color: var(--jb-primary);
  box-shadow: var(--jb-shadow-glow-strong);
  animation-delay: calc(var(--jb-motion-slow) * -6);
}
.vreg-stage__chip--done svg { inline-size: var(--jb-icon); block-size: var(--jb-icon); stroke-width: 2.5; }

/* The official Jebly character (public/assets/states): one <img> per pose,
   stacked; data-mood (set by register.js) fades the matching one in.
   --vreg-look-* is a gentle tilt toward the pointer while idle. */
.vreg-mascot {
  --vreg-look-x: 0;
  --vreg-look-y: 0;
  position: relative; z-index: 1;
  inline-size: calc(var(--vreg-stage) * .86);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: vreg-pop calc(var(--jb-motion-slow) * 2) var(--jb-ease-out) both;
  animation-delay: calc(var(--jb-stagger) * 5);
}
.vreg-mascot__frame {
  position: relative;
  aspect-ratio: 1;
  transform: rotate(calc(var(--vreg-look-x) * 3deg)) translate(calc(var(--vreg-look-x) * 4px), calc(var(--vreg-look-y) * 3px));
  transition: transform var(--jb-motion-base) var(--jb-ease-out);
  animation: vreg-float calc(var(--jb-motion-slow) * 8) var(--jb-ease-in-out) infinite;
}
.vreg-mascot:hover .vreg-mascot__frame { transform: scale(1.04); }
.vreg-mascot__pose {
  position: absolute; inset: 0;
  display: block; inline-size: 100%; block-size: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translateY(var(--jb-sp-8)) scale(.96);
  transition: opacity var(--jb-motion-base) var(--jb-ease-out),
              transform var(--jb-motion-base) var(--jb-ease-out);
}
/* The ready-for-pickup artwork is cropped tighter than the rest. */
.vreg-mascot__pose--cheer { padding: 14% 14% 6%; }
.vreg-mascot[data-mood="idle"]  .vreg-mascot__pose--idle,
.vreg-mascot[data-mood="watch"] .vreg-mascot__pose--watch,
.vreg-mascot[data-mood="happy"] .vreg-mascot__pose--happy,
.vreg-mascot[data-mood="cheer"] .vreg-mascot__pose--cheer,
.vreg-mascot[data-mood="error"] .vreg-mascot__pose--error { opacity: 1; transform: none; }
.vreg-mascot[data-mood="watch"] .vreg-mascot__frame {
  transform: rotate(calc(var(--jb-dir) * 4deg)) translateX(calc(var(--jb-dir) * var(--jb-sp-8)));
}
.vreg-mascot[data-mood="happy"] .vreg-mascot__frame,
.vreg-mascot[data-mood="cheer"] .vreg-mascot__frame {
  animation: vreg-hop calc(var(--jb-motion-slow) * 2) var(--jb-ease-out) infinite;
}
.vreg-mascot[data-mood="error"] .vreg-mascot__frame {
  animation: vreg-shake calc(var(--jb-motion-slow) * 1.2) var(--jb-ease-out) both;
}
.vreg-mascot__shadow {
  position: absolute; z-index: -1;
  inset-inline: 18%; inset-block-end: 3%;
  block-size: var(--jb-sp-12);
  border-radius: 50%;
  background: var(--jb-primary-a25);
  filter: blur(4px);
  animation: vreg-shadow calc(var(--jb-motion-slow) * 8) var(--jb-ease-in-out) infinite;
}

.vreg-rail__copy {
  padding-inline: var(--jb-sp-8);
  font-size: var(--jb-fs-sm); line-height: var(--jb-lh-lead);
  color: var(--jb-text-secondary);
}

/* Feature cards: what the vendor gets once approved. */
.vreg-feats { display: grid; gap: var(--jb-sp-12); }
.vreg-feat {
  display: flex; align-items: center; gap: var(--jb-sp-12);
  padding: var(--jb-sp-12) var(--jb-sp-16);
  padding-inline-start: var(--jb-sp-12);
  border: var(--jb-hairline) solid var(--jb-chip-border);
  border-radius: var(--jb-radius-card);
  background: var(--jb-surface);
  color: var(--jb-text-primary);
  font-size: var(--jb-fs-sm); font-weight: var(--jb-fw-medium);
  line-height: var(--jb-lh-h4);
}


/* ============================= 4 · PROGRESS ============================== */

.vreg-progress {
  margin-block-end: var(--jb-sp-24);
  padding: var(--jb-sp-20) var(--jb-sp-24);
  border: var(--jb-hairline) solid var(--jb-chip-border);
  border-radius: var(--jb-radius-extra-large);
  background: var(--jb-surface);
}
.vreg-steps {
  --vreg-ratio: 0;
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--jb-sp-8);
}
/* Track and fill run between the first and last node centres. */
.vreg-steps::before, .vreg-steps::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(100% / 6);
  inset-block-start: calc(var(--jb-disc-sm) / 2);
  inline-size: calc(100% - 100% / 3);
  block-size: var(--jb-focus-width);
  translate: 0 -50%;
  border-radius: var(--jb-radius-pill);
  background: var(--jb-chip-border);
}
.vreg-steps::after {
  inline-size: calc((100% - 100% / 3) * var(--vreg-ratio));
  background: var(--jb-primary);
  box-shadow: var(--jb-shadow-glow);
  transition: inline-size var(--jb-motion-slow) var(--jb-ease-in-out);
}
.vreg-steps[data-step="2"], .vreg-steps:has(#show-step2.active) { --vreg-ratio: .5; }
.vreg-steps[data-step="3"] { --vreg-ratio: 1; }

.vreg-step {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: var(--jb-sp-8);
  text-align: center;
  color: var(--jb-text-secondary);
  font-size: var(--jb-fs-sm); font-weight: var(--jb-fw-medium);
  line-height: 1.3;
  transition: color var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg-step__node {
  display: grid; place-items: center;
  inline-size: var(--jb-disc-sm); block-size: var(--jb-disc-sm);
  border: var(--jb-hairline) solid var(--jb-chip-border);
  border-radius: var(--jb-radius-pill);
  background: var(--jb-surface);
  color: var(--jb-text-secondary);
  font-size: var(--jb-fs-sm); font-weight: var(--jb-fw-semibold);
  transition: background-color var(--jb-motion-fast) var(--jb-ease-out),
              border-color var(--jb-motion-fast) var(--jb-ease-out),
              color var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg-step__node svg { display: none; inline-size: var(--jb-icon-sm); block-size: var(--jb-icon-sm); stroke-width: 2.5; }
.vreg-step.active { color: var(--jb-text-primary); }
.vreg-step.active .vreg-step__node {
  background: var(--jb-primary); border-color: var(--jb-primary); color: var(--jb-on-primary);
  animation: vreg-pulse calc(var(--jb-motion-slow) * 4) var(--jb-ease-out) infinite;
}
/* Step 1 is done once step 2 is active. */
.vreg-steps[data-step="2"] #show-step1 .vreg-step__node,
.vreg-steps:has(#show-step2.active) #show-step1 .vreg-step__node {
  background: var(--jb-soft-primary); border-color: var(--jb-primary); color: var(--jb-accent-primary-text);
  animation: none;
}
.vreg-steps[data-step="2"] #show-step1 .vreg-step__num,
.vreg-steps:has(#show-step2.active) #show-step1 .vreg-step__num { display: none; }
.vreg-steps[data-step="2"] #show-step1 .vreg-step__node svg,
.vreg-steps:has(#show-step2.active) #show-step1 .vreg-step__node svg { display: block; }
.vreg-steps[data-step="2"] #show-step1,
.vreg-steps:has(#show-step2.active) #show-step1 { color: var(--jb-accent-primary-text); }


/* =============================== 5 · SHEET =============================== */

.vreg-sheet {
  padding: var(--jb-sp-32);
  border: var(--jb-hairline) solid var(--jb-chip-border);
  border-radius: var(--jb-radius-extra-large);
  background: var(--jb-surface);
}
.vreg-section + .vreg-section {
  margin-block-start: var(--jb-sp-32);
  padding-block-start: var(--jb-sp-32);
  border-block-start: var(--jb-hairline) solid var(--jb-chip-border);
}
.vreg-section__head {
  display: flex; align-items: center; gap: var(--jb-sp-12);
  margin-block-end: var(--jb-sp-24);
}
.vreg-section__head--sub { margin-block: var(--jb-sp-24) var(--jb-sp-16); }
.vreg-section__title {
  font-size: var(--jb-fs-h4); line-height: var(--jb-lh-h4);
  font-weight: var(--jb-fw-semibold);
}
.vreg-section__body { display: grid; gap: var(--jb-sp-20); }
.vreg-stack { display: grid; gap: var(--jb-sp-20); align-content: start; }

.vreg-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jb-sp-20);
  align-items: start;
}
.vreg-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vreg-row--media { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.vreg-row--tin { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.vreg-row--map { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }


/* ============================== 6 · FIELDS =============================== */

.vreg-field { display: grid; gap: var(--jb-sp-8); align-content: start; }
.vreg-label {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--jb-sp-4);
  font-size: var(--jb-fs-sm); font-weight: var(--jb-fw-medium); line-height: 1.3;
  color: var(--jb-text-primary);
}
.vreg-label small { font-weight: var(--jb-fw-regular); }
.vreg-label .reg-info-icon {
  inline-size: var(--jb-icon-sm); block-size: var(--jb-icon-sm);
  object-fit: contain; opacity: .7;
}
.vreg-note { font-size: var(--jb-fs-xs); font-weight: var(--jb-fw-regular); color: var(--jb-text-secondary); }

.vreg-control { position: relative; display: block; }
.vreg-control__lead, .vreg-control__caret {
  position: absolute;
  inset-block-start: calc(var(--vreg-control-h) / 2);
  translate: 0 -50%;
  inline-size: var(--jb-icon); block-size: var(--jb-icon);
  color: var(--jb-hint);
  pointer-events: none;
  transition: color var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg-control__lead { inset-inline-start: var(--jb-sp-16); }
.vreg-control__caret { inset-inline-end: var(--jb-sp-12); color: var(--jb-text-secondary); }
.vreg-control--top .vreg-control__lead { inset-block-start: var(--jb-sp-16); translate: none; }
.vreg-control:focus-within .vreg-control__lead,
.vreg-control:focus-within .vreg-control__caret { color: var(--jb-accent-primary-text); }

/* .jb-input owns the box. bs4's .form-control and main.css's .__form-control
   are still on these inputs (the view keeps its class names), so the box is
   restated at (0,2,0) to outrank both. */
.vreg .jb-input {
  display: block;
  inline-size: 100%; min-inline-size: 0;
  block-size: var(--vreg-control-h); min-block-size: 0;
  padding: 0 var(--jb-sp-16);
  border: var(--jb-hairline) solid var(--jb-chip-border);
  border-radius: var(--jb-radius-medium);
  background: var(--jb-background);
  color: var(--jb-text-primary);
  font-size: var(--jb-fs-body); line-height: normal;
  box-shadow: none;
  transition: border-color var(--jb-motion-fast) var(--jb-ease-out),
              box-shadow var(--jb-motion-fast) var(--jb-ease-out),
              background-color var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg .jb-input::placeholder { color: var(--jb-hint); }
.vreg .jb-input:hover { border-color: var(--jb-border); }
.vreg .jb-input:focus {
  outline: none;
  border-color: var(--jb-primary);
  background: var(--jb-surface);
  box-shadow: var(--vreg-ring);
}
.vreg .jb-input:-webkit-autofill { -webkit-text-fill-color: var(--jb-text-primary); }
.vreg .vreg-control--lead .jb-input { padding-inline-start: var(--vreg-lead); }
.vreg .vreg-control--select .jb-input { padding-inline-end: calc(var(--jb-sp-12) + var(--jb-icon) + var(--jb-sp-8)); }
.vreg textarea.jb-input {
  block-size: auto; min-block-size: 112px;
  padding-block: var(--jb-sp-12);
  line-height: var(--jb-lh-lead);
  resize: vertical;
}
.vreg select.jb-input { appearance: none; -webkit-appearance: none; cursor: pointer; }
.vreg input[type="date"].jb-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }

/* --- select2 (zone, pickup zones) --------------------------------------- */
.vreg .select2-container { inline-size: 100% !important; }
.vreg .select2-container--default .select2-selection--single,
.vreg .select2-container--default .select2-selection--multiple {
  display: flex; align-items: center;
  min-block-size: var(--vreg-control-h); block-size: auto;
  padding-inline: var(--jb-sp-16);
  border: var(--jb-hairline) solid var(--jb-chip-border);
  border-radius: var(--jb-radius-medium);
  background: var(--jb-background);
  transition: border-color var(--jb-motion-fast) var(--jb-ease-out),
              box-shadow var(--jb-motion-fast) var(--jb-ease-out),
              background-color var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg .select2-container--default .select2-selection--single { block-size: var(--vreg-control-h); }
.vreg .select2-container--default:hover .select2-selection--single,
.vreg .select2-container--default:hover .select2-selection--multiple { border-color: var(--jb-border); }
.vreg .select2-container--default.select2-container--open .select2-selection--single,
.vreg .select2-container--default.select2-container--focus .select2-selection--single,
.vreg .select2-container--default.select2-container--open .select2-selection--multiple,
.vreg .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--jb-primary);
  background: var(--jb-surface);
  box-shadow: var(--vreg-ring);
}
.vreg .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0; line-height: normal;
  color: var(--jb-text-primary); font-size: var(--jb-fs-body);
}
.vreg .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--jb-hint); }
.vreg .select2-container--default .select2-selection--single .select2-selection__arrow {
  inset-block-start: 0; inset-inline-end: var(--jb-sp-8);
  block-size: var(--vreg-control-h) !important; inline-size: var(--jb-sp-24) !important;
}
.vreg .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--jb-text-secondary) transparent transparent;
}
.vreg .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--jb-accent-primary-text);
}
.vreg .select2-container--default .select2-selection--multiple { padding-inline: var(--jb-sp-8); }
.vreg .multiple-select2 + .select2-container--default .select2-selection--multiple ul.select2-selection__rendered {
  block-size: auto; min-block-size: calc(var(--vreg-control-h) - var(--jb-focus-width));
  padding: 0; gap: var(--jb-sp-4);
}
.vreg .pickup-zone-tag .multiple-select2 + .select2-container--default .select2-selection--multiple ul.select2-selection__rendered .name {
  background: var(--jb-soft-primary) !important;
  color: var(--jb-accent-primary-text) !important;
  border-radius: var(--jb-radius-pill) !important;
  font-size: var(--jb-fs-xs);
}
/* The dropdown is appended to <body>, outside .vreg. */
.select2-container--default .select2-dropdown {
  overflow: hidden;
  border: var(--jb-hairline) solid var(--jb-chip-border);
  border-radius: var(--jb-radius-medium);
  background: var(--jb-surface);
  box-shadow: var(--jb-shadow-float);
  font-family: var(--jb-font);
}
.select2-container--default .select2-search--dropdown { padding: var(--jb-sp-8); }
.select2-container--default .select2-search--dropdown .select2-search__field {
  block-size: var(--jb-control-h-sm);
  padding-inline: var(--jb-sp-12);
  border: var(--jb-hairline) solid var(--jb-chip-border);
  border-radius: var(--jb-radius-medium);
  font: inherit; font-size: var(--jb-fs-sm);
  outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--jb-primary); }
.select2-container--default .select2-results__option {
  padding: var(--jb-sp-8) var(--jb-sp-12);
  font-size: var(--jb-fs-sm);
  color: var(--jb-text-primary);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--jb-soft-primary) !important;
  color: var(--jb-accent-primary-text) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--jb-chip-background) !important;
  color: var(--jb-text-primary) !important;
}


/* ======================== 7 · COMPOSITE CONTROLS ========================= */

/* --- delivery time: min · max on one row, the unit below, in one box ----- */
.vreg .delivery-time-group {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto minmax(0, 1fr);
  align-items: center; gap: var(--jb-sp-8);
  padding: var(--jb-sp-4);
  border: var(--jb-hairline) solid var(--jb-chip-border);
  border-radius: var(--jb-radius-medium);
  background: var(--jb-background);
  transition: border-color var(--jb-motion-fast) var(--jb-ease-out),
              box-shadow var(--jb-motion-fast) var(--jb-ease-out),
              background-color var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg .delivery-time-group:focus-within {
  border-color: var(--jb-primary); background: var(--jb-surface); box-shadow: var(--vreg-ring);
}
.vreg .delivery-time-label {
  padding-inline-start: var(--jb-sp-8);
  font-size: var(--jb-fs-sm); font-weight: var(--jb-fw-medium);
  color: var(--jb-text-secondary);
}
.vreg .delivery-time-divider {
  inline-size: var(--jb-hairline); block-size: var(--jb-sp-24);
  background: var(--jb-chip-border);
}
.vreg .delivery-time-input, .vreg .delivery-time-unit {
  inline-size: 100%; min-inline-size: 0;
  block-size: calc(var(--vreg-control-h) - var(--jb-sp-8)); min-block-size: 0;
  padding: 0 var(--jb-sp-12);
  border: 0; border-radius: var(--jb-radius-medium);
  background: var(--jb-surface);
  color: var(--jb-text-primary);
  font-size: var(--jb-fs-body);
  box-shadow: none;
}
.vreg .delivery-time-input::placeholder { color: var(--jb-hint); }
.vreg .delivery-time-input:focus, .vreg .delivery-time-unit:focus {
  outline: none;
  box-shadow: inset 0 0 0 var(--jb-hairline) var(--jb-primary);
}
.vreg-unit { position: relative; display: block; min-inline-size: 0; grid-column: 1 / -1; }
.vreg-unit .delivery-time-unit {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-inline-end: calc(var(--jb-sp-12) + var(--jb-icon) + var(--jb-sp-4));
}
.vreg-unit .vreg-control__caret { inset-block-start: 50%; inset-inline-end: var(--jb-sp-8); }

/* --- map --------------------------------------------------------------- */
.vreg .map_custom-controls {
  position: relative; overflow: hidden;
  min-block-size: 0;
  border: var(--jb-hairline) solid var(--jb-chip-border);
  border-radius: var(--jb-radius-card);
  background: var(--jb-soft-primary);
}
.vreg .map_custom-controls #map { inline-size: 100%; block-size: 352px; min-block-size: 0; }
.vreg .map_custom-controls .controls {
  position: absolute; z-index: 2;
  inset-block-start: var(--jb-sp-12); inset-inline: var(--jb-sp-12);
  inline-size: calc(100% - var(--jb-sp-24));
  block-size: var(--jb-control-h-sm); min-block-size: 0;
  padding: 0 var(--jb-sp-16);
  border: var(--jb-hairline) solid var(--jb-chip-border);
  border-radius: var(--jb-radius-medium);
  background: var(--jb-surface);
  color: var(--jb-text-primary);
  font: inherit; font-size: var(--jb-fs-sm);
  box-shadow: var(--jb-shadow-float);
}
.vreg .map_custom-controls .controls:focus { outline: none; border-color: var(--jb-primary); box-shadow: var(--vreg-ring); }
.vreg .laglng-controller {
  position: absolute; z-index: 2;
  inset-inline: var(--jb-sp-12); inset-block-end: var(--jb-sp-12);
  display: flex; align-items: center; gap: var(--jb-sp-8);
  min-block-size: var(--jb-control-h-sm);
  padding: var(--jb-sp-4) var(--jb-sp-12);
  border: var(--jb-hairline) solid var(--jb-chip-border);
  border-radius: var(--jb-radius-medium);
  background: var(--jb-surface) !important;
  box-shadow: var(--jb-shadow-float);
}
.vreg .laglng-controller #latlng { display: flex; align-items: center; gap: var(--jb-sp-8); inline-size: 100%; }
.vreg .laglng-controller input {
  inline-size: 100%; min-inline-size: 0;
  border: 0; background: transparent; outline: none;
  color: var(--jb-text-primary); font-size: var(--jb-fs-xs);
}
.vreg .laglng-controller .text-gray1 { color: var(--jb-hint); }
.vreg .map-alert {
  position: absolute; z-index: 3;
  inset-block-start: calc(var(--jb-sp-12) + var(--jb-control-h-sm) + var(--jb-sp-8));
  inset-inline: var(--jb-sp-12);
  gap: var(--jb-sp-8);
  border-radius: var(--jb-radius-medium);
  background: var(--jb-inverse-surface) !important;
  color: var(--jb-on-inverse) !important;
  font-size: var(--jb-fs-xs);
}

/* --- image drop zones (cover, logo) -------------------------------------- */
.vreg .upload-area {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  min-block-size: 0; aspect-ratio: 2 / 1;
  border: var(--jb-focus-width) dashed var(--jb-chip-border);
  border-radius: var(--jb-radius-card);
  background: var(--jb-background);
  color: var(--jb-text-secondary);
  text-align: center; cursor: pointer;
  transition: border-color var(--jb-motion-fast) var(--jb-ease-out),
              background-color var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg .upload-area--square { aspect-ratio: 1; }
.vreg .upload-area:hover, .vreg .upload-area:focus-within {
  border-color: var(--jb-primary); background: var(--jb-soft-primary);
}
.vreg .upload-area.has-preview { border-style: solid; }
.vreg .upload-area input[type="file"] {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  opacity: 0; cursor: pointer;
}
.vreg .upload-placeholder { display: grid; justify-items: center; gap: var(--jb-sp-4); padding: var(--jb-sp-16); }
.vreg .upload-icon {
  display: grid; place-items: center;
  inline-size: var(--jb-disc); block-size: var(--jb-disc);
  margin: 0 0 var(--jb-sp-8);
  border-radius: var(--jb-radius-card);
  background: var(--jb-surface); color: var(--jb-accent-primary-text);
  box-shadow: var(--jb-shadow-glow);
  transition: transform var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg .upload-icon svg { inline-size: var(--jb-icon-lg); block-size: var(--jb-icon-lg); }
.vreg .upload-area:hover .upload-icon { transform: translateY(var(--jb-lift)); }
.vreg .upload-placeholder p { font-size: var(--jb-fs-sm); color: var(--jb-text-primary); }
.vreg .upload-note { font-size: var(--jb-fs-xs); color: var(--jb-text-secondary); }
.vreg .upload-change {
  position: absolute; z-index: 1;
  inset-inline: var(--jb-sp-12); inset-block-end: var(--jb-sp-12);
  display: none;
  padding: var(--jb-sp-8) var(--jb-sp-12);
  border-radius: var(--jb-radius-medium);
  background: var(--jb-scrim); color: var(--jb-on-inverse);
  font-size: var(--jb-fs-xs); font-weight: var(--jb-fw-medium);
}
.vreg .upload-area.has-preview .upload-change { display: block; }
.vreg .upload-area.has-preview .upload-placeholder { display: none; }
.vreg .preview-img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* --- TIN certificate (store-join-us.js builds the preview inside) -------- */
.vreg .single-document-uploaderwrap {
  position: relative;
  block-size: 100%;
  border: var(--jb-focus-width) dashed var(--jb-chip-border);
  border-radius: var(--jb-radius-card);
  background: var(--jb-background) !important;
  transition: border-color var(--jb-motion-fast) var(--jb-ease-out),
              background-color var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg .single-document-uploaderwrap:hover { border-color: var(--jb-primary); background: var(--jb-soft-primary) !important; }
.vreg #pdf-container { display: flex; justify-content: center; block-size: 100%; }
.vreg .document-upload-wrapper {
  position: relative;
  display: grid; place-items: center;
  inline-size: 100%; min-block-size: 212px;
  cursor: pointer;
}
.vreg .document-upload-wrapper .document_input {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  opacity: 0; cursor: pointer;
}
.vreg .document-upload-wrapper .textbox {
  display: grid; justify-items: center; gap: var(--jb-sp-4);
  padding: var(--jb-sp-16);
  text-align: center;
}
.vreg .upload-icon-svg {
  inline-size: var(--jb-disc); block-size: var(--jb-disc);
  padding: var(--jb-sp-12);
  margin-block-end: var(--jb-sp-8);
  border-radius: var(--jb-radius-card);
  background: var(--jb-surface); color: var(--jb-accent-primary-text);
  box-shadow: var(--jb-shadow-glow);
  transition: transform var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg .single-document-uploaderwrap:hover .upload-icon-svg { transform: translateY(var(--jb-lift)); }
.vreg .textbox p { font-size: var(--jb-fs-sm); color: var(--jb-text-primary); }
.vreg .textbox .font-semibold { font-weight: var(--jb-fw-semibold); }
.vreg .doc-action-btn {
  position: absolute; z-index: 3;
  inset-block-start: var(--jb-sp-8);
  display: grid; place-items: center;
  inline-size: var(--jb-disc-sm); block-size: var(--jb-disc-sm);
  padding: 0;
  border: var(--jb-hairline) solid var(--jb-chip-border);
  border-radius: var(--jb-radius-pill);
  background: var(--jb-surface); color: var(--jb-text-secondary);
  box-shadow: var(--jb-shadow-float);
  cursor: pointer;
  transition: color var(--jb-motion-fast) var(--jb-ease-out),
              border-color var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg .doc-edit-btn { inset-inline-end: calc(var(--jb-sp-8) + var(--jb-disc-sm) + var(--jb-sp-4)); }
.vreg .doc-remove-btn { inset-inline-end: var(--jb-sp-8); }
.vreg .doc-edit-btn:hover { color: var(--jb-accent-primary-text); border-color: var(--jb-primary); }
.vreg .doc-remove-btn:hover { color: var(--jb-error); border-color: var(--jb-error); }
.vreg .single-document-uploaderwrap .pdf-single {
  max-inline-size: 100%;
  border-color: var(--jb-chip-border);
  border-radius: var(--jb-radius-medium);
  overflow: hidden;
}

/* --- password reveal (the view's own .show-password toggle) -------------- */
.vreg-pw { position: relative; display: block; margin: 0; }
.vreg .vreg-pw .jb-input { padding-inline-end: var(--vreg-lead); }
.vreg .show-password {
  position: absolute;
  inset-inline-end: var(--jb-sp-8); inset-block-start: 50%;
  translate: 0 -50%;
  display: grid; place-items: center;
  inline-size: var(--jb-control-h-sm); block-size: var(--jb-control-h-sm);
  border-radius: var(--jb-radius-medium);
  color: var(--jb-text-secondary);
  cursor: pointer;
  transition: color var(--jb-motion-fast) var(--jb-ease-out),
              background-color var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg .show-password:hover { color: var(--jb-accent-primary-text); background: var(--jb-soft-primary); }
.vreg .show-password svg { inline-size: var(--jb-icon); block-size: var(--jb-icon); }
.vreg .show-password span { display: inline-flex; }
.vreg input[type="password"] ~ .show-password .icon-2 { display: none; }
.vreg input[type="text"] ~ .show-password .icon-1 { display: none; }

/* Password rules read as chips; the view's script swaps the glyph and colour. */
.vreg #password-rules ul { display: flex; flex-wrap: wrap; gap: var(--jb-sp-8); margin: 0; padding: 0; }
.vreg #password-rules li {
  display: inline-flex; align-items: center; gap: var(--jb-sp-4);
  padding: var(--jb-sp-4) var(--jb-sp-8);
  border-radius: var(--jb-radius-pill);
  background: var(--jb-chip-background);
  color: var(--jb-text-secondary);
  font-size: var(--jb-fs-xs);
}
.vreg #password-rules li i { font-style: normal; font-size: 10px; }
.vreg-error { font-size: var(--jb-fs-xs); color: var(--jb-error); }

/* --- captcha (shared admin partial, bs4 grid markup) --------------------- */
.vreg-captcha { max-inline-size: 460px; }
.vreg #reload-captcha {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--jb-sp-12);
  margin: 0; padding: 0;
}
/* bs5: .col-sm-6 sets width: 50%, which would halve each grid cell. */
.vreg #reload-captcha > div { inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; flex: none; padding: 0; }
.vreg #reload-captcha > .d-flex {
  align-items: center; gap: var(--jb-sp-8);
  border-radius: var(--jb-radius-medium);
}
.vreg #reload-captcha .form-control {
  block-size: var(--vreg-control-h);
  padding-inline: var(--jb-sp-16);
  border: var(--jb-hairline) solid var(--jb-chip-border);
  border-radius: var(--jb-radius-medium);
  background: var(--jb-background);
  font-size: var(--jb-fs-body);
  box-shadow: none;
}
.vreg #reload-captcha .form-control:focus {
  border-color: var(--jb-primary); background: var(--jb-surface); box-shadow: var(--vreg-ring);
}
.vreg #reload-captcha img {
  min-inline-size: 0; max-inline-size: 100%;
  block-size: var(--vreg-control-h);
  object-fit: contain;
  border: var(--jb-hairline) solid var(--jb-chip-border);
  border-radius: var(--jb-radius-medium);
}
.vreg #reload-captcha .reloadCaptcha {
  flex: none;
  display: grid; place-items: center;
  inline-size: var(--jb-control-h-sm); block-size: var(--jb-control-h-sm);
  padding: 0 !important;
  border-radius: var(--jb-radius-medium);
  color: var(--jb-text-secondary);
  cursor: pointer;
  transition: color var(--jb-motion-fast) var(--jb-ease-out),
              background-color var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg #reload-captcha .reloadCaptcha:hover { color: var(--jb-accent-primary-text); background: var(--jb-soft-primary); }

/* --- language tabs -------------------------------------------------------- */
.vreg .tabs-slide-wrap { position: relative; overflow: hidden; }
.vreg .store-apply-navs {
  display: flex; flex-wrap: nowrap; gap: var(--jb-sp-4);
  inline-size: fit-content; max-inline-size: 100%;
  padding: var(--jb-sp-4);
  border: 0; border-radius: var(--jb-radius-pill);
  background: var(--jb-chip-background);
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.vreg .store-apply-navs::-webkit-scrollbar { display: none; }
.vreg .store-apply-navs .nav-item { flex: none; scroll-snap-align: start; margin: 0; }
.vreg .store-apply-navs .nav-link {
  display: inline-flex; align-items: center;
  block-size: var(--jb-control-h-sm);
  padding: 0 var(--jb-sp-16);
  border: 0; border-radius: var(--jb-radius-pill);
  background: transparent;
  color: var(--jb-text-secondary);
  font-size: var(--jb-fs-sm); font-weight: var(--jb-fw-medium);
  white-space: nowrap;
  transition: color var(--jb-motion-fast) var(--jb-ease-out),
              background-color var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg .store-apply-navs .nav-link:hover { color: var(--jb-text-primary); }
.vreg .store-apply-navs .nav-link.active {
  border: 0;
  background: var(--jb-surface); color: var(--jb-accent-primary-text);
  box-shadow: var(--jb-shadow-glow);
}
.vreg .arrow-area {
  position: absolute; inset: 0;
  display: flex; justify-content: space-between; align-items: center;
  pointer-events: none;
}
.vreg .arrow-area .button-prev, .vreg .arrow-area .button-next { display: none; pointer-events: auto; }
.vreg-tabs__arrow {
  display: grid; place-items: center;
  inline-size: var(--jb-disc-sm); block-size: var(--jb-disc-sm);
  padding: 0;
  border: var(--jb-hairline) solid var(--jb-chip-border);
  border-radius: var(--jb-radius-pill);
  background: var(--jb-surface); color: var(--jb-accent-primary-text);
  box-shadow: var(--jb-shadow-float);
  cursor: pointer;
}
.vreg-tabs__arrow svg { inline-size: var(--jb-icon-sm); block-size: var(--jb-icon-sm); transform: scaleX(var(--jb-dir)); }

/* --- actions -------------------------------------------------------------- */
.vreg-actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  gap: var(--jb-sp-12);
  margin-block-start: var(--jb-sp-32);
  padding-block-start: var(--jb-sp-24);
  border-block-start: var(--jb-hairline) solid var(--jb-chip-border);
}
.vreg .jb-btn { min-inline-size: 136px; }
.vreg .jb-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.vreg .jb-btn[disabled]::after { opacity: 0; }
.vreg .jb-btn__icon { inline-size: var(--jb-icon-sm); block-size: var(--jb-icon-sm); flex: none; transform: scaleX(var(--jb-dir)); }
.vreg .jb-btn:hover .jb-btn__icon--trail { transform: translateX(calc(var(--jb-dir) * 2px)) scaleX(var(--jb-dir)); }
.vreg .jb-btn:hover .jb-btn__icon--lead { transform: translateX(calc(var(--jb-dir) * -2px)) scaleX(var(--jb-dir)); }
.vreg .btn-loader { display: inline-flex; }
.vreg .btn-loader .spinner-border { inline-size: var(--jb-icon-sm); block-size: var(--jb-icon-sm); border-width: 2px; }


/* =========================== 8 · BUSINESS PLAN =========================== */

.vreg-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--jb-sp-16); }
.vreg .plan-check-item { display: block; block-size: 100%; margin: 0; cursor: pointer; }
.vreg .plan-check-item .plan-check-item-inner {
  position: relative;
  block-size: 100%;
  padding: var(--jb-sp-20);
  border: var(--jb-hairline) solid var(--jb-chip-border);
  border-radius: var(--jb-radius-card);
  background: var(--jb-surface);
  box-shadow: none;
  color: var(--jb-text-secondary);
  font-size: var(--jb-fs-sm); line-height: var(--jb-lh-lead);
  transition: border-color var(--jb-motion-fast) var(--jb-ease-out),
              background-color var(--jb-motion-fast) var(--jb-ease-out),
              transform var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg .plan-check-item:hover .plan-check-item-inner { border-color: var(--jb-primary); transform: translateY(var(--jb-lift)); }
.vreg .plan-check-item .plan-check-item-inner > div {
  display: flex; align-items: center; justify-content: space-between; gap: var(--jb-sp-12);
  margin-block-end: var(--jb-sp-8);
}
.vreg .plan-check-item .plan-check-item-inner h5 {
  margin: 0;
  font-size: var(--jb-fs-body); font-weight: var(--jb-fw-semibold);
  color: var(--jb-text-primary);
  transition: color var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg .plan-check-item .plan-check-item-inner p { margin: 0; }
.vreg .plan-check-item .plan-check-item-inner .checkmark {
  display: grid; place-items: center; flex: none;
  inline-size: var(--jb-icon-lg); block-size: var(--jb-icon-lg);
  border-radius: var(--jb-radius-pill);
  background: var(--jb-chip-background); color: transparent;
  opacity: 1;
  transition: background-color var(--jb-motion-fast) var(--jb-ease-out),
              color var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg .plan-check-item .plan-check-item-inner .checkmark svg { inline-size: 14px; block-size: 14px; }
.vreg .plan-check-item input:checked + .plan-check-item-inner { background: var(--jb-soft-primary); border-color: var(--jb-primary); }
.vreg .plan-check-item input:checked + .plan-check-item-inner h5 { color: var(--jb-accent-primary-text); }
.vreg .plan-check-item input:checked + .plan-check-item-inner .checkmark {
  background: var(--jb-primary); color: var(--jb-on-primary); opacity: 1;
  animation: vreg-pop-in var(--jb-motion-base) var(--jb-ease-out);
}
.vreg .plan-check-item input:focus-visible + .plan-check-item-inner {
  outline: var(--jb-focus-width) solid var(--jb-primary); outline-offset: var(--jb-focus-width);
}

/* Subscription packages: the shared partial's slider, reskinned. */
.vreg #subscription-plan > br { display: none; }
.vreg .plan-slider { padding-block: var(--jb-sp-4); }
.vreg .__plan-item {
  display: block; margin: 0;
  border: var(--jb-hairline) solid var(--jb-chip-border);
  border-radius: var(--jb-radius-card);
  background: var(--jb-surface);
  box-shadow: none;
  color: var(--jb-text-primary);
  cursor: pointer;
  transition: border-color var(--jb-motion-fast) var(--jb-ease-out),
              background-color var(--jb-motion-fast) var(--jb-ease-out),
              transform var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg .__plan-item:hover { border-color: var(--jb-primary); transform: translateY(var(--jb-lift)); }
.vreg .__plan-item .inner-div { padding: var(--jb-sp-20) var(--jb-sp-16); border-radius: inherit; }
/* Four cards share the form column, so the active card's glow needs a
   little room inside the carousel's clipping box. */
.vreg .plan-slider .owl-stage-outer { padding-block: var(--jb-sp-8); margin-block: calc(var(--jb-sp-8) * -1); }
.vreg .__plan-item .inner-div::before { display: none; }
.vreg .__plan-item .title {
  margin: 0 0 var(--jb-sp-8);
  font-size: var(--jb-fs-body); font-weight: var(--jb-fw-semibold);
  color: var(--jb-accent-primary-text);
}
.vreg .__plan-item .price {
  margin: 0 0 var(--jb-sp-8);
  font-size: var(--jb-fs-h3); line-height: var(--jb-lh-h3); font-weight: var(--jb-fw-bold);
  color: var(--jb-text-primary);
}
.vreg .__plan-item .day-count {
  display: inline-block;
  padding: var(--jb-sp-4) var(--jb-sp-12);
  border: 0; border-radius: var(--jb-radius-pill);
  background: var(--jb-chip-background); color: var(--jb-text-secondary);
  font-size: var(--jb-fs-xs); font-weight: var(--jb-fw-medium);
}
.vreg .__plan-item .info {
  display: grid; gap: var(--jb-sp-4);
  block-size: auto; max-block-size: 196px; overflow-y: auto;
  margin: var(--jb-sp-16) 0 0; padding: 0;
}
/* Icon column + text column: main.css lets the row wrap under the icon. */
.vreg .__plan-item .info li {
  display: grid; grid-template-columns: var(--jb-icon-sm) minmax(0, 1fr);
  align-items: center; justify-items: start; column-gap: var(--jb-sp-8);
  padding: var(--jb-sp-4) 0;
  border: 0;
  font-size: var(--jb-fs-xs); line-height: 1.35; text-align: start;
  color: var(--jb-text-secondary);
}
.vreg .__plan-item .info li img {
  display: block;
  inline-size: var(--jb-icon-sm) !important; block-size: var(--jb-icon-sm);
}
.vreg .__plan-item .info li span { min-inline-size: 0; }
/* The partial ships two check glyphs per row; only one may take a cell. */
.vreg .__plan-item .info li img.check-white { display: none; }
.vreg .__plan-item.active {
  background: var(--jb-primary); border-color: var(--jb-primary);
  color: var(--jb-on-primary);
  box-shadow: var(--jb-shadow-glow-strong);
}
.vreg .__plan-item.active .inner-div .title,
.vreg .__plan-item.active .inner-div .price { color: var(--jb-on-primary); }
.vreg .__plan-item.active .day-count { background: var(--jb-on-inverse-12); color: var(--jb-on-inverse); }
.vreg .__plan-item.active .info li { color: var(--jb-on-inverse); }
.vreg .__plan-item.active .inner-div .info li img.check { display: none; }
.vreg .__plan-item.active .inner-div .info li img.check-white { display: block; }
.vreg .owl-dots { display: flex; justify-content: center; gap: var(--jb-sp-8); margin-block-start: var(--jb-sp-16); }
.vreg .owl-dots .owl-dot {
  inline-size: var(--jb-sp-8); block-size: var(--jb-sp-8);
  border-radius: var(--jb-radius-pill);
  background: var(--jb-chip-border);
  transition: inline-size var(--jb-motion-fast) var(--jb-ease-out),
              background-color var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg .owl-dots .owl-dot.active { inline-size: var(--jb-sp-24); background: var(--jb-primary); }
.vreg .owl-theme .owl-dots .owl-dot span { display: none; }

/* Terms: the native checkbox stays in the accessibility tree and keeps the
   focus ring; the painted box is a second label for the same input. */
.vreg-terms {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--jb-sp-12);
  margin-block-start: var(--jb-sp-24);
  padding: var(--jb-sp-16);
  border: var(--jb-hairline) solid var(--jb-chip-border);
  border-radius: var(--jb-radius-card);
  background: var(--jb-background);
  font-size: var(--jb-fs-sm); line-height: var(--jb-lh-lead);
  color: var(--jb-text-secondary);
}
.vreg-terms input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; margin: 0; }
.vreg-terms__box {
  display: grid; place-items: center; flex: none;
  inline-size: var(--jb-icon); block-size: var(--jb-icon);
  margin-block-start: 2px;
  border: var(--jb-hairline) solid var(--jb-border);
  border-radius: var(--jb-radius-medium);
  background: var(--jb-surface); color: var(--jb-on-primary);
  cursor: pointer;
  transition: background-color var(--jb-motion-fast) var(--jb-ease-out),
              border-color var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg-terms__box svg { inline-size: 14px; block-size: 14px; opacity: 0; transition: opacity var(--jb-motion-fast) var(--jb-ease-out); }
.vreg-terms:hover .vreg-terms__box { border-color: var(--jb-primary); }
.vreg-terms input:checked + .vreg-terms__box { background: var(--jb-primary); border-color: var(--jb-primary); }
.vreg-terms input:checked + .vreg-terms__box svg { opacity: 1; }
.vreg-terms input:focus-visible + .vreg-terms__box {
  outline: var(--jb-focus-width) solid var(--jb-primary); outline-offset: var(--jb-focus-width);
}
.vreg-terms__text { cursor: pointer; }
.vreg-terms__text a { color: var(--jb-accent-primary-text); font-weight: var(--jb-fw-medium); }
.vreg-terms__text a:hover { text-decoration: underline; }


/* ============================ 9 · RESPONSIVE ============================= */

@media (max-width: 1100px) {
  .vreg-grid { grid-template-columns: minmax(0, 1fr); gap: var(--jb-sp-24); }
  .vreg-hero { margin-block-end: var(--jb-sp-32); }
  /* The rail folds into a band: character beside the copy, cards below. */
  .vreg-rail {
    position: static;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "stage copy" "feats feats";
    align-items: center;
    column-gap: var(--jb-sp-20);
  }
  .vreg-stage {
    --vreg-stage: 128px;
    grid-area: stage;
    inline-size: 176px; min-block-size: 0; aspect-ratio: 1;
    padding: var(--jb-sp-12);
  }
  .vreg-stage__route, .vreg-stage__chip { display: none; }
  .vreg-rail__copy { grid-area: copy; padding-inline: 0; font-size: var(--jb-fs-body); }
  .vreg-feats { grid-area: feats; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .vreg-row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vreg-row--map, .vreg-row--tin { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .vreg { padding-block: calc(var(--jb-nav-height) + var(--jb-sp-24)) var(--jb-sp-64); }
  .vreg-hero { gap: var(--jb-sp-8); margin-block-end: var(--jb-sp-24); }
  .vreg-stage { --vreg-stage: 108px; inline-size: 148px; }
  .vreg-rail__copy { font-size: var(--jb-fs-sm); }
  /* Cards become one swipeable row that bleeds to the viewport edges. */
  .vreg-feats {
    display: flex; gap: var(--jb-sp-12);
    margin-inline: calc(var(--jb-gutter) * -1);
    padding-inline: var(--jb-gutter);
    padding-block-end: var(--jb-sp-4);
    overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }
  .vreg-feats::-webkit-scrollbar { display: none; }
  .vreg-feat { flex: 0 0 min(260px, 76vw); scroll-snap-align: start; }
  .vreg-progress { padding: var(--jb-sp-16) var(--jb-sp-12); border-radius: var(--jb-radius-card); }
  .vreg-step { font-size: var(--jb-fs-xs); }
  .vreg-sheet { padding: var(--jb-sp-20) var(--jb-sp-16); border-radius: var(--jb-radius-card); }
  .vreg-section + .vreg-section { margin-block-start: var(--jb-sp-24); padding-block-start: var(--jb-sp-24); }
  .vreg-section__head { margin-block-end: var(--jb-sp-16); }
  .vreg-row, .vreg-row--3, .vreg-row--media, .vreg-row--tin, .vreg-row--map { grid-template-columns: minmax(0, 1fr); gap: var(--jb-sp-16); }
  .vreg-section__body, .vreg-stack { gap: var(--jb-sp-16); }
  .vreg .upload-area--square { aspect-ratio: 2 / 1; }
  .vreg .delivery-time-group { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vreg .delivery-time-label, .vreg .delivery-time-divider { display: none; }
  .vreg-unit { grid-column: 1 / -1; }
  .vreg .map_custom-controls #map { block-size: 264px; }
  .vreg #reload-captcha { grid-template-columns: minmax(0, 1fr); }
  .vreg-plans { grid-template-columns: minmax(0, 1fr); }
  .vreg-actions { margin-block-start: var(--jb-sp-24); }
  .vreg-actions .jb-btn { flex: 1 1 auto; min-inline-size: 0; }
}


/* ========================= 10 · REDUCED MOTION =========================== */

@media (prefers-reduced-motion: reduce) {
  .vreg *, .vreg *::before, .vreg *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .vreg-mascot, .vreg-mascot__frame, .vreg-mascot__shadow,
  .vreg-stage__chip, .vreg-stage__route path, .vreg-stage__disc::after,
  .vreg-step.active .vreg-step__node { animation: none !important; }
  .vreg-mascot:hover .vreg-mascot__frame,
  .vreg-mascot[data-mood="watch"] .vreg-mascot__frame,
  .vreg .upload-area:hover .upload-icon,
  .vreg .single-document-uploaderwrap:hover .upload-icon-svg,
  .vreg .plan-check-item:hover .plan-check-item-inner,
  .vreg .__plan-item:hover { transform: none; }
}


/* ============================ 11 · KEYFRAMES ============================= */

@keyframes vreg-route { to { stroke-dashoffset: -280; } }
@keyframes vreg-ring {
  0% { transform: scale(.92); opacity: .9; }
  100% { transform: scale(1.18); opacity: 0; }
}
@keyframes vreg-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--jb-rise) * -.8)); }
}
@keyframes vreg-pop {
  from { opacity: 0; transform: translateY(var(--jb-rise)) scale(.9); }
  to { opacity: 1; transform: none; }
}
@keyframes vreg-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 calc(var(--jb-rise) * -.6); }
}
@keyframes vreg-shadow {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(.86); opacity: .7; }
}
@keyframes vreg-hop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-6px) scale(.98, 1.03); }
  70% { transform: translateY(-3px) scale(1, 1); }
}
@keyframes vreg-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px) rotate(-2deg); }
  40% { transform: translateX(5px) rotate(2deg); }
  60% { transform: translateX(-3px) rotate(-1deg); }
  80% { transform: translateX(3px) rotate(1deg); }
}
@keyframes vreg-pulse {
  0% { box-shadow: 0 0 0 0 var(--jb-primary-a28); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes vreg-pop-in {
  from { transform: scale(.6); }
  60% { transform: scale(1.12); }
  to { transform: scale(1); }
}


/* ========================= 12 · DELIVERYMAN VARIANT ====================== */

/* /deliveryman/apply shares the sheet. Orange is the delivery identity on
   the landing page, so the rail and the hero chip go warm while the form
   and its buttons keep the brand green. */
.vreg--dm .vreg-chip { color: var(--jb-accent-secondary); }
.vreg--dm .vreg-stage {
  border-color: var(--jb-soft-secondary);
  background:
    radial-gradient(42% 38% at 86% 88%, var(--jb-primary-a12) 0%, transparent 100%),
    linear-gradient(135deg, var(--jb-soft-secondary) 0%, var(--jb-surface) 52%, var(--jb-soft-primary) 100%);
}
.vreg--dm .vreg-stage::before, .vreg--dm .vreg-stage::after { border-color: var(--jb-chip-border); }
.vreg--dm .vreg-stage__route path { stroke: var(--jb-accent-secondary); }
.vreg--dm .vreg-stage__disc { border-color: var(--jb-chip-border); }
.vreg--dm .vreg-stage__chip--bike {
  inset-inline-end: 7%; inset-block-start: 14%;
  background: var(--jb-soft-secondary); color: var(--jb-accent-secondary);
  border-color: var(--jb-soft-secondary);
  animation-delay: calc(var(--jb-motion-slow) * -3);
}
.vreg--dm .vreg-stage__chip--pin { inset-inline-start: 6%; inset-block-start: 10%; rotate: calc(var(--jb-dir) * -6deg); }
.vreg--dm .vreg-rail__title {
  padding-inline: var(--jb-sp-8);
  font-size: var(--jb-fs-h4); line-height: var(--jb-lh-h4);
  font-weight: var(--jb-fw-semibold);
}
.vreg--dm .vreg-rail__copy { padding-block-start: 0; }
.vreg--dm .vreg-feat .jb-disc { background: var(--jb-soft-secondary); color: var(--jb-accent-secondary); }

/* Steps that are section anchors (one long form): register.js marks the
   section in view as active and the ones above it as done. */
.vreg-step__link { display: grid; justify-items: center; gap: var(--jb-sp-8); color: inherit; }
.vreg-step__link:hover .vreg-step__node { border-color: var(--jb-primary); color: var(--jb-accent-primary-text); }
.vreg-step.is-done { color: var(--jb-accent-primary-text); }
.vreg-step.is-done .vreg-step__node {
  background: var(--jb-soft-primary); border-color: var(--jb-primary); color: var(--jb-accent-primary-text);
  animation: none;
}
.vreg-step.is-done .vreg-step__num { display: none; }
.vreg-step.is-done .vreg-step__node svg { display: block; }
.vreg-steps[data-step="3"] { --vreg-ratio: 1; }

/* Plain <select>s take a leading icon here (no select2 on this page). */
.vreg .vreg-control--lead select.jb-input { padding-inline-start: var(--vreg-lead); }
.vreg-row--profile { grid-template-columns: minmax(0, 1fr) minmax(0, 212px); }
.vreg-row--fit { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Messages written by the page's own validator. */
.vreg .form-validation-error, .vreg .file-upload-error, .vreg .form-hint {
  margin-block-start: var(--jb-sp-4);
  font-size: var(--jb-fs-xs); color: var(--jb-error);
}
.vreg .jb-input.is-invalid { border-color: var(--jb-error); }

/* Password reveal: the page script swaps the glyph inside .eye-btn. */
.vreg .pw-wrap { position: relative; display: block; }
.vreg .pw-wrap .jb-input { padding-inline-end: var(--vreg-lead); }
.vreg .eye-btn {
  position: absolute;
  inset-inline-end: var(--jb-sp-8); inset-block-start: calc(var(--vreg-control-h) / 2);
  translate: 0 -50%;
  display: grid; place-items: center;
  inline-size: var(--jb-control-h-sm); block-size: var(--jb-control-h-sm);
  padding: 0; border: 0; background: none;
  border-radius: var(--jb-radius-medium);
  color: var(--jb-text-secondary);
  cursor: pointer;
  transition: color var(--jb-motion-fast) var(--jb-ease-out),
              background-color var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg .eye-btn:hover { color: var(--jb-accent-primary-text); background: var(--jb-soft-primary); }
.vreg .eye-btn svg {
  inline-size: var(--jb-icon); block-size: var(--jb-icon);
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* Identity images: the multi-image picker appends rows whose template
   carries inline styles, hence the !important on what it sets inline. */
.vreg #coba { display: flex; flex-wrap: wrap; gap: var(--jb-sp-12); margin: 0; --bs-gutter-x: 0; }
.vreg #coba > .spartan_item_wrapper {
  flex: none; inline-size: 148px; max-inline-size: 100%;
  padding: 0; margin-block-end: 0 !important;
}
.vreg #coba .file_upload {
  margin: 0 !important;
  border: var(--jb-focus-width) dashed var(--jb-chip-border) !important;
  border-radius: var(--jb-radius-card) !important;
  background: var(--jb-background) !important;
  transition: border-color var(--jb-motion-fast) var(--jb-ease-out),
              background-color var(--jb-motion-fast) var(--jb-ease-out);
}
.vreg #coba .file_upload:hover {
  border-color: var(--jb-primary) !important;
  background: var(--jb-soft-primary) !important;
}
/* The plugin's placeholder is a wide "upload image" banner, not an icon. */
.vreg #coba .spartan_image_placeholder {
  inline-size: 100% !important; max-inline-size: 128px; block-size: auto !important;
  object-fit: contain !important;
  mix-blend-mode: multiply; /* drops the banner's white box onto the tile */
}
.vreg #coba .img_ { border-radius: var(--jb-radius-medium); }
.vreg #coba p[data-spartanlbldropfile] { color: var(--jb-accent-primary-text) !important; font-size: var(--jb-fs-xs); }
/* The remove link's glyph comes from an icon font this page never loads. */
.vreg #coba .spartan_remove_row {
  inset-inline-end: var(--jb-sp-4) !important; inset-block-start: var(--jb-sp-4) !important;
  inline-size: var(--jb-disc-sm) !important; block-size: var(--jb-disc-sm) !important;
  line-height: var(--jb-disc-sm) !important;
  border-radius: var(--jb-radius-pill) !important;
  background: var(--jb-surface) !important; color: var(--jb-error) !important;
  box-shadow: var(--jb-shadow-float);
  font-size: var(--jb-fs-h4); font-weight: var(--jb-fw-bold);
}
.vreg #coba .spartan_remove_row::before { content: "\00d7"; }

.vreg-submit { min-inline-size: 200px; }

@media (max-width: 720px) {
  .vreg-row--profile, .vreg-row--fit { grid-template-columns: minmax(0, 1fr); }
  .vreg #coba > .spartan_item_wrapper { inline-size: calc(50% - var(--jb-sp-8)); }
  .vreg-submit { inline-size: 100%; }
}


/* ============================ 12 · DARK THEME ============================ */

/* The tokens in landing.css carry the theme; these are the rules whose light
   value is wrong once the surfaces invert. */
:root[data-theme="dark"] .vreg-stage,
:root[data-theme="dark"] .vreg-stage::before,
:root[data-theme="dark"] .vreg-stage::after,
:root[data-theme="dark"] .vreg-stage__disc { border-color: var(--jb-on-inverse-12); }
:root[data-theme="dark"] .vreg-stage__disc {
  background: radial-gradient(circle at 50% 40%, var(--jb-on-inverse-12) 0%, var(--jb-on-inverse-08) 55%, transparent 72%);
}
:root[data-theme="dark"] .vreg-stage__chip { border-color: var(--jb-chip-border); }

/* select2's search box has no background of its own, so bs4 paints it white. */
:root[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--jb-background); color: var(--jb-text-primary);
}
/* The shared captcha partial paints its image cell .bg-white (bs4, !important). */
:root[data-theme="dark"] .vreg #reload-captcha .bg-white { background-color: var(--jb-surface) !important; }
:root[data-theme="dark"] .vreg #reload-captcha .form-control { color: var(--jb-text-primary); }
:root[data-theme="dark"] .vreg #reload-captcha .form-control::placeholder { color: var(--jb-hint); }
/* Google's map tiles stay light (their styling is map configuration, not
   CSS); a firmer frame keeps the panel from reading as a hole in the sheet. */
:root[data-theme="dark"] .vreg .map_custom-controls { border-color: var(--jb-border); }
/* The spartan picker rows carry inline light colours from their own script. */
:root[data-theme="dark"] .vreg #coba .spartan_item_wrapper { background: var(--jb-surface) !important; border-color: var(--jb-chip-border) !important; }
/* main.css paints the TIN document wrapper and its preview strip white with
   near-black text; on dark that is a white hole with invisible copy. */
:root[data-theme="dark"] .vreg .document-upload-wrapper { background-color: transparent; color: inherit; }
:root[data-theme="dark"] .vreg .single-document-uploaderwrap .pdf-single .pdf-info { background-color: var(--jb-surface); }
:root[data-theme="dark"] .vreg .single-document-uploaderwrap .pdf-single .file-name { color: var(--jb-text-primary); }
/* The spartan picker's placeholder is a light banner dropped onto the tile
   with multiply, which vanishes on a dark tile; invert it and screen it in. */
:root[data-theme="dark"] .vreg #coba .spartan_image_placeholder { mix-blend-mode: screen; filter: invert(1) hue-rotate(180deg); }