/* Shared product configurator. Only loaded by configureproduct.tpl. */
html.sh-configurator-page,
html.sh-configurator-page body { background: #f5f5f7 !important; }
.sh-configurator-page .wrapper.sec-normal,
.sh-configurator-page .wrapper.sec-normal > .content,
.sh-configurator-page .inner-content,
.sh-configurator-page section#main-body,
.sh-configurator-page section#main-body > .container,
.sh-configurator-page section#main-body > .container > .main-content {
  background: transparent !important;
  padding: 0 !important;
  max-width: 100% !important;
}
.sh-configurator-page .header-lined,
.sh-configurator-page .section-heading,
.sh-configurator-page .section-subheading { display: none !important; }
.sh-configurator-page section#main-body .main-content > .row { margin-left: 0; margin-right: 0; }
.sh-configurator-page section#main-body .main-content > .row > .col-xs-12 { width: 100%; min-width: 0; padding-left: 0; padding-right: 0; }

#sh-configurator {
  --cfg-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cfg-accent: #0050d7;
  --cfg-accent-strong: #003da5;
  --cfg-accent-border: var(--cfg-accent);
  --cfg-accent-soft: #f2fcff;
  --cfg-accent-shadow: var(--cfg-accent-border);
  --cfg-selection: var(--cfg-accent);
  --cfg-focus: rgba(0, 80, 215, .2);
  --cfg-ink: #00185e;
  --cfg-muted: #5b6294;
  --cfg-line: #e5e7eb;
  --cfg-soft: #f5f5f7;
  color-scheme: light;
  color: var(--cfg-ink);
  background: #f5f5f7;
  padding: 48px 0 72px;
  font: 400 15px/1.55 var(--cfg-font);
  -webkit-font-smoothing: antialiased;
}
#sh-configurator *, #sh-configurator *::before, #sh-configurator *::after { box-sizing: border-box; }
#sh-configurator [hidden] { display: none !important; }
#sh-configurator a { color: inherit; }
#sh-configurator .sh-cfg-inner { width: 100%; max-width: 1440px; margin: auto; padding: 0 32px; }
#sh-configurator .sh-cfg-kicker { margin: 0 0 10px; font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--cfg-muted); }
#sh-configurator .sh-cfg-title { margin: 0; font-family: inherit; font-size: clamp(30px, 3vw, 42px); font-weight: 600; line-height: 1.15; letter-spacing: -.045em; color: var(--cfg-ink); }
#sh-configurator .sh-cfg-subtitle { margin: 14px 0 32px; color: var(--cfg-muted); font-size: 15px; }
#sh-configurator .sh-cfg-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 390px); gap: 28px; align-items: start; }
#sh-configurator .sh-cfg-left, #sh-configurator .sh-cfg-layout > *, #sh-configurator .sh-cfg-product-info > div { min-width: 0; }
#sh-configurator .sh-cfg-section,
#sh-configurator .sh-cfg-product-info { background: #fff; border: 1px solid var(--cfg-line); border-radius: 20px; padding: 28px; margin: 0 0 22px; box-shadow: 0 8px 28px rgba(24, 29, 35, .025); }
#sh-configurator .sh-cfg-product-info { display: flex; gap: 18px; align-items: flex-start; padding: 28px; }
#sh-configurator .sh-cfg-product-icon { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; background: #f0f1f3; border: 1px solid var(--cfg-line); border-radius: 10px; color: #4b535c; font-size: 20px; }
#sh-configurator .sh-cfg-product-name { margin: 0 0 14px; color: var(--cfg-ink); font-size: 20px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
#sh-configurator .sh-cfg-product-desc { color: var(--cfg-muted); font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
#sh-configurator .sh-cfg-product-desc p { margin: 0 0 6px; color: inherit; font-size: inherit; }
/* Read-only base specifications, styled like the server configurator reference. */
#sh-configurator .sh-cfg-product-config { display: grid; gap: 22px; margin-bottom: 22px; color: #30343b; }
#sh-configurator .sh-cfg-spec-panel { min-width: 0; background: #fff; border: 1px solid #e6e8ec; border-radius: 8px; }
#sh-configurator .sh-cfg-hardware-head { padding: 26px 24px 20px; text-align: center; }
#sh-configurator .sh-cfg-spec-heading { margin: 0; color: #30343b; font: 600 17px/1.4 var(--cfg-font); text-transform: uppercase; letter-spacing: .02em; }
#sh-configurator .sh-cfg-hardware-name { margin: 10px 0 0; color: #30343b; font-size: 15px; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
#sh-configurator .sh-cfg-hardware-location { margin: 8px 0 0; color: #646e7a; font-size: 13px; }
#sh-configurator .sh-cfg-fixed-fields { display: grid; gap: 18px; margin: 0; padding: 6px 24px 26px; }
#sh-configurator .sh-cfg-fixed-row { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 18px; }
#sh-configurator .sh-cfg-fixed-label { margin: 0; color: #30343b; font-size: 17px; font-weight: 500; }
#sh-configurator .sh-cfg-fixed-value { min-width: 0; margin: 0; padding: 12px 16px; border: 2px solid #d7d9dc; border-radius: 5px; background: #f5f5f5; color: #30343b; font-size: 17px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
#sh-configurator .sh-cfg-spec-panel-head { padding: 20px 24px; border-bottom: 3px solid #f0f0f2; }
#sh-configurator .sh-cfg-spec-caption { margin: 9px 0 0; color: #646e7a; font-size: 13px; line-height: 1.6; }
#sh-configurator .sh-cfg-spec-selected { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; min-width: 0; margin: 26px 24px 24px; padding: 20px 22px; border: 2px solid #d90429; border-radius: 5px; background: #fff; }
#sh-configurator .sh-cfg-spec-check { position: absolute; top: 0; inset-inline-start: 0; display: grid; place-items: center; width: 24px; height: 24px; transform: translate(-50%, -50%); border-radius: 50%; background: #d90429; color: #fff; font-size: 16px; font-weight: 600; line-height: 1; }
#sh-configurator .sh-cfg-server-specs { display: flex; flex: 1 1 270px; flex-wrap: wrap; gap: 14px 24px; min-width: 0; }
#sh-configurator .sh-cfg-server-selected-label { flex-basis: 100%; color: #30343b; font-size: 14px; font-weight: 600; }
#sh-configurator .sh-cfg-server-spec { flex: 1 1 120px; min-width: 0; }
#sh-configurator .sh-cfg-server-spec-label { display: block; margin-bottom: 4px; color: #646e7a; font-size: 12px; }
#sh-configurator .sh-cfg-server-spec-value { display: block; color: #30343b; font-size: 17px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
#sh-configurator .sh-cfg-server-price { flex: 0 1 190px; margin-inline-start: auto; color: #505761; font-size: 15px; font-weight: 500; line-height: 1.6; text-align: end; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#sh-configurator .sh-cfg-network-value { min-width: 0; color: #30343b; font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
#sh-configurator .sh-cfg-product-notes { padding: 18px 24px; border: 1px solid #e6e8ec; border-radius: 8px; background: #fff; color: #505761; font-size: 14px; overflow-wrap: anywhere; }
#sh-configurator .sh-cfg-product-notes p { margin: 0; color: inherit; font-size: inherit; }
#sh-configurator .sh-cfg-product-notes p + p { margin-top: 8px; }
#sh-configurator .sh-cfg-section-label { display: block; margin: 0 0 18px; color: var(--cfg-ink); font: 600 17px/1.4 var(--cfg-font); letter-spacing: -.015em; }
#sh-configurator [data-option-name] { scroll-margin-top: calc(var(--header-total-height, 112px) + 24px); }
#sh-configurator [data-option-name] .sh-cfg-section-label { font-size: 20px; }
#sh-configurator .sh-cfg-note { display: block; margin: 6px 0 12px; color: var(--cfg-muted); font-size: 13px; }
#sh-configurator .sh-cfg-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
#sh-configurator .sh-cfg-fields > * { min-width: 0; }
#sh-configurator .sh-cfg-field-label { display: block; color: var(--cfg-ink); font-size: 13px; font-weight: 600; margin: 0 0 8px; }
#sh-configurator .sh-cfg-custom-field { margin-bottom: 18px; min-width: 0; }
#sh-configurator .sh-cfg-custom-field:last-child { margin-bottom: 0; }
#sh-configurator .sh-cfg-config-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
#sh-configurator .sh-cfg-config-options > .sh-cfg-section { margin-bottom: 0; min-width: 0; }
#sh-configurator .sh-cfg-config-options > .sh-cfg-section--choices,
#sh-configurator .sh-cfg-config-options > .sh-cfg-section--os { grid-column: 1 / -1; }

/* Native controls remain the source of truth for WHMCS serialization. */
#sh-configurator select,
#sh-configurator .sh-cfg-text-input,
#sh-configurator .sh-cfg-custom-field input:not([type=checkbox]):not([type=radio]),
#sh-configurator .sh-cfg-custom-field textarea,
#sh-configurator .sh-cfg-qty-wrap input {
  width: 100%; max-width: 100%; min-width: 0; min-height: 48px; height: auto;
  border: 1px solid #dedee3; border-radius: 10px; background-color: #fafafa;
  padding: 12px 14px; color: var(--cfg-ink); font: 400 15px/1.5 var(--cfg-font);
  box-shadow: none; transition: border-color .16s, box-shadow .16s;
}
#sh-configurator select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-inline-end: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23656c75' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 16px; background-position: right 14px center; }
#sh-configurator select option { background: white; color: var(--cfg-ink); }
#sh-configurator textarea { resize: vertical; min-height: 100px; }
#sh-configurator input::placeholder { color: #7b838c; }
#sh-configurator input[type=radio], #sh-configurator input[type=checkbox] { accent-color: var(--cfg-accent); }
#sh-configurator input:focus, #sh-configurator select:focus, #sh-configurator textarea:focus { outline: 3px solid var(--cfg-focus); outline-offset: 2px; border-color: var(--cfg-accent); }
#sh-configurator button:focus-visible, #sh-configurator a:focus-visible { outline: 3px solid var(--cfg-focus); outline-offset: 3px; }
#sh-configurator .sh-cfg-qty-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#sh-configurator .sh-cfg-qty-wrap input { width: 112px; }
#sh-configurator .sh-cfg-qty-unit { color: var(--cfg-muted); font-size: 13px; overflow-wrap: anywhere; }
#sh-configurator .sh-cfg-billing-select-wrap { display: none; }
#sh-configurator .sh-cfg-billing-tabs { display: flex; gap: 4px; padding: 5px; background: #f0f0f3; border-radius: 13px; flex-wrap: wrap; }
#sh-configurator .sh-cfg-billing-tab { position: relative; flex: 1 1 160px; min-width: 0; }
#sh-configurator .sh-cfg-billing-tab label { display: flex; align-items: center; justify-content: center; min-height: 44px; height: 100%; padding: 10px 12px; margin: 0; border: 1px solid transparent; border-radius: 9px; color: var(--cfg-muted); background: transparent; text-align: center; font-size: 13px; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; }
#sh-configurator .sh-cfg-billing-tab input,
#sh-configurator .sh-cfg-option-item > input,
#sh-configurator .sh-cfg-addon-card > input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
#sh-configurator .sh-cfg-billing-tab input:checked + label { border-color: var(--cfg-accent-border); color: var(--cfg-accent-strong); background: var(--cfg-accent-soft); box-shadow: 0 2px 5px #1d1d1f12; }
#sh-configurator .sh-cfg-billing-tab input:focus-visible + label,
#sh-configurator .sh-cfg-option-item input:focus-visible + label,
#sh-configurator .sh-cfg-addon-card input:focus-visible + label { outline: 3px solid var(--cfg-focus); outline-offset: 3px; }
#sh-configurator .sh-cfg-option-list { display: flex; flex-direction: column; gap: 10px; }
#sh-configurator .sh-cfg-option-item { position: relative; min-width: 0; }
#sh-configurator .sh-cfg-option-label { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; margin: 0; min-height: 64px; border: 1px solid #e2e4e9; border-radius: 12px; color: var(--cfg-ink); background: #fff; cursor: pointer; }
#sh-configurator .sh-cfg-option-label:hover, #sh-configurator .sh-cfg-addon-label:hover { border-color: #929aa3; background: #fafbfc; }
#sh-configurator .sh-cfg-option-item input:checked + label,
#sh-configurator .sh-cfg-addon-card input:checked + label { border-color: var(--cfg-accent-border); background: var(--cfg-accent-soft); box-shadow: 0 0 0 1px var(--cfg-accent-shadow); }
#sh-configurator .sh-cfg-option-left { display: flex; gap: 12px; align-items: center; min-width: 0; }
#sh-configurator .sh-cfg-option-name { color: var(--cfg-ink); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
#sh-configurator .sh-cfg-option-price { color: var(--cfg-accent); font-size: 13px; text-align: end; overflow-wrap: anywhere; }
#sh-configurator .sh-cfg-radio-dot, #sh-configurator .sh-cfg-check-box { flex: 0 0 20px; width: 20px; height: 20px; border: 1px solid #9da5ae; border-radius: 50%; background: white; display: grid; place-items: center; }
#sh-configurator .sh-cfg-check-box { border-radius: 4px; }
#sh-configurator input:checked + label .sh-cfg-radio-dot,
#sh-configurator input:checked + label .sh-cfg-check-box { background: var(--cfg-accent); border-color: var(--cfg-accent); }
#sh-configurator input:checked + label .sh-cfg-radio-dot::after { content: ''; width: 7px; height: 7px; background: white; border-radius: 50%; }
#sh-configurator input:checked + label .sh-cfg-check-box::after { content: '✓'; color: white; font-size: 13px; line-height: 1; }
#sh-configurator input:disabled + label { opacity: .5; cursor: not-allowed; }

/* OS family cards with searchable edition menus, matching the reference layout. */
#sh-configurator .sh-cfg-section--os { background: #f7f7fb; border-color: #eeeef3; }
#sh-configurator .sh-cfg-section--os .sh-cfg-section-label { margin-bottom: 24px; font-weight: 500; font-size: 24px; }
#sh-configurator .sh-cfg-os-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; }
#sh-configurator .sh-cfg-os-card { position: relative; min-width: 0; border: 1px solid #e6e6ed; border-radius: 7px; background: #fff; box-shadow: 0 2px 5px #17172b16, 0 1px 2px #17172b10; }
#sh-configurator .sh-cfg-os-card.is-selected { border-color: var(--cfg-selection); background: var(--cfg-accent-soft); box-shadow: 0 0 0 1px var(--cfg-selection), 0 2px 5px #17172b10; }
#sh-configurator .sh-cfg-os-card-head { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 158px; padding: 24px 12px; text-align: center; }
#sh-configurator .sh-cfg-os-name { margin: 0; color: var(--cfg-ink); font: 400 17px/1.4 var(--cfg-font); overflow-wrap: anywhere; }
#sh-configurator .sh-cfg-os-mark { display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; }
#sh-configurator .sh-cfg-os-mark img, #sh-configurator .sh-cfg-os-fallback { grid-area: 1 / 1; }
#sh-configurator .sh-cfg-os-mark img { display: block; width: 52px; height: 52px; object-fit: contain; z-index: 1; background: #fff; }
#sh-configurator .sh-cfg-os-card.is-selected .sh-cfg-os-mark img { background: var(--cfg-accent-soft); }
#sh-configurator .sh-cfg-os-fallback { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 13px; background: #f0f1f5; color: #60646c; font: 500 18px/1 var(--cfg-font); }
#sh-configurator .sh-cfg-os-card-check { display: none; position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); z-index: 2; width: 32px; height: 32px; border-radius: 50%; background: var(--cfg-selection); color: #fff; font: 600 18px/1 var(--cfg-font); place-items: center; pointer-events: none; }
#sh-configurator .sh-cfg-os-card.is-selected > .sh-cfg-os-card-check { display: grid; }
#sh-configurator .sh-cfg-os-card-footer { padding: 16px 14px; border-top: 1px solid #e2e2e6; }
#sh-configurator .sh-cfg-version-field { position: relative; min-width: 0; }
#sh-configurator input.sh-cfg-version-input { display: block; width: 100%; min-width: 0; height: 44px; padding: 10px 34px 10px 12px; border: 1px solid #aeb0b6; border-radius: 5px; background: #fff; color: var(--cfg-ink); font: 400 14px/1.5 var(--cfg-font); text-overflow: ellipsis; box-shadow: none; }
#sh-configurator input.sh-cfg-version-input::placeholder { color: #777b83; opacity: 1; }
#sh-configurator input.sh-cfg-version-input:focus { outline: 0; border-color: var(--cfg-accent-strong); box-shadow: 0 0 0 2px var(--cfg-accent-strong); }
#sh-configurator .sh-cfg-version-input:disabled { cursor: not-allowed; background: #f6f6f8; opacity: .65; }
#sh-configurator .sh-cfg-version-toggle { position: absolute; inset-inline-end: 0; top: 0; display: grid; place-items: center; height: 44px; width: 34px; padding: 0; border: 0; background: transparent; color: #74777d; cursor: pointer; }
#sh-configurator .sh-cfg-version-toggle::after { content: ''; width: 0; height: 0; border-inline: 5px solid transparent; border-top: 5px solid currentColor; }
#sh-configurator .is-open .sh-cfg-version-toggle { color: var(--cfg-accent-strong); }
#sh-configurator .is-open .sh-cfg-version-toggle::after { transform: rotate(180deg); }
#sh-configurator .sh-cfg-version-popup { position: fixed; z-index: 1200; padding: 6px 0; border: 1px solid #e9e9ef; border-radius: 5px; background: #fff; color: #222; box-shadow: 0 7px 20px #1b1b3030; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b7b7bd transparent; }
#sh-configurator .sh-cfg-version-option { display: block; width: 100%; padding: 13px 16px; border: 0; border-radius: 0; background: #fff; color: var(--cfg-ink); font: 400 15px/1.55 var(--cfg-font); text-align: start; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
#sh-configurator .sh-cfg-version-option:hover, #sh-configurator .sh-cfg-version-option.is-highlighted { background: #f2f3f6; }
#sh-configurator .sh-cfg-version-option[aria-selected=true] { color: var(--cfg-accent-strong); background: var(--cfg-accent-soft); }
#sh-configurator .sh-cfg-version-option:disabled { color: #a2a5ac; background: #fafafa; cursor: not-allowed; }
#sh-configurator .sh-cfg-version-empty { margin: 0; padding: 20px 16px; color: var(--cfg-muted); font-size: 14px; }
#sh-configurator .sh-cfg-selection { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding: 0 2px; overflow-wrap: anywhere; }
#sh-configurator .sh-cfg-selection > div { min-width: 0; }
#sh-configurator .sh-cfg-selection-label { display: block; color: var(--cfg-muted); font: 400 11px/1.5 var(--cfg-font); }
#sh-configurator .sh-cfg-selection-value { display: block; color: var(--cfg-ink); font: 500 12px/1.5 var(--cfg-font); }
#sh-configurator .sh-cfg-reset { flex-shrink: 0; min-height: 44px; padding: 8px 0 8px 12px; border: 0; background: transparent; color: var(--cfg-accent-strong); font: 400 12px/1.4 var(--cfg-font); cursor: pointer; }
#sh-configurator .sh-cfg-reset:disabled { color: #8c8f97; cursor: default; }
#sh-configurator .sh-cfg-source { display: none; }
#sh-configurator .sh-cfg-choice-list { display: grid; gap: 16px; }
#sh-configurator .sh-cfg-choice { display: flex; align-items: center; gap: 18px; width: 100%; min-width: 0; min-height: 72px; padding: 18px 20px; border: 1px solid #d5d7db; border-radius: 12px; background: #fff; color: var(--cfg-ink); font: 400 16px/1.5 var(--cfg-font); text-align: start; cursor: pointer; }
#sh-configurator .sh-cfg-choice-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#sh-configurator .sh-cfg-choice-primary { font-weight: 700; }
#sh-configurator .sh-cfg-choice-spec { font-weight: 400; white-space: pre-wrap; }
#sh-configurator .sh-cfg-choice:hover { border-color: #939ba4; background: #fafbfc; }
#sh-configurator .sh-cfg-choice[aria-checked=true] { border-color: var(--cfg-accent-border); background: var(--cfg-accent-soft); box-shadow: 0 0 0 1px var(--cfg-accent-shadow); }
#sh-configurator .sh-cfg-choice[aria-checked=true] .sh-cfg-radio-dot { background: var(--cfg-accent); border-color: var(--cfg-accent); }
#sh-configurator .sh-cfg-choice[aria-checked=true] .sh-cfg-radio-dot::after { content: ''; width: 7px; height: 7px; background: #fff; border-radius: 50%; }
#sh-configurator .sh-cfg-choice:disabled { opacity: .5; cursor: not-allowed; background: #f5f5f7; }
#sh-configurator .sh-cfg-choice small { color: var(--cfg-muted); font-size: 11px; font-weight: 400; }
/* Catalog features have independent help controls; opening help never selects an option. */
#sh-configurator .sh-cfg-choice-row { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 76px; padding: 18px 20px; border: 1px solid #d5d7db; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
#sh-configurator .sh-cfg-choice-row:hover { border-color: #939ba4; background: #fafbfc; }
#sh-configurator .sh-cfg-choice-row.is-selected { border-color: var(--cfg-accent-border); background: var(--cfg-accent-soft); box-shadow: 0 0 0 1px var(--cfg-accent-shadow); }
#sh-configurator .sh-cfg-choice-row > .sh-cfg-choice { flex: 0 1 auto; width: auto; min-width: 0; min-height: 32px; padding: 0; border: 0; border-radius: 4px; background: transparent; box-shadow: none; }
#sh-configurator .sh-cfg-choice-row:has(> .sh-cfg-choice:focus-visible) { outline: 2px solid var(--cfg-accent-strong); outline-offset: 3px; }
#sh-configurator .sh-cfg-choice-row > .sh-cfg-choice:focus-visible { outline: none; }
#sh-configurator .sh-cfg-choice-price { display: flex; flex: 0 0 auto; flex-direction: column; gap: 3px; min-width: 0; max-width: 34%; margin-inline-start: auto; color: var(--cfg-accent); text-align: end; overflow-wrap: anywhere; }
#sh-configurator .sh-cfg-choice-amount { font: 700 18px/1.35 var(--cfg-font); }
#sh-configurator .sh-cfg-choice-price-detail { color: var(--cfg-muted); font: 400 12px/1.45 var(--cfg-font); }
#sh-configurator .sh-cfg-choice-row.is-disabled { background: #f5f5f7; cursor: not-allowed; }
#sh-configurator .sh-cfg-choice-row.is-disabled .sh-cfg-choice-price { color: var(--cfg-muted); }
#sh-configurator .sh-cfg-feature-help { display: inline-flex; flex: 0 0 auto; align-items: center; max-width: 100%; }
#sh-configurator .sh-cfg-feature-badge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 28px; padding: 4px 7px; border: 1px solid transparent; border-radius: 5px; background: #b8efff; color: var(--cfg-ink); font: 400 12px/1.35 var(--cfg-font); white-space: nowrap; cursor: help; }
#sh-configurator .sh-cfg-feature-badge:hover, #sh-configurator .sh-cfg-feature-badge[aria-expanded=true] { background: #a4e8ff; }
#sh-configurator .sh-cfg-feature-info-icon { display: inline-grid; place-items: center; width: 13px; height: 13px; border: 1.25px solid currentColor; border-radius: 50%; font: 600 9px/1 var(--cfg-font); }
#sh-configurator .sh-cfg-feature-tooltip { display: block; position: fixed; z-index: 1250; padding: 14px 16px; border: 1px solid #e4ebf7; border-radius: 8px; background: #fff; color: var(--cfg-muted); box-shadow: 0 5px 18px rgba(0, 50, 130, .17); font: 400 15px/1.55 var(--cfg-font); text-align: start; white-space: normal; overflow-wrap: anywhere; overflow-y: auto; cursor: default; }
#sh-configurator .sh-cfg-addon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
#sh-configurator .sh-cfg-addon-card { position: relative; min-width: 0; }
#sh-configurator .sh-cfg-addon-label { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 18px; margin: 0; border: 1px solid #e2e4e9; border-radius: 12px; background: #fff; cursor: pointer; }
#sh-configurator .sh-cfg-addon-name { display: flex; align-items: center; gap: 10px; color: var(--cfg-ink); font-weight: 600; font-size: 14px; }
#sh-configurator .sh-cfg-addon-desc { flex: 1; color: var(--cfg-muted); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
#sh-configurator .sh-cfg-addon-price { color: var(--cfg-accent); font-size: 14px; font-weight: 600; }
#sh-configurator .sh-cfg-help-notice { display: flex; align-items: baseline; gap: 10px; padding: 6px 2px; color: var(--cfg-muted); font-size: 13px; }
#sh-configurator .sh-cfg-help-notice a { text-decoration: underline; text-underline-offset: 3px; }
#sh-configurator .sh-cfg-errors { border: 1px solid #dfb8b8; border-radius: 10px; color: #8f3030; background: #fff7f7; padding: 18px; margin-bottom: 20px; scroll-margin-top: 140px; }
#sh-configurator .sh-cfg-errors ul { margin: 8px 0 0; padding-inline-start: 20px; }

/* Grouped configuration summary. WHMCS remains the source of every amount. */
#sh-configurator .sh-cfg-summary { --summary-ink: #30343b; --summary-muted: #6c727b; --summary-line: #e6e8ec; display: flex; flex-direction: column; position: static; max-height: none; background: #fff; color: var(--summary-ink); border: 1px solid var(--summary-line); border-radius: 16px; box-shadow: 0 10px 32px rgba(24, 29, 35, .04); overflow: hidden; }
#sh-configurator .sh-cfg-summary-head { flex: 0 0 auto; padding: 28px 24px 18px; display: flex; align-items: center; justify-content: center; }
#sh-configurator .sh-cfg-summary-title { margin: 0; color: var(--summary-ink); font: 600 20px/1.35 var(--cfg-font); text-align: center; }
#sh-configurator .sh-cfg-summary-body, #sh-configurator .sh-cfg-summary-content, #sh-configurator #producttotal { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
#sh-configurator .sh-cfg-summary-body { padding: 0; overflow: visible; }
#sh-configurator .sh-cfg-summary-loader { display: none; flex: 0 0 auto; color: var(--summary-muted); font-size: 12px; padding: 0 24px 12px; }
#sh-configurator .sh-cfg-summary-details { min-height: 0; max-height: none; overflow: visible; padding: 0 24px 20px; }
#sh-configurator #producttotal { font-size: 13px; color: var(--summary-ink); overflow-wrap: anywhere; }
#sh-configurator #producttotal .product-name { display: block; margin: 0 0 6px; color: var(--summary-ink); font-size: 15px; font-weight: 600; line-height: 1.5; }
#sh-configurator #producttotal .product-group { display: block; color: var(--summary-muted); font-size: 12px; margin-bottom: 18px; }
#sh-configurator #producttotal .sh-cfg-summary-details.is-grouped > .product-name,
#sh-configurator #producttotal .sh-cfg-summary-details.is-grouped > .product-group { display: none; }
#sh-configurator .sh-cfg-summary-group { border-bottom: 1px solid var(--summary-line); }
#sh-configurator .sh-cfg-summary-toggle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) 12px; align-items: center; gap: 12px; min-height: 54px; padding: 14px 0; list-style: none; cursor: pointer; }
#sh-configurator .sh-cfg-summary-toggle::-webkit-details-marker { display: none; }
#sh-configurator .sh-cfg-summary-toggle::marker { content: ''; }
#sh-configurator .sh-cfg-summary-toggle:hover .sh-cfg-summary-group-name { color: #111827; }
#sh-configurator .sh-cfg-summary-toggle:focus-visible { outline: 2px solid #717680; outline-offset: -2px; border-radius: 6px; }
#sh-configurator .sh-cfg-summary-group-name { color: var(--summary-ink); font: 600 16px/1.4 var(--cfg-font); }
#sh-configurator .sh-cfg-summary-preview { max-width: 150px; color: #505761; font: 500 14px/1.5 var(--cfg-font); text-align: end; font-variant-numeric: tabular-nums; }
#sh-configurator .sh-cfg-summary-chevron { width: 8px; height: 8px; border-right: 1.5px solid #717680; border-bottom: 1.5px solid #717680; transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
#sh-configurator .sh-cfg-summary-group[open] > summary .sh-cfg-summary-chevron { transform: rotate(225deg) translate(-2px, -1px); }
#sh-configurator .sh-cfg-summary-group-body { padding: 0 0 12px; }
#sh-configurator #producttotal .clearfix { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--summary-line); }
#sh-configurator #producttotal .clearfix::before, #sh-configurator #producttotal .clearfix::after { display: none; }
#sh-configurator #producttotal .pull-left, #sh-configurator #producttotal .float-left { float: none !important; flex: 1; min-width: 0; color: var(--summary-muted); }
#sh-configurator #producttotal .pull-right, #sh-configurator #producttotal .float-right { float: none !important; flex: 0 1 46%; min-width: 0; color: var(--summary-ink); font-size: 14px; font-weight: 600; text-align: end; font-variant-numeric: tabular-nums; }
#sh-configurator #producttotal .sh-cfg-summary-group-body .sh-cfg-summary-item { border: 0; padding: 10px 0; font-size: 12px; }
#sh-configurator #producttotal .sh-cfg-summary-item[data-summary-kind=base] { flex-wrap: wrap; gap: 8px; }
#sh-configurator #producttotal .sh-cfg-summary-item[data-summary-kind=base] > .pull-left { flex-basis: 100%; }
#sh-configurator #producttotal .sh-cfg-summary-item[data-summary-kind=base] > .pull-right { margin-inline-start: auto; }
#sh-configurator .sh-cfg-summary-option-name { display: block; color: var(--summary-ink); font-size: 13px; font-weight: 600; line-height: 1.5; }
#sh-configurator .sh-cfg-summary-option-value { display: block; margin-top: 4px; color: #5b626d; font-size: 13px; line-height: 1.65; }
#sh-configurator .sh-cfg-summary-setup { display: block; margin-top: 4px; color: #5b626d; font-size: 12px; font-weight: 400; line-height: 1.5; }
#sh-configurator .sh-cfg-summary-location { display: block; max-width: 100%; margin: 20px 0 4px; padding: 16px; border: 0; border-radius: 8px; background: #f8f9fb; color: var(--summary-ink); line-height: 1.5; text-align: start; }
#sh-configurator .sh-cfg-summary-location[hidden] { display: none; }
#sh-configurator .sh-cfg-summary-location-label { display: block; margin-bottom: 10px; color: #646e7a; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
#sh-configurator .sh-cfg-summary-location-place { display: flex; align-items: center; gap: 12px; min-width: 0; }
#sh-configurator .sh-cfg-summary-flag { display: block; flex: 0 0 40px; width: 40px; height: 28px; max-width: none; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; transform: none; }
#sh-configurator .sh-cfg-summary-flag[hidden] { display: none; }
#sh-configurator .sh-cfg-summary-location-pin { flex: 0 0 40px; color: #646e7a; font-size: 23px; text-align: center; }
#sh-configurator .sh-cfg-summary-location-value { min-width: 0; color: var(--summary-ink); font-size: 17px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
#sh-configurator #producttotal .summary-totals { margin: 20px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--summary-line); }
#sh-configurator #producttotal .summary-totals .clearfix { padding: 7px 0; border: 0; font-size: 14px; line-height: 1.5; }
#sh-configurator #producttotal .summary-totals .pull-left { color: #5b626d; }
#sh-configurator #producttotal .summary-totals .pull-right { flex: 0 1 auto; max-width: 65%; }
#sh-configurator .sh-cfg-summary-rates { margin: 0 24px; padding: 22px 0 18px; border-top: 2px solid var(--summary-line); text-align: center; }
#sh-configurator .sh-cfg-summary-rate + .sh-cfg-summary-rate { margin-top: 18px; }
#sh-configurator .sh-cfg-summary-rate-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 8px; color: var(--summary-ink); }
#sh-configurator .sh-cfg-summary-rate-amount { max-width: 100%; font: 700 clamp(26px, 2.4vw, 34px)/1.25 var(--cfg-font); font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
#sh-configurator .sh-cfg-summary-currency { display: inline-block; margin-inline-start: .15em; font-size: .6em; font-weight: 600; letter-spacing: 0; }
#sh-configurator .sh-cfg-summary-rate-period { color: #505761; font-size: 17px; font-weight: 500; }
#sh-configurator .sh-cfg-summary-vat { margin-top: 8px; color: #6c727b; font-size: 13px; line-height: 1.5; }
#sh-configurator #producttotal .total-due-today { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 16px; margin: 0 24px; padding: 24px 0 4px; border: 0; border-top: 2px solid var(--summary-line); border-radius: 0; background: #fff; color: var(--summary-ink); text-align: end; }
#sh-configurator #producttotal .total-due-today .amt { display: block; order: 2; max-width: 100%; margin-inline-start: auto; color: var(--summary-ink); font-size: clamp(28px, 2.3vw, 34px); font-weight: 700; line-height: 1.2; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
#sh-configurator #producttotal .total-due-today span:last-child { order: 1; margin: 0; color: var(--summary-muted); font-size: 13px; font-weight: 400; text-align: start; }
#sh-configurator #producttotal .total-due-today.sh-cfg-due-secondary { padding: 16px 0 0; border-top-width: 1px; }
#sh-configurator #producttotal .sh-cfg-due-secondary .amt { font-size: 19px; font-weight: 600; letter-spacing: 0; }
#sh-configurator #producttotal .sh-cfg-due-secondary span:last-child { font-size: 14px; color: #5b626d; }
#sh-configurator .sh-cfg-submit { display: flex; flex: 0 0 auto; width: calc(100% - 48px); min-height: 52px; align-items: center; justify-content: center; gap: 12px; margin: 22px 24px 24px; padding: 14px 18px; border: 1px solid transparent; border-radius: 10px; color: #fff; background: #d90429; box-shadow: 0 4px 10px rgba(217, 4, 41, .12); font: 600 16px/1.4 var(--cfg-font); cursor: pointer; transition: background .16s, box-shadow .16s; }
#sh-configurator .sh-cfg-submit:hover { background: #b80323; box-shadow: 0 5px 14px rgba(217, 4, 41, .18); }
#sh-configurator .sh-cfg-submit:active { background: #99021d; box-shadow: none; }
#sh-configurator .sh-cfg-submit:focus-visible { outline: 3px solid rgba(217, 4, 41, .28); outline-offset: 3px; }
#sh-configurator .sh-cfg-submit:disabled { opacity: .5; cursor: wait; }
#sh-configurator .sh-cfg-metrics-list { display: grid; gap: 12px; }
#sh-configurator .sh-cfg-metric-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--cfg-line); border-radius: 8px; font-size: 13px; }
#sh-configurator .sh-cfg-metric-btn { min-height: 44px; padding: 8px 12px; background: #eff1f3; color: var(--cfg-ink); border: 1px solid var(--cfg-line); border-radius: 6px; font: inherit; cursor: pointer; }
#sh-configurator .irs-bar, #sh-configurator .irs-bar-edge, #sh-configurator .irs-single { background: var(--cfg-accent); border-color: var(--cfg-accent); }
#sh-configurator .irs-single::after { border-top-color: var(--cfg-accent); }

@media (max-width: 1100px) { #sh-configurator .sh-cfg-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; } #sh-configurator .sh-cfg-config-options { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px), (max-height: 600px) {
  #sh-configurator .sh-cfg-layout { grid-template-columns: minmax(0, 1fr); }
  #sh-configurator .sh-cfg-summary { position: static; max-height: none; }
  #sh-configurator .sh-cfg-summary-details { max-height: none; overflow: visible; }
}
@media (max-width: 600px) {
  #sh-configurator { padding: 28px 0 40px; }
  #sh-configurator .sh-cfg-inner { padding: 0 16px; }
  #sh-configurator .sh-cfg-subtitle { font-size: 14px; margin-bottom: 24px; }
  #sh-configurator .sh-cfg-product-info { display: block; padding: 20px; }
  #sh-configurator .sh-cfg-product-icon { margin-bottom: 16px; }
  #sh-configurator .sh-cfg-product-name { font-size: 18px; }
  #sh-configurator .sh-cfg-hardware-head, #sh-configurator .sh-cfg-spec-panel-head { padding: 20px 18px; }
  #sh-configurator .sh-cfg-fixed-fields { padding: 0 18px 20px; }
  #sh-configurator .sh-cfg-fixed-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #sh-configurator .sh-cfg-fixed-label, #sh-configurator .sh-cfg-fixed-value { font-size: 16px; }
  #sh-configurator .sh-cfg-fixed-value { padding: 11px 12px; }
  #sh-configurator .sh-cfg-spec-selected { margin: 24px 18px 20px; padding: 18px 14px; }
  #sh-configurator .sh-cfg-server-specs { flex-basis: 100%; }
  #sh-configurator .sh-cfg-server-price { flex-basis: 100%; text-align: start; margin: 0; }
  #sh-configurator .sh-cfg-section { padding: 18px; }
  #sh-configurator .sh-cfg-summary-head { padding: 18px; }
  #sh-configurator .sh-cfg-summary-details { padding: 0 18px 18px; }
  #sh-configurator .sh-cfg-summary-title { font-size: 20px; }
  #sh-configurator .sh-cfg-summary-toggle { gap: 8px; }
  #sh-configurator .sh-cfg-summary-group-name { font-size: 14px; }
  #sh-configurator .sh-cfg-summary-preview { max-width: 120px; font-size: 13px; }
  #sh-configurator #producttotal .sh-cfg-summary-group-body .sh-cfg-summary-item { display: block; }
  #sh-configurator #producttotal .sh-cfg-summary-item > .pull-left { display: block; }
  #sh-configurator #producttotal .sh-cfg-summary-item-price { display: block; margin-top: 8px; }
  #sh-configurator .sh-cfg-summary-option-value { font-size: 13px; }
  #sh-configurator .sh-cfg-summary-loader { padding-inline: 18px; }
  #sh-configurator .sh-cfg-summary-rates { margin-inline: 18px; }
  #sh-configurator .sh-cfg-submit { width: calc(100% - 36px); margin: 18px; }
  #sh-configurator #producttotal .total-due-today { margin: 0 18px; padding: 20px 0 4px; }
  #sh-configurator .sh-cfg-fields, #sh-configurator .sh-cfg-addon-grid { grid-template-columns: minmax(0, 1fr); }
  #sh-configurator select, #sh-configurator input:not([type=radio]):not([type=checkbox]), #sh-configurator textarea { font-size: 16px; }
  #sh-configurator .sh-cfg-choice { padding: 14px 12px; }
  #sh-configurator .sh-cfg-choice-row { flex-wrap: wrap; gap: 10px; padding: 14px 12px; }
  #sh-configurator .sh-cfg-choice-row > .sh-cfg-choice { flex-basis: 100%; font-size: 15px; gap: 12px; }
  #sh-configurator .sh-cfg-choice-row .sh-cfg-feature-help { margin-inline-start: 32px; }
  #sh-configurator .sh-cfg-choice-price { max-width: calc(100% - 32px); margin-inline-start: auto; }
  #sh-configurator .sh-cfg-choice-amount { font-size: 17px; }
  #sh-configurator .sh-cfg-option-label { flex-wrap: wrap; gap: 8px; padding: 14px; }
  #sh-configurator .sh-cfg-option-price { margin-inline-start: 32px; }
  #sh-configurator .sh-cfg-metric-item { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 1600px) {
  #sh-configurator .sh-cfg-inner { max-width: 1640px; }
}
@media (max-width: 600px) {
  #sh-configurator .sh-cfg-os-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  #sh-configurator .sh-cfg-os-card-head { min-height: 148px; padding: 22px 10px; gap: 16px; }
  #sh-configurator .sh-cfg-os-name { font-size: 16px; }
  #sh-configurator .sh-cfg-os-card-footer { padding: 14px 10px; }
  #sh-configurator input.sh-cfg-version-input { font-size: 16px; }
  #sh-configurator .sh-cfg-version-option { font-size: 16px; }
  #sh-configurator .sh-cfg-selection { align-items: flex-start; flex-direction: column; gap: 2px; }
  #sh-configurator .sh-cfg-reset { padding-inline-start: 0; }
}
@media (max-width: 440px) {
  #sh-configurator .sh-cfg-os-grid { grid-template-columns: minmax(0, 1fr); }
  #sh-configurator .sh-cfg-os-card-head { min-height: 156px; }
  #sh-configurator .sh-cfg-os-card-footer { padding: 16px; }
}
[dir=rtl] #sh-configurator input.sh-cfg-version-input { padding-left: 34px; padding-right: 12px; }
[dir=rtl] #sh-configurator select { background-position: left 14px center; }
[dir=rtl] #sh-configurator .sh-cfg-submit i { transform: rotate(180deg); }
[dir=rtl] #sh-configurator .sh-cfg-spec-check { transform: translate(50%, -50%); }
@media (prefers-reduced-motion: reduce) { #sh-configurator *, #sh-configurator *::before, #sh-configurator *::after { transition: none !important; animation: none !important; } }