.elementor-4574 .elementor-element.elementor-element-c7b01cc{--display:flex;}.elementor-widget-woocommerce-checkout-page .product-name .variation{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-4574 .elementor-element.elementor-element-35a8005{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}/* Start custom CSS for woocommerce-checkout-page, class: .elementor-element-35a8005 *//* --- FIX: HIDE EMPTY LEADING COLUMNS THAT CAUSE SHRINKING --- */

/* 1. Target and hide the empty row structure outside the main form */
.woocommerce > .row > .col-lg-7:empty,
.woocommerce > .row:first-child {
    display: none !important;
}

/* 2. Target and hide the empty inner Elementor column structures */
.e-checkout__column-start:empty,
.e-checkout__column-end:empty,
.e-checkout__container:empty {
    display: none !important;
}

/* --- FIX: FORCE BILLING & ORDER COLUMNS TO USE THE FULL SPACE --- */

/* 3. Force the main checkout row to take full 12 columns */
/* The billing form is inside the second instance of .col-lg-7 */
form.woocommerce-checkout .row > .col-lg-7 {
    width: 100% !important; /* Force the billing column to take up the full available width */
    max-width: 100% !important;
}

/* 4. Force the order review column (col-lg-5) to also use the full space */
form.woocommerce-checkout .row > .col-lg-5 {
    width: 100% !important; /* Forces the order review column to fill its parent space */
    max-width: 100% !important;
    clear: both !important; /* Ensures it drops below the billing form if space is tight */
}

/* 5. Clean up outer row padding/margins to ensure full stretch */
form.woocommerce-checkout .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* --- FIX: STRETCHING TEXT INSIDE ORDER REVIEW TABLE --- */

/* 1. Ensure the entire product name cell has space and wraps correctly if needed */
.woocommerce-checkout-review-order-table .product-name {
    /* Takes up 70% of the table's width */
    width: 80% !important; 
    /* Remove any internal max-width constraints */
    max-width: 100% !important; 
}

/* 2. Ensure the product total column is narrow and fixed */
.woocommerce-checkout-review-order-table .product-total {
    /* Takes up 30% of the table's width */
    width: 90% !important;
    /* Ensure the price is right-aligned for clean display */
    text-align: right !important;
}

/* 3. Force the table header cells to respect the new widths */
.woocommerce-checkout-review-order-table thead th:first-child {
    width: 40% !important; /* Product header */
}

.woocommerce-checkout-review-order-table thead th:last-child {
    width: 30% !important; /* Subtotal header */
    text-align: right !important;
}

/* 4. Ensure the total/subtotal footers also use the full space */
.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-checkout-review-order-table tfoot th {
    width: 30% !important; /* Evenly distribute footer cells if needed */
}


/* --- MOBILE FIX: ENSURE FULL WIDTH FOR ORDER DETAILS ON SMALL SCREENS --- */

/* Use a media query to target tablets and mobiles (screens < 992px) */
@media (max-width: 991px) {
    
    /* 1. Force the outer column (col-lg-5) to use 100% width on mobile */
    .woocommerce-checkout .col-lg-5 {
        width: 100% !important; 
        max-width: 100% !important;
        /* Remove any horizontal padding that might be shrinking content */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* 2. Target the main inner wrapper to remove padding and margins */
    .tp-woo-checkout-order-details,
    .order-review-wrapper,
    .e-checkout__column-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3. Apply standard padding to the order review content itself for internal spacing */
    .e-checkout__order_review,
    .e-coupon-box,
    .e-checkout__order_review-2 {
        width: 100% !important;
        max-width: 100% !important;
        /* Add back some padding for visual spacing from screen edges */
        padding-left: 15px !important; 
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
    
    /* 4. Re-apply the column stretch fix for the inner table on mobile */
    .woocommerce-checkout-review-order-table .product-name {
        width: 70% !important;
    }
    .woocommerce-checkout-review-order-table .product-total {
        width: 30% !important;
        text-align: right !important;
    }
    
    /* 5. Fix the wrapping in the Appointment Details section (dl.variation) */
    .woocommerce-checkout-review-order-table dl.variation {
        /* Allow the appointment details text to wrap but ensure it uses the full 70% width */
        width: 100% !important; 
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .woocommerce-checkout-review-order-table dl.variation dd {
        /* Force the inner text element to stretch as well */
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* --- MOBILE FIX: ENSURE FULL WIDTH FOR ORDER DETAILS AND CONTENT (< 992px) --- */
@media (max-width: 991px) {
    
    /* 1. Force the main checkout order column to use 100% width on mobile/tablet */
    .woocommerce-checkout .col-lg-5 {
        width: 100% !important; 
        max-width: 100% !important;
        /* Remove any horizontal padding from the column itself */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* 2. Target the main inner wrappers to ensure they are 100% */
    .tp-woo-checkout-order-details,
    .order-review-wrapper,
    .e-checkout__column-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3. Apply standard padding to the order review content containers for visual spacing */
    .e-checkout__order_review,
    .e-coupon-box,
    .e-checkout__order_review-2,
    #payment {
        width: 100% !important;
        max-width: 100% !important;
        /* Add internal padding so content doesn't stick to the edge of the screen */
        padding-left: 15px !important; 
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    /* --- FIX: ORDER REVIEW TABLE TEXT WRAPPING --- */
    
    /* 4. Fix the table column widths to give product name more space */
    .woocommerce-checkout-review-order-table .product-name {
        width: 100% !important; /* Product Name takes 70% */
        padding-left: 0 !important;
    }
    .woocommerce-checkout-review-order-table .product-total {
        width: 30% !important; /* Price takes 30% */
        text-align: right !important;
        padding-right: 0 !important;
    }
    
    /* 5. Fix the wrapping in the Appointment Details section (dl.variation) */
    .woocommerce-checkout-review-order-table dl.variation {
        /* Force the text block to use the available 70% width fully */
        width: 100% !important; 
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 6. Ensure inner paragraphs/strong tags within the table do not wrap */
    .woocommerce-checkout-review-order-table .product-name p,
    .woocommerce-checkout-review-order-table .product-name strong {
        white-space: normal !important; /* Allow normal text flow */
        word-break: break-word !important; /* Prevent long words from breaking layout */
    }

    /* --- FIX: PLACE ORDER BUTTON & TEXT STRETCH --- */
    
    /* 7. Ensure the Place Order button and its wrapper are full width */
    .form-row.place-order,
    .woocommerce-privacy-policy-text {
        width: 100% !important;
        max-width: 100% !important;
        /* Remove any excess margins/padding that would shrink content */
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* 8. Force the Place Order button itself to stretch to 100% */
    #place_order {
        width: 100% !important;
        max-width: 100% !important;
        /* This button already has w-100 class, but we force the override */
    }
    
    /* 9. Fix the Privacy Policy text block to ensure text stretches correctly */
    .woocommerce-privacy-policy-text p {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 15px !important; /* Add space above the text */
    }

    /* --- FIX: PAYMENT METHODS AND COUPON BOX --- */

    /* 10. Ensure the Stripe payment method box is full width */
    #payment .payment_box {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 11. Ensure the coupon box input is full width */
    .e-coupon-box .coupon-container-grid {
        display: block !important; /* Stack coupon elements vertically */
    }
    .e-coupon-box .coupon-container-grid .col {
        width: 100% !important;
    }
    .e-coupon-box .coupon-container-grid .input-text {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
}



 /* Target the label for the Stripe payment method */
label[for="payment_method_stripe"] {
    /* 1. Use a standard method to visually hide the original text 
          without fully collapsing its layout space. */
    color: transparent !important;
    font-size: 0 !important;
    
    /* Ensure the label behaves like an inline element (or inline-block)
       if your theme's default styling allows for it to be on one line.
       If your theme makes it a block element, you might need 'display: inline;' 
       or 'display: inline-block;'.
    */
    display: inline-block; 
    position: relative; 
}

/* 2. Insert the new text using a pseudo-element */
label[for="payment_method_stripe"]::after {
    /* The new text content */
    content: "Credit Card / Debit Card"; 
    
    /* 3. Reapply normal text styling for the pseudo-element */
    color: inherit; /* Inherit the color from the parent container */
    font-size: 1rem; /* Reset to a standard size */
    line-height: normal; /* Reset line height */
    
    /* Ensure the pseudo-element is displayed inline to prevent breaking lines */
    display: inline;
    
    /* Remove any unnecessary absolute positioning that could cause issues */
    position: static; 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c7b01cc *//* --- Targeting the Main Content Wrapper to Force 100% Width --- */

/* 1. Target the main content area wrapper */
.site-content .container,
.site-content .container-fluid,
.elementor-section-wrap > .container,
.woocommerce-checkout > .container {
    max-width: 100% !important; /* Force the width to the maximum available */
    width: 100% !important;
    padding-left: 0 !important;   /* Remove side padding from the main container */
    padding-right: 0 !important;
    margin-left: 0 !important;     /* Remove side margins */
    margin-right: 0 !important;
}

/* 2. Remove the margin that often centers the form on the page */
.woocommerce-checkout {
    margin: 0 auto !important;
    max-width: 100% !important;
}

/* 3. Re-apply a small inner padding to the columns for spacing */
.woocommerce-checkout .col-lg-7,
.woocommerce-checkout .col-lg-5 {
    padding-left: 15px !important; 
    padding-right: 15px !important; 
}/* End custom CSS */