.elementor-32733 .elementor-element.elementor-element-0a03300{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-32733 .elementor-element.elementor-element-0a03300.e-con{--align-self:center;}.elementor-32733 .elementor-element.elementor-element-3ad5171{--display:flex;}@media(min-width:768px){.elementor-32733 .elementor-element.elementor-element-0a03300{--content-width:1400px;}}/* Start custom CSS for shortcode, class: .elementor-element-099257b *//* =========================================================
 * MISTER COFFEE — CLASSIC WOOCOMMERCE CHECKOUT STYLING
 * (Compatible with Site Settings, Additional CSS & Elementor)
 * ======================================================= */

/* Outer Page & Container */
html body.woocommerce-checkout,
html body.woocommerce-checkout #main {
    background-color: #f7f7f8 !important;
}

html body.woocommerce-checkout .woocommerce,
html body.woocommerce-checkout #main .entry-content,
html body.woocommerce-checkout .elementor-shortcode,
html body.woocommerce-checkout .elementor-widget-shortcode {
    width: 100% !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 24px 20px 56px !important;
    box-sizing: border-box !important;
}

/* 1. Coupon Notice Box & Toggle */
html body.woocommerce-checkout .woocommerce-info,
html body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
    border-left: 5px solid #80142b !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.03) !important;
}

/* Hide broken icon square overlapping "Have a coupon?" */
html body.woocommerce-checkout .woocommerce-info::before {
    display: none !important;
}

html body.woocommerce-checkout .woocommerce-info a,
html body.woocommerce-checkout .woocommerce-info a.showcoupon {
    color: #80142b !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    margin-left: auto !important;
}

/* Coupon Form */
html body.woocommerce-checkout form.checkout_coupon,
html body.woocommerce-checkout form.woocommerce-form-coupon {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 20px 24px !important;
    margin-bottom: 28px !important;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.03) !important;
}

html body.woocommerce-checkout form.checkout_coupon p.form-row-first {
    width: 65% !important;
    float: left !important;
    margin: 0 !important;
}

html body.woocommerce-checkout form.checkout_coupon p.form-row-last {
    width: 32% !important;
    float: right !important;
    margin: 0 !important;
}

html body.woocommerce-checkout form.checkout_coupon input.input-text {
    height: 42px !important;
    padding: 0 14px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
}

html body.woocommerce-checkout form.checkout_coupon .button {
    height: 42px !important;
    background-color: #111827 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
}

/* 2. Modern 2-Column Layout (Left 55% Float Left, Right 40% Float Right) */
@media (min-width: 992px) {
    html body.woocommerce-checkout form.checkout,
    html body.woocommerce-checkout form.woocommerce-checkout {
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }

    html body.woocommerce-checkout form.checkout::after,
    html body.woocommerce-checkout form.woocommerce-checkout::after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }

    /* Left column: Customer Information (Billing & Shipping Details) */
    html body.woocommerce-checkout #customer_details,
    html body.woocommerce-checkout .col2-set#customer_details {
        width: 55% !important;
        max-width: 55% !important;
        float: left !important;
        margin-right: 5% !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
    }

    /* Right column: Heading "Your order" */
    html body.woocommerce-checkout #order_review_heading {
        width: 40% !important;
        max-width: 40% !important;
        float: right !important;
        clear: right !important;
        margin-top: 0 !important;
        margin-bottom: 16px !important;
        box-sizing: border-box !important;
    }

    /* Right column: Order Review Summary Card */
    html body.woocommerce-checkout #order_review,
    html body.woocommerce-checkout .woocommerce-checkout-review-order {
        width: 40% !important;
        max-width: 40% !important;
        float: right !important;
        clear: right !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

/* 3. Section Titles (Headers) */
html body.woocommerce-checkout h3,
html body.woocommerce-checkout #order_review_heading {
    font-family: inherit !important;
    color: #111827 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    border-bottom: 2px solid #eeeeee !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
}

/* 4. Billing & Shipping Containers */
html body.woocommerce-checkout #customer_details {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    padding: 24px 28px !important;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.035) !important;
    box-sizing: border-box !important;
}

html body.woocommerce-checkout #customer_details .col-1,
html body.woocommerce-checkout #customer_details .col-2 {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Form Input Fields & Labels */
html body.woocommerce-checkout label {
    display: block !important;
    margin-bottom: 6px !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

html body.woocommerce-checkout input.input-text,
html body.woocommerce-checkout select,
html body.woocommerce-checkout textarea,
html body.woocommerce-checkout .thwcfe-input-field,
html body.woocommerce-checkout .select2-container .select2-selection--single {
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 14px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 40px !important;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.035) !important;
    outline: none !important;
    box-sizing: border-box !important;
}

html body.woocommerce-checkout textarea,
html body.woocommerce-checkout textarea.thwcfe-input-field {
    min-height: 88px !important;
    padding-top: 10px !important;
    line-height: 1.45 !important;
}

html body.woocommerce-checkout input.input-text:focus,
html body.woocommerce-checkout textarea:focus,
html body.woocommerce-checkout select:focus,
html body.woocommerce-checkout .select2-container--open .select2-selection--single {
    border-color: #80142b !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(128, 20, 43, 0.1) !important;
}

/* 5. Order Review & Payment Section */
html body.woocommerce-checkout #order_review {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    padding: 24px 28px !important;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.035) !important;
    box-sizing: border-box !important;
}

html body.woocommerce-checkout #order_review table.shop_table {
    width: 100% !important;
    border: none !important;
    background-color: transparent !important;
    table-layout: auto !important;
}

html body.woocommerce-checkout #order_review table.shop_table th,
html body.woocommerce-checkout #order_review table.shop_table td {
    padding: 12px 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
    background-color: transparent !important;
    color: #111827 !important;
    word-break: normal !important;
}

html body.woocommerce-checkout #order_review table.shop_table tr.order-total th,
html body.woocommerce-checkout #order_review table.shop_table tr.order-total td,
html body.woocommerce-checkout #order_review table.shop_table tr.order-total .amount {
    color: #80142b !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    border-bottom: none !important;
}

/* Shipping & Payment Method Text Clean Wrap */
html body.woocommerce-checkout #order_review .woocommerce-shipping-methods li label,
html body.woocommerce-checkout #payment ul.payment_methods li label {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    line-height: 1.4 !important;
    font-size: 13.5px !important;
    word-break: normal !important;
}

/* Payment Methods */
html body.woocommerce-checkout #payment {
    background-color: transparent !important;
    border: none !important;
    padding: 10px 0 0 0 !important;
}

html body.woocommerce-checkout #payment ul.payment_methods {
    border: none !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
}

html body.woocommerce-checkout #payment ul.payment_methods li {
    padding: 12px 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    background-color: #ffffff !important;
    margin-bottom: 10px !important;
}

html body.woocommerce-checkout #payment ul.payment_methods li input.input-radio {
    accent-color: #80142b !important;
}

/* 6. Place Order Button */
html body.woocommerce-checkout #place_order {
    background-color: #80142b !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    border-radius: 24px !important;
    padding: 14px 30px !important;
    width: 100% !important;
    border: none !important;
    box-shadow: 0 8px 18px rgba(128, 20, 43, 0.22) !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

html body.woocommerce-checkout #place_order:hover {
    background-color: #5f0f20 !important;
}/* End custom CSS */