/*****************************************************************
* WOOCOMMERCE CHECKOUT BLOCK-STYLE MODERN LAYOUT
*****************************************************************/

/* 1. Base Layout Setup */
/* 1. Reset the layout to force side-by-side behavior */

/* Override default woocommerce theme colors */
:root {
    --wc-green: #4FBF9F !important;
}

/* The parent theme sets overflow-x: hidden on both html and body, causing them
   to act as scroll containers which breaks position: sticky on descendants.
   We need to override both, scoped to the checkout page.
   html:has() targets the html element only when body has the WC checkout class. */
html:has(body.woocommerce-checkout),
body.woocommerce-checkout {
    overflow-x: clip;
}

/* The parent theme's grid.css sets overflow: hidden on #primary, which creates
   a scroll container that prevents position: sticky from working on any descendant.
   Override to visible on the checkout page only. */
body.woocommerce-checkout #primary {
    overflow: visible;
}


/* Target the parent that wraps both the FORM and the REVIEW */

* {
    box-sizing: border-box;
}

.post-592 {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 40px !important;
}

/* Hide the post edit link on the checkout form */
.post-592 .post-edit-link {
    display: none;
}

.post-592 .woocommerce {
    width: 100%;
    max-width: 1350px;
}

form.woocommerce-checkout {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px 0;
}

form.woocommerce-checkout div.dcg-form-wrapper {
    width: 100%;
    display: flex;
    flex-flow: row;
    padding: 20px 0;
    gap: 20px;
    align-items: stretch;
}

/* Column 1: The Form (Contact info, Participants) */
form.woocommerce-checkout div.dcg-form-wrapper div.dcg-form-left {
    flex: 1 1 67%;
    display: flex;
    flex-direction: column;
    gap: 20px 0;
}

/* Hide the Contact Information header */
form.woocommerce-checkout div.dcg-form-wrapper div.dcg-form-left div.dcg-card-body .woocommerce-billing-fields h3 {
    display: none !important;
}

/* Column 2: The Order Summary (Should be on the right) */
form.woocommerce-checkout div.dcg-form-wrapper div.dcg-form-right {
    flex: 1 1 33%;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    align-self: flex-start; /* must not stretch — stretched flex items cannot move with sticky */
}

/* Gap is preserved when the column is detached to <body> by JS sticky */
.dcg-form-right.dcg-is-sticky {
    row-gap: 20px !important;
}

form.woocommerce-checkout ul.woocommerce-error {
    margin-bottom: 0 !important;
}

.dcg-coupon-wrapper {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}

.dcg-coupon-wrapper p {
    display: inline-flex;
    gap: 10px;
}

.dcg-coupon-wrapper p.form-row.form-row-first {
    flex: 1 0 80%;
    margin: -20 0 0 0 !important;
}

.dcg-coupon-wrapper p.form-row.form-row-last {
    flex: 1 1 10%;
    display: flex;
    margin: 0 !important;
    justify-content: flex-end;
}

.dcg-coupon-wrapper p.form-row.form-row-last .button {
    padding: 0 !important;
    position: absolute !important;
    height: 45px;
    width: 45px;
    align-self: center;
    justify-self: flex-end;
}

/* 2. Modern Card Styling (Mimicking Blocks) */
.dcg-form-card {
    background: var(--wdtAccentTxtColor,#FFFFFF) !important;
    padding: 0px !important;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14);
}

#customer_details,
#order_review,
#payment,
.woocommerce-checkout-order-review-wrap {
    float: none !important;
    border: none !important;
    margin: 0 !important;
}

.dcg-form-card .dcg-card-header {
    width: 100%;
    margin: 0;
    padding: 12px 20px;
    color: var(--wdtAccentTxtColor,#FFFFFF) !important;
    font-weight: bold;
    font-size: 16px;
    min-height: 50px;
}

.dcg-form-card .dcg-card-header * {
    margin: 0 !important;
    color: var(--wdt-elementor-color-text, #101826) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border: none !important;
    text-transform: none !important;
}

.dcg-form-card .dcg-card-header-primary {
    background-color: #3E7C85;
    min-height: 50px;
    padding: 12px 20px;
}

.dcg-form-card .dcg-card-header-primary * {
    color: var(--wdtAccentTxtColor,#FFFFFF) !important;
}

.dcg-form-card .dcg-card-header-primary .dcg-customer-dot {
    text-align: center;
}

.dcg-form-card .dcg-card-body {
    padding: 5px 20px 20px;
    display: flex;
    flex-direction: column;
}

.dcg-form-card .dcg-card-body-primary {
    padding: 12px 20px 0;
}

.dcg-form-card .dcg-card-header-secondary {
    padding: 10px;
    border-radius: 4px 4px 0 0;
    border: 1px solid #b2bcca;
}

.dcg-form-card .dcg-card-header-secondary * {
    margin: auto !important;
}

.dcg-form-card .dcg-card-body-secondary {
    padding: 0 10px 10px;
}

.dcg-form-card .dcg-card-footer-primary {
    display: flex;
    justify-content: space-between;
    color: #2A2D33;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding: 0 20px 20px;
}

.dcg-form-card .dcg-card-footer-primary img {
    height: 15px;
    width: 15px;
    margin-right: 2px;
    margin-left: 5px;
}

/* 4. Form Field Styling */
.woocommerce-checkout div.dcg-form-wrapper .form-row,
.dcg-coupon-wrapper .form-row {
    margin: -20px 0 15px !important;
    position: relative;
    display: flex;
    flex-flow: column;
}

div.dcg-form-wrapper .form-row #shipping_address_1,
div.dcg-form-wrapper .form-row #billing_address_1 {
    margin-bottom: 10px !important;
}

.woocommerce-checkout .form-row label,
.dcg-coupon-wrapper .form-row label {
    position: relative;
    background-color: var(--wdtAccentTxtColor,#FFFFFF) !important;
    top: 20px;
    left: 10px;
    font-size: 12px !important;
    color: #000 !important;
    width: fit-content !important;
    z-index: 5;
    padding: 5px;
    font-weight: 500 !important;
    line-height: 20px !important;
    max-width: 75%;
}

.non_dot_wrapper .form-row label {
    width: 100% !important;
}
div.dcg-form-card div.dcg-card-body .form-row input.input-text,
div.dcg-form-card div.dcg-card-body .form-row select,
.dcg-coupon-wrapper .form-row input.input-text,
.select2-container.select2-container--default .select2-selection {
    background-color: var(--wdtAccentTxtColor,#FFFFFF) !important;
    border: 1px solid #8c939b !important;
    border-radius: 8px !important;
}

div.dcg-form-card div.dcg-card-body .form-row input.input-text,
div.dcg-form-card div.dcg-card-body .form-row select,
.dcg-coupon-wrapper .form-row input.input-text,
.select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 12px 16px !important;
    font-size: 15px !important;
    color: #2d3748 !important;
    transition: all 0.2s ease;
    min-height: 45px !important;
}

div.dcg-form-card p.form-row label.woocommerce-form__label-for-checkbox {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    padding: 0px;
    width: 100% !important;
    margin: 0;
    position: relative;
    left: 0;
    max-width: 100%;
}

div.dcg-form-card .form-row [type="checkbox"] {
    padding: 6px;
    margin-top: 0;
    display: inline-block;
}

div.dcg-form-card .form-row [type="checkbox"]:checked {
    background-color: var(--wc-green);
    border-color: var(--wc-green) !important;
}

div.dcg-form-card .form-row [type="checkbox"]:checked::before {
    border-color: var(--wdtAccentTxtColor,#FFFFFF) !important;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 10px;
}

div.dcg-form-card div.dcg-card-body .form-row input.input-text.invalid {
    border: 1px solid var(--wc-red) !important;
}

/* Address validation error state.
   Specificity (0,5,4) beats the base input rule (0,4,3) above, ensuring
   the red border shows even when both rules carry !important. */
div.dcg-form-card div.dcg-card-body .form-row.woocommerce-invalid input.input-text,
div.dcg-form-card div.dcg-card-body .form-row.woocommerce-invalid .select2-container:not(.select2-container--open) .select2-selection {
    border-color: var(--wc-red) !important;
}

div.dcg-form-card div.dcg-card-body .form-row.woocommerce-validated input.input-text,
div.dcg-form-card div.dcg-card-body .form-row.woocommerce-validated .select2-container:not(.select2-container--open) .select2-selection {
    border-color: var(--e-global-color-primary) !important;
}

div.dcg-form-card div.dcg-card-body .form-row span.message,
div.dcg-form-card div.dcg-card-body .form-row.woocommerce-invalid span.message {
    color: var(--wc-red);
    font-size: 10px;
    position: absolute;
    top: 80px;
    left: 17px
}

div.dcg-form-card div.dcg-card-body p#billing_address_1_field span.message,
div.dcg-form-card div.dcg-card-body p#physical_address_1_field span.message {
    top: 130px;
}

div.dcg-form-card div.dcg-card-body .form-row.woocommerce-validated span.message {
    color: var(--e-global-color-primary);
    font-size: 10px;
    position: absolute;
}

span.dcg-checkout-needhelp {
    margin-left: auto;
    margin-top: auto;
}

span.dcg-checkout-needhelp a,
span.dcg-checkout-needhelp a:hover,
span.dcg-checkout-needhelp a:visited,
span.dcg-checkout-needhelp a:active,
span.dcg-checkout-needhelp a:focus {
    text-decoration: none;
    color: #2A2D33;
}

.woocommerce-checkout div.dcg-form-wrapper p.dcg-ucr-classification-heading.form-row {
    flex-flow: row;
    color: #000;
    font-size: 12px;
    font-weight: 500;
    padding-top: 25px;
    margin-bottom: 0 !important;
}

div.dcg-ucr-fleet-warning {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

div.dcg-ucr-fleet-warning p.dcg-ucr-fleet-warning-text {
    font-size: 14px;
    color: #555;
}

div.dcg-ucr-fleet-warning button.dcg-ucr-update-fleet-btn {
    margin: 0;
    padding: 10px;
    flex: 0 0 190px;
    font-size: 14px;
}

div.dcg-card-footer-secondary {
    color: #000;
    font-size: 14px;
    font-weight: 400;
    padding: 10px 20px;
}

div.dcg-card-body div.dcg-card-two-column {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 10px 0;
}

div.dcg-card-body div.dcg-card-two-column div.dcg-card-col-left {
    flex: 0 1 45%;
    display: flex;
    flex-flow: column;
}

div.dcg-card-body div.dcg-card-two-column div.dcg-card-col-right {
    flex: 1 1 45%;
    display: flex;
    flex-flow: column;
}

div.dcg-card-col-left strong.dcg-due-date-text {
    color: var(--wdt-elementor-color-text, #101826) !important;
    font-size: 16px;
    font-weight: 400px;
}

div.dcg-card-col-left p.dcg-oos-warning-text {
    color: var(--wdt-elementor-color-text, #101826) !important;
    font-size: 14px;
    font-weight: 600px;
}



/* Select box dropdown panel */
.admin-bar .select2-container--open .select2-dropdown.select2-dropdown--below,
.admin-bar .select2-container--open .select2-dropdown.select2-dropdown--above {
    margin-top: 0 !important;
}

.woocommerce-checkout div.dcg-form-wrapper .form-row input.input-text:focus {
    border-color: #3182ce !important;
    background-color: var(--wdtAccentTxtColor,#FFFFFF) !important;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15) !important;
    outline: none !important;
}

/* 6. Order Table (Right Sidebar) */
.shop_table.woocommerce-checkout-review-order-table {
    border: none !important;
}

#dcg_additional_fields_section {
    border-top: 1px solid #edf2f7;
}

.dcg_required {
    color: #ff0000;
}

.shop_table.woocommerce-checkout-review-order-table tr td,
.shop_table.woocommerce-checkout-review-order-table tr th {
    color: #000000;
}

/* Product Detail inside Table */
.checkout-review-order-details {
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: space-between;
    height: 100%;
}

.dcg-card-body p.dcg-item-total {
    margin: 0 0 10px;
    font-size: 12px;
    color: #000;
    font-weight: 400;
    line-height: 20px;
}

.dcg-card-body .cart_item {
    display: flex;
    flex-flow: row nowrap;
    gap: 15px;
}

.dcg-card-body .cart_item:not(:last-child) {
    margin-bottom: 10px;
}

.dcg-card-body .cart_item .product-image {
    flex: 0 0 80px;
    padding-top: 5px;
}

.dcg-card-body .cart_item .product-name {
    flex: 1 1 50%;
}

.dcg-card-body .checkout-review-order-title,
.dcg-card-body .checkout-review-order-year,
.dcg-card-body .product-quantity {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #000;
}

.dcg-card-body .product-quantity {
    color: #2A2D33;
}

.dcg-card-body .product-total * {
    color: #000;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
}

.dcg-card-body .cart-subtotal,
.dcg-card-body .cart-discount,
.dcg-card-body .fee,
.dcg-card-body .tax-rate,
.dcg-card-body .tax-total,
.dcg-card-body .order-total {
    color: #2A2D33 !important;
    font-size: 14px;
    font-weight: 400;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 5px 0;
}

.dcg-card-body .cart-subtotal .amount *,
.dcg-card-body .cart-discount .amount *,
.dcg-card-body .fee .amount *,
.dcg-card-body .tax-rate .amount *,
.dcg-card-body .tax-total .amount * {
    font-weight: 400;
}

div.dcg-card-body.shop_table hr {
    margin: 15px 0;
}

.dcg-card-body .order-total .order-total-label,
.dcg-card-body .order-total .amount *{
    color: #000;
    font-weight: 700;
    font-size: 16px;
}

.dcg-card-body .order-total {
    border: 0;
}

.woocommerce-checkout div.dcg-form-wrapper .form-row.dcg-checkbox-row {
    margin-top: -5px !important;
}

.dcg-carrier-type-option-wrapper {
    color: #000;
    font-size: 14px;
    font-weight: 500;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.dcg-application-type-wrapper {
    padding: 10px 15px 0;
}

.dcg-checkbox-text {
    color: #2A2D33;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-top: -6px;
}

.dcg-carrier-type-checkbox-text {
    color: #4F4F4F;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

div.dcg-ucr-classifications {
    display: flex;
    flex-flow: column;
    gap: 10px;
    justify-content: space-between;
    height: 100%;
    padding-bottom: 20px;
}

.dcg-checkbox-text a,
.dcg-checkbox-text a:hover,
.dcg-checkbox-text a:visited,
.dcg-checkbox-text a:active,
.dcg-checkbox-text a:focus {
    color: #1660CF;
}

/* 7. Payment Box Styling */
#payment {
    background: transparent !important;
    border: none !important;
    margin-top: 0 !important;
}

#payment ul.payment_methods {
    border-bottom: 1px solid #edf2f7 !important;
    padding: 0 0 20px 0 !important;
}

div#payment .place-order {
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    font-size: 12px;
}

/* 8. The Place Order Button (The Big Black Button) */
#place_order {
    width: 100% !important;
    padding: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: transform 0.1s ease, opacity 0.2s !important;
    margin-top: 20px;
    box-shadow: 0 4px 4px 0 rgba(14, 53, 191, 0.25);
}

 .woocommerce .dcg-card-body #payment div.form-row.place-order > #place_order,
 .woocommerce-checkout .dcg-card-body #payment div.form-row.place-order > #place_order {
    float: none;
}

#place_order:hover {
    opacity: 0.9 !important;
}

#place_order:active {
    transform: scale(0.98);
}


ul.payment_methods {
    display: none;
}

.dcg-form-card .dcg-payment-solution {
    color: #000;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    padding-top: 20px;
    margin: 0;
}

.dcg-form-card .dcg-payment-solution img {
    display: inline-block;
    width: 115px;
}

.dcg-form-card .dcg-payment-solution img#dcg-authnet-logo {
    width: 115px;
}

.dcg-form-card .dcg-payment-solution img#dcg-lock-icon {
    width: 16px;
    margin-bottom: 4px;
}

.woocommerce .woocommerce-checkout-review-order {
    float: none !important;
}

/* 9. Override browser autofill color */
div.dcg-card-body input:-webkit-autofill,
div.dcg-card-body input:-webkit-autofill:hover, 
div.dcg-card-body input:-webkit-autofill:focus, 
div.dcg-card-body input:-webkit-autofill:active,
div.dcg-card-body input:-internal-autofill-selected,
div.dcg-card-body input:-internal-autofill-selected:focus,
div.dcg-card-body input:-internal-autofill-selected:active{
    box-shadow: 0 0 0 30px white inset !important;
    background-color: white !important;
}

/* ── Confirmation gate ───────────────────────────────────────────────────── */

form.dcg-checkout-form.dcg-awaiting-confirmation {
    display: none;
}

#dcg-confirmation-gate {
    margin: 10%;
}

#dcg-confirmation-gate .dcg-confirmation-message {
    margin-bottom: 1em;
    color: #000;
    padding: 20px;
}

#dcg-confirmation-gate .dcg-confirmation-message:last-child {
    margin-bottom: 0;
}

.dcg-confirmation-actions {
    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: flex-end;
}

.dcg-confirmation-actions .dcg-confirmation-cancel {
    background: transparent;
    color: var(--wc-green);
    border: 1px solid var(--wc-green);
}

/* Inline "This field is required" message shown under an empty required field. */
.dcg-required-msg {
    display: block;
    color: var(--wc-red, #cf2e2e) !important;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 5px;
}

/* CyberSource / Unified Checkout drives payment via its own widget buttons, so
 * the WooCommerce "Pay" button is not needed. */
.woocommerce-checkout #place_order {
    display: none !important;
}

/* Loader shown over the payment area until the Unified Checkout widget renders. */
.dcg-pay-loading {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #ffffff;
    color: #6b7680;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
}

.dcg-pay-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(62, 124, 133, 0.3);
    border-top-color: #3E7C85;
    border-radius: 50%;
    animation: dcg-account-spin 0.7s linear infinite;
    flex: 0 0 auto;
}

/* Payment gate — instead of a covering overlay, we disable the payment box and
 * show a warning until the required fields + terms are complete. */
.dcg-pay-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff8e6;
    border: 1px solid #f4cf6a;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 18px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: #8a6d00;
}
.dcg-pay-warning-icon { font-size: 16px; line-height: 1.3; flex-shrink: 0; }

/* Disabled payment box: not interactive + visibly dimmed. */
.dcg-payment-disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(0.15);
    user-select: none;
}

/* ============================================================
 * 11. CHECKOUT STEP INDICATOR (Review & Pay -> Thank You)
 * ============================================================ */
.dcg-checkout-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 640px;
    margin: 15px auto 5px;
    padding: 0 20px;
}

.dcg-checkout-steps .dcg-step {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.dcg-checkout-steps .dcg-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 700;
    background: #d7dee2;
    color: #ffffff;
    flex: 0 0 34px;
}

.dcg-checkout-steps .dcg-step-label {
    font-size: 16px;
    font-weight: 500;
    color: #9aa5ad;
    white-space: nowrap;
}

.dcg-checkout-steps .dcg-step.is-active .dcg-step-num {
    background: #3E7C85; /* active = teal */
}

.dcg-checkout-steps .dcg-step.is-complete .dcg-step-num {
    background: #4FBF9F; /* complete = green */
}

.dcg-checkout-steps .dcg-step.is-active .dcg-step-label,
.dcg-checkout-steps .dcg-step.is-complete .dcg-step-label {
    color: #2A2D33;
}

.dcg-checkout-steps .dcg-step-line {
    flex: 1 1 auto;
    height: 2px;
    min-width: 40px;
    margin: 0 16px;
    background: #d7dee2;
}

.dcg-checkout-steps .dcg-step-line.is-complete {
    background: #4FBF9F;
}

/* ============================================================
 * 14. THANK-YOU PAGE CONFIRMATION
 * ============================================================ */
.dcg-ty-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 10px 20px 40px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.dcg-ty-card {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    padding: 34px 40px;
}

/* Order confirmation card */
.dcg-ty-confirm {
    text-align: center;
    padding-top: 40px;
}

.dcg-ty-badge {
    position: absolute;
    top: 20px;
    right: 22px;
    background: rgba(79, 191, 159, 0.15);
    color: #2f8f74;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
}

.dcg-ty-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(79, 191, 159, 0.15);
    color: #2f8f74;
    margin-bottom: 18px;
}

.dcg-ty-heading {
    margin: 0 0 10px !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    color: #1f2933 !important;
    line-height: 1.15 !important;
}

.dcg-ty-subtext {
    margin: 0 auto 6px !important;
    max-width: 640px;
    font-size: 17px;
    color: #5a6570;
}

.dcg-ty-meta {
    margin: 0 0 22px !important;
    font-size: 15px;
    color: #8a94a0;
}

.dcg-ty-meta strong {
    color: #3d4852;
}

.dcg-ty-invoice-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: 1px solid #3E7C85;
    border-radius: 8px;
    background: #ffffff;
    color: #3E7C85 !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.dcg-ty-invoice-btn:hover {
    background: #3E7C85;
    color: #ffffff !important;
}

/* Eyebrow headings on the secondary cards */
.dcg-ty-eyebrow {
    margin: 0 0 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7680 !important;
}

/* What happens next list */
.dcg-ty-next {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dcg-ty-next li {
    position: relative;
    padding-left: 24px;
    font-size: 16px;
    color: #3d4852;
    line-height: 1.5;
}

.dcg-ty-next li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4FBF9F;
}

.dcg-ty-next a {
    color: #3E7C85;
    text-decoration: none;
}

.dcg-ty-next a:hover {
    text-decoration: underline;
}

/* Cross-sell "Customers also buy" grid */
.dcg-ty-crosssell-sub {
    margin: -8px 0 20px !important;
    font-size: 15px;
    color: #6b7680;
}

.dcg-ty-upsell-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.dcg-ty-upsell-item {
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e9ee;
    border-radius: 12px;
    padding: 20px;
}

.dcg-ty-upsell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(62, 124, 133, 0.10);
    color: #3E7C85;
    margin-bottom: 14px;
}

.dcg-ty-upsell-title {
    margin: 0 0 6px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1f2933 !important;
    line-height: 1.3 !important;
}

.dcg-ty-upsell-desc {
    margin: 0 0 18px !important;
    font-size: 14px;
    color: #6b7680;
    line-height: 1.5;
    flex: 1 1 auto;
}

.dcg-ty-upsell-btn {
    display: block;
    text-align: center;
    padding: 11px 14px;
    border: 1px solid #3E7C85;
    border-radius: 8px;
    background: #ffffff;
    color: #3E7C85 !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    margin-top: auto;
    transition: background 0.15s ease, color 0.15s ease;
}

.dcg-ty-upsell-btn:hover {
    background: #3E7C85;
    color: #ffffff !important;
}

#billing_is_web_order_field {
    display: none;
}

@media (max-width: 600px) {
    .dcg-ty-card {
        padding: 26px 20px;
    }
    .dcg-ty-heading {
        font-size: 26px !important;
    }
    .dcg-ty-badge {
        position: static;
        display: inline-block;
        margin-bottom: 14px;
    }
    .dcg-ty-upsell-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
 * 12. YOUR ACCOUNT CARD (email / USDOT)
 * ============================================================ */
.dcg-account-card .dcg-account-body {
    align-items: center;
    gap: 18px;
}

.dcg-account-card .dcg-account-tabset {
    width: 100%;
}

.dcg-account-card .dcg-account-tablist {
    display: flex;
    gap: 6px;
    background: #EFF2F7;
    border-radius: 10px;
    padding: 6px;
}

.dcg-account-card .dcg-account-tab {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    text-align: left;
    cursor: pointer;
    padding: 14px 20px;
    border-radius: 8px;
    border: medium;
    transition: all 150ms cubic-bezier(0.2, 0, 0, 1);
    background: transparent;
    color: #6B707B;
    outline: transparent solid 1.5px;
    box-shadow: none;
    margin: 0;
}

.dcg-account-card .dcg-account-tab:hover:not(.dcg-account-tab--active){
    background: rgba(255,255,255,.7);
    color: #4A4E57;
    outline: 1.5px solid #C2CAD8;
}

.dcg-account-card .dcg-account-tab.dcg-account-tab--active {
    background: #fff;
    color: #101826;
    box-shadow: 0 1px 2px rgba(16, 24, 38, 0.06);
    outline: 1.5px solid #3E7C85 !important;
    outline-offset: 0 !important;
}

.dcg-account-card .dcg-account-tab .dcg-account-tab-label {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    padding: 0;
}

.dcg-account-card .dcg-account-tab .dcg-account-tab-subtext {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.85;
    margin: 0;
    padding: 0;
}

.dcg-account-card .dcg-account-tabpanel {
    padding: 0;
    margin: 0;
    color: #4A4E57;
    font-size: 15px;
    width: 100%;
}

.dcg-account-card .dcg-account-tabpanel .dcg-account-tabpanel-subtext {
    padding: 0;
    margin: 0;
}

.dcg-account-card .dcg-account-field {
    flex: 1 1 auto;
    min-width: 0;
}

.dcg-account-card .dcg-account-field .form-row {
    margin-bottom: 0 !important;
}

/* "Record not found" message under the email field. */
.dcg-account-notfound {
    color: var(--wc-red, #cf2e2e);
    font-weight: 600;
}

.dcg-account-card .dcg-account-hint {
    margin: 8px 0 0 !important;
    padding-left: 2px;
    font-size: 13px;
    color: #6b7680;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* The card-body flex rule outranks the plain [hidden] attribute, so force
   hidden views to actually hide. */
.dcg-account-card [hidden] {
    display: none !important;
}

/* Collapsed "account loaded" summary view */
.dcg-account-card .dcg-account-summary {
    flex-direction: row !important;
    align-items: center;
    gap: 16px;
}

.dcg-account-card .dcg-account-summary-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dcg-account-card .dcg-account-name {
    font-size: 16px;
    font-weight: 700;
    color: #1f2933;
    line-height: 1.3;
}

.dcg-account-card .dcg-account-meta {
    font-size: 13px;
    color: #6b7680;
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
    column-rule: 1px solid #ccc;
}

.dcg-account-card .dcg-account-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    background: rgba(79, 191, 159, 0.15);
    color: #2f8f74;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

.dcg-account-card .dcg-account-change,
.dcg-account-card .dcg-account-change:hover,
.dcg-account-card .dcg-account-change:focus,
.dcg-account-card .dcg-account-change:active {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    align-self: center;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
    color: #3E7C85 !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.dcg-account-card .dcg-account-change:hover {
    opacity: 0.85;
}

@media (max-width: 600px) {
    .dcg-account-card .dcg-account-summary {
        flex-wrap: wrap;
    }
    .dcg-account-card .dcg-account-summary-info {
        flex: 1 1 100%;
        order: 2;
    }

    .dcg-form-card .woocommerce-checkout #billing_phone_field {
        width: 100% !important;
    }

    .dcg-form-card .woocommerce-checkout #secondary_phone_number_field {
        width: 100% !important;
    }
}

.dcg-account-card.dcg-account-loading .dcg-account-hint {
    color: #3E7C85;
}

.dcg-account-card.dcg-account-loaded .dcg-account-hint {
    color: #2f8f74;
    font-weight: 600;
}

.dcg-account-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(62, 124, 133, 0.3);
    border-top-color: #3E7C85;
    border-radius: 50%;
    animation: dcg-account-spin 0.7s linear infinite;
    flex: 0 0 auto;
}

@keyframes dcg-account-spin {
    to { transform: rotate(360deg); }
}

@keyframes dcg-account-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* ============================================================
 * 13. ORDER SUMMARY ITEM ROWS (mockup refinement)
 * ============================================================ */
.dcg-card-body .cart_item {
    align-items: center;
    padding-bottom: 14px;
}

.dcg-card-body .cart_item:not(:last-child) {
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 14px !important;
}

.dcg-card-body .cart_item .product-image {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    padding: 0 !important;
    border-radius: 10px;
    background: rgba(62, 124, 133, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.dcg-card-body .cart_item .product-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 8px;
}

.dcg-card-body .checkout-review-order-details {
    gap: 4px;
    justify-content: center;
}

.dcg-card-body .checkout-review-order-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #1f2933 !important;
}

.dcg-card-body .product-quantity {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #6b7680 !important;
}

.dcg-card-body .cart_item .product-total {
    align-self: center;
}

.dcg-card-body .cart_item .product-total * {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

/* Emphasize the order total row a touch more (mockup) */
.dcg-card-body .order-total .order-total-label,
.dcg-card-body .order-total .amount * {
    font-size: 18px;
}

/* 10. Mobile Adjustments */
@media (max-width: 991px) {
    .woocommerce {
        padding: 0 !important;
    }

    form.woocommerce-checkout div.dcg-form-wrapper {
        flex-direction: column;
    }

    div.dcg-form-card div.dcg-card-header-primary {
        flex-flow: column;
    }

    div.dcg-card-body div.dcg-card-two-column {
        flex-flow: column;
    }

    .dcg-checkout-steps .dcg-step-label {
        font-size: 14px;
    }

    .dcg-checkout-steps .dcg-step-line {
        min-width: 24px;
        margin: 0 10px;
    }
}

@media (max-width: 550px) {
    .dcg-account-tablist {
        flex-direction: column;
    }
}

@media (max-width: 479px) {
    .dcg-checkout-steps {
        padding: 10px 0 0;
    }

    .dcg-checkout-steps .dcg-step-num {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        font-size: 13px;
    }

    .dcg-checkout-steps .dcg-step-label {
        font-size: 12px;
    }

    .dcg-checkout-steps .dcg-step {
        gap: 6px;
    }

    /* Keep the account icon + field side by side but tighten spacing */
    .dcg-account-card .dcg-account-body {
        gap: 12px;
    }
}

@media only screen and (max-width: 479px) {
  .woocommerce .woocommerce-checkout-order-review-wrap {
    text-align: left !important;
  }

  #dcg-confirmation-gate {
    margin: 0;
  }
}

@media only screen and (max-width: 380px) {
    .dcg-card-footer-primary {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .dcg-card-footer-primary span.dcg-checkout-needhelp {
        margin: auto;
    }
}

/* =========================================================================
   Checkout tweaks: lookup button, consistent field spacing, hide cart button.
   ========================================================================= */

/* "Lookup" button inline with the Email / USDOT field. */
.dcg-has-lookup .woocommerce-input-wrapper {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.dcg-has-lookup .woocommerce-input-wrapper > input {
    flex: 1 1 auto;
    min-width: 0;
}
.dcg-lookup-btn {
    flex: 0 0 auto;
    padding: 0 20px;
    border: 1px solid var(--wdt-elementor-color-primary, #3E7C85);
    background: var(--wdt-elementor-color-primary, #3E7C85);
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}
.dcg-lookup-btn:hover { opacity: 0.9; }
.dcg-lookup-btn:disabled { opacity: 0.5; cursor: default; }

.woocommerce-checkout .woocommerce-billing-fields .form-row:last-child {
    margin-bottom: 0 !important;
}

/* Phone + Alt Phone: lock side-by-side layout. ID selectors win over the
   parent theme's class-based breakpoint rules, so the pairing survives
   account-lookup state changes that can strip form-row-first/last. */
.woocommerce-checkout #billing_phone_field {
    width: calc(50% - 15px) !important;
    float: left !important;
    clear: none !important;
}
.woocommerce-checkout #secondary_phone_number_field {
    width: calc(50% - 15px) !important;
    float: right !important;
    clear: none !important;
}

/* Keep the header cart icon (with its count bubble) visible on the checkout
   page; only hide any duplicate mini-cart widget/dropdown. */
.woocommerce-checkout .elementor-widget-woocommerce-menu-cart,
.woocommerce-checkout .wdt-header-cart,
.woocommerce-checkout .header-cart {
    display: none !important;
}

/* #9: align the Your Account email field with the Billing Details fields.
   The decorative lock icon was indenting the input ~70px; drop it so the
   field's left edge lines up with the billing inputs. */
.dcg-account-body.dcg-account-view-input .dcg-account-field { width: 100%; }

/* Uniform field height (48px) across ALL checkout inputs/selects + the Lookup
   button, and uniform vertical spacing. */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="number"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row select,
.woocommerce-checkout #billing_email,
.woocommerce-checkout #dcg_contact_email {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    line-height: normal !important;
    box-sizing: border-box !important;
}
.woocommerce-checkout .form-row textarea {
    min-height: 96px !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout .payment_method_visa_acceptance_solutions_unified_checkout.payment_box {
    background-color: #fff !important;
}

/* Lookup button: same height as the field, top-aligned with the input. */
.dcg-has-lookup .woocommerce-input-wrapper { 
    flex-wrap: wrap;
    align-items: stretch;
}

.dcg-has-lookup .woocommerce-input-wrapper > input { 
    margin: 0 !important;
    flex-grow: 10;
    flex-basis: 300px;
}

.dcg-lookup-btn {
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 22px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-basis: 170px;
    flex-grow: 1;
}

.dcg-card-body .woocommerce-checkout #payment div.payment_box {
    padding: 0;
}