wrappers whose default sprite renders as
a black/dark square. Neutralise the sprite and draw a clean glass control.
CRITICAL: iCheck adds
as a TRANSPARENT overlay
that is the actual CLICK TARGET. It MUST stay in the DOM and remain
clickable, otherwise the radios/checkboxes cannot be toggled. We therefore
NEVER `display:none` the — we only make it visually transparent while
preserving its pointer/click behaviour. The decorative ::after dot/tick gets
pointer-events:none so it never steals the click. */
#order-standard_cart div[class^="iradio"],
#order-standard_cart div[class*=" iradio"],
#order-standard_cart div[class^="icheckbox"],
#order-standard_cart div[class*=" icheckbox"] {
background: transparent !important;
border: 1px solid var(--cc-border) !important;
width: 18px !important;
height: 18px !important;
border-radius: 50% !important;
position: relative !important;
box-shadow: none !important;
cursor: pointer !important;
}
#order-standard_cart div[class^="icheckbox"],
#order-standard_cart div[class*=" icheckbox"] { border-radius: 5px !important; }
/* the sprite overlay iCheck adds is the CLICK TARGET — keep it, only
strip its black sprite background. Do NOT hide it. */
#order-standard_cart div[class^="iradio"] > ins,
#order-standard_cart div[class*=" iradio"] > ins,
#order-standard_cart div[class^="icheckbox"] > ins,
#order-standard_cart div[class*=" icheckbox"] > ins {
display: block !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
opacity: 0 !important; /* invisible but still receives clicks */
cursor: pointer !important;
}
/* checked state: fill with the accent */
#order-standard_cart div[class*="iradio"].checked,
#order-standard_cart div[class*="icheckbox"].checked {
background: var(--cc-accent) !important;
border-color: var(--cc-accent) !important;
}
#order-standard_cart div[class*="iradio"].checked::after {
content: ""; position: absolute; top: 4px; left: 4px;
width: 8px; height: 8px; border-radius: 50%; background: #fff;
pointer-events: none; /* never intercept the click */
}
#order-standard_cart div[class*="icheckbox"].checked::after {
content: ""; position: absolute; top: 1px; left: 5px;
width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg);
pointer-events: none; /* never intercept the click */
}
/* ---- 22b. White EXISTING-ACCOUNT / pay-method box on checkout ----
The saved-account tile + saved-card list render white. Force dark glass. */
#order-standard_cart .existing-account,
#order-standard_cart .paymethod-info,
#order-standard_cart .cc-payment-form,
#order-standard_cart .list-group.collapsable-card-body,
#order-standard_cart #existingCardInfo,
#order-standard_cart #newCardInfo,
#order-standard_cart .clientAccountSelection,
#order-standard_cart .account-selection,
#order-standard_cart .radio-tile,
#order-standard_cart .well {
background: var(--cc-glass) !important;
color: var(--cc-text) !important;
border: 1px solid var(--cc-border) !important;
border-radius: var(--cc-radius-sm) !important;
}
#order-standard_cart .paymethod-info *,
#order-standard_cart #existingCardInfo *,
#order-standard_cart #newCardInfo *,
#order-standard_cart .radio-inline,
#order-standard_cart .radio-inline * { color: var(--cc-text) !important; }
/* the selected pay-method highlight */
#order-standard_cart .paymethod-info.selected,
#order-standard_cart .cc-input-container .selected {
border-color: var(--cc-accent) !important;
box-shadow: 0 0 0 1px var(--cc-accent) inset !important;
}
/* ---- 22c. prepend-icon / field-icon inputs (Card Number, MM/YY, CVV) ----
The little icon box on the left was rendering as a black square. */
#order-standard_cart .prepend-icon { position: relative; }
#order-standard_cart .prepend-icon .field-icon,
#order-standard_cart .field-icon {
background: transparent !important;
border: none !important;
color: var(--cc-muted) !important;
}
#order-standard_cart .prepend-icon .field-icon i { color: var(--cc-muted) !important; }
/* the input itself sits on dark glass with room for the icon */
#order-standard_cart .prepend-icon .form-control,
#order-standard_cart #newCardInfo .form-control,
#order-standard_cart #existingCardInfo .form-control,
#order-standard_cart .cc-input-container .form-control {
background: rgba(255,255,255,.04) !important;
border: 1px solid var(--cc-border) !important;
color: var(--cc-text) !important;
}
#order-standard_cart .cc-input-container .form-control::placeholder,
#order-standard_cart #newCardInfo .form-control::placeholder { color: var(--cc-muted) !important; }
/* the "?" help button next to CVV */
#order-standard_cart .cvv-help,
#order-standard_cart .input-group-addon,
#order-standard_cart .input-group-append .btn,
#order-standard_cart .input-group-btn .btn {
background: var(--cc-glass2, rgba(255,255,255,.06)) !important;
border: 1px solid var(--cc-border) !important;
color: var(--cc-muted) !important;
}
/* ---- 22d. DUAL CVV clarity ----
When a SAVED card exists, #existingCardInfo shows a CVV (for that saved
card) and #newCardInfo shows its own CVV. That's correct WHMCS behaviour,
but only ONE applies to the selected radio. We visually de-emphasise the
saved-card CVV until its radio is actually checked, so it reads as one form.
(The stock JS toggles the .checked class on the wrapper.) */
#order-standard_cart #newCardInfo { margin-top: 6px; }
#order-standard_cart #existingCardInfo .cvv-input,
#order-standard_cart #existingCardInfo .input-group { max-width: 220px; }
/* ---- 22e. Order-summary "blue gradient" block ----
The bright block below the totals is the PayPal express button area +/or
the big gradient Checkout button. Make the express area transparent, and
soften the Checkout button so it's a clean pill, not a giant glowing slab. */
#order-standard_cart .order-summary .express-checkout-buttons,
#order-standard_cart .order-summary .express-checkout-buttons * {
background: transparent !important;
box-shadow: none !important;
}
#order-standard_cart .order-summary .express-checkout-buttons:empty { display: none !important; }
#order-standard_cart .order-summary .btn-checkout {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 18px !important;
border-radius: var(--cc-radius-sm) !important;
box-shadow: 0 6px 18px color-mix(in srgb, var(--mvltd-accent, #7c5cff) 28%, transparent) !important;
font-size: 1rem !important;
}
#order-standard_cart .order-summary .btn-checkout.disabled,
#order-standard_cart .order-summary .btn-checkout[disabled] {
opacity: .5 !important;
filter: grayscale(.2);
cursor: not-allowed;
}
/* =====================================================================
23. v2.6.0 LIVE FIXES (recommendation tile, paypal readability,
cleaner checkout button)
Reported by user after v2.5.0:
(a) recommendation product tile inside #recommendationsModal renders
as a WHITE unstyled box before "Add to Cart";
(b) the order-summary Checkout button gradient still looks "odd";
(c) PayPal "link a new paypal account" label + instructions are
unreadable (dark-on-dark).
The recommendations modal is appended to (OUTSIDE
#order-standard_cart) so tile rules here are GLOBAL, exactly like the
Section-14 modal rules. They only touch #recommendationsModal internals
so they cannot leak into the rest of the site.
===================================================================== */
/* ---- 23a. Recommendation product TILE (cloned from .clonable) ---- */
#recommendationsModal .modal-body { text-align: left; }
#recommendationsModal .product-recommendations {
display: flex;
flex-direction: column;
gap: 8px;
}
#recommendationsModal .product-recommendation {
background: rgba(255,255,255,.05) !important;
border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.14)) !important;
border-radius: var(--mvltd-radius-sm, 12px) !important;
color: var(--mvltd-text, #eef0ff) !important;
padding: 11px 14px !important;
box-shadow: none !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
overflow: hidden;
}
#recommendationsModal .product-recommendation:hover {
border-color: color-mix(in srgb, var(--mvltd-accent, #7c5cff) 55%, transparent) !important;
background: rgba(255,255,255,.07) !important;
}
/* kill any nested white surfaces inside the tile */
#recommendationsModal .product-recommendation,
#recommendationsModal .product-recommendation .header,
#recommendationsModal .product-recommendation .cta,
#recommendationsModal .product-recommendation .content,
#recommendationsModal .product-recommendation .body,
#recommendationsModal .product-recommendation .expander {
background-color: transparent !important;
}
#recommendationsModal .product-recommendation .header {
display: flex;
align-items: center;
gap: 12px;
}
/* text + headings inside the tile stay readable */
#recommendationsModal .product-recommendation,
#recommendationsModal .product-recommendation * {
color: var(--mvltd-text, #eef0ff) !important;
}
#recommendationsModal .product-recommendation .headline {
font-weight: 700;
font-size: 1rem;
}
#recommendationsModal .product-recommendation .tagline,
#recommendationsModal .product-recommendation .body,
#recommendationsModal .product-recommendation .setup-fee,
#recommendationsModal .product-recommendation .setup-fee small {
color: var(--mvltd-muted, #a2a6c8) !important;
}
#recommendationsModal .product-recommendation .price,
#recommendationsModal .product-recommendation .breakdown-price {
font-weight: 800;
color: var(--mvltd-text, #eef0ff) !important;
}
/* the green "Add to Cart" button -> MVLTD gradient pill */
#recommendationsModal .product-recommendation .btn-add,
#recommendationsModal .product-recommendation .cta .btn {
background: linear-gradient(120deg, var(--mvltd-accent, #7c5cff), var(--mvltd-accent2, #00e0ff)) !important;
border: none !important;
color: #fff !important;
border-radius: 999px !important;
padding: 8px 16px !important;
font-weight: 700 !important;
box-shadow: 0 6px 16px color-mix(in srgb, var(--mvltd-accent, #7c5cff) 30%, transparent) !important;
white-space: nowrap;
}
#recommendationsModal .product-recommendation .btn-add:hover {
filter: brightness(1.08);
}
#recommendationsModal .product-recommendation .btn-add .text,
#recommendationsModal .product-recommendation .btn-add .arrow,
#recommendationsModal .product-recommendation .btn-add .arrow i { color: #fff !important; }
/* the "learn more" chevron/expander */
#recommendationsModal .product-recommendation .expander i,
#recommendationsModal .product-recommendation .rotate {
color: var(--mvltd-muted, #a2a6c8) !important;
}
/* the cta price/button column sits on the right */
#recommendationsModal .product-recommendation .cta {
display: flex;
align-items: center;
gap: 10px;
margin-left: auto;
}
/* the expandable body description */
#recommendationsModal .product-recommendation .body p {
color: var(--mvltd-muted, #a2a6c8) !important;
margin: 8px 0 0;
}
/* ---- 23b. PayPal payment readability on checkout ---- */
/* The gateway JS appends "Link a New PayPal Account" text to
.cc-input-container label.radio-inline and injects .payment-instructions,
.approval-instructions, .payer-label & .payer-email inside
#paypal_ppcpv_input_container. All must be readable on dark glass. */
#order-standard_cart #paypal_ppcpv_input_container,
#order-standard_cart #paypal_ppcpv_input_container * {
color: var(--cc-text) !important;
}
#order-standard_cart #paypal_ppcpv_input_container .payment-instructions,
#order-standard_cart #paypal_ppcpv_input_container .approval-instructions {
color: var(--cc-muted) !important;
background: rgba(255,255,255,.04) !important;
border: 1px solid var(--cc-border) !important;
border-radius: var(--cc-radius-sm) !important;
padding: 10px 12px !important;
margin-top: 8px !important;
}
#order-standard_cart #paypal_ppcpv_input_container .payer-label {
display: inline-flex;
align-items: center;
gap: 6px;
}
#order-standard_cart #paypal_ppcpv_input_container .payer-email {
color: var(--cc-text) !important;
font-weight: 600;
}
/* the "Link a New PayPal Account" radio label (text appended by JS) */
#order-standard_cart .cc-input-container label.radio-inline,
#order-standard_cart .cc-input-container label.radio-inline *,
#order-standard_cart .cc-payment-form .paymethod-info label,
#order-standard_cart .cc-payment-form .paymethod-info label * {
color: var(--cc-text) !important;
}
/* the PayPal preferred-payment-method radios ("PayPal Recurring Monthly
Payment" / "Credit/Debit Card") -> readable labels */
#order-standard_cart #paymentGatewaysContainer label.radio-inline,
#order-standard_cart #paymentGatewaysContainer label.radio-inline * {
color: var(--cc-text) !important;
}
#order-standard_cart #paymentGatewaysContainer .small.text-muted,
#order-standard_cart #paymentGatewaysContainer p.small { color: var(--cc-muted) !important; }
/* ---- 23c. Kill the loud gradient BOX behind "$xx.xx Total Due USD" ----
CORRECTION: the "odd blue gradient" the user meant is NOT the Checkout
button (that pill looks correct and is LEFT UNCHANGED). It is the big solid
gradient rectangle behind the total-due-today amount, which comes from the
stock standard_cart `.total-due-today-padded` background. Here we strip that
filled background and render the block as a clean glass panel with a
gradient-TEXT amount, so the "$xx.xx Total Due USD" is clearly readable.
NOTE: we intentionally do NOT touch `.btn-checkout` in this section. */
#order-standard_cart .order-summary .total-due-today,
#order-standard_cart .order-summary .total-due-today-padded,
#order-standard_cart .total-due-today.total-due-today-padded {
background: rgba(255,255,255,.05) !important;
background-image: none !important;
border: 1px solid var(--cc-border) !important;
border-radius: var(--cc-radius-sm, 12px) !important;
box-shadow: none !important;
padding: 16px 18px !important;
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 2px;
-webkit-text-fill-color: initial;
}
/* the big amount ($60.96) -> gradient TEXT on the glass, not a filled block */
#order-standard_cart .order-summary .total-due-today .amt,
#order-standard_cart .order-summary .total-due-today #totalDueToday,
#order-standard_cart .order-summary .total-due-today .cost {
background: var(--cc-grad) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
font-weight: 800;
font-size: 1.9rem;
line-height: 1.1;
}
/* the "Total Due USD" label text stays muted + readable */
#order-standard_cart .order-summary .total-due-today > span:not(.amt):not(#totalDueToday):not(.cost),
#order-standard_cart .order-summary .total-due-today small {
color: var(--cc-muted) !important;
-webkit-text-fill-color: currentColor !important;
font-size: .95rem;
font-weight: 600;
}
/* =====================================================================
24. REMOVE the (non-working) "Estimate Taxes" tab from the promo area
The promo/tax area is a Bootstrap tab set:
Apply Promo Code Estimate Taxes
#applyPromo (promo form) + #calcTaxes (State/Country/
Update Totals)