/* ========================================================
   TechVervo — configurator wizard
   ------------------------------------------------------------
   Loaded by /vps/configure/ only. The four continuation steps
   do not use any of the classes here, so nothing in this file
   can reach them; the shared chrome they need lives in
   vps-home.css.

   THE FRAME
   ---------
   index | sheet | rail, the same frame as the homepage and the
   plan register. In a wizard the index is not decoration — it IS
   the step indicator, because a wizard's step list is an index.
   So the five steps become the left rail and the sheet holds
   whichever panel is current.

   THE RAIL
   --------
   The rail is the docket, and it is the most useful thing on
   the page: an itemised bill of the WHOLE order — the plan's
   rate-card sum, then every optional line the buyer has switched
   on, then the period total. The old sticky summary showed three
   spec strings and a number with no working, so nobody could see
   where the money went. That is the thing this redesign is for.

   It is a receipt, so it is ruled and monospaced, with the total
   separated by a 2px rule rather than a filled box. A name is set
   in the display serif; every figure is tabular mono.

   The upsell rates (memory tiers, disk tiers, management, panels,
   Softaculous, cPGuard) are the funnel's own published product
   pricing and are deliberately NOT re-derived from the catalog:
   that is a separate pricing decision, and the docket prints the
   figures the checkout actually charges.
   ======================================================== */

/* ========================================================
   1. FRAME
   ======================================================== */
.vcc-frame {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr) var(--rail-w);
  gap: 0 clamp(1.75rem, 3vw, 3rem);
  align-items: start;
  padding: clamp(1.75rem, 3vw, 2.75rem) 0 clamp(6rem, 8vw, 7rem);
}

/* ========================================================
   2. THE INDEX RAIL — the step indicator
   ======================================================== */
.vcc-steps { position: sticky; top: var(--rail-top); align-self: start; padding-top: 0.25rem; }
.vcc-steps__item { position: relative; }
.vcc-steps__item + .vcc-steps__item::before {
  content: "";
  position: absolute;
  left: 9px; top: -6px;
  width: 1px; height: 12px;
  background: var(--rule-2);
}

.vcc-steps__btn {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.4rem 0.5rem 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  border-radius: var(--r);
  transition: color 0.18s ease;
}
.vcc-steps__btn:hover { color: var(--ink); }

.vcc-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border: 1px solid var(--rule-2);
  border-radius: 50%;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--paper);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.vcc-steps__label { line-height: 1.25; }

.vcc-steps__item.is-done .vcc-steps__num { border-color: var(--green-deep); color: var(--green-deep); }
.vcc-steps__item.is-done .vcc-steps__btn { color: var(--ink-2); }

.vcc-steps__item.is-active .vcc-steps__btn { color: var(--ink); font-weight: 600; }
.vcc-steps__item.is-active .vcc-steps__num { background: var(--ink); border-color: var(--ink); color: var(--paper-3); }
.vcc-steps__item.is-active::before {
  content: "";
  position: absolute;
  left: -0.9rem; top: 0.15rem; bottom: 0.15rem;
  width: 2px;
  background: var(--green-deep);
}

/* ========================================================
   3. THE SHEET
   ======================================================== */
.vcc-main { min-width: 0; }

.vcc-step { display: none; }
.vcc-step.is-active { display: block; animation: vcc-in 0.3s ease both; }
@keyframes vcc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.vcc-step__head { border-top: 2px solid var(--ink); padding-top: 1.1rem; margin-bottom: clamp(1.5rem, 2.5vw, 2rem); }
.vcc-step__eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.vcc-step__title { margin-top: 0.7rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 1.1rem + 2vw, 2.4rem); line-height: 1.06; letter-spacing: -0.018em; text-wrap: balance; max-width: 22ch; }
.vcc-step__note { margin-top: 0.85rem; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }

/* A block is a ruled section, never a card: a 2px rule on top, a
   hairline under the head, and the content between. */
.vcc-block { margin-bottom: clamp(1.5rem, 2.5vw, 2rem); }
.vcc-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.85rem;
}
.vcc-block__title { font-family: var(--mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.vcc-block__hint { font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3); }
.vcc-block:last-of-type { margin-bottom: 0; }

/* ========================================================
   4. OPTIONS
   A row of a works order: name on the left, price on the right,
   a rule between. The selected row is marked with a green edge
   and a filled marker, not a fill of its own.
   ======================================================== */
.vcc-opts { display: flex; flex-direction: column; }

.vcc-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.75rem 0.75rem 1.9rem;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
  transition: background 0.15s ease;
}
.vcc-opt:first-child { border-top: 1px solid var(--rule-soft); }
.vcc-opt::before {
  content: "";
  position: absolute;
  left: 0.35rem; top: 50%;
  width: 13px; height: 13px;
  margin-top: -6.5px;
  border: 1px solid var(--ink-3);
  border-radius: 50%;
  background: var(--paper-3);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.vcc-opt:has(input:checked)::before { border-color: var(--green-deep); box-shadow: inset 0 0 0 3.5px var(--green-deep); }
.vcc-opt:has(input:checked) { background: rgba(255, 255, 255, 0.55); }
.vcc-opt:hover { background: rgba(255, 255, 255, 0.4); }
.vcc-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}
.vcc-opt:has(input:focus-visible) { outline: 2px solid var(--green-deep); outline-offset: 2px; }

.vcc-opt__left { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.9375rem; color: var(--ink); }
.vcc-opt__right { font-family: var(--mono); font-size: 0.875rem; font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vcc-opt__right:empty::before, .vcc-opt__right[data-free="true"] { color: var(--ink-3); font-weight: 400; }
.vcc-opt--static { cursor: default; padding-left: 0; }
.vcc-opt--static::before { display: none; }
.vcc-opt--static:hover { background: transparent; }

/* checkboxes get a square marker rather than a radio dot */
.vcc-check { position: relative; }
.vcc-check::before { border-radius: 1px; }
.vcc-check:has(input:checked)::before { box-shadow: inset 0 0 0 3.5px var(--green-deep); }
.vcc-check input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.vcc-check { padding-left: 1.9rem; }
.vcc-check:hover { background: rgba(255, 255, 255, 0.4); }
.vcc-check:has(input:checked) { background: rgba(255, 255, 255, 0.55); }

/* ========================================================
   5. MANAGEMENT TIERS
   Three published tiers, as a ruled row set rather than tiles.
   ======================================================== */
.vcc-mgmt-grid { display: flex; flex-direction: column; }
.vcc-mgmt {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.75rem 0.75rem 1.9rem;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
  transition: background 0.15s ease;
}
.vcc-mgmt:first-child { border-top: 1px solid var(--rule-soft); }
.vcc-mgmt::before {
  content: "";
  position: absolute;
  left: 0.35rem; top: 50%;
  width: 13px; height: 13px;
  margin-top: -6.5px;
  border: 1px solid var(--ink-3);
  border-radius: 50%;
  background: var(--paper-3);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vcc-mgmt--on { background: rgba(255, 255, 255, 0.55); }
.vcc-mgmt--on::before { border-color: var(--green-deep); box-shadow: inset 0 0 0 3.5px var(--green-deep); }
.vcc-mgmt:hover { background: rgba(255, 255, 255, 0.4); }
.vcc-mgmt:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.vcc-mgmt__name { font-size: 0.9375rem; font-weight: 500; }
.vcc-mgmt__price { font-family: var(--mono); font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vcc-mgmt--on .vcc-mgmt__price { color: var(--green-deep); }

/* ========================================================
   6. THE DOCKET RAIL
   ======================================================== */
.vcc-rail {
  position: sticky;
  top: var(--rail-top);
  align-self: start;
  max-height: calc(100vh - var(--rail-top) - 2rem);
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 0.25rem 0 1rem clamp(1.25rem, 2vw, 1.75rem);
  border-left: 1px solid var(--rule);
}

.vcc-docket__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--ink);
}
.vcc-docket__title { font-family: var(--mono); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-3); }
.vcc-docket__plan { font-family: var(--serif); font-size: 1.5rem; line-height: 1.05; letter-spacing: -0.015em; }

.vcc-docket__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.vcc-docket__row b { font-weight: 600; color: var(--ink); text-align: right; white-space: nowrap; }
.vcc-docket__rowLbl { display: block; min-width: 0; }
.vcc-docket__rowNote {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-3);
  margin-top: 0.1rem;
}
.vcc-docket__row--base .vcc-docket__rowNote { color: var(--ink-3); }
.vcc-docket__row--base { color: var(--ink-2); }
.vcc-docket__row--base b { color: var(--ink-2); font-weight: 400; }
.vcc-docket__row--add b { color: var(--ink); }

.vcc-docket__rule { height: 2px; background: var(--ink); margin: 0.9rem 0 0.75rem; }

.vcc-docket__totalRow { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.vcc-docket__totalLbl { font-family: var(--mono); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.vcc-docket__total { font-family: var(--mono); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.035em; color: var(--green-deep); line-height: 1.1; }
.vcc-docket__totalPer { font-family: var(--mono); font-size: 0.625rem; color: var(--ink-3); }

.vcc-docket__sub { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--rule); }
.vcc-docket__subRow { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.2rem 0; font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.vcc-docket__subRow b { font-weight: 600; color: var(--ink-2); }
.vcc-docket__subRow em { font-style: normal; color: var(--green-deep); }

.vcc-docket__note { margin-top: 0.9rem; font-family: var(--mono); font-size: 0.625rem; line-height: 1.65; color: var(--ink-3); }

/* The plan's own specification, printed once under the docket */
.vcc-docket__spec { margin-top: 1.1rem; border-top: 1px solid var(--rule); padding-top: 0.8rem; }
.vcc-docket__specRow { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.25rem 0; font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3); }
.vcc-docket__specRow b { font-weight: 600; color: var(--ink); text-align: right; }

/* ========================================================
   7. ACTIONS
   ======================================================== */
.vcc-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-2);
}
.vcc-actions__spacer { flex: 1 1 auto; }
.vcc-btn-cancel {
  padding: 0.7rem 0.9rem;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.vcc-btn-cancel:hover { color: var(--ink); border-bottom-color: var(--ink); }
.vcc-actions .btn { min-width: 9.5rem; }
.vcc-actions .btn--lg { min-width: 12rem; }

/* ========================================================
   8. THE REVIEW LIST (final step)
   Built by vps-configure-steps.js as .vcc-opt.vcc-opt--static
   rows, so it inherits the option rhythm and reads as part of
   the same document rather than a separate summary.
   ======================================================== */
#vcc-review-list { border-top: 1px solid var(--rule); }
#vcc-review-list .vcc-opt__left { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); }
#vcc-review-list .vcc-opt__right { font-family: var(--sans); font-size: 0.9375rem; font-weight: 500; color: var(--ink); }

/* ========================================================
   9. THE BOTTOM BAR on /vps/configure/
   On this page the docket is the rail, so the bar is only the
   mobile instrument: the running total and the step's action.
   ======================================================== */
/* Scoped to this page by class, not by sibling combinator: the bar
   sits outside <main> while the frame sits inside it, so .vcc-frame
   and .vcc-bar are not adjacent siblings. The four later steps use
   the same bar as their primary summary and must keep it. */
body.page-configure #vcc-bar-domain-slot { display: none; }
@media (min-width: 1081px) {
  body.page-configure #vcc-bar { display: none; }
}
@media (max-width: 1080px) {
  .vcc-bar__plan { flex: 1 1 auto; min-width: 0; }
  .vcc-bar__label { display: none; }
  .vcc-bar__line { font-size: 0.6875rem; }
}

/* ========================================================
   10. RESPONSIVE
   ======================================================== */
@media (max-width: 1400px) { :root { --rail-w: 19.5rem; } }

@media (max-width: 1279px) {
  .vcc-frame { grid-template-columns: 10rem minmax(0, 1fr) var(--rail-w); gap: 0 clamp(1.5rem, 2.5vw, 2.25rem); }
  .vcc-steps__btn { font-size: 0.6875rem; }
}

@media (max-width: 1080px) {
  :root { --rail-top: 0px; }
  .vcc-frame { grid-template-columns: minmax(0, 1fr); padding-bottom: 6.5rem; }
  .vcc-steps {
    position: static;
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--rule-2);
    padding-bottom: 0.75rem;
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
  }
  .vcc-steps::-webkit-scrollbar { display: none; }
  .vcc-steps__item { flex: none; }
  .vcc-steps__item + .vcc-steps__item::before { left: 0; top: 0.35rem; bottom: 0.35rem; width: 100%; height: 1px; }
  /* A scrolling strip hides the fact that there are five steps, which
     is the one thing a wizard index has to communicate. So the strip
     is not the answer here: print all five numerals and spend the
     width on the active step's label. The strip stays scrollable
     only as the fallback for very narrow screens. */
  .vcc-steps { justify-content: space-between; }
  .vcc-steps__btn {
    grid-template-columns: auto;
    justify-items: center;
    gap: 0;
    min-width: 2.5rem;
    padding: 0.45rem 0.35rem;
    white-space: nowrap;
  }
  .vcc-steps__label { display: none; }
  .vcc-steps__item.is-active { flex: 1 1 auto; min-width: 0; }
  .vcc-steps__item.is-active .vcc-steps__btn {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    gap: 0.4rem;
    padding-right: 0.2rem;
  }
  .vcc-steps__item.is-active .vcc-steps__label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .vcc-steps__item.is-active::before { left: 0; right: 0; top: auto; bottom: -0.75rem; width: auto; height: 2px; }

  /* the docket folds into the bottom bar */
  .vcc-rail { display: none; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 78px; }
  .vcc-step__title { max-width: none; }
  .vcc-opt, .vcc-mgmt { padding-left: 1.8rem; }
  .vcc-actions { flex-wrap: wrap; }
  .vcc-actions__spacer { display: none; }
  .vcc-actions .btn { flex: 1 1 auto; min-width: 0; }
  .vcc-btn-cancel { order: 3; flex: 1 1 100%; text-align: center; padding-top: 0.5rem; }
}

@media (pointer: coarse) {
  .vcc-opt, .vcc-mgmt { padding-block: 0.95rem; }
  .vcc-opt::before, .vcc-mgmt::before { width: 15px; height: 15px; margin-top: -7.5px; }
  .vcc-steps__btn { padding-block: 0.7rem; }
}

/* ========================================================
   11. WHAT THE PLAN INCLUDES (step 1)
   Printed from the catalog rather than written as static copy,
   because the list genuinely differs between plans. Set as a
   three-up ruled grid on wide screens so step 1 has substance
   without becoming a wall of checkmarks.
   ======================================================== */
.vcc-included {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 1.5rem;
  margin: 0;
}
.vcc-included__item {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.25rem;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.4;
}
.vcc-included__item::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 1.02rem;
  width: 5px;
  height: 5px;
  background: var(--green-deep);
}

@media (max-width: 1080px) {
  .vcc-included { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .vcc-included { grid-template-columns: minmax(0, 1fr); }
}

/* On a narrow screen the block title and its hint stop fitting on one
   line, and the wrapped hint reads as a second title. Stack them and
   let the hint become a caption. */
@media (max-width: 560px) {
  .vcc-block__head { display: block; }
  .vcc-block__hint { display: block; margin-top: 0.15rem; }
}

/* ========================================================
   9. THE COMMITMENT
   The one decision a funnel step asks for, given the only solid ink
   on an otherwise paper page. Shared by the review step and the
   wallet step, which both have exactly one thing to agree to. It
   carries the action that spends the amount, so the figure and its
   consequence read as one object rather than a number with a button
   floating beneath it.
   ======================================================== */
/* ---------------------------------------------------------------------------
   4. THE COMMITMENT
   The one decision this page exists to produce. It is the only solid ink
   block in an otherwise paper document, which is what separates it from the
   docket's subtotal beside it, and it carries the action that spends it, so
   the number and its consequence read as one object. The old layout put
   the same figure in two places with different labels, ten centimetres
   apart, which read as a mistake rather than as emphasis.
   ------------------------------------------------------------------------ */
.vcc-commit {
  margin-top: 2rem;
  padding: 1.4rem 1.5rem 1.5rem;
  background: var(--ink);
  color: var(--paper-3);
}
.vcc-commit__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--void-rule);
}
.vcc-commit__lbl {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
  margin-right: auto;
}
.vcc-commit__amt {
  font-family: var(--mono);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--paper-3);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.vcc-commit__per { font-family: var(--mono); font-size: 0.6875rem; color: var(--sand); }
.vcc-commit__note {
  margin-top: 0.8rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  line-height: 1.7;
  color: var(--paper-2);
  max-width: 56ch;
}
.vcc-commit__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}
.vcc-commit__actions .vcc-btn-cancel { margin-right: auto; }
.vcc-commit__actions .btn--sand { flex: 0 1 auto; min-width: 13rem; }

/* On a phone the pair wraps, and the primary has to lead and fill. */
@media (max-width: 560px) {
  .vcc-commit { padding: 1.2rem 1.15rem 1.3rem; }
  .vcc-commit__head { gap: 0.3rem 0.7rem; }
  .vcc-commit__lbl { flex: 1 0 100%; margin-right: 0; }
  .vcc-commit__actions { flex-direction: column-reverse; align-items: stretch; gap: 0.9rem; }
  .vcc-commit__actions .btn--sand { min-width: 0; width: 100%; }
  .vcc-commit__actions .vcc-btn-cancel {
    margin-right: 0;
    text-align: center;
    padding-bottom: 0.2rem;
  }
}

/* The secondary action has to survive on ink, so it is underlined text
   rather than a bordered button. */
.vcc-btn-cancel--light { color: var(--paper-2); border-bottom-color: var(--void-rule); }
.vcc-btn-cancel--light:hover { color: var(--paper-3); border-bottom-color: var(--paper-2); }
.vcc-commit .btn--sand:focus-visible { outline-color: var(--sand); }