/* VPS backup formulas — cart configuration step
   ----------------------------------------------------------------------------
   Loaded only by the VPS branch of configureproduct.tpl, so nothing here can
   reach another product's configuration screen. Every selector is under .vpsx
   for the same reason: this file shares a page with the cart's own stylesheet
   and with Bootstrap, and a bare `label` or `fieldset` rule would land on both.

   The palette is the store page's, restated rather than imported: this step is
   loaded without css/vps-plans.css, and pulling that whole file in for five
   colours would drag the plan grid, the hero and the configurator along with
   it. The values are the ones in vps-plans.css — keep the two in step.

   The controls are real radio inputs. The input itself is taken out of the
   visual flow but never hidden from assistive technology (no display:none, no
   visibility:hidden), and every visual state is driven from :checked and
   :focus-visible on that input, so keyboard, screen reader and pointer all
   describe the same thing. */

.vpsx {
  --vpsx-ink: #07152f;
  --vpsx-muted: #5e6878;
  --vpsx-line: #e7eaf0;
  --vpsx-primary: #05259f;
  --vpsx-radius: 8px;

  color: var(--vpsx-ink);
  margin: 0 0 28px;
}

.vpsx__lede {
  font-size: 14px;
  line-height: 1.6;
  color: var(--vpsx-muted);
  margin: 0 0 16px;
}

/* Bootstrap gives fieldset a width and a border of its own; both are cleared
   here rather than worked around further down. */
.vpsx__group {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

/* --- One block per formula ------------------------------------------------ */
/* Blocks rather than a dropdown: what separates Bronze from Gold is a retention
   schedule, and a schedule cannot be read from a closed <select>. Four of them
   side by side is the only arrangement in which the choice is a comparison
   rather than a guess. */

.vpsx__tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.vpsx__tier {
  position: relative;
  display: flex;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

/* Off-screen rather than display:none — a hidden input is not focusable, and
   the whole control would drop out of the tab order. */
.vpsx__tier input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

/* iCheck, and why this file works with it rather than against it.
   ---------------------------------------------------------------
   The cart's own bundle runs a bare jQuery("input").iCheck(...) — no selector,
   no exclusion list, so .no-icheck on the input does not save it. iCheck wraps
   every radio in a <div> of its own and paints a blue square there, which is
   the radio button that has no business being inside a card that IS the
   control, and which also moves the input out of sibling position so the
   :checked rule below stops matching.

   Rather than fight for the input, the wrapper is turned into the card's own
   click layer: stretched over the whole block and made invisible. iCheck's
   helper element inside it then covers the card, so a click anywhere on the
   card selects it — which is the behaviour a card promises — and iCheck's own
   .checked / .focus classes on that wrapper drive the visual state.

   The plain input:checked rules further down are kept as the path taken when
   iCheck is absent: a WHMCS update dropping the plugin must leave a control
   that still shows which formula is selected, not four identical white cards. */
.vpsx__tier > div[class*="iradio"],
.vpsx__tier > div[class*="icheckbox"] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  margin: 0;
  opacity: 0;
  z-index: 2;
}

.vpsx__tier-face {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 6px;
  padding: 15px 16px 16px;
  border: 1px solid var(--vpsx-line);
  border-radius: var(--vpsx-radius);
  background: #fff;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease,
              box-shadow 0.18s ease;
}

.vpsx__tier:hover .vpsx__tier-face {
  border-color: var(--vpsx-primary);
}

.vpsx__tier-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.vpsx__tier-sum {
  font-size: 13px;
  font-weight: 600;
  color: var(--vpsx-primary);
}

.vpsx__tier-detail {
  font-size: 12px;
  line-height: 1.5;
  color: var(--vpsx-muted);
  /* Pushes the price to the bottom edge whatever the description's length, so
     the four prices line up across the row instead of stepping. */
  flex: 1 1 auto;
}

.vpsx__tier-price {
  font-size: 14px;
  font-weight: 700;
  padding-top: 9px;
  border-top: 1px solid var(--vpsx-line);
}

.vpsx__tier-price em {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  color: var(--vpsx-muted);
}

/* The selected state, in full. No tick and no second marker: the block itself
   turns blue, which is the whole card changing rather than a detail inside it
   — and a filled card is legible at a glance from across the form. */
.vpsx__tier > div.checked ~ .vpsx__tier-face,
.vpsx__tier input:checked ~ .vpsx__tier-face {
  border-color: var(--vpsx-primary);
  background: var(--vpsx-primary);
  color: #fff;
  box-shadow: 0 2px 14px rgba(5, 37, 159, 0.22);
}

.vpsx__tier > div.checked ~ .vpsx__tier-face .vpsx__tier-sum,
.vpsx__tier > div.checked ~ .vpsx__tier-face .vpsx__tier-detail,
.vpsx__tier > div.checked ~ .vpsx__tier-face .vpsx__tier-price em,
.vpsx__tier input:checked ~ .vpsx__tier-face .vpsx__tier-sum,
.vpsx__tier input:checked ~ .vpsx__tier-face .vpsx__tier-detail,
.vpsx__tier input:checked ~ .vpsx__tier-face .vpsx__tier-price em {
  color: rgba(255, 255, 255, 0.88);
}

.vpsx__tier > div.checked ~ .vpsx__tier-face .vpsx__tier-price,
.vpsx__tier input:checked ~ .vpsx__tier-face .vpsx__tier-price {
  border-top-color: rgba(255, 255, 255, 0.28);
}

.vpsx__tier > div.focus ~ .vpsx__tier-face,
.vpsx__tier input:focus-visible ~ .vpsx__tier-face {
  outline: 2px solid var(--vpsx-primary);
  outline-offset: 2px;
}

/* --- The link that leads down to them -------------------------------------- */
/* Optional extras belong after the required fields, which puts them past the
   fold on this form. Rather than move them up — where they would interrupt a
   customer who does not want them — the offer is made once at the top and the
   customer decides whether to travel. */

.vpsx-jump {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
  padding: 11px 14px;
  border: 1px solid #dbe3f5;
  border-left: 3px solid #05259f;
  border-radius: 8px;
  background: #edf2fb;
  font-size: 13.5px;
  line-height: 1.5;
  color: #07152f;
}

.vpsx-jump i {
  color: #05259f;
}

.vpsx-jump a {
  font-weight: 700;
  color: #05259f;
  text-decoration: underline;
}

/* Land a little above the heading rather than flush against the top of the
   viewport, so the section reads as a section the moment it arrives. */
#vps-addons {
  scroll-margin-top: 24px;
}

/* --- Narrower screens ----------------------------------------------------- */

@media (max-width: 991px) {
  .vpsx__tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .vpsx__tiers {
    grid-template-columns: 1fr;
  }
}

/* --- The unit beside the block-storage slider ------------------------------ */
/* WHMCS counts this option in blocks and shows the block count everywhere: the
   slider reads 5, the summary on the right reads 5, and the machine is given
   50 GB. The multiplication has nowhere to live in WHMCS's own markup, so it is
   stated here, next to the number the customer is moving. */

.vpsx-unit {
  margin-left: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #05259f;
  white-space: nowrap;
}

/* --- SSH access: how this server gets its key ------------------------------ */
/* Same control as the backup formulas above, deliberately: this step already
   teaches the customer that a bordered block which turns blue is a choice, and
   inventing a second visual language for the choice directly beneath it would
   undo that. Two columns rather than four because these are a fork, not
   comparable tiers, and the safer branch opens a form underneath itself.

   The selected state is expressed twice, and that redundancy is the point:

     input:checked ~ .face   works with no JavaScript at all
     .is-selected .face      survives a plugin moving the input out of sibling
                             position, which is exactly what iCheck does

   iCheck is told to leave these inputs alone (class="no-icheck", honoured by
   both initialisers in js/scripts.js), and the rule at the bottom of this block
   hides its decoration if a third one is ever added. Three defences for one
   radio button is not paranoia here: when this control silently stops
   reflecting what is selected, the customer's server is built with the wrong
   kind of key and nobody finds out until they try to log in. */

.vpsx__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.vpsx__choice {
  position: relative;
  display: flex;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

/* Off-screen rather than display:none — a hidden input is not focusable, and
   the whole control would drop out of the tab order. */
.vpsx__choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.vpsx__choice-face {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 6px;
  padding: 15px 16px 16px;
  border: 1px solid var(--vpsx-line);
  border-radius: var(--vpsx-radius);
  background: #fff;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease,
              box-shadow 0.18s ease;
}

.vpsx__choice:hover .vpsx__choice-face {
  border-color: var(--vpsx-primary);
}

.vpsx__choice input:checked ~ .vpsx__choice-face,
.vpsx__choice.is-selected .vpsx__choice-face {
  border-color: var(--vpsx-primary);
  background: var(--vpsx-primary);
  color: #fff;
  box-shadow: 0 2px 14px rgba(5, 37, 159, 0.22);
}

.vpsx__choice input:checked ~ .vpsx__choice-face .vpsx__choice-sum,
.vpsx__choice input:checked ~ .vpsx__choice-face .vpsx__choice-detail,
.vpsx__choice.is-selected .vpsx__choice-face .vpsx__choice-sum,
.vpsx__choice.is-selected .vpsx__choice-face .vpsx__choice-detail {
  color: rgba(255, 255, 255, 0.88);
}

.vpsx__choice input:checked ~ .vpsx__choice-face .vpsx-key__list,
.vpsx__choice.is-selected .vpsx__choice-face .vpsx-key__list,
.vpsx__choice input:checked ~ .vpsx__choice-face .vpsx-key__list strong,
.vpsx__choice.is-selected .vpsx__choice-face .vpsx-key__list strong,
.vpsx__choice input:checked ~ .vpsx__choice-face .vpsx-key__list code,
.vpsx__choice.is-selected .vpsx__choice-face .vpsx-key__list code {
  color: rgba(255, 255, 255, 0.88);
}

.vpsx__choice input:checked ~ .vpsx__choice-face .vpsx-key__list-type,
.vpsx__choice.is-selected .vpsx__choice-face .vpsx-key__list-type {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.vpsx__choice input:checked ~ .vpsx__choice-face .vpsx__choice-flag,
.vpsx__choice.is-selected .vpsx__choice-face .vpsx__choice-flag {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Keyboard focus has to be visible on the block, since the input it belongs to
   is the thing that is off-screen. */
.vpsx__choice input:focus-visible ~ .vpsx__choice-face,
.vpsx__choice.is-focused .vpsx__choice-face {
  outline: 2px solid var(--vpsx-primary);
  outline-offset: 2px;
}

.vpsx__choice-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.vpsx__choice-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e8f5ec;
  color: #1d7a44;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  vertical-align: 2px;
}

.vpsx__choice-sum {
  font-size: 13px;
  font-weight: 600;
  color: var(--vpsx-primary);
}

.vpsx__choice-detail {
  font-size: 12px;
  line-height: 1.5;
  color: var(--vpsx-muted);
  flex: 1 1 auto;
}

/* Last line of defence. If any plugin ever decorates these inputs anyway, its
   square is removed rather than left drawn inside a block that already IS the
   control. Scoped to .vpsx so no other part of the cart is touched. */
.vpsx .iradio_square-blue,
.vpsx .icheckbox_square-blue,
.vpsx .iCheck-helper {
  display: none !important;
}

/* --- The public key field, and how to make one ----------------------------- */

.vpsx-key__panel {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid var(--vpsx-line);
  border-radius: var(--vpsx-radius);
  background: #fafbfd;
}

/* [hidden] loses to the display rules a stylesheet sets on the same element in
   Bootstrap; stated explicitly so the panel is genuinely gone when it is off. */
.vpsx-key__panel[hidden] {
  display: none;
}

.vpsx-key__label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
}

.vpsx-key__input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d3dae6;
  border-radius: 6px;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--vpsx-ink);
  resize: vertical;
}

.vpsx-key__input:focus {
  border-color: var(--vpsx-primary);
  outline: 2px solid rgba(5, 37, 159, .18);
  outline-offset: 0;
}

.vpsx-key__hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--vpsx-muted);
}

.vpsx-key__help {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--vpsx-line);
}

.vpsx-key__help-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
}

.vpsx-key__tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: #eef1f7;
}

.vpsx-key__tab {
  border: 0;
  padding: 5px 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--vpsx-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.vpsx-key__tab.is-active {
  background: #fff;
  color: var(--vpsx-ink);
  box-shadow: 0 1px 2px rgba(7, 21, 47, .12);
}

.vpsx-key__pane[hidden] {
  display: none;
}

.vpsx-key__steps {
  margin: 14px 0 0;
  padding-left: 20px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--vpsx-ink);
}

.vpsx-key__steps li + li {
  margin-top: 10px;
}

.vpsx-key__cmd {
  margin: 6px 0;
  padding: 9px 12px;
  border: 1px solid #dfe4ee;
  border-radius: 6px;
  background: #0f1b33;
  color: #e8ecf6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
}

.vpsx-key__cmd code {
  padding: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

.vpsx-key__alt {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--vpsx-muted);
}

/* The one line on this page that must not be skimmed past. */
.vpsx-key__warn {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #c8860d;
  border-radius: 0 6px 6px 0;
  background: #fdf6e7;
  font-size: 12.5px;
  line-height: 1.6;
  color: #6b4a05;
}

.vpsx-key__panel code {
  padding: 1px 5px;
  border-radius: 4px;
  background: #eceff5;
  color: #23324d;
  font-size: 11.5px;
}

.vpsx-key__cmd,
.vpsx-key__warn code {
  color: inherit;
}

.vpsx-key__warn code {
  background: rgba(200, 134, 13, .14);
}

@media (max-width: 767px) {
  .vpsx__choices {
    grid-template-columns: 1fr;
  }
}

/* The account-keys choice spans the row: it carries a list, and a list in a
   half-width block wraps into something unreadable next to two short blocks. */
.vpsx__choice--wide {
  grid-column: 1 / -1;
}

.vpsx-key__list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.6;
  color: var(--vpsx-muted);
}

.vpsx-key__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.vpsx-key__list strong {
  color: var(--vpsx-ink);
  font-weight: 600;
}

.vpsx-key__list-type {
  padding: 0 6px;
  border-radius: 4px;
  background: #eef1f7;
  font-size: 11px;
  font-weight: 600;
}

.vpsx-key__list code {
  padding: 0;
  background: none;
  color: var(--vpsx-muted);
  font-size: 11px;
  word-break: break-all;
}

/* Scope tabs — what the customer is backing up
   ----------------------------------------------------------------------------
   Shown only once a block volume is being ordered: with no volume there is one
   thing to back up and a tab strip offering a choice of one is furniture.

   Real radios, for the reason the tier blocks are: a tab strip built from
   buttons and aria-selected has to reimplement arrow-key navigation and
   grouping, and gets both subtly wrong. A radiogroup already is a tab strip
   semantically — one choice among three, arrow keys included, announced as
   such. The input is taken out of the visual flow and never hidden from
   assistive technology, exactly as above. */

.vpsx__scope {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px;
  background: #f4f6fa;
  border: 1px solid var(--vpsx-line);
  border-radius: var(--vpsx-radius);
}

.vpsx__scope-tab {
  position: relative;
  flex: 1 1 0;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

.vpsx__scope-tab input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* iCheck wraps an input it is allowed near, which would drop a radio square
   into the middle of the strip. Same defence as the tier blocks. */
.vpsx__scope-tab > div[class*="iradio"],
.vpsx__scope-tab > div[class*="icheckbox"] {
  display: none !important;
}

.vpsx__scope-face {
  display: block;
  padding: 9px 12px;
  border-radius: calc(var(--vpsx-radius) - 3px);
  color: var(--vpsx-muted);
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  transition: background .12s ease, color .12s ease;
}

.vpsx__scope-tab:hover .vpsx__scope-face {
  color: var(--vpsx-ink);
}

.vpsx__scope-tab > div.checked ~ .vpsx__scope-face,
.vpsx__scope-tab input:checked ~ .vpsx__scope-face {
  background: #fff;
  color: var(--vpsx-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(7, 21, 47, .10);
}

.vpsx__scope-tab input:focus-visible ~ .vpsx__scope-face {
  outline: 2px solid var(--vpsx-primary);
  outline-offset: 2px;
}

/* The heading above each ladder once there are two of them. Without it the
   customer sees eight tier blocks in a column and no statement of which disk
   the top four apply to. */
.vpsx__pane-title {
  margin: 0 0 8px;
  color: var(--vpsx-ink);
  font-size: 13px;
  font-weight: 600;
}