.btn-rounded {
    border-radius: 10em;
}

.btn-order {
    border: 2px solid var(--gray-400, #aaa);
}

#texts-config{
    margin-top: 80px;
}
.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
    z-index: 9999;
}

.ribbon::after {
    position: absolute;
    z-index: 9999;
    content: '';
    display: block;
    border: 5px solid var(--brand-success, #2dc76b);
}
.ribbon::before{
    position: absolute;
    z-index: 9999;
    content: '';
    display: block;
    border: 5px solid var(--brand-success, #2dc76b);
}
.ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 15px 0;
    background-color: var(--brand-success, #2dc76b);
    box-shadow: var(--shadow-md, 0 5px 10px rgba(0,0,0,.1));
    color: var(--color-fg-inverse, #fff);
    font: 700 18px/1 'Lato', sans-serif;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    text-transform: uppercase;
    text-align: center;
}

.ribbon-top-right {
    top: -5px;
    right: -10px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
    border-top-color: transparent;
    border-right-color: transparent;
}
.ribbon-top-right::before {
    top: 5px;
    left: -5px;
}
.ribbon-top-right::after {
    bottom: 0;
    right: 0;
}
.ribbon-top-right span {
    left: -25px;
    top: 40px;
    transform: rotate(45deg);
}

.overflow-wrap-normal {
    overflow-wrap: normal !important;
}

.orderpage .cart-carousel:before,
.orderpage .cart-carousel:after {
    position: absolute;
    top: 0;
    bottom: 0;
    content: '';
    height: 100%;
    width: 30px;
    z-index: 1;
}

.orderpage .cart-carousel:before {
    left: 0;
    background: linear-gradient(to right, var(--color-bg, #fff) 0, var(--color-bg, #fff) 60%, transparent 100%);
}

.orderpage .cart-carousel:after {
    right: 0;
    background: linear-gradient(to left, var(--color-bg, #fff) 0, var(--color-bg, #fff) 60%, transparent 100%);
}

.orderpage .card {
    position: relative;
    border-radius: 1em;
}

.orderpage .card .card-wave {
    transform: rotate(-4deg);
    width: 398px;
    left: -15px;
    top: -32px;
    height: 179px;
    overflow: hidden;
    position: absolute;
}

.orderpage .card .card-top {
    z-index: 2;
}

.orderpage .card .card-title {
    font-size: var(--font-size-md, 14px);
}

.orderpage .card .card-price .card-price-month {
    font-size: var(--font-size-md, 14px);
    margin-top: 5px;
    font-weight: 300;
}

.orderpage .step-box {
    font-size: var(--font-size-13, 13px);
    font-weight: normal;
    position: relative;
}

.orderpage .step-box.step-box-arrow {
    border-right: 1px solid var(--color-border, #ebecf0) !important;
}

.orderpage .step-box.border-bottom {
    border-bottom-width: 2px !important;
}

.orderpage .step-box.step-box-arrow:after {
    position: absolute;
    top: 27px;
    content: '';
    width: 20px;
    height: 20px;
    background: var(--color-bg, #fff);
    border-right: 1px solid var(--color-border, #ebecf0);
    border-bottom: 1px solid var(--color-border, #ebecf0);
    font-size: var(--font-size-13, 13px);
    font-weight: normal;
    right: -11px;
    transform: rotate(-45deg);
}

.orderpage .step-box.success:hover {
    opacity: .6;
}

.orderpage .step-boxes {
    padding: 0;
    display: inline-block;
    overflow: hidden;
    border-radius: 1em;
}


#updater .table-borders {
    border: 0;
}

#updater .table-radius {
    border-radius: 0;
}

@keyframes loadingC {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(0, -6px);
    }
    50% {
        transform: translate(0, -0);
    }
    75% {
        transform: translate(0, 4px);
    }
    100% {
        transform: translate(0, 0);
    }
}

.cart_preloader {
    width: 100%;
    text-align: center;
}

.cart_preloader .cart_preloader_line {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 30%;
}

.cart_preloader .cart_preloader_line:nth-last-child(1) {
    animation: loadingC .8s .1s linear infinite;
}

.cart_preloader .cart_preloader_line:nth-last-child(2) {
    animation: loadingC .8s .2s linear infinite;
}

.cart_preloader .cart_preloader_line:nth-last-child(3) {
    animation: loadingC .8s .3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .cart_preloader .cart_preloader_line {
        animation: none;
    }
}

table.table.px-0 tbody td {
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 768px) {
    .orderpage .carousel-inner .carousel-item > div {
        display: none;
    }

    .orderpage .carousel-inner .carousel-item > div:first-child {
        display: block;
    }

    .orderpage .card .card-wave {
        width: 700px;
    }
}

@media (max-width: 1128px) {
    .orderpage .card .card-wave {
        width: 800px;
    }
}

/* ==========================================================================
 * OpenNebula createvm UI (orderpage port)
 * Scope: Product 362 createvm-like configurator in `cart3.tpl`
 * ========================================================================== */

/* Settings card styles (.slick-settings-*) are now theme-owned in slick-components.css
   with dual scope: #content-cloud and #oneb-createvm. */

/* Inline pricing display under sliders (ported from createvm.tpl inline styles) */
#oneb-createvm .backup-price-display {
    font-size: var(--font-size-md, 14px) !important;
    color: var(--color-fg-subtle, #64748b) !important;
    background: transparent !important;
    padding: 8px 0 0 0 !important;
    margin-top: 15px !important;
    border-top: 1px solid var(--color-border, #e2e8f0) !important;
    border-radius: 0 !important;
    display: block;
}

/* Compact VolumeCare select height (ported from createvm.tpl inline styles) */
#oneb-createvm .volumecare-inline {
    flex-wrap: wrap;
    min-width: 0;
}

#oneb-createvm .volumecare-inline .volumecare-select {
    font-size: inherit;
    line-height: 1.2;
    padding: 2px 8px;
    height: 26px;
    min-height: 26px;
    border-radius: 4px;
    max-width: 100%;
}

#oneb-createvm #volumecare_policy {
    max-width: 100%;
}

@media (max-width: 576px) {
    #oneb-createvm .volumecare-inline .volumecare-select {
        flex: 1 1 180px;
        font-size: var(--font-size-sm, 12px);
        height: 28px;
        width: 100% !important;
    }
}

.orderpage .carousel-inner .carousel-item.active,
.orderpage .carousel-inner .carousel-item-next,
.orderpage .carousel-inner .carousel-item-prev {
    display: flex;
}

@media (min-width: 768px) {
    .orderpage .carousel-inner .carousel-item-right.active,
    .orderpage .carousel-inner .carousel-item-next {
        transform: translateX(25%);
    }

    .orderpage .carousel-inner .carousel-item-left.active,
    .orderpage .carousel-inner .carousel-item-prev {
        transform: translateX(-25%);
    }
}

.orderpage .carousel-inner .carousel-item-right,
.orderpage .carousel-inner .carousel-item-left {
    transform: translateX(0);
}


.orderpage .active .result-button {
    display: none;
}

.orderpage .result-incart {
    display: none;
}

.orderpage .active .result-incart,
.orderpage .active .result-cart {
    display: inline-block;
}

.orderpage .domain-search-results .result-group {
    overflow: hidden;
}

@media (max-width: 480px) {
    .orderpage .domain-search {
        width: auto;
        padding: 50px 0;
        margin: 0 30px;
    }

    .orderpage .domain-input button {
        font-size: 0;
        margin-left: 10px;
    }

    .orderpage .domain-input button::before {
        content: "\f105";
        font: 16px/30px FontAwesome;
        vertical-align: middle;
    }

    .orderpage .result-sld.mid {
        display: none;
    }

    .orderpage .result-sld.min {
        display: inline;
    }

    .orderpage .spotlight-product {
        width: 100%;
        margin: 0 20px 20px;
    }

    .orderpage .price-period {
        font-size: 0;
    }

    .orderpage .domain-search-results .btn-sm {
        min-height: var(--touch-target-min, 44px);
        padding: 10px 16px;
        font-size: var(--font-size-md, 14px);
    }
}

@media (max-width: 979px) {

    .orderpage .domain-search {
        width: auto;
        margin: 0 30px;
    }

    .orderpage .domain-input button {
        padding: 6px 20px;
    }

    .orderpage .result-row {
        margin: 10px 10px
    }

    .orderpage .result-button,
    .orderpage .result-data,
    .orderpage .result-data > div,
    .orderpage .result-button a,
    .orderpage .result-hostname,
    .orderpage .result-price {
        width: 100%;
        margin: 0;
        border-radius: 0;
        text-align: center;
        float: none;
        display: block;
    }

    .orderpage .result-data {
        min-height: 52px;
    }

    .orderpage .result-button a {
        font-size: var(--font-size-lg, 16px);
        border-radius: 4px 4px 0 0;
    }

    .orderpage .result-data .result-price {
        border-radius: 0 0 4px 4px;
    }

    .orderpage .result-sld.mid {
        display: inline;
    }
}

.orderpage .result-row.active .result-button {
    display: none;
}

.orderpage .result-incart {
    display: none;
}

.orderpage .result-row.active .result-incart,
.orderpage .result-row.active .result-cart {
    display: inline-block;
}

.orderpage .result-row.active .result-price {
    display: none;
}

.orderpage .product_description ul {
    margin-top: 20px;
}

@media (max-width: 768px) {
    .domain-search{
        margin: 0 !important;
    }
    .mobile-domian-firendly{
        padding: 10px !important;
    }
    .wizard-header-icons .material-icons{
        display: none !important;
    }
    .orderpage .step-box.step-box-arrow:after{
        display: none !important;
    }
    .orderpage .step-boxes{
        flex-direction: column !important;
    }
    .orderpage .step-boxes a{
        width: 100% !important;
    }
    .wizard-order-summary-domain{
        flex-direction: unset !important;
        width: 100% !important;
    }
    .orderpage .step-box { font-size: var(--font-size-md, 14px); padding: 12px 8px !important; }
}

/* =========== Mobile responsive =========== */

/* Cart4: full-width checkout buttons on phone */
@media (max-width: 576px) {
    .orderpage-cart_togglebox_wizard .d-flex > input.btn.w-25 {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .orderpage-cart_togglebox_wizard .d-flex > input.btn.w-25 + input.btn.w-25 {
        margin-top: 8px;
    }
}

/* CreateVM controls: enlarge touch targets on small screens and touch devices */
@media (max-width: 576px), (pointer: coarse) {
    .orderpage-cart_togglebox_wizard .cv-chip {
        min-width: var(--touch-target-min, 44px) !important;
        min-height: var(--touch-target-min, 44px) !important;
        padding: 8px 12px !important;
    }
    .orderpage-cart_togglebox_wizard .storage-unit-btn {
        min-width: var(--touch-target-min, 44px) !important;
        min-height: var(--touch-target-min, 44px) !important;
        padding: 8px 12px !important;
    }
    .orderpage-cart_togglebox_wizard .slider-step-btn {
        width: var(--touch-target-min, 44px) !important;
        height: var(--touch-target-min, 44px) !important;
        min-width: var(--touch-target-min, 44px) !important;
        min-height: var(--touch-target-min, 44px) !important;
    }
    .orderpage-cart_togglebox_wizard .cv-os-seg__btn {
        min-height: var(--touch-target-min, 44px) !important;
    }
    .orderpage-cart_togglebox_wizard .createvm-network-row {
        min-height: var(--touch-target-min, 44px);
        padding: 10px 12px;
    }
    .orderpage-cart_togglebox_wizard .createvm-network-row input[type="checkbox"],
    .orderpage-cart_togglebox_wizard .createvm-network-row input[type="radio"] {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }
}

/* Disable the theme's input[type=checkbox/radio]::after pseudo-element (a custom
   18px box from custom.min.css) where we keep the native control. Left in place
   it renders a SECOND box next to the native checkbox (appearance:auto). */
.orderpage-cart_togglebox_wizard .createvm-network-row input[type="checkbox"]::after,
.orderpage-cart_togglebox_wizard .createvm-network-row input[type="radio"]::after,
.orderpage-cart_togglebox_wizard .term-checkbox::after {
    display: none;
}

/* Cart0: ribbon overflow on small phones */
@media (max-width: 479px) {
    .orderpage .card .card-wave { width: 500px; }
    .ribbon { width: 100px; height: 100px; }
    .ribbon span { width: 150px; padding: 8px 0; font-size: var(--font-size-sm, 12px); top: 22px; left: -18px; }
}

/* Network rows + DRaaS backup rows: wrap on small screens */
@media (max-width: 576px) {
    /* Network rows: price + Primary don't collide */
    .orderpage-cart_togglebox_wizard .createvm-network-row {
        flex-wrap: wrap;
    }
    .orderpage-cart_togglebox_wizard .createvm-network-row > label:first-child {
        flex-basis: 100%;
    }
    .orderpage-cart_togglebox_wizard .createvm-network-row > label:last-child {
        margin-left: auto;
    }

    /* DRaaS backup rows: stack label above controls */
    #oneb-createvm .slick-settings-row {
        flex-wrap: wrap;
    }
    #oneb-createvm .slick-settings-row-label {
        flex-basis: 100%;
        margin-bottom: 8px;
    }
    #oneb-createvm .slick-settings-row-controls {
        flex-wrap: wrap;
        gap: 8px;
    }
    #oneb-createvm .slick-settings-row-count {
        flex-basis: 100%;
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
}

/* Summary sidebar: prevent domain name overflow */
.order-summary-box table { table-layout: fixed; width: 100%; }
.order-summary-box table td { word-break: break-word; overflow-wrap: break-word; }
.order-summary-box table td[align="right"] { white-space: nowrap; width: 35%; }

/* =========== Cart4 polish =========== */

.orderpage-cart_togglebox_wizard .cart4-shell {
    display: grid;
    gap: 1.5rem;
}

/* Base card = recessed/default tier (client + terms cards): flat surface, resting shadow. */
.orderpage-cart_togglebox_wizard .cart4-card {
    overflow: hidden;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--radius-lg, 8px);
    background: var(--color-bg-elevated, #fff);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
}

/* Promoted/review tier: order summary reads as the dominant resting surface. */
.orderpage-cart_togglebox_wizard .cart4-summary-card {
    border-top: 4px solid var(--brand-primary, #29A7E6);
    border-radius: var(--radius-xl, 12px);
    background: var(--surface-gradient, linear-gradient(135deg, #fff 0%, #f8f9fa 100%));
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
}

/* Commerce/lifted tier: payment carries the CTA accent at the checkout threshold.
   The orange glow shadow is the commerce cue here — the colored top stripe was
   dropped so the cyan summary stripe stays the page's single accent rail (two
   differently-colored stripes with no legend read as decoration, not tiering).
   The orange CTA button + this glow already signal the payment threshold. */
.orderpage-cart_togglebox_wizard .cart4-payment-card {
    border-radius: var(--radius-xl, 12px);
    background: var(--surface-card-strong, #fff);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08)), var(--shadow-cta-sm, 0 4px 12px rgba(245, 146, 30, 0.18));
}

.orderpage-cart_togglebox_wizard .cart4-section-title {
    max-width: 42rem;
}

.orderpage-cart_togglebox_wizard .cart4-section-copy {
    color: var(--color-fg-subtle, #64748b);
    line-height: 1.6;
}

.orderpage-cart_togglebox_wizard .cart4-summary-table td {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    vertical-align: top;
}

.orderpage-cart_togglebox_wizard .cart4-summary-table td:last-child {
    text-align: right;
}

.orderpage-cart_togglebox_wizard .cart4-summary-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.orderpage-cart_togglebox_wizard .cart4-summary-total-row td {
    padding-top: 1.15rem;
    border-top: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 88%, transparent);
}

.orderpage-cart_togglebox_wizard .cart4-summary-total-note {
    display: inline-block;
    color: var(--color-fg-subtle, #64748b);
    font-size: 0.88rem;
    font-weight: 500;
}

.orderpage-cart_togglebox_wizard .cart4-summary-total-value {
    white-space: nowrap;
}

.orderpage-cart_togglebox_wizard .cart4-customer-switch {
    gap: 0.75rem;
}

.orderpage-cart_togglebox_wizard .cart4-switch-item {
    margin-right: 0 !important;
}

.orderpage-cart_togglebox_wizard .cart4-switch-chip {
    position: relative;
    display: inline-flex;
    min-width: 11rem;
    margin: 0;
    cursor: pointer;
}

.orderpage-cart_togglebox_wizard .cart4-switch-input,
.orderpage-cart_togglebox_wizard .cart4-gateway-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.orderpage-cart_togglebox_wizard .cart4-switch-text {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 82%, transparent);
    border-radius: 0.95rem;
    background: color-mix(in srgb, var(--color-bg, #fff) 92%, var(--brand-primary, #3891F2) 8%);
    color: var(--color-fg, #334155);
    font-weight: 600;
    text-align: center;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.orderpage-cart_togglebox_wizard .cart4-switch-chip:hover .cart4-switch-text,
.orderpage-cart_togglebox_wizard .cart4-switch-input:focus + .cart4-switch-text {
    border-color: color-mix(in srgb, var(--brand-primary, #3891F2) 48%, var(--color-border, #cbd5e1));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #3891F2) 18%, transparent);
    transform: translateY(-1px);
}

.orderpage-cart_togglebox_wizard .cart4-switch-item.bgon2 .cart4-switch-text {
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary, #3891F2) 16%, var(--color-bg, #fff)) 0%, color-mix(in srgb, var(--brand-primary, #3891F2) 6%, var(--color-bg, #fff)) 100%);
    border-color: color-mix(in srgb, var(--brand-primary, #3891F2) 55%, transparent);
    color: var(--brand-primary, #3891F2);
}

.orderpage-cart_togglebox_wizard .cart4-account-panel,
.orderpage-cart_togglebox_wizard .cart4-payment-details {
    display: grid;
    /* minmax(0, 1fr) — without it the implicit column is minmax(auto, 1fr), whose
       auto minimum sizes to the signup/gateway form's content width and refuses to
       shrink, blowing the fields past the card on narrow viewports. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

/* Belt-and-suspenders: keep the injected signup/login form and its Bootstrap row
   from establishing their own intrinsic width inside the (now shrinkable) track. */
.orderpage-cart_togglebox_wizard .cart4-account-panel > *,
.orderpage-cart_togglebox_wizard .cart4-account-panel .tb-signup-form,
.orderpage-cart_togglebox_wizard .cart4-account-panel .row {
    min-width: 0;
    max-width: 100%;
}

.orderpage-cart_togglebox_wizard #updater .row {
    row-gap: 0.85rem;
}

.orderpage-cart_togglebox_wizard #updater .form-label-group,
.orderpage-cart_togglebox_wizard #updater .form-group,
.orderpage-cart_togglebox_wizard #gatewayform .cfitm {
    margin-bottom: 1rem;
}

.orderpage-cart_togglebox_wizard #updater .form-control,
.orderpage-cart_togglebox_wizard #gatewayform .styled,
.orderpage-cart_togglebox_wizard #gatewayform input[type="text"],
.orderpage-cart_togglebox_wizard #gatewayform input[type="password"],
.orderpage-cart_togglebox_wizard #gatewayform input[type="email"],
.orderpage-cart_togglebox_wizard #gatewayform select {
    width: 100% !important;
    min-height: 3rem;
    border-radius: 0.95rem;
    border: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 82%, transparent);
    background: color-mix(in srgb, var(--color-bg, #fff) 97%, var(--brand-primary, #3891F2) 3%);
    color: var(--color-fg, #0f172a);
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.03);
}

/* The gateway (credit-card) inputs read as a tight data form, not pill-shaped
   account fields — the 0.95rem account-panel radius made the CVV/CC boxes look
   oddly bubbled against their labels. Square them to a crisp control radius. */
.orderpage-cart_togglebox_wizard #gatewayform .styled,
.orderpage-cart_togglebox_wizard #gatewayform input[type="text"],
.orderpage-cart_togglebox_wizard #gatewayform input[type="password"],
.orderpage-cart_togglebox_wizard #gatewayform input[type="email"],
.orderpage-cart_togglebox_wizard #gatewayform input[type="number"],
.orderpage-cart_togglebox_wizard #gatewayform select {
    border-radius: 0.4rem;
}

.orderpage-cart_togglebox_wizard #updater .form-control:focus,
.orderpage-cart_togglebox_wizard #gatewayform .styled:focus,
.orderpage-cart_togglebox_wizard #gatewayform input:focus,
.orderpage-cart_togglebox_wizard #gatewayform select:focus {
    border-color: color-mix(in srgb, var(--brand-primary, #3891F2) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #3891F2) 18%, transparent);
    outline: 0;
}

.orderpage-cart_togglebox_wizard #updater .form-label-placeholder {
    color: var(--color-fg-subtle, #64748b);
}

.orderpage-cart_togglebox_wizard .tb-signup-form .vtip_description_signup_form_label {
    opacity: 0.8;
}

.orderpage-cart_togglebox_wizard .tb-login-form__intro {
    color: var(--color-fg-subtle, #64748b);
    line-height: 1.6;
}

.orderpage-cart_togglebox_wizard .tb-login-form__actions {
    gap: 1rem;
}

.orderpage-cart_togglebox_wizard .tb-login-form__submit {
    min-width: 11rem;
}

/* The base .cart4-card clips with overflow:hidden, which severs the
   intl-tel-input country dropdown (position:absolute) when the phone field
   sits near the card's bottom edge. Let this card's content overflow so the
   dropdown can extend past it; the card has no decorative bleed to contain. */
.orderpage-cart_togglebox_wizard .cart4-client-card {
    overflow: visible;
}

/* Keep the dropdown above the cards that follow it in the flow. */
.orderpage-cart_togglebox_wizard .cart4-client-card .iti__country-list {
    z-index: 5;
}

.orderpage-cart_togglebox_wizard .cart4-client-card .table.stackable {
    margin-bottom: 0;
}

.orderpage-cart_togglebox_wizard .cart4-client-card .table.stackable td {
    padding: 0.8rem 0.65rem;
    border-top-color: color-mix(in srgb, var(--color-border, #e2e8f0) 80%, transparent);
}

.orderpage-cart_togglebox_wizard .cart4-terms-card .tos-checkbox {
    position: absolute;
    opacity: 0;
}

.orderpage-cart_togglebox_wizard .cart4-term-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 1rem;
    border: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 84%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--color-bg, #fff) 96%, var(--brand-primary, #3891F2) 4%);
}

/* The consent label is the real tap target (its `for` toggles the box). Stretch
   it to fill the row and stand ≥44px tall so a thumb can't miss the mandatory
   checkbox on mobile — the 1.15rem visual box stays as-is. */
.orderpage-cart_togglebox_wizard .cart4-term-item label {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    cursor: pointer;
}

.orderpage-cart_togglebox_wizard .cart4-term-item + .cart4-term-item {
    margin-top: 0.9rem;
}

.orderpage-cart_togglebox_wizard .term-checkbox {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    flex: 0 0 auto;
    /* Native control tinted to the brand — it was previously a plain browser
       checkbox carrying a text-input focus ring (border + glow) that didn't
       belong on a checkbox. Accent + a clean focus-visible outline instead. */
    accent-color: var(--brand-primary, #3891F2);
    cursor: pointer;
}

.orderpage-cart_togglebox_wizard .term-checkbox:focus-visible {
    outline: 2px solid var(--brand-primary, #3891F2);
    outline-offset: 2px;
}

/* Grid (auto-fill, not auto-fit) so a payment method that wraps alone to the
   last row keeps a single-column width instead of stretching across the row.
   The prior flex:1 1 17rem let the orphaned 5th gateway (ACH) grow to ~4x the
   others, reading as a false "recommended" default. Overrides Bootstrap's
   d-flex on the same element, hence !important on display. */
.orderpage-cart_togglebox_wizard .cart4-gateway-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
}

.orderpage-cart_togglebox_wizard .cart4-gateway-option {
    margin: 0;
    cursor: pointer;
}

.orderpage-cart_togglebox_wizard .cart4-gateway-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 82%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--color-bg, #fff) 94%, var(--brand-primary, #3891F2) 6%);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.orderpage-cart_togglebox_wizard .cart4-gateway-option:hover .cart4-gateway-card,
.orderpage-cart_togglebox_wizard .cart4-gateway-input:focus + .cart4-gateway-card {
    border-color: color-mix(in srgb, var(--brand-primary, #3891F2) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #3891F2) 16%, transparent);
    transform: translateY(-1px);
}

.orderpage-cart_togglebox_wizard .cart4-gateway-input:checked + .cart4-gateway-card {
    border-color: color-mix(in srgb, var(--brand-primary, #3891F2) 65%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary, #3891F2) 15%, var(--color-bg, #fff)) 0%, color-mix(in srgb, var(--brand-primary, #3891F2) 7%, var(--color-bg, #fff)) 100%);
}

/* In dark mode the light :checked tint (brand 15%→7% over a near-black bg)
   barely separated the chosen gateway from the unselected four — the user
   couldn't tell which method was active. Push the selected state hard: a bright
   brand border, a 1px inner ring, and a denser fill so it reads as selected
   without relying on a subtle hue shift alone. */
html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-gateway-input:checked + .cart4-gateway-card {
    border-color: var(--brand-primary, #60a5fa);
    background: color-mix(in srgb, var(--brand-primary, #60a5fa) 24%, var(--color-bg, #0f172a));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary, #60a5fa) 65%, transparent);
}

.orderpage-cart_togglebox_wizard .cart4-gateway-title {
    color: var(--color-fg-strong, #0f172a);
    font-size: 1rem;
    font-weight: 700;
}

.orderpage-cart_togglebox_wizard .cart4-gateway-note {
    color: var(--color-fg-subtle, #64748b);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* Payment trust strip: the reassurance the faux card never provided — security
   posture + accepted brands, stated plainly at the moment a card is entered. */
.orderpage-cart_togglebox_wizard .cart4-payment-trust {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.35rem;
    padding: 0.7rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--brand-success, #16a34a) 30%, transparent);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--color-bg, #fff) 94%, var(--brand-success, #16a34a) 6%);
    color: var(--color-fg, #334155);
    font-size: 0.88rem;
    line-height: 1.45;
}

.orderpage-cart_togglebox_wizard .cart4-payment-trust__icon {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    color: var(--brand-success, #16a34a);
}

.orderpage-cart_togglebox_wizard .cart4-payment-trust strong {
    color: var(--color-fg-strong, #0f172a);
    font-weight: 700;
}

html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-payment-trust {
    background: color-mix(in srgb, var(--color-bg, #0f172a) 88%, var(--brand-success, #34d399) 12%);
    border-color: color-mix(in srgb, var(--brand-success, #34d399) 34%, var(--color-border, #334155));
    color: var(--color-fg, #e2e8f0);
}

html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-payment-trust strong {
    color: var(--color-fg, #e2e8f0);
}

html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-payment-trust__icon {
    color: var(--brand-success, #34d399);
}

.orderpage-cart_togglebox_wizard .cart4-payment-details .wbox,
.orderpage-cart_togglebox_wizard .cart4-payment-details .tb-direct-debit-form {
    padding: 1.3rem 1.35rem;
    border: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 84%, transparent);
    border-radius: 1.1rem;
    background: color-mix(in srgb, var(--color-bg, #fff) 96%, var(--brand-primary, #3891F2) 4%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.orderpage-cart_togglebox_wizard .cart4-payment-details .wbox_header {
    padding: 0;
    margin-bottom: 0.25rem;
    background: transparent;
    border: 0;
}

.orderpage-cart_togglebox_wizard .cart4-payment-details .wbox_header strong {
    color: var(--color-fg-strong, #0f172a);
    font-size: 1rem;
    font-weight: 700;
}

.orderpage-cart_togglebox_wizard .cart4-payment-details .wbox_content {
    padding: 0;
    background: transparent;
}

.orderpage-cart_togglebox_wizard .cart4-payment-details .cfitm {
    float: none;
    width: 100%;
}

.orderpage-cart_togglebox_wizard .cart4-payment-details .cfitm label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--color-fg, #334155);
    font-size: 0.92rem;
    font-weight: 600;
}

.orderpage-cart_togglebox_wizard .cart4-payment-details .clear {
    display: none;
}

.orderpage-cart_togglebox_wizard .tb-direct-debit-form__input {
    width: 100% !important;
}

/* ---- Credit-card gateway (flip-card widget) -------------------------------
   This gateway renders Bootstrap `.card` chrome + a `.credit-card-box` graphic
   + `*_js` inputs. The inputs are already styled by the shared
   `#gatewayform input[type=...]/select/.styled` rules above; what's left is the
   surrounding chrome. Scope every rule to `:has(.credit-card)` so it only ever
   touches this widget — other gateways (PayPal/Stripe/ACH) inject their own
   markup into the same #gatewayform and must not inherit the CC layout. */
.orderpage-cart_togglebox_wizard .cart4-payment-details > .card:has(.credit-card) {
    border: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 84%, transparent);
    border-radius: 1.1rem;
    background: color-mix(in srgb, var(--color-bg, #fff) 96%, var(--brand-primary, #3891F2) 4%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    /* Cap + center the card so its chrome hugs the fields. Full-width, the card
       wrapped a 36rem column marooned in ~384px of dead space on each side; a
       focused, centered payment form is the expected checkout pattern. */
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

/* The selected method is already named in the picker above — the gateway's own
   "Credit Card" header is a redundant second title. Drop it. */
.orderpage-cart_togglebox_wizard .cart4-payment-details > .card:has(.credit-card) > .card-header {
    display: none;
}

.orderpage-cart_togglebox_wizard .cart4-payment-details > .card:has(.credit-card) > .card-body {
    padding: 1.5rem;
}

/* Reclaim the cramped, deeply-offset column so the fields fill the (now capped)
   payment card edge to edge — the card itself carries the max-width. */
.orderpage-cart_togglebox_wizard .cart4-payment-details > .card:has(.credit-card) .card-body > .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
}

/* The skeuomorphic flip-card graphic out-weighed both the real fields and the
   Total Due, and read as dated generic-checkout chrome. Retire it for a
   restrained, trustworthy payment surface; the fields table carries the
   interaction and the trust strip carries reassurance. Hide the whole
   `.credit-card` wrapper — the graphic is position:absolute inside a fixed
   ~170px-tall box, so hiding only `.credit-card-box` would leave the reserved
   height behind as dead space. (`:has(.credit-card)` still matches; a
   display:none element stays in the DOM.) */
.orderpage-cart_togglebox_wizard .cart4-payment-details .credit-card {
    display: none;
}

html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-payment-details > .card:has(.credit-card) {
    background: color-mix(in srgb, var(--color-bg, #0f172a) 90%, var(--brand-primary, #60a5fa) 10%);
    border-color: color-mix(in srgb, var(--brand-primary, #60a5fa) 28%, var(--color-border, #334155));
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.42);
}

.orderpage-cart_togglebox_wizard .cart4-actions {
    gap: 0.85rem;
}

.orderpage-cart_togglebox_wizard .cart4-action {
    width: min(100%, 17rem);
    min-height: 3.1rem;
    border-radius: 999px;
}

.orderpage-cart_togglebox_wizard .cart4-action-primary {
    /* The page's most important control wears the bright brand orange (#F5921E),
       matching the header "Order" button. White text on full-tint orange is only
       ~2.6:1, so we flip the text to near-black instead of darkening the orange to
       brown: dark-on-#F5921E clears ~8:1 (well past AA) AND stays unmistakably
       on-brand — the standard accessible-CTA pattern. */
    background: linear-gradient(135deg, #f8a23a 0%, var(--brand-cta, #F5921E) 100%);
    border-color: var(--brand-cta, #F5921E);
    color: #1a1206;
    /* A restrained lift, not a halo. */
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-cta, #F5921E) 22%, transparent);
    /* Heavier weight so the dark glyphs stay crisp on the bright fill. */
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.orderpage-cart_togglebox_wizard .cart4-action-primary:hover,
.orderpage-cart_togglebox_wizard .cart4-action-primary:focus {
    background: linear-gradient(135deg, var(--brand-cta, #F5921E) 0%, #e07d0a 100%);
    border-color: #e07d0a;
    color: #1a1206;
}

/* Clear Cart demoted to a quiet, low-emphasis link beneath the checkout CTA. */
.orderpage-cart_togglebox_wizard .cart4-clear-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    border: 0;
    background: transparent;
    color: var(--color-fg-subtle, #64748b);
    font-size: 0.9rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.orderpage-cart_togglebox_wizard .cart4-clear-link:hover,
.orderpage-cart_togglebox_wizard .cart4-clear-link:focus {
    color: var(--brand-danger, #dc2626);
}

/* Mobile sticky checkout bar — hidden by default, revealed at <=767px below. */
.orderpage-cart_togglebox_wizard .cart4-sticky-bar {
    display: none;
}

@media (max-width: 991px) {
    .orderpage-cart_togglebox_wizard .cart4-customer-switch {
        width: 100%;
    }

    .orderpage-cart_togglebox_wizard .cart4-switch-item,
    .orderpage-cart_togglebox_wizard .cart4-switch-chip {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (max-width: 767px) {
    .orderpage-cart_togglebox_wizard .cart4-summary-table td {
        display: block;
        width: 100%;
        text-align: left !important;
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }

    .orderpage-cart_togglebox_wizard .cart4-summary-total-row td:last-child {
        padding-top: 0.7rem;
    }

    .orderpage-cart_togglebox_wizard .tb-login-form__actions {
        flex-direction: column;
        align-items: stretch !important;
    }

    .orderpage-cart_togglebox_wizard .tb-login-form__submit,
    .orderpage-cart_togglebox_wizard .cart4-action {
        width: 100%;
    }

    /* The sticky bar carries the single primary CTA on mobile; hide the in-flow
       one so two identical amber buttons don't stack at the page end. Clear Cart
       stays in flow. */
    .orderpage-cart_togglebox_wizard .cart4-actions .cart4-action-primary {
        display: none;
    }

    /* Reserve space so the fixed bar never covers Clear Cart / the footer.
       Scoped to the step-4 form that actually contains the sticky bar — other
       cart steps share the .orderpage-cart_togglebox_wizard root and must not
       inherit this phantom bottom padding. */
    .orderpage-cart_togglebox_wizard form:has(.cart4-sticky-bar) {
        padding-bottom: 5rem;
    }

    .orderpage-cart_togglebox_wizard .cart4-sticky-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.85rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        padding: 0.6rem 1rem;
        padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
        background: var(--color-bg-elevated, #fff);
        border-top: 1px solid var(--color-border, #dee2e6);
        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.14);
    }

    .orderpage-cart_togglebox_wizard .cart4-sticky-total {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.2;
    }

    .orderpage-cart_togglebox_wizard .cart4-sticky-total-label {
        color: var(--color-fg-subtle, #64748b);
        font-size: 0.72rem;
        font-weight: 600;
    }

    .orderpage-cart_togglebox_wizard .cart4-sticky-total-value {
        color: var(--color-fg-strong, #0f172a);
        font-size: 1.15rem;
        font-weight: 700;
        white-space: nowrap;
    }

    /* Skin (amber gradient/border/color + :hover/:focus) is inherited from
       .cart4-action-primary on the markup — this only adds the sticky-bar layout
       overrides so the two checkout buttons can never visually diverge. */
    .orderpage-cart_togglebox_wizard .cart4-sticky-submit {
        flex: 0 0 auto;
        width: auto;
        min-height: 46px;
        padding: 0 1.5rem;
        border-radius: 999px;
        font-size: 1rem;
    }

    /* The LiveChat widget docks bottom-right at max z-index and would sit on top
       of the sticky bar's Checkout button. Rather than fight its z-index, lift the
       widget above the bar — scoped to step 4 (where .cart4-sticky-bar exists in the
       DOM) so other cart steps keep the chat in its normal corner. If LiveChat ever
       renames the container this rule silently no-ops back to today's overlap. */
    /* No transition: the bar is present from load, so this is a one-time
       position offset, not an interaction — animating it would slide the chat
       widget up on every page load (and would need a reduced-motion opt-out). */
    body:has(.cart4-sticky-bar) #chat-widget-container {
        transform: translateY(-72px);
    }
}

@media (max-width: 576px) {
    .orderpage-cart_togglebox_wizard .cart4-card {
        padding: 1.25rem !important;
    }

    .orderpage-cart_togglebox_wizard .cart4-switch-chip,
    .orderpage-cart_togglebox_wizard .cart4-gateway-option {
        width: 100%;
    }

    .orderpage-cart_togglebox_wizard .cart4-gateway-card,
    .orderpage-cart_togglebox_wizard .cart4-term-item {
        padding: 0.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .orderpage-cart_togglebox_wizard .cart4-switch-text,
    .orderpage-cart_togglebox_wizard .cart4-gateway-card {
        transition: none;
    }
}

/* =========== Dark mode =========== */

html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-card {
    background: var(--color-bg-elevated, #111827);
    border-color: var(--color-border, #334155);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(2, 6, 23, 0.4));
}

html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-summary-card {
    background: var(--surface-gradient, linear-gradient(145deg, #0f172a 0%, #1e293b 100%));
    box-shadow: var(--shadow-md, 0 4px 12px rgba(2, 6, 23, 0.5));
}

html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-payment-card {
    background: var(--surface-card-strong, #0f172a);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(2, 6, 23, 0.5));
}

html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-payment-details .wbox,
html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-payment-details .tb-direct-debit-form {
    background: color-mix(in srgb, var(--color-bg, #0f172a) 90%, var(--brand-primary, #60a5fa) 10%);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.42);
}

html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-switch-text,
html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-gateway-card,
html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-term-item {
    background: color-mix(in srgb, var(--color-bg, #0f172a) 88%, var(--brand-primary, #60a5fa) 12%);
    border-color: color-mix(in srgb, var(--brand-primary, #60a5fa) 32%, var(--color-border, #334155));
}

html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-gateway-title,
html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-payment-details .wbox_header strong {
    color: var(--color-fg, #e2e8f0);
}

/* P0: the ToS consent label inherits a hard-coded slate ink (#1e293b) from the
   theme's `.text-small`, which doesn't track `--color-fg`. On the dark terms
   card (#111827) that's ~1.2:1 — the legally-required consent text renders
   invisible. Repaint it (and its link) to the dark foreground. The gateway
   list / card-menu were already tokenized; this label was the gap. */
html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-term-item label {
    color: var(--color-fg, #e2e8f0);
}

/* P0: the credit-card gateway renders its field labels as <td> cells (not
   <label>s), so they kept the light-mode ink (#1e293b) and collapsed to ~1.05:1
   on the dark payment surface — effectively invisible. Recolor the label column
   to the dark foreground. Selects/inputs in the control column keep their own
   color rules above, so this only repaints the label text. */
html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-payment-details .checkout table td {
    color: var(--color-fg, #e2e8f0);
}

html[data-theme="dark"] .orderpage-cart_togglebox_wizard #updater .form-control,
html[data-theme="dark"] .orderpage-cart_togglebox_wizard #gatewayform .styled,
html[data-theme="dark"] .orderpage-cart_togglebox_wizard #gatewayform input[type="text"],
html[data-theme="dark"] .orderpage-cart_togglebox_wizard #gatewayform input[type="password"],
html[data-theme="dark"] .orderpage-cart_togglebox_wizard #gatewayform input[type="email"],
html[data-theme="dark"] .orderpage-cart_togglebox_wizard #gatewayform input[type="number"],
html[data-theme="dark"] .orderpage-cart_togglebox_wizard #gatewayform textarea,
html[data-theme="dark"] .orderpage-cart_togglebox_wizard #gatewayform select {
    background: color-mix(in srgb, var(--color-bg, #0f172a) 86%, white 14%);
    color: var(--color-fg, #e2e8f0);
    border-color: color-mix(in srgb, var(--brand-primary, #60a5fa) 24%, var(--color-border, #334155));
}

/* Dark-mode robustness for the gateway panel — do NOT depend on :has() or a
   direct-child `.card` to darken the surface. The logged-in saved-card form
   (clientarea/ccprocessing.tpl) nests its cards deep inside an accordion, and its
   new-card `.card-body` keeps a white background while the centered `.checkout`
   inside it is narrower — so a white frame shows on the card-body's left/right
   edges, with the label column recolored to light ink on top = "white background,
   unreadable text". Darken every panel container directly as a floor; the
   input/select/label rules above still own the controls. */
html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-payment-details .card,
html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-payment-details .card-body,
html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-payment-details .card-header,
html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-payment-details .accordion,
html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-payment-details .wbox,
html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-payment-details .checkout {
    background-color: color-mix(in srgb, var(--color-bg, #0f172a) 90%, var(--brand-primary, #60a5fa) 10%);
    color: var(--color-fg, #e2e8f0);
    border-color: color-mix(in srgb, var(--brand-primary, #60a5fa) 28%, var(--color-border, #334155));
}

html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-payment-details label,
html[data-theme="dark"] .orderpage-cart_togglebox_wizard .cart4-payment-details td {
    color: var(--color-fg, #e2e8f0);
}

/* Browser autofill repaints inputs with a forced light background + dark text,
   which looks white-on-dark broken. Pin the autofilled state to the dark surface. */
html[data-theme="dark"] .orderpage-cart_togglebox_wizard #gatewayform input:-webkit-autofill,
html[data-theme="dark"] .orderpage-cart_togglebox_wizard #gatewayform input:-webkit-autofill:focus,
html[data-theme="dark"] .orderpage-cart_togglebox_wizard #gatewayform input:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--color-fg, #e2e8f0);
    -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--color-bg, #0f172a) 86%, white 14%) inset;
    caret-color: var(--color-fg, #e2e8f0);
}

/* Step-box arrow pseudo-element */
html[data-theme="dark"] .orderpage .step-box.step-box-arrow:after {
    background: var(--color-bg);
}

/* Period accent colors: lighter variants for dark surfaces */
html[data-theme="dark"] #oneb-createvm .slick-settings-row--monthly { border-left-color: #818cf8; }
html[data-theme="dark"] #oneb-createvm .slick-settings-row--weekly  { border-left-color: #60a5fa; }
html[data-theme="dark"] #oneb-createvm .slick-settings-row--daily   { border-left-color: #34d399; }
html[data-theme="dark"] #oneb-createvm .slick-settings-row--monthly.is-active { border-left-color: #a5b4fc; }
html[data-theme="dark"] #oneb-createvm .slick-settings-row--weekly.is-active  { border-left-color: #93c5fd; }
html[data-theme="dark"] #oneb-createvm .slick-settings-row--daily.is-active   { border-left-color: #6ee7b7; }

/* Period row gradient overlays: increase alpha for visibility on dark surfaces */
html[data-theme="dark"] #oneb-createvm .slick-settings-row--monthly:hover {
    background: linear-gradient(90deg, rgba(129, 140, 248, 0.12) 0%, var(--gray-50, #1e293b) 100%);
}
html[data-theme="dark"] #oneb-createvm .slick-settings-row--weekly:hover {
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.12) 0%, var(--gray-50, #1e293b) 100%);
}
html[data-theme="dark"] #oneb-createvm .slick-settings-row--daily:hover {
    background: linear-gradient(90deg, rgba(52, 211, 153, 0.12) 0%, var(--gray-50, #1e293b) 100%);
}
html[data-theme="dark"] #oneb-createvm .slick-settings-row--monthly.is-active {
    background: linear-gradient(90deg, rgba(129, 140, 248, 0.15) 0%, var(--color-bg, #0f172a) 40%);
}
html[data-theme="dark"] #oneb-createvm .slick-settings-row--weekly.is-active {
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.15) 0%, var(--color-bg, #0f172a) 40%);
}
html[data-theme="dark"] #oneb-createvm .slick-settings-row--daily.is-active {
    background: linear-gradient(90deg, rgba(52, 211, 153, 0.15) 0%, var(--color-bg, #0f172a) 40%);
}

/* Slider number inputs + backup count selects: ensure text is legible on dark surfaces.
   Shared by the CreateVM card (#oneb-createvm) and the monthly resources card (.oneb-monthly-resources). */
html[data-theme="dark"] #oneb-createvm .slick-settings-row-count select,
html[data-theme="dark"] #oneb-createvm .slider-container .slider-value input[type="number"],
html[data-theme="dark"] .oneb-monthly-resources .slider-container .slider-value input[type="number"] {
    color: var(--color-fg, #e2e8f0);
    background: var(--color-bg, #1e293b);
    border-color: var(--gray-600, #475569);
}

#oneb-createvm .slider-container .slider-value input[type="number"],
.oneb-monthly-resources .slider-container .slider-value input[type="number"] {
    appearance: auto;
    /* stylelint-disable-next-line property-no-vendor-prefix, declaration-property-value-no-unknown */
    -moz-appearance: number-input;
}

#oneb-createvm .slider-container .slider-value input[type="number"]::-webkit-inner-spin-button,
#oneb-createvm .slider-container .slider-value input[type="number"]::-webkit-outer-spin-button,
.oneb-monthly-resources .slider-container .slider-value input[type="number"]::-webkit-inner-spin-button,
.oneb-monthly-resources .slider-container .slider-value input[type="number"]::-webkit-outer-spin-button {
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-appearance: inner-spin-button;
    opacity: 1;
}

/* Controls hover tint: use white overlay instead of black for dark bg */
html[data-theme="dark"] #oneb-createvm .slick-settings-row-controls label:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Slick carousel dots: use explicit colors since gray-scale tokens invert in dark mode */
html[data-theme="dark"] .orderpage .slick-dots li button {
    background: #64748b;
}
html[data-theme="dark"] .orderpage .slick-dots li:hover button,
html[data-theme="dark"] .orderpage .slick-dots li:focus button {
    background: #94a3b8;
}