/* ==========================================================================
   Habit Checkout — CSS
   Tokens → Base → Components → Desktop grid → States → Reduced motion
   ========================================================================== */

/* ------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------ */
:root {
    --hc-green:          #1A3C2E;
    --hc-green-mid:      #22A861;
    --hc-green-light:    #E8F5EE;
    --hc-text:           #1A1A1A;
    --hc-text-secondary: #555555;
    --hc-border:         #E2E8E4;
    --hc-bg:             #F7F8F7;
    --hc-white:          #FFFFFF;
    --hc-error:          #D94F4F;
    --hc-success:        #22A861;
    --hc-radius:         10px;
    --hc-radius-sm:      6px;
    --hc-font:           -apple-system, "Inter", BlinkMacSystemFont, "Segoe UI", sans-serif;
    --hc-shadow:         0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05);
    --hc-shadow-md:      0 2px 8px rgba(0,0,0,.08), 0 8px 28px rgba(0,0,0,.07);
    --hc-transition:     140ms ease;
    --hc-col-gap:        48px;
    --hc-summary-width:  380px;
}

/* ------------------------------------------------------------------
   2. Base / reset
   ------------------------------------------------------------------ */
.habit-checkout-wrap *,
.habit-checkout-wrap *::before,
.habit-checkout-wrap *::after {
    box-sizing: border-box;
}

.habit-checkout-wrap {
    font-family: var(--hc-font);
    color: var(--hc-text);
    background: var(--hc-bg);
    padding: 0 0 64px;
}

/* ------------------------------------------------------------------
   3. Step indicator
   ------------------------------------------------------------------ */
.habit-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    padding: 28px 24px 24px;
    position: relative;
}

.habit-steps::before{
    content: "";
    position: absolute;
    background: var(--hc-border);
    height: 3px;
    width: 100%;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.habit-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--hc-text-secondary);
    transition: color var(--hc-transition);
    background-color: #fff;
    z-index: 2;
    padding: 0 20px 0 20px;
}
.woocommerce-form-coupon .form-row-first .input-text{
    border-radius: 50px !important;
}
.woocommerce-form-coupon .form-row-last .button{
    height: 44px;
    padding: 0 18px;
    background: var(--hc-green);
    color: var(--hc-white);
    border: none;
    border-radius: var(--hc-radius-sm);
    font-family: var(--hc-font);
    font-size: 14px;
    font-weight: 600;
}
.woocommerce-form-coupon .form-row-last .button:hover{
    background-color: #12281f;
    color: #fff;
}
.woocommerce-checkout #payment{
    background: #f6f5f8;
}
.woocommerce-checkout #payment div.payment_box{
    background: #f6f5f8;
}
.habit-step__num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--hc-border);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 600;
    background: var(--hc-white);
    transition: background var(--hc-transition), border-color var(--hc-transition), color var(--hc-transition);
    flex-shrink: 0;
}

.habit-step.is-active { color: var(--hc-text); }

.habit-step.is-active .habit-step__num,
.habit-step.is-complete .habit-step__num {
    background: var(--hc-green);
    border-color: var(--hc-green);
    color: var(--hc-white);
}

.habit-step.is-complete .habit-step__num::after {
    content: '';
    display: none;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--hc-white);
    border-bottom: 2px solid var(--hc-white);
    transform: rotate(-45deg) translateY(-1px);
}

.habit-step__line {
    flex: 1;
    height: 1px;
    background: var(--hc-border);
    margin: 0 12px;
    max-width: 80px;
    display: none;
}

.habit-step.is-active .habit-step__label { font-weight: 600; }

/* ------------------------------------------------------------------
   4. Page-level layout
      Mobile:  single stacked column (summary on top, form below)
      Desktop: form left | sticky summary right
   ------------------------------------------------------------------ */

/* The form itself becomes the grid container on desktop */
.habit-checkout-wrap form.checkout {
    display: block; /* mobile: normal flow */
}

.habit-col-main {
    /* no special layout on mobile — just stacks */
}

.habit-col-summary {
    display: none; /* hidden on mobile; JS moves .habit-summary here */
}

/* ------------------------------------------------------------------
   5. Order summary panel
   ------------------------------------------------------------------ */
.habit-summary {
    background: #f6f5f8;
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius);
    margin: 0 16px 16px;
    overflow: hidden;
    box-shadow: var(--hc-shadow);
}

.habit-summary__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--hc-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--hc-text);
}

.habit-summary__toggle:focus-visible {
    outline: 2px solid var(--hc-green-mid);
    outline-offset: -2px;
}

.habit-summary__toggle-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.habit-summary__chevron {
    width: 18px;
    height: 18px;
    transition: transform var(--hc-transition);
    color: var(--hc-text-secondary);
}

.habit-summary.is-open .habit-summary__chevron { transform: rotate(180deg); }
.habit-summary__toggle-price { font-weight: 700; }

.habit-summary__body {
    border-top: 1px solid var(--hc-border);
    padding: 0 16px 16px;
}

.habit-summary__body[hidden] { display: none; }

/* Items */
.habit-summary__items {
    list-style: none;
    margin: 0;
    padding: 16px 0 0;
}

.habit-summary__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--hc-border);
}

.habit-summary__item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.habit-summary__item-img {
    position: relative;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: var(--hc-radius-sm);
    /* overflow: hidden; */
    border: 1px solid var(--hc-border);
}

.habit-summary__item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.habit-summary__item-qty {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: var(--hc-green);
    color: var(--hc-white);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.habit-summary__item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.habit-summary__item-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

.habit-summary__item-freq {
    font-size: 12px;
    color: var(--hc-white);
    background: var(--hc-green);
    border-radius: 20px;
    padding: 2px 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
}

.habit-summary__item-meta {
    font-size: 12px;
    color: var(--hc-text-secondary);
    line-height: 1.4;
}

.habit-summary__item-trial {
    color: var(--hc-green-mid);
    font-weight: 500;
}

.habit-summary__item-price {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   6. Coupon
   ------------------------------------------------------------------ */
.habit-coupon {
    padding: 14px 0 4px;
    border-top: 1px solid var(--hc-border);
    margin-top: 4px;
}

.habit-coupon__row {
    display: flex;
    gap: 8px;
}

.habit-coupon__input {
    flex: 1;
    height: 44px;
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-sm);
    padding: 0 12px;
    font-family: var(--hc-font);
    font-size: 14px;
    color: var(--hc-text);
    background: var(--hc-white);
    transition: border-color var(--hc-transition), box-shadow var(--hc-transition);
}

.habit-coupon__input:focus {
    outline: none;
    border-color: var(--hc-green-mid);
    box-shadow: 0 0 0 3px rgba(34,168,97,.15);
}

.habit-coupon__btn {
    height: 44px;
    padding: 0 18px;
    background: var(--hc-green);
    color: var(--hc-white);
    border: none;
    border-radius: var(--hc-radius-sm);
    font-family: var(--hc-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--hc-transition), opacity var(--hc-transition);
    white-space: nowrap;
}

.habit-coupon__btn:hover    { background: #142e23; }
.habit-coupon__btn:disabled { opacity: .6; cursor: not-allowed; }

.habit-coupon__msg {
    margin: 6px 0 0;
    font-size: 13px;
    min-height: 1em;
}

.habit-coupon__msg.is-error   { color: var(--hc-error); }
.habit-coupon__msg.is-success { color: var(--hc-success); }

/* ------------------------------------------------------------------
   7. Totals
   ------------------------------------------------------------------ */
.habit-summary__totals {
    padding-top: 14px;
    border-top: 1px solid var(--hc-border);
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.habit-totals__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: var(--hc-text-secondary);
    gap: 8px;
}

.habit-totals__row--discount {
    color: var(--hc-success);
}

.habit-totals__row--discount svg {
    width: 8px;
    height: 8px;
    margin-right: 4px;
    vertical-align: middle;
}

.habit-totals__row--total {
    font-size: 16px;
    font-weight: 700;
    color: var(--hc-text);
    padding-top: 8px;
    border-top: 1px solid var(--hc-border);
    margin-top: 4px;
}

.habit-totals__currency {
    font-size: 12px;
    font-weight: 400;
    color: var(--hc-text-secondary);
    margin-right: 2px;
}

.habit-totals__row--recurring {
    color: var(--hc-text-secondary);
    font-size: 13px;
}

.habit-totals__recurring-icon { margin-right: 4px; font-style: normal; }
.habit-totals__shipping-note  { font-size: 12px; color: var(--hc-text-secondary); }

.habit-totals__freq {
    font-size: 11px;
    font-weight: 400;
    color: var(--hc-text-secondary);
    font-style: normal;
}

/* ------------------------------------------------------------------
   8. Checkout form fields
   ------------------------------------------------------------------ */
.habit-checkout-wrap .woocommerce-billing-fields,
.habit-checkout-wrap .woocommerce-shipping-fields,
.habit-checkout-wrap .woocommerce-additional-fields {
    background: #f6f5f8;
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius);
    padding: 20px 16px;
    margin: 0 16px 14px;
    box-shadow: var(--hc-shadow);
}

.habit-checkout-wrap .woocommerce-billing-fields h3,
.habit-checkout-wrap .woocommerce-shipping-fields h3 {
    font-family: var(--hc-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--hc-text);
    margin: 0 0 14px;
}

.habit-checkout-wrap .form-row { margin: 0 0 10px; }

.habit-checkout-wrap .form-row input[type="text"],
.habit-checkout-wrap .form-row input[type="email"],
.habit-checkout-wrap .form-row input[type="tel"],
.habit-checkout-wrap .form-row select {
    width: 100%;
    height: 48px;
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-sm);
    padding: 0 14px;
    font-family: var(--hc-font);
    font-size: 15px;
    color: var(--hc-text);
    background: var(--hc-white);
    transition: border-color var(--hc-transition), box-shadow var(--hc-transition);
    appearance: none;
    -webkit-appearance: none;
}

.habit-checkout-wrap .form-row input::placeholder { color: #9AA5A0; }

.habit-checkout-wrap .form-row input:focus,
.habit-checkout-wrap .form-row select:focus {
    outline: none;
    border-color: var(--hc-green-mid);
    box-shadow: 0 0 0 3px rgba(34,168,97,.15);
}

.habit-checkout-wrap .form-row input.habit-field-error,
.habit-checkout-wrap .form-row select.habit-field-error,
.habit-checkout-wrap .form-row.woocommerce-invalid input,
.habit-checkout-wrap .form-row.woocommerce-invalid select {
    border-color: var(--hc-error);
}

.habit-checkout-wrap .form-row input.habit-field-error:focus,
.habit-checkout-wrap .form-row select.habit-field-error:focus {
    box-shadow: 0 0 0 3px rgba(217,79,79,.15);
}

.habit-checkout-wrap .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--hc-text);
    cursor: pointer;
}

.habit-checkout-wrap .woocommerce-form__input-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--hc-green);
    cursor: pointer;
}

.habit-checkout-wrap h3#ship-to-different-address {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px;
}

/* ------------------------------------------------------------------
   9. Delivery notice
   ------------------------------------------------------------------ */
.habit-delivery-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--hc-green-light);
    border: 1px solid rgba(34,168,97,.25);
    border-radius: var(--hc-radius-sm);
    padding: 12px 14px;
    margin: 0 16px 14px;
    color: var(--hc-green);
}

.habit-delivery-notice__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.habit-delivery-notice p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--hc-text-secondary);
}

/* ------------------------------------------------------------------
   10. Continue button
   ------------------------------------------------------------------ */
.habit-continue-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 32px);
    margin: 0 16px 16px;
    height: 52px;
    background: var(--hc-green) !important;
    color: var(--hc-white) !important;
    border: none !important;
    border-radius: var(--hc-radius) !important;
    font-family: var(--hc-font) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background var(--hc-transition), transform var(--hc-transition);
}

.habit-continue-btn:hover  { background: #142e23 !important; }
.habit-continue-btn:active { transform: scale(.99); }

.habit-continue-arrow {
    font-style: normal;
    transition: transform var(--hc-transition);
}
.habit-continue-btn:hover .habit-continue-arrow { transform: translateX(3px); }

/* ------------------------------------------------------------------
   11. Payment section
   ------------------------------------------------------------------ */
.habit-checkout-wrap .woocommerce-checkout-payment {
    background: var(--hc-white);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius);
    margin: 0 16px 14px;
    padding: 20px 16px;
    box-shadow: var(--hc-shadow);
}

.habit-checkout-wrap .woocommerce-checkout-payment h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
}

.habit-checkout-wrap .payment_methods {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.habit-checkout-wrap .payment_methods li {
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-sm);
    padding: 12px 14px;
    transition: border-color var(--hc-transition), background var(--hc-transition);
}

.habit-checkout-wrap .payment_methods li:has(input:checked) {
    border-color: var(--hc-green-mid);
    background: var(--hc-green-light);
}

.habit-checkout-wrap .payment_methods label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

/* ------------------------------------------------------------------
   12. Place order button
   ------------------------------------------------------------------ */
.habit-checkout-wrap #place_order {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 32px);
    margin: 0 16px;
    height: 52px;
    background: var(--hc-green) !important;
    color: var(--hc-white) !important;
    border: none !important;
    border-radius: var(--hc-radius) !important;
    font-family: var(--hc-font) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background var(--hc-transition);
}

.habit-checkout-wrap #place_order:hover { background: #142e23 !important; }

/* ------------------------------------------------------------------
   13. Trust badges
   ------------------------------------------------------------------ */
.habit-trust-badges {
    list-style: none;
    margin: 14px 2px 0;
    padding: 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.habit-trust-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--hc-text-secondary);
}

.habit-trust-badge__icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hc-text-secondary);
}
.woocommerce-checkout #payment div.payment_box::before{
    border: 1em solid #f6f5f8;
    border-right-color: transparent;
    border-left-color: transparent;
    border-top-color: transparent;
}
.habit-trust-badge__icon svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------------
   14. Back link
   ------------------------------------------------------------------ */
.habit-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--hc-text-secondary);
    text-decoration: none;
    margin: 0 16px 10px;
    padding: 4px 0;
    transition: color var(--hc-transition);
}

.habit-back-link:hover { color: var(--hc-text); }

/* ------------------------------------------------------------------
   15. WooCommerce overrides
   ------------------------------------------------------------------ */
.habit-checkout-wrap table.shop_table { display: none !important; }

.habit-checkout-wrap .woocommerce-error,
.habit-checkout-wrap .woocommerce-message,
.habit-checkout-wrap .woocommerce-info {
    margin: 0 16px 12px !important;
    border-radius: var(--hc-radius-sm) !important;
}
.woocommerce-info {
    border-top-color: var(--hc-green);
}
.woocommerce-info::before {
    color: var(--hc-green);
}
.habit-checkout-wrap #order_review_heading { display: none; }


.checkout_coupon .form-row-first {
    width: 50%!important;
}

/* ------------------------------------------------------------------
   16. Desktop layout (≥960px)
       Left column: step indicator + form steps (scrollable)
       Right column: sticky order summary panel
   ------------------------------------------------------------------ */
@media ( max-width: 768px ) {
    :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button{
            margin: auto;
    }
    .habit-checkout-wrap{
        background: #fff;
    }
    .habit-checkout-wrap #place_order{
            margin: auto;
    }
}
button#place_order{
    padding: 10px 10px !important;
}
@media ( min-width: 960px ) {

    .habit-checkout-wrap {
        max-width: 1160px;
        margin-inline: auto;
        padding: 0 40px 80px;
        background: transparent;
    }

    /* Step indicator sits above the two-column grid, full width */
    .habit-steps {
        padding: 40px 0 32px;
        justify-content: center;
        max-width: calc(100% - var(--hc-summary-width) - var(--hc-col-gap));
        margin: auto;
    }

    /* The form becomes a two-column grid */
    .habit-checkout-wrap form.checkout {
        display: grid;
        grid-template-columns: 1fr var(--hc-summary-width);
        grid-template-rows: auto;
        column-gap: var(--hc-col-gap);
        align-items: start;
    }

    .habit-col-main {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .habit-col-summary {
        display: block;
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: 32px;
        /* Stays fixed while left column scrolls */
    }

    /* Summary inside right column: no outer margin, no toggle, always open */
    .habit-col-summary .habit-summary {
        margin: 0;
        border-radius: var(--hc-radius);
        box-shadow: var(--hc-shadow-md);
        overflow: visible; /* allow sticky child stacking */
    }

    /* Hide the mobile toggle on desktop — summary is always visible */
    .habit-col-summary .habit-summary__toggle {
        cursor: default;
        pointer-events: none;
        padding-bottom: 0;
    }

    .habit-col-summary .habit-summary__chevron { display: none; }

    .habit-col-summary .habit-summary__toggle-price { display: none; }

    .habit-col-summary .habit-summary__toggle-left {
        font-size: 16px;
        padding: 18px 20px 12px;
    }

    /* Body always visible */
    .habit-col-summary .habit-summary__body {
        padding: 0 20px 20px;
    }

    .habit-col-summary .habit-summary__body[hidden] {
        display: block !important; /* JS sets hidden; override for desktop */
    }

    /* Coupon and totals get a touch more breathing room */
    .habit-col-summary .habit-coupon { padding-top: 16px; }
    .habit-col-summary .habit-summary__totals { padding-top: 16px; }

    /* Breadcrumb-style step indicator on desktop: push steps above left col */
    .habit-checkout-wrap .habit-steps {
        grid-column: 1 / -1; /* span full width above grid */
        margin-bottom: 0;
    }

    /* Step connector line stretches a bit further on desktop */
    .habit-step__line { max-width: 60px; display: none; }

    /* Remove mobile side margins from field cards */
    .habit-col-main .woocommerce-billing-fields,
    .habit-col-main .woocommerce-shipping-fields,
    .habit-col-main .woocommerce-additional-fields,
    .habit-col-main .woocommerce-checkout-payment {
        margin-inline: 0;
        padding: 24px;
        box-shadow: var(--hc-shadow-md);
    }

    /* Section headings slightly larger on desktop */
    .habit-col-main .woocommerce-billing-fields h3,
    .habit-col-main .woocommerce-shipping-fields h3 {
        font-size: 16px;
        margin-bottom: 18px;
    }

    /* Two-up first/last name on desktop */
    .habit-col-main .form-row.form-row-first,
    .habit-col-main .form-row.form-row-last {
        display: inline-block;
        width: calc(50% - 6px);
    }

    .habit-col-main .form-row.form-row-first { margin-right: 12px; }

    /* Delivery notice */
    .habit-col-main .habit-delivery-notice {
        margin-inline: 0;
    }

    /* Woo notices */
    .habit-checkout-wrap .woocommerce-error,
    .habit-checkout-wrap .woocommerce-message,
    .habit-checkout-wrap .woocommerce-info {
        margin-inline: 0 !important;
    }

    /* Buttons fill their column with no extra margin */
    .habit-continue-btn {
        width: 100%;
        margin-inline: 0;
        height: 56px;
        font-size: 17px !important;
        border-radius: 12px !important;
    }

    .habit-checkout-wrap #place_order {
        width: 100%;
        margin-inline: 0;
        height: 56px;
        font-size: 17px !important;
        border-radius: 12px !important;
    }

    /* Trust badges align left under the button on desktop */
    .habit-trust-badges {
        /* margin-inline: 0; */
        justify-content: flex-start;
        gap: 24px;
        margin-top: 16px;
    }

    /* Back link */
    .habit-back-link {
        margin-inline: 0;
        margin-top: 10px;
        margin-bottom: 14px;
    }
}

/* ------------------------------------------------------------------
   17. Mid-range tablet (720–959px): centred single column
   ------------------------------------------------------------------ */
@media ( min-width: 720px ) and ( max-width: 959px ) {

    .habit-checkout-wrap {
        max-width: 560px;
        margin-inline: auto;
        padding-inline: 0;
    }

    .habit-summary,
    .habit-checkout-wrap .woocommerce-billing-fields,
    .habit-checkout-wrap .woocommerce-shipping-fields,
    .habit-checkout-wrap .woocommerce-checkout-payment,
    .habit-delivery-notice {
        margin-inline: 0;
    }

    .habit-continue-btn,
    .habit-checkout-wrap #place_order {
        width: 100%;
        margin-inline: 0;
    }

    .habit-trust-badges { margin-inline: 0; }
    .habit-back-link    { margin-inline: 0; }
}


/* ------------------------------------------------------------------
   19. WooCommerce Subscriptions — recurring totals table & notices
   WCS injects .woocommerce-checkout-payment .subscription_details
   and a recurring totals review table into #order_review.
   ------------------------------------------------------------------ */

/* Recurring totals review table that WCS appends before the payment box */
.habit-checkout-wrap .woocommerce-checkout-review-order-table,
.habit-checkout-wrap .shop_table.woocommerce-checkout-payment-intent-selection {
    display: table !important; /* override our shop_table:none for this specific table */
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0 16px 14px;
    width: calc(100% - 32px);
    background: var(--hc-white);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius);
    overflow: hidden;
}

.habit-checkout-wrap .woocommerce-checkout-review-order-table th,
.habit-checkout-wrap .woocommerce-checkout-review-order-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--hc-border);
    text-align: left;
    vertical-align: middle;
    font-family: var(--hc-font);
    color: var(--hc-text);
}

.habit-checkout-wrap .woocommerce-checkout-review-order-table th {
    font-weight: 600;
    font-size: 13px;
    color: var(--hc-text-secondary);
    background: var(--hc-bg);
}

.habit-checkout-wrap .woocommerce-checkout-review-order-table tfoot tr:last-child td,
.habit-checkout-wrap .woocommerce-checkout-review-order-table tfoot tr:last-child th {
    border-bottom: none;
    font-weight: 700;
    font-size: 15px;
}

.habit-checkout-wrap .woocommerce-checkout-review-order-table .recurring-total th {
    color: var(--hc-green);
}

/* WCS subscription details block inside payment methods */
.habit-checkout-wrap .subscription_details {
    font-size: 13px;
    color: var(--hc-text-secondary);
    margin-top: 6px;
    padding: 8px 12px;
    background: var(--hc-green-light);
    border-radius: var(--hc-radius-sm);
    border-left: 3px solid var(--hc-green-mid);
}

/* Free trial notice */
.habit-checkout-wrap .woocommerce-info.has-next-payment {
    background: var(--hc-green-light);
    border-color: var(--hc-green-mid);
    color: var(--hc-text);
    margin: 0 16px 12px !important;
    border-radius: var(--hc-radius-sm) !important;
    font-size: 13px;
}

/* Sign-up fee line in totals */
.habit-totals__freq {
    font-size: 12px;
    font-weight: 400;
    color: var(--hc-text-secondary);
    margin-left: 2px;
}

/* Account creation fields (WCS forces these for subscribers) */
.habit-checkout-wrap .woocommerce-account-fields {
    background: var(--hc-white);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius);
    padding: 20px 16px;
    margin: 0 16px 14px;
    box-shadow: var(--hc-shadow);
}

.habit-checkout-wrap .woocommerce-account-fields h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 14px;
}

.habit-checkout-wrap .woocommerce-account-fields .create-account {
    margin-top: 10px;
}

/* WCS payment method change form on renewals */
.habit-checkout-wrap .wcs-payment-method-change-message {
    font-size: 13px;
    color: var(--hc-text-secondary);
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--hc-green-light);
    border-radius: var(--hc-radius-sm);
}

@media ( min-width: 960px ) {
    .habit-checkout-wrap .woocommerce-checkout-review-order-table {
        margin-inline: 0;
        width: 100%;
    }

    .habit-checkout-wrap .woocommerce-info.has-next-payment {
        margin-inline: 0 !important;
    }

    .habit-checkout-wrap .woocommerce-account-fields {
        margin-inline: 0;
        padding: 24px;
        /* display: none; */
    }
}

/* ------------------------------------------------------------------
   18. Reduced motion
   ------------------------------------------------------------------ */
@media ( prefers-reduced-motion: reduce ) {
    .habit-checkout-wrap *,
    .habit-checkout-wrap *::before,
    .habit-checkout-wrap *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }
}
/* ── v1.0.1 fixes ─────────────────────────────────────────────────────
   The core review-order table now renders inside #order_review (it must
   exist in the DOM as a target for WooCommerce's fragment refresh), but
   the Habit summary panel replaces it visually — so hide it. */
.habit-checkout-wrap .woocommerce-checkout-review-order-table {
    display: none;
}

/* Place-order button price + lock icon (now rendered server-side via the
   woocommerce_order_button_html filter). */
.habit-btn-price {
    font-weight: 700;
}
#place_order .habit-btn-lock {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    flex-shrink: 0;
}