/* ============================================================
   SUNNYBANK FLORIST — CHECKOUT STYLES (v9)
   ============================================================ */

/* --- 1. GLOBAL VARIABLES --- */
:root {
    --sb-green: #2D4034;
    /* Darker, higher contrast green */
    --sb-bg: #F9F7F2;
    --sb-tint: #f4f8f6;
    /* Light green background */
    --sb-border: #666;
    /* Darker border */
    --sb-text: #1a1a1a;
    /* Almost black */
    --sb-radius: 12px;
}

/* --- FORCE SINGLE-COLUMN CENTERED CHECKOUT --- */
/* Override the 2-column grid from components.css that shifts content left */
.sb-wc-checkout-wrapper {
    width: 100% !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    display: block !important;
}

.sb-wc-checkout-wrapper .woocommerce {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

.sb-wc-checkout-wrapper .woocommerce-checkout,
.sb-wc-checkout-wrapper form.checkout {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}

/* --- 2. HIDE DEFAULTS --- */
.woocommerce-checkout #customer_details,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout>#order_review,
.woocommerce-checkout>#order_review_heading {
    display: none !important;
}

/* Hide the specific 'Billing details' header inside the form */
#sb-billing-target h3 {
    display: none !important;
}

/* Hide actual shipping radio buttons */
#shipping_method {
    display: none !important;
}

#sb-review-target {
    display: flex !important;
    flex-direction: column !important;
}
#sb-review-target #order_review {
    display: contents !important;
}
#sb-checkout-summary-card {
    order: -10 !important;
}
.woocommerce-checkout-review-order-table,
.shop_table {
    order: 1 !important;
}
.woocommerce-terms-and-conditions-wrapper {
    order: 2 !important;
}
#wc-stripe-express-checkout-element,
#wc-stripe-payment-request-wrapper {
    order: 3 !important;
}
#wc-stripe-express-checkout-button-separator,
.wc-stripe-payment-request-button-separator {
    order: 4 !important;
}
#payment {
    order: 5 !important;
    display: flex !important;
    flex-direction: column !important;
}

#sb-floom-checkout {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 12px;
    box-sizing: border-box;
    width: 100%;
}

/* MOBILE: Force full width — override theme constraints */
@media (max-width: 767px) {

    /* Force the checkout container and ALL ancestors to be full width */
    #sb-floom-checkout,
    #sb-floom-checkout .sb-checkout-main,
    #sb-floom-checkout .sb-floom-card {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    /* Override theme's content wrappers that constrain width */
    .woocommerce-checkout,
    .woocommerce-checkout .entry-content,
    .woocommerce-checkout .site-content,
    .woocommerce-checkout .content-area,
    .woocommerce-checkout .container,
    .woocommerce-checkout .page-content,
    .woocommerce-checkout article,
    .woocommerce-checkout .ast-container,
    .woocommerce-checkout .elementor-section-wrap,
    .woocommerce-checkout .wp-block-group,
    body.woocommerce-checkout .site-main {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* The cards need comfortable inner padding */
    .sb-floom-card {
        padding: 15px !important;
        border-radius: 8px !important;
    }

    /* WooCommerce form fields full width */
    #sb-floom-checkout .col-1,
    #sb-floom-checkout .col-2,
    #sb-floom-checkout #order_review {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }
}

@media (min-width: 768px) {
    #sb-floom-checkout {
        padding: 0;
    }
}



#sb-floom-checkout.sb-ready {
    opacity: 1;
}

/* --- 3. LAYOUT & STEPS --- */
.sb-floom-progress {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 40px;
    width: 100%;
    /* Spans full width of the flex container */
}

.sb-floom-progress::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 40px;
    right: 40px;
    height: 3px;
    background: #e0e0e0;
    z-index: 1;
}

.sb-floom-step-indicator {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 25%;
    opacity: 0.6;
    transition: 0.3s;
}

.sb-floom-step-indicator.sb-active,
.sb-floom-step-indicator.sb-complete {
    opacity: 1;
}

.sb-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #fff;
    border: 2px solid var(--sb-border);
    border-radius: 50%;
    margin: 0 auto 8px;
    font-weight: 700;
    color: #555;
    font-size: 14px;
}

.sb-floom-step-indicator.sb-active .sb-step-number {
    border-color: var(--sb-green);
    background: var(--sb-green);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(74, 102, 85, 0.2);
}

.sb-floom-step-indicator.sb-complete .sb-step-number {
    border-color: var(--sb-green);
    background: #fff;
    color: var(--sb-green);
}

.sb-step-label {
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

/* --- 4. CARDS --- */
.sb-floom-card {
    background: #fff;
    border: 2px solid #e5e5e5;
    border-radius: var(--sb-radius);
    padding: 20px;
    margin-bottom: 20px;
    display: none;
}

.sb-floom-card.sb-active {
    display: block;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sb-step-title {
    color: var(--sb-green);
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    margin-top: 0;
}

.sb-step-subtitle {
    font-size: 14px;
    color: #444;
    /* Darker from #666 */
    margin-bottom: 15px;
}

.sb-section-title {
    font-size: 18px;
    color: var(--sb-green);
    margin: 15px 0 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

/* --- 5. ACCESSIBLE INPUTS --- */
#sb-floom-checkout input[type='text'],
#sb-floom-checkout input[type='email'],
#sb-floom-checkout input[type='tel'],
#sb-floom-checkout textarea,
#sb-floom-checkout select,
.select2-selection {
    background: #fff !important;
    border: 2px solid #bbb !important;
    border-radius: 8px !important;
    height: 45px !important;
    padding: 8px 12px !important;
    font-size: 16px !important;
    color: #333 !important;
    width: 100%;
    box-sizing: border-box;
}

#sb-floom-checkout textarea {
    height: 100px !important;
    padding-top: 10px !important;
}

/* Hide country fields (UK-only store - prevents orphaned label warnings) */
#billing_country_field,
#shipping_country_field {
    display: none !important;
}

#sb-floom-checkout input:focus,
#sb-floom-checkout textarea:focus,
#sb-floom-checkout select:focus {
    border-color: var(--sb-green) !important;
    background: #fcfcfc !important;
    box-shadow: 0 0 0 3px rgba(74, 102, 85, 0.1) !important;
    outline: none;
}

#sb-floom-checkout label,
#sb-floom-checkout .sb-field-label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #444 !important;
    margin-bottom: 6px !important;
    display: block;
}

.sb-input-error {
    border-color: #d32f2f !important;
    background-color: #fff8f8 !important;
}

/* --- Google Places Autocomplete (New API) --- */
gmp-place-autocomplete {
    width: 100%;
    margin-bottom: 15px;
    display: block;
    --gmpac-color-surface: #f4f8f5;
    /* Light green background */
    --gmpac-color-on-surface: #333;
    --gmpac-color-outline: #4A6655;
    /* Dark green border */
    --gmpac-size-border-radius: 8px;
    font-family: inherit;
}

/* --- 6. DATE PICKER CENTERING --- */
#sb-date-target {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 30px;
}

#sb-date-target .form-row {
    width: 100%;
    max-width: 400px;
    /* Limits width so it doesn't stretch too far */
    margin: 0 auto;
    float: none;
}

/* --- 7. STEP 1: TILES --- */
.sb-radio-group {
    display: flex;
    gap: 20px;
}

.sb-radio-option {
    flex: 1;
    position: relative;
    cursor: pointer;
}

.sb-radio-option input {
    position: absolute;
    opacity: 0;
}

.sb-radio-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    border: 2px solid #bbb;
    border-radius: 12px;
    transition: 0.2s;
    background: #fff;
}

.sb-radio-emoji {
    font-size: 24px;
    margin-bottom: 8px;
}

.sb-radio-label {
    font-weight: 700;
    font-size: 16px;
    color: #333;
}

.sb-radio-option input:checked+.sb-radio-tile {
    border-color: var(--sb-green);
    background: var(--sb-tint);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* --- 8. CARD INTERFACE --- */
.sb-card-interface {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.sb-card-input-area,
.sb-card-visual {
    flex: 1;
    min-width: 300px;
}

.sb-card-preview-box {
    background: #fffef0;
    border: 1px solid #e8e4d0;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sb-card-text-preview {
    font-family: 'Caveat', cursive;
    font-size: 20px;
    color: #444;
    line-height: 1.4;
}

.sb-card-logo-hint {
    width: 100%;
    text-align: center;
    padding: 6px 0 2px;
    border-bottom: 1px solid rgba(28,77,68,0.12);
    margin-bottom: 4px;
}

.sb-card-logo-hint img {
    display: block;
    margin: 0 auto;
    height: 50px;
    width: auto;
}

.sb-presets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.sb-presets button {
    background: #f4f4f4;
    border: 1px solid #ccc;
    padding: 12px 10px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
    color: #555;
    text-align: left;
}

.sb-presets button:hover {
    background: var(--sb-green);
    color: #fff;
    border-color: var(--sb-green);
}

.sb-checkbox-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.sb-checkbox-label input {
    width: 18px !important;
    height: 18px !important;
    margin-right: 10px;
    accent-color: var(--sb-green);
}

/* --- 9. BUTTONS --- */
.sb-actions {
    margin-top: 25px;
    display: flex;
    gap: 15px;
}

.sb-btn-next {
    flex: 1;
    background: var(--sb-green);
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 50px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s;
}

.sb-btn-next:hover {
    background: #3a5646;
    transform: translateY(-2px);
}

.sb-btn-back {
    background: transparent;
    color: #666;
    border: 2px solid #ccc;
    padding: 12px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
}

.sb-btn-back:hover {
    border-color: #999;
    color: #333;
}

/* --- 10. PAYMENT STYLES --- */

/* --- 11. MODAL --- */
.sb-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.sb-modal-box {
    background: #fff;
    padding: 40px;
    border-radius: 16px;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    border: 5px solid var(--sb-green);
}

.sb-modal-title {
    font-size: 28px;
    color: var(--sb-green);
    font-weight: 800;
    margin-bottom: 15px;
}

.sb-modal-phone {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: #333;
    text-decoration: none;
    margin: 20px 0;
}

.sb-modal-close {
    background: #eee;
    border: none;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 8px;
}

/* --- 10. PAYMENT STYLES --- */

/* Payment method cards */
#payment .wc_payment_method {
    border: 2px solid #ddd !important;
    border-radius: 12px !important;
    padding: 18px !important;
    margin-bottom: 12px !important;
    background: #fff !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Selected payment method — subtle green border, no heavy tint */
#payment .wc_payment_method:has(input:checked) {
    border-color: var(--sb-green) !important;
    box-shadow: 0 0 0 3px rgba(45, 64, 52, 0.08) !important;
    background: #fff !important;
}

#payment label {
    font-size: 16px !important;
    font-weight: 700 !important;
}

/* Stripe elements are styled natively */

.wc-stripe_cc-container {
    background: #fff !important;
}

/* --- PLACE ORDER BUTTON --- */
#place_order {
    background-color: var(--sb-green) !important;
    color: white !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    padding: 18px !important;
    border-radius: 50px !important;
    width: 100% !important;
    margin-top: 20px !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(74, 102, 85, 0.3);
    transition: background-color 0.2s, transform 0.2s;
    cursor: pointer;
}

#place_order:hover {
    background-color: #3a5244 !important;
    transform: translateY(-1px);
}

/* --- TERMS & CONDITIONS --- */
.woocommerce-terms-and-conditions-wrapper {
    margin-top: 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
    display: block !important; /* Block layout keeps it full width and responsive on small viewports */
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    cursor: pointer !important;
    line-height: 1.5 !important;
}

.woocommerce-terms-and-conditions-wrapper .woocommerce-form__input-checkbox {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    accent-color: var(--sb-green) !important;
    cursor: pointer !important;
}

.woocommerce-terms-and-conditions-wrapper a {
    color: var(--sb-green) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

/* Error state when not checked */
.woocommerce-terms-and-conditions-wrapper.sb-terms-error {
    border-color: #d32f2f !important;
    background: #fff8f8 !important;
    animation: sbShake 0.4s ease;
}

@keyframes sbShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-6px);
    }

    40%,
    80% {
        transform: translateX(6px);
    }
}

/* Privacy policy text */
.woocommerce-privacy-policy-text {
    font-size: 13px !important;
    color: #888 !important;
    margin-bottom: 10px !important;
    line-height: 1.5 !important;
}

.woocommerce-privacy-policy-text a {
    color: var(--sb-green) !important;
}

/* GPay/Apple Pay — hide empty containers, show only when loaded */
.gpay-button-container,
#wc-stripe-applepay-container {
    margin-top: 15px;
    width: 100%;
}

/* Stripe payment request wrappers — no borders, full width, natural height */
#wc-stripe-payment-request-wrapper,
.wc-stripe-payment-request-wrapper,
.payment-request-button-wrapper {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100% !important;
    display: block !important;
}

/* Stripe separator — shown so GPay/Apple Pay context is clear */
#wc-stripe-payment-request-button-separator {
    display: block;
    text-align: center;
    margin: 12px 0;
    font-size: 13px;
    color: #888;
}

/* Style the GPay/Apple Pay button nicely when it appears */
.gpay-button-container {
    margin-top: 10px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

@media(max-width: 600px) {
    .sb-radio-group {
        flex-direction: column;
        gap: 10px;
    }

    .sb-radio-tile {
        flex-direction: row;
        align-items: center;
        padding: 15px 20px;
    }

    .sb-presets {
        grid-template-columns: 1fr;
    }
}

/* --- 12. FLATPICKR DATEPICKER REFINEMENTS --- */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
    color: rgba(57, 57, 57, 0.2) !important;
    background: transparent !important;
    border-color: transparent !important;
    cursor: default !important;
}

/* --- 13. ORDER SUMMARY STYLES --- */
.sb-summary-box {
    background: #fff;
    border-radius: 12px;
    border: 2px solid #eaeaea;
    padding: 25px;
    margin-bottom: 30px;
}

#sb-totals-target {
    margin-top: 15px;
    padding-top: 5px;
    transition: opacity 0.2s ease;
    min-height: 30px;
}

.sb-review-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    color: #333;
}

.sb-review-table td {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.sb-review-table tr:last-child td {
    border-bottom: none;
}

.sb-review-table td:first-child {
    font-weight: 700;
    color: var(--sb-green);
    width: 35%;
}

.sb-review-table td:last-child {
    font-weight: 500;
    text-align: right;
    line-height: 1.5;
}

/* Hide stray WooCommerce elements in sidebar summary */
.sb-summary-box img,
.sb-summary-box .avatar,
.sb-summary-box .gravatar {
    display: none !important;
}

/* Allow Stripe payment logos and icons to display naturally */

/* WooCommerce order review table (inside Step 4) */
#sb-review-target table.shop_table {
    width: 100%;
    border-collapse: collapse !important;
    margin-top: 20px;
    background: #fff;
    border-radius: 12px;
    border: 2px solid #eaeaea;
    overflow: hidden;
    margin-bottom: 0;
}

/* Rename the shipping header from "Shipment 1" — changes with service type */
#sb-review-target tr.shipping th {
    font-size: 0 !important;
    color: transparent !important;
}

#sb-review-target tr.shipping th::after {
    content: "Local Delivery";
    font-size: 14px;
    color: #444;
    font-weight: 600;
    display: block;
}

body.sb-collection-active #sb-review-target tr.shipping th::after {
    content: "Collection";
}

/* Make sure shipping PRICE still shows */
#sb-review-target tr.shipping td {
    font-size: 14px !important;
    color: #333 !important;
}

/* KILL ALL STUCK SPINNERS */
.blockUI.blockOverlay,
.blockUI.blockMsg,
.blockUI.blockElement,
#sb-floom-checkout .blockUI {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.processing::after,
.loading::after,
#sb-floom-checkout .processing::after,
#sb-floom-checkout .loading::after {
    display: none !important;
    content: none !important;
}

/* WooCommerce table cells */
#sb-review-target table.shop_table th,
#sb-review-target table.shop_table td {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    text-align: left;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

#sb-review-target table.shop_table th {
    font-weight: 700;
    color: var(--sb-green);
    background: #fafafa;
}

#sb-review-target table.shop_table tfoot th {
    background: #fff;
    font-weight: 700;
}

#sb-review-target table.shop_table .order-total th,
#sb-review-target table.shop_table .order-total td {
    font-size: 18px;
    font-weight: 800;
    color: var(--sb-green);
    border-bottom: none;
    background: var(--sb-tint);
}

@media(max-width: 600px) {
    .sb-review-table td {
        display: block;
        width: 100% !important;
        text-align: left !important;
        padding: 5px 0;
    }

    .sb-review-table td:last-child {
        text-align: left !important;
        padding-bottom: 15px;
    }
}

/* --- 14. STICKY SUMMARY & TRUST BADGES --- */
@media(min-width: 900px) {
    #sb-floom-checkout.sb-has-sticky {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        align-items: flex-start;
        max-width: 1200px;
        margin: 0 auto;
    }

    #sb-floom-checkout.sb-has-sticky .sb-checkout-main {
        flex: 1;
        min-width: 0;
    }

    #sb-floom-checkout.sb-has-sticky .sb-checkout-sidebar {
        width: 380px;
        position: sticky;
        top: 30px;
    }
}

.sb-trust-badges {
    margin-top: 30px;
    padding: 20px;
    background: #fdfdfd;
    border: 1px dashed #ccc;
    border-radius: 8px;
    text-align: center;
}

.sb-guarantee {
    font-size: 15px;
    font-weight: 700;
    color: var(--sb-green);
    margin-bottom: 12px;
}

.sb-badges-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.sb-secure-lock {
    font-size: 13px;
    font-weight: 500;
    color: #555;
}

.sb-card-icons {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.sb-card-icons svg {
    height: 24px;
    width: auto;
}

/* Hide extra payment bits inside sidebar */
.sb-checkout-sidebar #payment ul.payment_methods,
.sb-checkout-sidebar #payment div.payment_box,
.sb-checkout-sidebar #payment .woocommerce-terms-and-conditions-wrapper,
.sb-checkout-sidebar #payment .woocommerce-privacy-policy-text {
    display: none !important;
}

.sb-checkout-sidebar #payment {
    background: transparent !important;
    padding: 0 !important;
}

/* Modern Checkmarks on progress bar */
.sb-floom-step-indicator.sb-complete .sb-step-number {
    background: var(--sb-green) !important;
    color: transparent !important;
    border-color: var(--sb-green) !important;
}

.sb-floom-step-indicator.sb-complete .sb-step-number::after {
    content: '✓';
    color: #fff;
    font-size: 16px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* ================================================================
   PAYMENT SECTION — FULL WIDTH OVERRIDES
   Ensure Stripe, terms, and #payment never get constrained
   by theme wrappers, entry-content blocks, or parent flex containers
   ================================================================ */

/* Force the review target and order review to fill their container */
#sb-review-target,
#order_review,
#order_review form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Payment section full width */
#payment,
#payment ul.payment_methods,
#payment .payment_box,
#payment .wc_payment_method,
#payment .woocommerce-terms-and-conditions-wrapper,
#payment .woocommerce-privacy-policy-text {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
}

/* Stripe iframe wrapper — never constrain width or height */
.wc-stripe-elements-field,
#wc-stripe-card-element,
.StripeElement {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Twenty Twenty-Five theme: entry-content and block wrappers can impose narrow widths */
.wp-block-group,
.entry-content,
.wp-site-blocks,
.woocommerce-page .entry-content,
.woocommerce .wc_payment_methods {
    max-width: none !important;
    width: 100% !important;
}

/* Mobile: ensure no padding squeezes the payment form further */
@media (max-width: 767px) {
    #payment,
    #payment .payment_box,
    #payment ul.payment_methods,
    #payment .wc_payment_method,
    .woocommerce-terms-and-conditions-wrapper,
    #wc-stripe-card-element,
    .StripeElement,
    .wc-stripe-elements-field {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
}

/* --- 13a. DYNAMIC ORDER SUMMARY CARD --- */
#sb-checkout-summary-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    font-family: inherit;
    color: #333;
}

.sb-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    text-align: left;
}

.sb-summary-col-left {
    font-size: 0.9rem;
    line-height: 1.6;
    padding-right: 12px;
}

.sb-summary-col-right {
    font-size: 0.9rem;
    line-height: 1.6;
    border-left: 1px solid #eee;
    padding-left: 24px;
}

/* Mobile responsive styling for summary card */
@media (max-width: 767px) {
    #sb-checkout-summary-card {
        padding: 20px;
    }
    .sb-summary-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .sb-summary-col-left {
        padding-right: 0;
    }
    .sb-summary-col-right {
        border-left: none;
        border-top: 1px solid #eee;
        padding-left: 0;
        padding-top: 20px;
    }
}