/*
* GrabbyHost Configure Product
* Page: cart.php?a=confproduct&i=0
* Dedicated page styling. Native WHMCS configuration logic remains in configureproduct.tpl.
*/
body.gm-cart-checkout-page #order-standard_cart.gh-configure-product-page {
width: 100%;
max-width: none;
margin: 0;
padding: 0 34px 70px !important;
}
body.gm-cart-checkout-page .gh-configure-product-shell {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
body.gm-cart-checkout-page .gh-configure-product-hero {
width: 100% !important;
min-height: 274px !important;
margin: 16px 0 32px !important;
padding: 52px 56px !important;
}
body.gm-cart-checkout-page .gh-configure-hero-points {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
margin-top: 22px;
}
body.gm-cart-checkout-page .gh-configure-hero-points span {
display: inline-flex;
align-items: center;
gap: 7px;
color: rgba(255,255,255,.9);
font-size: 12px;
font-weight: 800;
}
body.gm-cart-checkout-page .gh-configure-hero-points i {
color: #ff9a52;
}
body.gm-cart-checkout-page .gh-configure-product-form {
width: 100%;
margin: 0;
}
body.gm-cart-checkout-page .gh-configure-product-grid {
display: grid;
grid-template-columns: minmax(0,1fr) 360px;
align-items: start;
gap: 24px;
width: 100%;
}
body.gm-cart-checkout-page .gh-configure-product-main,
body.gm-cart-checkout-page .gh-configure-product-sidebar {
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
float: none;
}
body.gm-cart-checkout-page .gh-configure-product-sidebar {
position: sticky;
top: 24px;
}
body.gm-cart-checkout-page .gh-configure-intro {
display: grid;
grid-template-columns: 58px minmax(0,1fr);
gap: 18px;
align-items: start;
margin-bottom: 22px;
padding: 26px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 20px;
box-shadow: 0 14px 36px rgba(23,38,59,.06);
}
body.gm-cart-checkout-page .gh-configure-intro-icon {
display: grid;
width: 58px;
height: 58px;
place-items: center;
color: #ff741f;
background: #fff1e7;
border-radius: 16px;
font-size: 20px;
}
body.gm-cart-checkout-page .gh-configure-eyebrow {
display: block;
margin-bottom: 5px;
color: #ff741f;
font-size: 11px;
font-weight: 900;
letter-spacing: .09em;
text-transform: uppercase;
}
body.gm-cart-checkout-page .gh-configure-intro h2 {
margin: 0;
color: #17263b;
font-size: 28px;
font-weight: 900;
line-height: 1.2;
letter-spacing: -.03em;
}
body.gm-cart-checkout-page .gh-configure-product-description {
margin-top: 8px;
color: #667085;
font-size: 14px;
line-height: 1.7;
}
body.gm-cart-checkout-page .gh-configure-product-description p:last-child {
margin-bottom: 0;
}
body.gm-cart-checkout-page .gh-configure-guidance {
margin: 14px 0 0;
padding-top: 14px;
color: #475467;
border-top: 1px solid #edf1f5;
font-size: 13px;
font-weight: 700;
}
body.gm-cart-checkout-page .gh-configure-product-main > .field-container,
body.gm-cart-checkout-page .gh-configure-product-main > .product-configurable-options,
body.gm-cart-checkout-page .gh-configure-product-main > #productAddonsContainer,
body.gm-cart-checkout-page .gh-configure-product-main > ul,
body.gm-cart-checkout-page .gh-configure-product-main > p:not(.gh-configure-guidance) {
margin-bottom: 22px;
}
body.gm-cart-checkout-page .gh-configure-product-main .sub-heading {
margin: 28px 0 16px;
padding: 0;
border: 0;
text-align: left;
}
body.gm-cart-checkout-page .gh-configure-product-main .sub-heading span {
display: block;
padding: 0 0 13px;
color: #17263b !important;
background: transparent !important;
border-bottom: 1px solid #e8edf3;
font-size: 19px;
font-weight: 900;
line-height: 1.35;
text-align: left;
}
body.gm-cart-checkout-page .gh-configure-product-main .field-container,
body.gm-cart-checkout-page .gh-configure-product-main .product-configurable-options,
body.gm-cart-checkout-page .gh-configure-product-main #productAddonsContainer {
padding: 24px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 18px;
box-shadow: 0 12px 30px rgba(23,38,59,.05);
}
body.gm-cart-checkout-page .gh-configure-product-main .form-group {
margin-bottom: 18px;
}
body.gm-cart-checkout-page .gh-configure-product-main label {
margin-bottom: 8px;
color: #344054;
font-size: 13px;
font-weight: 800;
}
body.gm-cart-checkout-page .gh-configure-product-main .form-control,
body.gm-cart-checkout-page .gh-configure-product-main select,
body.gm-cart-checkout-page .gh-configure-product-main input[type="text"],
body.gm-cart-checkout-page .gh-configure-product-main input[type="password"],
body.gm-cart-checkout-page .gh-configure-product-main input[type="number"],
body.gm-cart-checkout-page .gh-configure-product-main textarea {
min-height: 48px;
color: #17263b;
background: #f8fafc;
border: 1px solid #dce3eb;
border-radius: 11px;
box-shadow: none;
font-size: 14px;
}
body.gm-cart-checkout-page .gh-configure-product-main .form-control:focus,
body.gm-cart-checkout-page .gh-configure-product-main select:focus,
body.gm-cart-checkout-page .gh-configure-product-main input:focus,
body.gm-cart-checkout-page .gh-configure-product-main textarea:focus {
background: #fff;
border-color: #ff9b55;
box-shadow: 0 0 0 3px rgba(255,122,26,.11);
outline: 0;
}
body.gm-cart-checkout-page .gh-configure-product-main select.form-control {
appearance: none;
padding-right: 42px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%237d8998' d='M5.5 7.5L10 12l4.5-4.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
}
body.gm-cart-checkout-page .gh-configure-product-main input[type="radio"],
body.gm-cart-checkout-page .gh-configure-product-main input[type="checkbox"] {
width: 17px;
height: 17px;
margin-right: 7px;
accent-color: #ff741f;
vertical-align: -3px;
}
body.gm-cart-checkout-page .gh-configure-product-main .panel-addon {
height: 100%;
overflow: hidden;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 15px;
box-shadow: none;
transition: .18s ease;
}
body.gm-cart-checkout-page .gh-configure-product-main .panel-addon:hover {
border-color: #ffc79f;
transform: translateY(-1px);
}
body.gm-cart-checkout-page .gh-configure-product-main .panel-addon-selected {
background: #fff8f2;
border-color: #ff9b55;
box-shadow: 0 0 0 3px rgba(255,122,26,.09);
}
body.gm-cart-checkout-page .gh-configure-product-main .panel-addon .panel-body,
body.gm-cart-checkout-page .gh-configure-product-main .panel-addon .card-body {
padding: 18px;
}
body.gm-cart-checkout-page .gh-configure-product-main .panel-price {
padding: 12px 18px;
color: #17263b;
background: #f8fafc;
font-weight: 900;
}
body.gm-cart-checkout-page .gh-configure-product-main .panel-add {
padding: 12px 18px;
color: #ff741f;
font-size: 12px;
font-weight: 900;
}
body.gm-cart-checkout-page .gh-configure-product-main .alert {
border-radius: 14px;
}
body.gm-cart-checkout-page .gh-configure-product-sidebar .order-summary {
overflow: hidden;
margin: 0;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 20px;
box-shadow: 0 16px 42px rgba(23,38,59,.08);
}
body.gm-cart-checkout-page .gh-configure-product-sidebar .order-summary > h2 {
margin: 0;
padding: 22px 22px 10px;
color: #17263b;
background: #fff;
border: 0;
font-size: 26px !important;
font-weight: 900;
text-align: left;
}
body.gm-cart-checkout-page .gh-configure-product-sidebar .summary-container {
padding: 14px 22px 22px;
background: #fff;
}
body.gm-cart-checkout-page .gh-configure-product-sidebar .loader {
color: #ff741f;
}
body.gm-cart-checkout-page .gh-configure-summary-action {
margin-top: 16px;
padding: 18px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 18px;
box-shadow: 0 12px 30px rgba(23,38,59,.05);
}
body.gm-cart-checkout-page #btnCompleteProductConfig {
display: flex;
width: 100%;
min-height: 50px;
align-items: center;
justify-content: center;
gap: 9px;
color: #fff;
background: #ff741f;
border: 0;
border-radius: 12px;
font-size: 14px;
font-weight: 900;
}
body.gm-cart-checkout-page #btnCompleteProductConfig:hover,
body.gm-cart-checkout-page #btnCompleteProductConfig:focus {
color: #fff;
background: #e9650d;
}
body.gm-cart-checkout-page .gh-configure-summary-action p {
margin: 12px 0 0;
color: #7c8796;
font-size: 11px;
line-height: 1.55;
text-align: center;
}
body.gm-cart-checkout-page .gh-configure-summary-action p i {
margin-right: 5px;
color: #059669;
}
body.gm-cart-checkout-page .gh-configure-product-main .irs-bar,
body.gm-cart-checkout-page .gh-configure-product-main .irs-bar-edge,
body.gm-cart-checkout-page .gh-configure-product-main .irs-single {
background: #ff741f;
}
body.gm-cart-checkout-page .gh-configure-product-main .irs-slider {
border-color: #ff741f;
}
@media (max-width: 1199.98px) {
body.gm-cart-checkout-page .gh-configure-product-grid {
grid-template-columns: minmax(0,1fr) 320px;
}
}
@media (max-width: 991.98px) {
body.gm-cart-checkout-page #order-standard_cart.gh-configure-product-page {
padding-right: 20px !important;
padding-left: 20px !important;
}
body.gm-cart-checkout-page .gh-configure-product-hero {
width: calc(100% + 40px) !important;
margin-right: -20px !important;
margin-left: -20px !important;
padding: 40px 28px !important;
}
body.gm-cart-checkout-page .gh-configure-product-grid {
grid-template-columns: 1fr;
}
body.gm-cart-checkout-page .gh-configure-product-sidebar {
position: static;
}
}
@media (max-width: 575.98px) {
body.gm-cart-checkout-page #order-standard_cart.gh-configure-product-page {
padding-right: 14px !important;
padding-left: 14px !important;
}
body.gm-cart-checkout-page .gh-configure-product-hero {
width: calc(100% + 28px) !important;
min-height: 0 !important;
margin-right: -14px !important;
margin-left: -14px !important;
padding: 30px 22px !important;
}
body.gm-cart-checkout-page .gh-configure-product-hero .gh-review-hero-icon {
display: none;
}
body.gm-cart-checkout-page .gh-configure-hero-points {
flex-direction: column;
}
body.gm-cart-checkout-page .gh-configure-intro {
grid-template-columns: 1fr;
padding: 20px;
}
body.gm-cart-checkout-page .gh-configure-product-main .field-container,
body.gm-cart-checkout-page .gh-configure-product-main .product-configurable-options,
body.gm-cart-checkout-page .gh-configure-product-main #productAddonsContainer {
padding: 18px;
}
}
/* =========================================================
Configure Product — Quick Stuff, Launch Assistant and CTA
========================================================= */
body.gm-cart-checkout-page .gh-configure-quick-stuff {
margin: 0 0 22px;
padding: 24px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 18px;
box-shadow: 0 12px 30px rgba(23,38,59,.05);
}
body.gm-cart-checkout-page .gh-configure-quick-heading {
display: grid;
grid-template-columns: 48px minmax(0,1fr);
gap: 14px;
align-items: center;
margin-bottom: 17px;
}
body.gm-cart-checkout-page .gh-configure-quick-icon {
display: grid;
width: 48px;
height: 48px;
place-items: center;
color: #ff741f;
background: #fff1e7;
border-radius: 14px;
}
body.gm-cart-checkout-page .gh-configure-quick-heading h3 {
margin: 1px 0 3px;
color: #17263b;
font-size: 20px;
font-weight: 900;
}
body.gm-cart-checkout-page .gh-configure-quick-heading p {
margin: 0;
color: #748196;
font-size: 12px;
}
body.gm-cart-checkout-page .gh-configure-quick-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 11px;
}
body.gm-cart-checkout-page .gh-configure-quick-option {
position: relative;
display: grid;
grid-template-columns: 20px 40px minmax(0,1fr);
gap: 10px;
align-items: center;
min-height: 92px;
margin: 0;
padding: 14px;
color: inherit;
background: #fbfcfe;
border: 1px solid #e4e9ef;
border-radius: 14px;
cursor: pointer;
transition: .18s ease;
}
body.gm-cart-checkout-page .gh-configure-quick-option:hover {
background: #fff8f2;
border-color: #ffc79f;
transform: translateY(-1px);
}
body.gm-cart-checkout-page .gh-configure-quick-option input,
body.gm-cart-checkout-page .gh-configure-quick-checkbox {
width: 18px;
height: 18px;
margin: 0 !important;
border: 1px solid #cfd8e3;
border-radius: 5px;
accent-color: #ff741f;
}
body.gm-cart-checkout-page .gh-configure-quick-option-icon {
display: grid;
width: 40px;
height: 40px;
place-items: center;
color: #ff741f;
background: #fff1e7;
border-radius: 11px;
}
body.gm-cart-checkout-page .gh-configure-quick-copy strong,
body.gm-cart-checkout-page .gh-configure-quick-copy small {
display: block;
}
body.gm-cart-checkout-page .gh-configure-quick-copy strong {
color: #17263b;
font-size: 13px;
font-weight: 900;
}
body.gm-cart-checkout-page .gh-configure-quick-copy small {
margin-top: 3px;
color: #7c8796;
font-size: 10px;
line-height: 1.45;
}
body.gm-cart-checkout-page .gh-configure-quick-price {
grid-column: 2 / -1;
color: #e9650d;
font-size: 11px;
font-weight: 900;
}
body.gm-cart-checkout-page .gh-configure-quick-option.is-disabled {
cursor: default;
opacity: .65;
}
body.gm-cart-checkout-page .gh-configure-quick-option.is-disabled:hover {
background: #fbfcfe;
border-color: #e4e9ef;
transform: none;
}
body.gm-cart-checkout-page .gh-configure-quick-option.is-adding {
pointer-events: none;
opacity: .65;
}
body.gm-cart-checkout-page .gh-configure-product-shell > .gm-launch-assistant,
body.gm-cart-checkout-page .gh-configure-product-shell > .gh-cart-cross-sell,
body.gm-cart-checkout-page .gh-configure-product-shell > .gh-configure-help-cta {
width: 100%;
}
body.gm-cart-checkout-page .gh-configure-help-cta {
display: grid;
margin-top: 24px;
}
@media (max-width: 1199.98px) {
body.gm-cart-checkout-page .gh-configure-quick-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 575.98px) {
body.gm-cart-checkout-page .gh-configure-quick-stuff {
padding: 18px;
}
body.gm-cart-checkout-page .gh-configure-quick-option {
grid-template-columns: 20px 38px minmax(0,1fr);
}
}
/*
* VPS Wizard progress header (.gh-wizard-progress) -- all 9 steps live in
* one accordion on this page (grabby-vps-wizard.js makes every tracker
* step a quick-jump target), so every step gets a pointer cursor here.
*/
#order-standard_cart .gh-wizard-progress .gh-wizard-step[data-wizard-nav] {
cursor: pointer;
}
/*
* VPS Wizard accordion (Configure page only -- this page's own ,
* not delivered sitewide). The whole page renders as a normal in-flow
* GrabbyHost page (standard sidebar, standard hero, standard Order
* Summary column) -- no modal/backdrop. Only applied when
* $grabbyVpsWizardActive is true, so a non-VPS configure page is
* unaffected. Presentation only -- the real #frmConfigureProduct, its
* fields and WHMCS's own #producttotal/#productConfigurableOptions AJAX
* targets are untouched (see configureproduct.tpl's own header comment).
*/
body.gm-cart-checkout-page .gh-accordion {
overflow: hidden;
margin-bottom: 22px;
background: var(--gh-surface);
border: 1px solid var(--gh-border);
border-radius: var(--gh-radius-lg);
box-shadow: var(--gh-shadow-sm);
}
/* Flatten the field-container/product-configurable-options chrome that
the base rules above give every OTHER configure page -- the accordion
panel is already the one card, its rows shouldn't nest another. */
body.gm-cart-checkout-page .gh-accordion .field-container,
body.gm-cart-checkout-page .gh-accordion .product-configurable-options {
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
body.gm-cart-checkout-page .gh-accordion-item + .gh-accordion-item {
border-top: 1px solid var(--gh-border);
}
body.gm-cart-checkout-page .gh-accordion-header {
display: flex;
width: 100%;
align-items: center;
gap: 14px;
padding: 18px 22px;
background: transparent;
border: 0;
text-align: left;
cursor: pointer;
}
body.gm-cart-checkout-page .gh-accordion-header:hover {
background: var(--gh-surface-soft);
}
body.gm-cart-checkout-page .gh-accordion-header-num {
display: grid;
flex: 0 0 30px;
width: 30px;
height: 30px;
place-items: center;
color: #ff741f;
background: #fff1e7;
border-radius: 50%;
font-size: 12px;
font-weight: 900;
}
body.gm-cart-checkout-page .gh-accordion-header-title {
flex: 0 0 auto;
color: var(--gh-text);
font-size: 15px;
font-weight: 900;
}
body.gm-cart-checkout-page .gh-accordion-header-summary {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
color: var(--gh-text-muted);
font-size: 13px;
font-weight: 700;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
body.gm-cart-checkout-page .gh-accordion-header-check {
flex: 0 0 auto;
color: var(--gh-border-strong);
font-size: 16px;
line-height: 1;
}
body.gm-cart-checkout-page .gh-accordion-header-check.is-complete {
color: #059669;
}
body.gm-cart-checkout-page .gh-accordion-header-chevron {
flex: 0 0 auto;
display: grid;
place-items: center;
color: var(--gh-text-muted);
font-size: 12px;
transition: transform .18s ease;
}
body.gm-cart-checkout-page .gh-accordion-item:not(.is-collapsed) .gh-accordion-header-chevron {
transform: rotate(180deg);
}
body.gm-cart-checkout-page .gh-accordion-item.is-collapsed .gh-accordion-body {
display: none;
}
body.gm-cart-checkout-page .gh-accordion-body {
padding: 4px 22px 24px;
}
body.gm-cart-checkout-page .gh-accordion-body-lead {
margin: 0 0 4px;
color: var(--gh-text);
font-size: 14px;
font-weight: 800;
}
body.gm-cart-checkout-page .gh-accordion-body-help {
margin: 0 0 16px;
color: var(--gh-text-muted);
font-size: 12.5px;
line-height: 1.6;
}
/* Sub-group labels inside a row that bundles more than one real
configurable-option group -- e.g. Management & Backups, which is one
accordion row but two separate WHMCS option groups. */
body.gm-cart-checkout-page .gh-accordion-subheading {
margin: 0 0 10px;
color: var(--gh-text);
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .05em;
}
body.gm-cart-checkout-page .gh-accordion-subheading-spaced {
margin-top: 20px;
}
body.gm-cart-checkout-page .gh-accordion-field + .gh-accordion-field {
margin-top: 14px;
}
body.gm-cart-checkout-page .gh-accordion-field-radio-list {
display: grid;
gap: 10px;
}
body.gm-cart-checkout-page .gh-accordion-radio-row {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
padding: 13px 16px;
background: var(--gh-surface-soft);
border: 1px solid var(--gh-border);
border-radius: 12px;
font-weight: 700;
cursor: pointer;
transition: .15s ease;
}
body.gm-cart-checkout-page .gh-accordion-radio-row:hover {
border-color: #ffc79f;
}
body.gm-cart-checkout-page .gh-accordion-radio-row input[type="radio"] {
width: 18px;
height: 18px;
margin: 0;
accent-color: #ff741f;
}
body.gm-cart-checkout-page .gh-accordion-radio-row:has(input:checked),
body.gm-cart-checkout-page .gh-accordion-radio-row.is-selected {
background: #fff8f2;
border-color: #ff9b55;
box-shadow: 0 0 0 3px rgba(255,122,26,.09);
}
/* Real-time stock round: a Location row Hetzner reports as temporarily
out of stock -- greyed, non-interactive (the real input also carries
the disabled attribute so it can't be selected/submitted regardless of
CSS), no hover affordance. */
body.gm-cart-checkout-page .gh-accordion-radio-row.is-unavailable {
background: var(--gh-surface-soft);
border-color: var(--gh-border);
opacity: .55;
cursor: not-allowed;
}
body.gm-cart-checkout-page .gh-accordion-radio-row.is-unavailable:hover {
border-color: var(--gh-border);
}
body.gm-cart-checkout-page .gh-accordion-radio-unavailable-tag {
margin-left: auto;
padding: 2px 8px;
color: var(--gh-warning);
background: var(--gh-warning-bg);
border-radius: 999px;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .04em;
white-space: nowrap;
}
/* All-locations-unavailable banner (see $grabbyVpsAllLocationsUnavailable
in grabby-vps-wizard.php) -- same warning tokens as the per-row tag
above, one level up. */
body.gm-cart-checkout-page .gh-accordion-alert {
margin: 0 0 16px;
padding: 12px 16px;
border-radius: 12px;
font-size: 13px;
font-weight: 700;
line-height: 1.5;
}
body.gm-cart-checkout-page .gh-accordion-alert-warning {
color: var(--gh-warning);
background: var(--gh-warning-bg);
border: 1px solid rgba(180,83,9,.25);
}
body.gm-cart-checkout-page .gh-accordion-alert-text {
margin: 0;
}
body.gm-cart-checkout-page .gh-accordion-alert-alternatives {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0 0;
padding: 0;
list-style: none;
}
body.gm-cart-checkout-page .gh-accordion-alert-alternatives li {
margin: 0;
}
body.gm-cart-checkout-page .gh-accordion-alert-alternatives a {
display: inline-block;
padding: 6px 12px;
color: var(--gh-warning);
background: #fff;
border: 1px solid rgba(180,83,9,.35);
border-radius: 999px;
font-size: 12px;
font-weight: 800;
text-decoration: none;
}
body.gm-cart-checkout-page .gh-accordion-alert-alternatives a:hover {
background: var(--gh-warning-bg);
}
/* Password strength meter + generator (live-test round 2026-08-16) */
body.gm-cart-checkout-page .gh-pw-field {
display: flex;
gap: 8px;
align-items: center;
}
body.gm-cart-checkout-page .gh-pw-field input {
flex: 1;
}
body.gm-cart-checkout-page .gh-pw-generate-btn {
flex-shrink: 0;
padding: 0 14px;
height: 42px;
color: #ff741f;
background: #fff5ee;
border: 1px solid #ffd2ad;
border-radius: 10px;
font-size: 12.5px;
font-weight: 800;
white-space: nowrap;
cursor: pointer;
transition: .15s ease;
}
body.gm-cart-checkout-page .gh-pw-generate-btn:hover {
background: #ffe9db;
}
body.gm-cart-checkout-page .gh-pw-strength {
margin-top: 8px;
}
body.gm-cart-checkout-page .gh-pw-strength[aria-hidden="true"] {
display: none;
}
body.gm-cart-checkout-page .gh-pw-strength-bar {
height: 5px;
background: var(--gh-surface-soft);
border-radius: 999px;
overflow: hidden;
}
body.gm-cart-checkout-page .gh-pw-strength-bar i {
display: block;
height: 100%;
width: 0;
border-radius: inherit;
transition: .2s ease;
}
body.gm-cart-checkout-page .gh-pw-strength span {
display: block;
margin-top: 4px;
font-size: 11.5px;
font-weight: 800;
}
body.gm-cart-checkout-page .gh-accordion-checkbox-row {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font-weight: 700;
cursor: pointer;
}
/* Hostname "Optional" tag + Authentication Method's real hidden field
(kept in the DOM so its value stays valid/submittable, just not shown --
see grabby-vps-wizard.js's applyAuthMethod()). */
body.gm-cart-checkout-page .gh-accordion-optional-tag {
padding: 2px 8px;
color: var(--gh-text-muted);
background: var(--gh-surface-soft);
border-radius: 999px;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .04em;
}
body.gm-cart-checkout-page .gh-accordion-hidden-field {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/*
* Operating System -- OS Images / Apps tabs (VPS wizard round 2026-08,
* polish pass 2026-08-10). The real field stays one WHMCS option
* rendered as radio cards; rows not in the active tab are display:none
* (grabby-vps-wizard.js), never removed, so switching tabs can't lose
* whichever is checked.
*/
body.gm-cart-checkout-page .gh-os-tabs {
display: inline-flex;
gap: 4px;
margin-bottom: 14px;
padding: 5px;
background: var(--gh-surface-soft);
border: 1px solid var(--gh-border);
border-radius: 13px;
}
body.gm-cart-checkout-page .gh-os-tab {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 20px;
color: var(--gh-text-muted);
background: transparent;
border: 0;
border-radius: 9px;
font-size: 12.5px;
font-weight: 800;
cursor: pointer;
transition: color .15s ease, background-color .15s ease;
}
body.gm-cart-checkout-page .gh-os-tab i {
font-size: 11px;
opacity: .8;
}
body.gm-cart-checkout-page .gh-os-tab:hover {
color: var(--gh-text);
background: rgba(255,116,31,.08);
}
body.gm-cart-checkout-page .gh-os-tab.is-active {
color: #fff;
background: #ff741f;
box-shadow: 0 4px 10px rgba(255,116,31,.28);
}
body.gm-cart-checkout-page .gh-os-tab.is-active:hover {
color: #fff;
background: #ff741f;
}
body.gm-cart-checkout-page .gh-os-tab.is-active i {
opacity: 1;
}
/* Apps search -- shown/hidden by grabby-vps-wizard.js's
applyOsCardVisibility() (Apps tab only), filters the card grid by name. */
body.gm-cart-checkout-page .gh-os-search {
position: relative;
margin-bottom: 14px;
}
body.gm-cart-checkout-page .gh-os-search i {
position: absolute;
top: 50%;
left: 14px;
color: var(--gh-text-muted);
font-size: 12px;
transform: translateY(-50%);
pointer-events: none;
}
body.gm-cart-checkout-page .gh-os-search-input {
width: 100%;
padding: 11px 14px 11px 36px;
color: var(--gh-text);
background: var(--gh-surface);
border: 1px solid var(--gh-border);
border-radius: 11px;
font-size: 13px;
font-weight: 600;
transition: border-color .15s ease, box-shadow .15s ease;
}
body.gm-cart-checkout-page .gh-os-search-input::placeholder {
color: var(--gh-text-muted);
font-weight: 500;
}
body.gm-cart-checkout-page .gh-os-search-input:focus {
outline: none;
border-color: #ff9b55;
box-shadow: 0 0 0 3px rgba(255,116,31,.12);
}
body.gm-cart-checkout-page .gh-os-empty {
margin: 8px 0 0;
color: var(--gh-text-muted);
font-size: 12.5px;
font-weight: 600;
text-align: center;
}
/*
* OS/App cards (2026-08-11, Hetzner-style family grouping) -- no native
* radio input any more (see configureproduct.tpl's docblock on this
* section): the whole card is a plain clickable div, real selection
* state lives in one hidden field grabby-vps-wizard.js keeps in sync,
* mirrored onto .is-selected here. Rows not in the active tab / not
* matching the search query are display:none (grabby-vps-wizard.js),
* never removed, so switching tabs or searching can't lose whichever
* card is checked.
*/
body.gm-cart-checkout-page .gh-os-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
}
body.gm-cart-checkout-page .gh-os-card {
position: relative;
background: var(--gh-surface-soft);
border: 1px solid var(--gh-border);
border-radius: 14px;
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
body.gm-cart-checkout-page .gh-os-card:hover {
background: #fff8f2;
border-color: #ffc79f;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(17,24,39,.06);
}
body.gm-cart-checkout-page .gh-os-card.is-selected {
background: #fff5ec;
border-color: #ff741f;
border-width: 2px;
box-shadow: 0 0 0 3px rgba(255,116,31,.14), 0 10px 22px rgba(255,116,31,.12);
}
body.gm-cart-checkout-page .gh-os-card-logo {
flex: none;
width: 28px;
height: 28px;
object-fit: contain;
}
body.gm-cart-checkout-page .gh-os-card-name {
flex: 1 1 auto;
min-width: 0;
color: var(--gh-text);
font-size: 13.5px;
font-weight: 800;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.gm-cart-checkout-page .gh-os-card-check {
position: absolute;
top: 10px;
right: 10px;
display: grid;
width: 20px;
height: 20px;
place-items: center;
color: transparent;
background: var(--gh-surface);
border: 2px solid var(--gh-border-strong);
border-radius: 50%;
font-size: 10px;
transition: .15s ease;
}
body.gm-cart-checkout-page .gh-os-card.is-selected .gh-os-card-check {
color: #fff;
background: #ff741f;
border-color: #ff741f;
box-shadow: 0 2px 6px rgba(255,116,31,.35);
}
/* Apps -- one simple row: logo + name + check. No subtitle/pill clutter
per the "just logo + friendly app name" request. */
body.gm-cart-checkout-page .gh-os-app-card {
display: flex;
align-items: center;
gap: 10px;
min-height: 60px;
padding: 12px 40px 12px 14px;
}
body.gm-cart-checkout-page .gh-os-app-card.is-selected {
padding: 11px 39px 11px 13px;
}
/* OS Images -- one card per distro family: a top row (logo + name +
check) over a divider, then a version row -- a dropdown when the
family has more than one real Hetzner version, plain text when it
only has one (see configureproduct.tpl). */
body.gm-cart-checkout-page .gh-os-family-card {
overflow: hidden;
}
body.gm-cart-checkout-page .gh-os-card-top {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 40px 12px 14px;
}
body.gm-cart-checkout-page .gh-os-family-card.is-selected .gh-os-card-top {
padding: 11px 39px 11px 13px;
}
body.gm-cart-checkout-page .gh-os-card-version-row {
padding: 8px 14px;
border-top: 1px solid var(--gh-border);
background: rgba(17,24,39,.02);
}
body.gm-cart-checkout-page .gh-os-family-card.is-selected .gh-os-card-version-row {
padding: 8px 13px;
border-top-color: rgba(255,116,31,.25);
background: rgba(255,116,31,.06);
}
body.gm-cart-checkout-page .gh-os-card-version-static span {
color: var(--gh-text-soft);
font-size: 12.5px;
font-weight: 700;
}
body.gm-cart-checkout-page .gh-os-version-select {
width: 100%;
padding: 1px 0;
color: var(--gh-text-soft);
background: transparent;
border: 0;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
}
body.gm-cart-checkout-page .gh-os-version-select:focus {
outline: none;
color: var(--gh-text);
}
@media (max-width: 767.98px) {
body.gm-cart-checkout-page .gh-os-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
body.gm-cart-checkout-page .gh-os-card-grid {
grid-template-columns: 1fr;
}
}
/*
* Volumes -- synchronized slider + numeric GB input + quick-size chips
* (grabby-vps-wizard.js keeps all three, and the real quantity field
* they all drive, in sync); min/max come straight from the real field's
* own qtyminimum/qtymaximum attributes (admin-configured, see
* VpsConfigOptionsSyncService::ensureVolumeGroup()), never hard-coded
* here. Filesystem is tucked behind the below it.
*/
body.gm-cart-checkout-page .gh-volume-size-field {
margin-top: 4px;
}
body.gm-cart-checkout-page .gh-volume-slider-row {
display: flex;
align-items: center;
gap: 12px;
margin: 10px 0 4px;
}
body.gm-cart-checkout-page .gh-volume-slider-limit {
flex: 0 0 auto;
color: var(--gh-text-muted);
font-size: 11px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
body.gm-cart-checkout-page .gh-volume-slider {
flex: 1 1 auto;
height: 6px;
appearance: none;
background: var(--gh-border);
border-radius: 999px;
outline: none;
}
body.gm-cart-checkout-page .gh-volume-slider::-webkit-slider-thumb {
appearance: none;
width: 20px;
height: 20px;
background: #ff741f;
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(255,116,31,.4);
cursor: pointer;
}
body.gm-cart-checkout-page .gh-volume-slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: #ff741f;
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(255,116,31,.4);
cursor: pointer;
}
body.gm-cart-checkout-page .gh-volume-size-selected {
display: flex;
align-items: center;
gap: 10px;
margin: 12px 0 14px;
}
body.gm-cart-checkout-page .gh-volume-size-selected span:first-child {
flex: 0 0 auto;
color: var(--gh-text-muted);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .05em;
}
body.gm-cart-checkout-page .gh-volume-size-selected input {
max-width: 110px;
text-align: center;
font-weight: 800;
}
body.gm-cart-checkout-page .gh-volume-size-unit {
flex: 0 0 auto;
color: var(--gh-text-muted);
font-size: 13px;
font-weight: 800;
}
body.gm-cart-checkout-page .gh-volume-size-quick {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
body.gm-cart-checkout-page .gh-volume-size-chip {
padding: 8px 16px;
color: var(--gh-text);
background: var(--gh-surface-soft);
border: 1px solid var(--gh-border);
border-radius: 999px;
font-size: 12.5px;
font-weight: 800;
cursor: pointer;
transition: .15s ease;
}
body.gm-cart-checkout-page .gh-volume-size-chip:hover {
background: #fff8f2;
border-color: #ffc79f;
}
body.gm-cart-checkout-page .gh-volume-size-chip.is-selected {
color: #fff;
background: #ff741f;
border-color: #ff741f;
}
body.gm-cart-checkout-page .gh-volume-advanced {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--gh-border);
}
body.gm-cart-checkout-page .gh-volume-advanced summary {
color: var(--gh-text-muted);
font-size: 12px;
font-weight: 800;
cursor: pointer;
list-style: none;
}
body.gm-cart-checkout-page .gh-volume-advanced summary::-webkit-details-marker {
display: none;
}
body.gm-cart-checkout-page .gh-volume-advanced summary::before {
content: "\f105";
display: inline-block;
margin-right: 6px;
font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
font-weight: 900;
transition: transform .15s ease;
}
body.gm-cart-checkout-page .gh-volume-advanced[open] summary::before {
transform: rotate(90deg);
}
body.gm-cart-checkout-page .gh-volume-advanced-body {
margin-top: 12px;
}
/* Review (step 9) -- dynamically rendered rows, each with its own Edit
action; CTA delegates to the real Order Summary submit button rather
than becoming a second submit path (see grabby-vps-wizard.js). */
body.gm-cart-checkout-page .gh-accordion-review-list {
display: grid;
gap: 2px;
}
body.gm-cart-checkout-page .gh-accordion-review-row {
display: flex;
align-items: baseline;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--gh-border);
}
body.gm-cart-checkout-page .gh-accordion-review-row:last-child {
border-bottom: 0;
}
body.gm-cart-checkout-page .gh-accordion-review-label {
flex: 0 0 160px;
color: var(--gh-text-muted);
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .04em;
}
body.gm-cart-checkout-page .gh-accordion-review-value {
flex: 1 1 auto;
min-width: 0;
color: var(--gh-text);
font-size: 13.5px;
font-weight: 700;
word-break: break-word;
}
body.gm-cart-checkout-page .gh-accordion-review-edit {
flex: 0 0 auto;
padding: 4px 10px;
color: #ff741f;
background: transparent;
border: 1px solid #ffc79f;
border-radius: 999px;
font-size: 10.5px;
font-weight: 900;
cursor: pointer;
}
body.gm-cart-checkout-page .gh-accordion-review-cta {
margin-top: 18px;
text-align: right;
}
body.gm-cart-checkout-page .gh-accordion-review-cta .btn {
display: inline-flex;
align-items: center;
gap: 8px;
}
@media (max-width: 575.98px) {
body.gm-cart-checkout-page .gh-accordion-review-row {
flex-wrap: wrap;
}
body.gm-cart-checkout-page .gh-accordion-review-edit {
margin-left: auto;
}
}
body.gm-cart-checkout-page .gh-accordion-item-static .gh-accordion-header-static {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 22px;
cursor: default;
}
body.gm-cart-checkout-page .gh-accordion-item-static .gh-accordion-header-num {
color: var(--gh-text-muted);
background: var(--gh-surface-soft);
}
body.gm-cart-checkout-page .gh-accordion-item-static .gh-accordion-header-title {
color: var(--gh-text-muted);
}
body.gm-cart-checkout-page .gh-accordion-item-static .gh-accordion-header-summary {
color: var(--gh-border-strong);
}
/*
* Panel head -- package name/specs, progress tracker and the Back/Continue
* actions all live at the top of the SAME white accordion card, above the
* option rows, per the confirmed layout (title -> steps -> right-aligned
* actions -> accordion rows, all one box).
*/
body.gm-cart-checkout-page .gh-accordion-panel-head {
padding: 22px 22px 18px;
border-bottom: 1px solid var(--gh-border);
}
body.gm-cart-checkout-page .gh-accordion-panel-head .gh-wizard-package-name,
body.gm-cart-checkout-page .gh-accordion-panel-head .gh-wizard-package-specs,
body.gm-cart-checkout-page .gh-accordion-panel-head .gh-wizard-progress {
margin-left: 0;
margin-right: 0;
}
body.gm-cart-checkout-page .gh-accordion-top-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
margin-top: 18px;
}
/* Reset selections -- a deliberately quiet, secondary action sitting
underneath the real Continue status button, not a same-weight sibling
(this used to be a "Back" button here; replaced 2026-08-11). Clicking
it confirms, then reloads this exact configure-product page, which is
how the customer discards whatever they've changed and gets the
server's own defaults back -- nothing here has been added to the cart
yet at this point in the flow. */
body.gm-cart-checkout-page .gh-accordion-reset {
padding: 4px 2px;
color: var(--gh-text-muted);
background: transparent;
border: 0;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
transition: color .15s ease;
}
body.gm-cart-checkout-page .gh-accordion-reset:hover {
color: var(--gh-text);
text-decoration: underline;
}
body.gm-cart-checkout-page .gh-accordion-reset i {
margin-right: 4px;
font-size: 11px;
}
body.gm-cart-checkout-page .gh-accordion-continue {
display: inline-flex;
align-items: center;
gap: 8px;
color: #fff;
background: #ff741f;
border: 0;
}
body.gm-cart-checkout-page .gh-accordion-continue:hover:not(:disabled) {
background: #e9650d;
color: #fff;
}
body.gm-cart-checkout-page .gh-accordion-continue:disabled,
body.gm-cart-checkout-page #btnCompleteProductConfig:disabled {
background: var(--gh-border-strong);
color: var(--gh-surface);
cursor: not-allowed;
opacity: .75;
}
/* The top action button is always disabled (status indicator only, not a
second submit -- see grabby-vps-wizard.js) so its disabled state needs
its own "done" look once ready, instead of reading as still-blocked. */
body.gm-cart-checkout-page .gh-accordion-continue.is-complete:disabled {
background: #059669;
color: #fff;
cursor: default;
opacity: 1;
}
/*
* Right column -- Order Summary keeps the exact same #orderSummary/
* .order-summary/#producttotal markup and the SAME shared CSS every
* other configure/cart/checkout page already uses (the unconditional
* body.gm-cart-checkout-page .gh-configure-product-sidebar .order-summary
* rule earlier in this file) -- no VPS-specific override, by request.
* Billing Cycle and the Continue button (.gh-configure-summary-action,
* already its own card via the shared rule earlier in this file) render
* as their own separate white cards alongside it instead of nested
* inside one combined sidebar card.
*/
body.gm-cart-checkout-page .gh-wizard-billing-box {
margin: 16px 0;
padding: 18px;
background: var(--gh-surface);
border: 1px solid var(--gh-border);
border-radius: var(--gh-radius-lg);
box-shadow: var(--gh-shadow-sm);
}
body.gm-cart-checkout-page .gh-wizard-billing-box .field-container {
margin: 0;
}
body.gm-cart-checkout-page .gh-wizard-billing-box label {
margin-bottom: 8px;
color: var(--gh-text-muted);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .06em;
}
body.gm-cart-checkout-page .gh-wizard-billing-box select {
min-height: 44px;
color: var(--gh-text);
background: var(--gh-surface-soft);
border: 1px solid var(--gh-border);
border-radius: 10px;
font-size: 13px;
font-weight: 700;
}
body.gm-cart-checkout-page .gh-wizard-active #btnCompleteProductConfig {
border-radius: var(--gh-radius-sm);
}
/* 30-Day Money-Back Guarantee trust callout, below the form. */
body.gm-cart-checkout-page .gh-wizard-guarantee {
display: flex;
align-items: center;
gap: 14px;
margin-top: 20px;
padding: 18px 20px;
background: var(--gh-surface);
border: 1px solid var(--gh-border);
border-radius: var(--gh-radius-md);
box-shadow: var(--gh-shadow-xs);
}
body.gm-cart-checkout-page .gh-wizard-guarantee-icon {
display: grid;
flex: 0 0 40px;
width: 40px;
height: 40px;
place-items: center;
color: #059669;
background: #ecfdf3;
border-radius: 50%;
font-size: 16px;
}
body.gm-cart-checkout-page .gh-wizard-guarantee strong {
display: block;
color: var(--gh-text);
font-size: 13.5px;
}
body.gm-cart-checkout-page .gh-wizard-guarantee small {
display: block;
margin-top: 2px;
color: var(--gh-text-muted);
font-size: 12px;
}
@media (max-width: 575.98px) {
body.gm-cart-checkout-page .gh-accordion-header {
gap: 10px;
padding: 15px 16px;
}
body.gm-cart-checkout-page .gh-accordion-header-summary {
display: none;
}
body.gm-cart-checkout-page .gh-accordion-body {
padding: 4px 16px 20px;
}
body.gm-cart-checkout-page .gh-accordion-panel-head {
padding: 18px 16px 14px;
}
body.gm-cart-checkout-page .gh-accordion-top-actions .btn {
width: 100%;
justify-content: center;
}
}