/* Small Webcore-specific refinements layered after HostBill's wizard skin. */

@media (min-width:992px) {
    .orderpage-cart_2019wizard > .row {
        display:flex;
        align-items:flex-start!important;
    }

    .orderpage-cart_2019wizard > .row > .col-md-8,
    .orderpage-cart_2019wizard > .row > .col-md-4 {
        margin-top:0!important;
        padding-top:0!important;
    }

    .orderpage-cart_2019wizard > .row > .col-md-4 {
        align-self:flex-start!important;
    }

    .orderpage-cart_2019wizard #cartSummary,
    .orderpage-cart_2019wizard .order-summary-box,
    .orderpage-cart_2019wizard .cart-summary {
        margin-top:0!important;
        top:0!important;
        align-self:flex-start!important;
    }

    .orderpage-cart_2019wizard .col-md-8 > form > .card:first-child {
        margin-top:0!important;
    }
}

/*
 * Checkout colour pass.
 * Orange is the Webcore brand accent for card edges; blue remains reserved for
 * interactive state, sliders, totals and primary actions. Card headers use a
 * warm neutral so the two brand colours do not compete.
 */
.orderpage-cart_2019wizard .col-md-8 > form > .card {
    overflow:hidden;
    border-top:2px solid #ff3f00!important;
}

.orderpage-cart_2019wizard .col-md-8 > form > .card > h3:first-child {
    margin:-24px -24px 20px!important;
    padding:16px 22px!important;
    background:#f8f8f7;
    border-bottom:1px solid #e3e5e5!important;
    color:#2f4556!important;
}

.orderpage-cart_2019wizard #cartSummary {
    overflow:hidden;
    border-top:2px solid #ff3f00!important;
}

.orderpage-cart_2019wizard #cartSummary > h3:first-child {
    margin:-22px -22px 20px!important;
    padding:16px 20px!important;
    background:#f8f8f7;
    border-bottom:1px solid #e3e5e5!important;
    color:#2f4556!important;
}

/* Make the current price/total read as the key summary value. */
.orderpage-cart_2019wizard #cartSummary .summary-section .h1,
.orderpage-cart_2019wizard #cartSummary .summary-section .h1 span {
    color:#0b82df!important;
}

/* HostBill jQuery UI configurable-option sliders. */
.orderpage-cart_2019wizard .slider-group .ui-slider {
    height:6px!important;
    border:0!important;
    border-radius:999px!important;
    background:#dfe7ec!important;
}

.orderpage-cart_2019wizard .slider-group .ui-slider-range {
    border:0!important;
    border-radius:999px!important;
    background:#0b82df!important;
}

.orderpage-cart_2019wizard .slider-group .ui-slider-handle {
    width:18px!important;
    height:18px!important;
    top:-6px!important;
    border:3px solid #fff!important;
    border-radius:50%!important;
    background:#0b82df!important;
    box-shadow:0 0 0 1px rgba(11,130,223,.35),0 2px 5px rgba(29,65,91,.18)!important;
    cursor:pointer!important;
}

.orderpage-cart_2019wizard .slider-group .ui-slider-handle:focus {
    outline:none!important;
    box-shadow:0 0 0 3px rgba(11,130,223,.16),0 2px 5px rgba(29,65,91,.18)!important;
}

.orderpage-cart_2019wizard .slider-value-indicator {
    min-height:36px!important;
    border-color:#a9cfea!important;
    background:#f4f9fd!important;
    color:#0b6fbd!important;
    font-weight:600!important;
    text-align:center!important;
}

/* Give selected/active HostBill option controls a consistent Webcore state. */
.orderpage-cart_2019wizard .btn.active,
.orderpage-cart_2019wizard .btn-outline-primary.active,
.orderpage-cart_2019wizard .btn-outline-success.active {
    color:#fff!important;
    background:#0b82df!important;
    border-color:#0b82df!important;
}

.orderpage-cart_2019wizard input[type="radio"]:checked,
.orderpage-cart_2019wizard input[type="checkbox"]:checked {
    accent-color:#0b82df;
}

/* Slight lift for the checkout CTA without turning the card into a marketing panel. */
.orderpage-cart_2019wizard #cartSummary .cartSummaryContinue {
    box-shadow:0 3px 8px rgba(11,130,223,.16)!important;
}

.orderpage-cart_2019wizard #cartSummary .cartSummaryContinue:hover {
    box-shadow:0 4px 10px rgba(11,130,223,.22)!important;
}

/*
 * Compact trust cue below the primary action.  This is intentionally textual
 * rather than a row of oversized card logos; payment-brand marks belong on the
 * gateway-selection step where HostBill knows which methods are actually live.
 */
.orderpage-cart_2019wizard #cartSummary::after {
    content:"\2713  Secure checkout   \00B7   SSL encrypted";
    display:block;
    margin:16px -22px -22px;
    padding:11px 14px;
    border-top:1px solid #dfe9e5;
    background:#f5fbf8;
    color:#38806a;
    font-size:11px;
    font-weight:500;
    letter-spacing:.01em;
    text-align:center;
}

/* Keep any visible slider value box compact and aligned with the control. */
.orderpage-cart_2019wizard .cart-form input[type="range"] + input[type="number"],
.orderpage-cart_2019wizard .cart-form input[type="range"] + input[type="text"] {
    max-width:88px;
}

/*
 * Review & Checkout step.
 * Use the same visual language as Configure so the second step does not fall
 * back to the stock HostBill look.
 */
.orderpage-cart_2019wizard .cards-cart > .card,
.orderpage-cart_2019wizard > form > .card {
    overflow:hidden;
    border-top:2px solid #ff3f00!important;
}

.orderpage-cart_2019wizard .cards-cart > .card > .d-flex:first-child,
.orderpage-cart_2019wizard > form > .card > .d-flex:first-child {
    margin:-24px -24px 20px!important;
    padding:16px 22px!important;
    background:#f8f8f7;
    border-bottom:1px solid #e3e5e5!important;
}

.orderpage-cart_2019wizard .cards-cart > .card > .d-flex:first-child > h3,
.orderpage-cart_2019wizard > form > .card > .d-flex:first-child > h3 {
    margin:0!important;
    padding:0!important;
    border:0!important;
    color:#2f4556!important;
}

.orderpage-cart_2019wizard > form > .card > h3:first-child {
    margin:-24px -24px 20px!important;
    padding:16px 22px!important;
    background:#f8f8f7;
    border-bottom:1px solid #e3e5e5!important;
    color:#2f4556!important;
}

/* Order summary: soften table chrome and emphasise the payable total. */
.orderpage-cart_2019wizard .cards-cart .checker tbody + tbody tr:last-child td {
    padding-top:18px!important;
    border-top:1px solid #e4ebef!important;
}

.orderpage-cart_2019wizard .cards-cart .checker tbody + tbody tr:last-child td .h1 {
    color:#0b82df!important;
    font-size:29px!important;
}

.orderpage-cart_2019wizard .cards-cart .checker tr:hover td {
    background:#fbfdfe;
}

/* Client-type selector: make the two choices read as actual selectable states. */
.orderpage-cart_2019wizard .card-menu li {
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:34px;
    padding:6px 10px;
    border:1px solid #d8e1e6;
    border-radius:2px;
    background:#fff;
    color:#59656e;
}

.orderpage-cart_2019wizard .card-menu li.bgon2 {
    border-color:#a9cfea;
    background:#f4f9fd;
    color:#0b6fbd;
}

/* Terms card keeps its reassurance background while sharing the Webcore edge. */
.orderpage-cart_2019wizard > form > .card:has(.term-checkbox) {
    border-top-color:#ff3f00!important;
    background:#fbfefc;
}

.orderpage-cart_2019wizard > form > .card:has(.term-checkbox) label {
    margin-bottom:0!important;
}

/* Payment gateways as compact selectable cards rather than a loose row of radios. */
.orderpage-cart_2019wizard #cart-gateway-list .cart-gateway-list {
    justify-content:flex-start!important;
    gap:10px!important;
}

.orderpage-cart_2019wizard #cart-gateway-list .cart-gateway-list > span {
    position:relative;
    display:inline-flex!important;
    align-items:center;
    min-height:42px!important;
    margin:0!important;
    padding:9px 14px;
    border:1px solid #d8e1e6;
    border-radius:3px;
    background:#fff;
    color:#4e5b65;
    cursor:pointer;
    transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}

.orderpage-cart_2019wizard #cart-gateway-list .cart-gateway-list > span:hover {
    border-color:#a9cfea;
    background:#fbfdff;
}

.orderpage-cart_2019wizard #cart-gateway-list .cart-gateway-list > span:has(input:checked) {
    border-color:#0b82df;
    background:#f4f9fd;
    color:#0b6fbd;
    box-shadow:0 0 0 1px rgba(11,130,223,.08);
}

.orderpage-cart_2019wizard #cart-gateway-list .cart-gateway-list input[type="radio"] {
    margin:0 7px 0 0!important;
}

/* Give the gateway form a stronger visual relationship to the selected method. */
.orderpage-cart_2019wizard #gatewayform {
    margin-top:12px!important;
    border:1px solid #d7e2e9!important;
    border-top:2px solid #ff3f00!important;
    border-radius:3px!important;
    background:#fff!important;
    box-shadow:0 1px 2px rgba(0,0,0,.02)!important;
}

.orderpage-cart_2019wizard #gatewayform::after {
    content:"Secure payment   \00B7   SSL encrypted";
    display:block;
    padding:10px 18px;
    border-top:1px solid #e1ebe7;
    background:#f6fbf8;
    color:#38806a;
    font-size:11px;
    text-align:right;
}

/* HostBill validation notices in the gateway form. */
.orderpage-cart_2019wizard #gatewayform .alert-warning,
.orderpage-cart_2019wizard #gatewayform .warning,
.orderpage-cart_2019wizard #gatewayform .text-warning {
    color:#9a6412!important;
}

/* Bottom actions: Checkout is primary; clearing the cart should be secondary. */
.orderpage-cart_2019wizard > form > .d-flex.my-5 {
    gap:12px;
}

.orderpage-cart_2019wizard > form > .d-flex.my-5 input[name="clear"] {
    width:auto!important;
    min-width:150px;
    margin:0!important;
    padding-left:22px;
    padding-right:22px;
    border:1px solid #cfd8de!important;
    background:#fff!important;
    color:#65727c!important;
}

.orderpage-cart_2019wizard > form > .d-flex.my-5 input[name="clear"]:hover {
    border-color:#aebbc4!important;
    background:#f7f9fa!important;
    color:#3f4b54!important;
}

.orderpage-cart_2019wizard > form > .d-flex.my-5 input[name="submit"] {
    width:auto!important;
    min-width:240px;
    margin:0!important;
    box-shadow:0 3px 8px rgba(11,130,223,.16)!important;
}

@media (max-width:767.98px) {
    .orderpage-cart_2019wizard .col-md-8 > form > .card > h3:first-child {
        margin:-18px -18px 18px!important;
        padding:14px 18px!important;
    }

    .orderpage-cart_2019wizard #cartSummary::after {
        margin-left:-22px;
        margin-right:-22px;
    }

    .orderpage-cart_2019wizard .cards-cart > .card > .d-flex:first-child,
    .orderpage-cart_2019wizard > form > .card > .d-flex:first-child,
    .orderpage-cart_2019wizard > form > .card > h3:first-child {
        margin:-18px -18px 18px!important;
        padding:14px 18px!important;
    }

    .orderpage-cart_2019wizard #cart-gateway-list .cart-gateway-list > span {
        width:100%;
    }

    .orderpage-cart_2019wizard > form > .d-flex.my-5 {
        flex-direction:column!important;
        margin-top:24px!important;
    }

    .orderpage-cart_2019wizard > form > .d-flex.my-5 input[name="clear"],
    .orderpage-cart_2019wizard > form > .d-flex.my-5 input[name="submit"] {
        width:100%!important;
        min-width:0;
    }
}