stays valid markup. */
#one-step-cart .oso-cselect-search-wrap {
position: sticky;
top: -6px;
z-index: 1;
margin: -6px -6px 4px;
padding: 6px;
background: var(--whmp-bg-base);
list-style: none;
}
#one-step-cart .oso-cselect-search {
width: 100%;
padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid var(--whmp-border-mid);
border-radius: var(--border-radius-sm);
background: var(--whmp-bg-base);
color: var(--whmp-text-primary);
font-size: var(--font-md);
}
#one-step-cart .oso-cselect-search:focus {
outline: none;
border-color: var(--whmp-primary, #1a4d80);
}
/* A row says what went wrong inside the row, not in a page-level alert - the
customer is looking at the field they just used. */
.bundle-row-msg {
margin-top: 8px;
padding: 6px 10px;
border-radius: var(--border-radius-sm, 4px);
font-size: 12px;
background: var(--whmp-primary-faded, #f5f7f9);
color: var(--whmp-text-primary);
}
.bundle-row-msg.is-error {
background: var(--whmp-danger-bg, #fdeaea);
color: var(--whmp-danger, #b20000);
}
.bundle-row.is-resolved .bundle-row-status {
color: var(--whmp-success, #008000);
}
/* ---------------------------------------------------------------------------
Domain addons on a bundle row
---------------------------------------------------------------------------
The single-product path shows these as cards in a grid, which does not fit
inside an expanded bundle row - the row is already a narrow column of
controls. Rendered here as compact labelled rows instead: same three addons,
same prices, same behaviour, in the space actually available.
--------------------------------------------------------------------------- */
.bundle-domain-addons {
margin-top: var(--spacing-sm);
padding-top: var(--spacing-sm);
border-top: 1px solid var(--whmp-border-light);
}
.bundle-addon-title {
font-size: var(--font-md);
font-weight: var(--font-weight-semibold, 600);
color: var(--whmp-text-primary);
margin-bottom: var(--spacing-xs);
}
.bundle-addon-row {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: 6px 0;
cursor: pointer;
font-size: var(--font-md);
color: var(--whmp-text-primary);
margin: 0;
}
.bundle-addon-row .bundle-addon-name {
flex: 1 1 auto;
}
.bundle-addon-row .bundle-addon-price {
white-space: nowrap;
color: var(--whmp-text-secondary);
}
.bundle-addon-row input.bundle-addon-check {
flex: 0 0 auto;
margin: 0;
}
/* A required field that is hidden can still block the submit, and the customer
cannot fix what they cannot see - so the one that blocked it is revealed. */
#one-step-cart .whmp-force-visible,
.whmp-force-visible {
display: block !important;
visibility: visible !important;
}
/* A bundle puts several items in the summary at once. The sticky height cap
that suits a single product hid all but the first of them - the customer saw
one $90.00 line above a $561.00 total, with the rest of the order scrolled
out of sight. A bundle's item list is short and fixed, so it is shown whole. */
/* This used to switch the summary to `max-height: none; overflow-y: visible`
whenever a bundle was in the cart - added back when the cap was the guessed
`calc(100vh - 520px)`, to stop a long bundle list being clipped with no way
to reach the rest of it. Turning the scroll OFF was the wrong half of the
trade: it cured the clipping by letting the panel run off the bottom of the
screen instead, and a bundle summary is the longest one there is.
The cap is measured now rather than guessed, so the list simply scrolls, and
this override is confined to the mobile layout where the page itself
scrolls. */
@media (max-width: 768px) {
body.whmp-bundle-active #summary-container {
max-height: none;
overflow-y: visible;
}
}
/* Single mode's subdomain offer. It lives INSIDE the search result card rather
than in a control of its own: single mode exists to be one search box, so a
fourth input would defeat the layout the admin chose. One button per suffix
keeps the choice explicit without a dropdown. */
.single-subdomain-offer {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
margin-top: var(--spacing-lg);
}
.single-subdomain-offer button {
flex: 1 1 auto;
min-width: 200px;
padding: var(--spacing-md) var(--spacing-lg);
font-size: var(--font-base);
font-weight: var(--font-weight-medium);
}
/* ===========================================================================
CANONICAL RADIO - ONE TREATMENT FOR THE WHOLE FORM
===========================================================================
The form carried three at once, measured on one page:
config options drawn .radio-styled span, 20px, 2px ring, primary fill
domain choice native input, 16px, accent-color
payment methods native input, 22.39px, accent-color
The configuration-field design is the one being standardised on. Rather than
add a drawn span to every block's markup, the NATIVE input is shaped into
that same design with appearance:none, so every radio on the page - payment,
domain, credit, saved cards, bundle rows, config options - is one control
with one look, and no template needs a new element.
The inner dot is a radial-gradient rather than ::after: pseudo-elements on
are not reliably rendered, and a gradient gives the identical result
at any size.
`!important` is used throughout this block, deliberately. Several per-block
rules are more specific than a plain `#one-step-cart input` selector - the
payment list reaches its inputs through
`div#paymentGatewaysContainer label.radio-inline input[type="radio"]` - so
without it the size applied and the ring and fill silently did not, leaving
payment as a fourth variant rather than the same control. Matching that
specificity for every block would mean enumerating them all here and
re-enumerating on every future one.
--------------------------------------------------------------------------- */
#one-step-cart input[type="radio"],
#billingDetailsModal input[type="radio"] {
appearance: none;
/* Several blocks hid the native control because a drawn span stood in for
it - .panel-configoption uses position:absolute;opacity:0, the domain block
used the same trick. With those spans now hidden, anything left hiding the
input leaves the row with NO radio at all, which is exactly what happened
to the Yes/No config options. Visibility is forced here so the canonical
control is always the thing on screen. */
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
clip: auto !important;
clip-path: none !important;
-webkit-appearance: none;
-moz-appearance: none;
width: 18px !important;
height: 18px !important;
margin: 0;
flex-shrink: 0;
border: 2px solid var(--whmp-primary) !important;
border-radius: var(--border-radius-circle) !important;
background: transparent !important;
cursor: pointer;
position: relative;
transition: var(--transition-base);
/* accent-color no longer paints anything once appearance is none, but the
per-block rules still set it; neutralised so nothing half-applies. */
accent-color: auto !important;
/* Pinned against container pressure. The payment list nests its radios in
a 20px wrapper, and a blanket max-width:100% from the containment block
capped the 18px control to that wrapper's 16px content box while the
height stayed 18px - an oval. A fixed-size control is never sized by its
parent, so these three close that door for every block at once. */
max-width: none !important;
min-width: 18px !important;
flex: 0 0 18px !important;
}
#one-step-cart input[type="radio"]:checked,
#billingDetailsModal input[type="radio"]:checked {
border-color: var(--whmp-primary) !important;
/* Primary fill with a centred dot in the surface colour - the configuration
field's checked state, reproduced exactly. */
background: radial-gradient(
circle,
var(--whmp-bg-base) 0 3.5px,
var(--whmp-primary) 3.5px 100%
) !important;
}
#one-step-cart input[type="radio"]:focus-visible,
#billingDetailsModal input[type="radio"]:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--whmp-focus-ring);
}
#one-step-cart input[type="radio"]:disabled,
#billingDetailsModal input[type="radio"]:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* With the input itself drawing the circle, the hand-drawn spans would be a
second one beside it. */
#one-step-cart .radio-styled,
#one-step-cart .radio-custom {
display: none !important;
}
/* ===========================================================================
ORDER SUMMARY - CONTAINING THE PAYMENT SECTION
===========================================================================
Making the sidebar the vertical scroller had a consequence I did not cover:
setting `overflow-y: auto` makes the computed `overflow-x` a scroll value
too, and here it resolves to `hidden`. So anything inside the panel that
keeps its natural width is not scrolled to - it is CUT OFF at the right edge.
The gateway's card fields, its "pay securely" banner and its Autofill button
are all third-party markup sized for a full-width form, so that is exactly
what happened to them.
The answer is to constrain the children rather than to re-enable horizontal
scrolling: a checkout summary should never scroll sideways.
--------------------------------------------------------------------------- */
.order-summary-sidebar,
.order-summary-sidebar * {
/* Padding and borders must count INSIDE the width, or a field set to 100%
plus its own padding is wider than its container by definition. */
box-sizing: border-box;
}
.order-summary-sidebar #orderSummaryPaymentMethods,
.order-summary-sidebar #creditCardInputFields,
.order-summary-sidebar .cc-input-container {
max-width: 100%;
overflow-x: clip;
}
/* Every control the gateway renders, whatever it sets on itself. `min-width: 0`
matters as much as max-width: a flex or grid child refuses to shrink below
its intrinsic width without it, which is how a card-number input keeps a
width the panel cannot give it. */
.order-summary-sidebar #creditCardInputFields input:not([type="radio"]):not([type="checkbox"]),
.order-summary-sidebar #creditCardInputFields select,
.order-summary-sidebar #creditCardInputFields textarea,
.order-summary-sidebar #creditCardInputFields button,
.order-summary-sidebar #creditCardInputFields .form-control,
.order-summary-sidebar #orderSummaryPaymentMethods input:not([type="radio"]):not([type="checkbox"]),
.order-summary-sidebar #orderSummaryPaymentMethods select,
.order-summary-sidebar #orderSummaryPaymentMethods button {
max-width: 100%;
min-width: 0;
}
/* The gateway's own containers: rows it lays out side by side have to be
allowed to wrap inside a 300px panel instead of holding their width. */
.order-summary-sidebar #creditCardInputFields .row,
.order-summary-sidebar #creditCardInputFields [class*="col-"] {
max-width: 100%;
min-width: 0;
flex-wrap: wrap;
}
/* GRID OFFSETS - the other half of the same problem.
---------------------------------------------------------------------------
Constraining WIDTH alone was not enough, and this is where the Stripe fields
were still being cut off. The gateway centres its card inputs with Bootstrap
offsets:
An offset is a percentage MARGIN, not a width. The rule above had already
taken the column to the full width of its parent, so the browser was asked
for 33.33% margin + 100% width inside one box:
margin-left 105.98px + width 317.98px = 423.96px in a 350px content box
-> 74px past the edge
which is exactly what was measured on the Card Number field, the Stripe
Elements frame and the "pay securely with Link" banner. Centring inside a
12-column grid means nothing in a single-column 350px panel, so the offsets
are dropped rather than fought. Both spellings are covered: Bootstrap 3 used
`col-md-offset-4`, Bootstrap 4+ uses `offset-md-4`, and this gateway emits
both on the same element. */
.order-summary-sidebar [class*="col-"][class*="offset"],
.order-summary-sidebar [class*="offset-"] {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* THE BACKSTOP.
---------------------------------------------------------------------------
Naming the controls one by one - input, select, textarea, button - keeps
missing things, because the gateway sizes whatever it likes. At 375px the
three field labels were still hanging 32px out of the panel, from a