.column-wraper {
    position:relative;
}

.column-right {
    position:absolute !important;
    right:0;
}
    
    
/*
    Wocommerce Global Overwrites
*/
.woocommerce-checkout-review-order-table tbody {
    max-height: 600px;
    overflow: auto;
}

.woocommerce-info:focus-visible, 
.woocommerce-message:focus-visible, 
.woocommerce-noreviews:focus-visible,
.no-comments:focus-visible {
    outline:none;
}

.order-actions-button {
    margin:0 10px;
}

.woocommerce-page .hentry {
    margin:0 !important;
}

.woocommerce-checkout {
    margin: 0;
    padding: 0;
}

.woocommerce-shipping-fields {
    display:none;
}

.checkout-inline-error-message {
    color: #e2401c;
    font-size: 12px;
    margin: 0;
}

/* Centered with EQUAL air above and below: the theme's .site-header
   carries a 4.236em bottom margin that made the top gap ~2x the bottom
   one — on checkout the bar owns the whole seam symmetrically instead.
   (Horizontal centering is the theme's own text-align:center.) */
body.woocommerce-checkout .site-header {
    margin-bottom: 0;
}
.pizzaro-order-steps {
    margin: 2rem 0 !important;
}

/* The theme spaces the steps with a fixed 200px gap and a 260px
   connector line on desktop, and on small screens stacks them
   vertically (display:block + li+li margin-top:40px), so the bar
   overflows or misaligns on phones. Below 768px: three evenly
   spread steps on one row, smaller circles, no connector. */
@media (max-width: 767px) {
    .pizzaro-order-steps {
        /* breathing room between the labels and the hairline below,
           and between the bar and the page content */
        padding-bottom: 18px;
        margin-bottom: 26px !important;
    }
    .pizzaro-order-steps ul {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
        padding: 0;
    }
    .pizzaro-order-steps ul li {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
        font-size: 12px;
        line-height: 1.3;
        text-align: center;
    }
    .pizzaro-order-steps ul li + li {
        padding-left: 0;
        margin-top: 0 !important;
    }
    .pizzaro-order-steps ul li .step {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0; /* flex-centers the number; padding-based centering drifts with font metrics */
        margin-bottom: 6px;
        font-size: 1em;
    }
    .pizzaro-order-steps ul li + li .step::before {
        content: none;
    }
}

/* ============================================================
   Checkout-wide design tokens. #payment redeclares the same set
   for the AJAX-refreshed fragment; the form-level copy makes the
   tokens reachable outside #payment (billing opt-ins, tip form).
   --pm-accent is overridden per store inline by form-checkout.php.
   ============================================================ */
form.woocommerce-checkout {
    --pm-ink: #111;
    --pm-line: #e4e4e4;
    --pm-muted: #6b6b6b;
    --pm-accent: #111;
}

/* ============================================================
   AJAX loading — skeleton placeholders.
   While update_order_review runs, WooCommerce blocks the two
   fragments it recalculates (.woocommerce-checkout-review-order-
   table and .woocommerce-checkout-payment) with a blockUI overlay;
   coupon apply/remove and the final submit block their containers
   the same way. pizza-custom-small-tweaks.css turns that overlay
   into a fixed full-screen white sheet with a spinner gif — these
   higher-specificity rules bring it back in place on checkout:
   a soft veil over any blocked container, and shimmering
   placeholder rows (label bar left, amount bar right — the shape
   of the rows being recalculated) over the two fragments.
   The blockUI inline styles require the !importants.
   ============================================================ */
.woocommerce-checkout .blockUI.blockOverlay {
    position: absolute !important;
    /* above the blocked block's own content, below fixed page chrome
       (blockUI inlines z-index:1000, which would cover e.g. the
       store-closed banner) */
    z-index: 3 !important;
    background: rgba(255, 255, 255, .78) !important;
    opacity: 1 !important;
    border-radius: inherit;
}

/* The totals table gets the JS-injected .pcf-skeleton, so its
   click-shield overlay goes transparent; the payment block keeps a
   near-invisible veil — its content stays put during updates (core
   only swaps the fragment when the rendered HTML changed) */
.woocommerce-checkout .woocommerce-checkout-review-order-table .blockUI.blockOverlay {
    background: transparent !important;
}
.woocommerce-checkout .woocommerce-checkout-payment .blockUI.blockOverlay {
    background: rgba(255, 255, 255, .45) !important;
}

/* anchors for the injected skeletons (blockUI sets this too, but
   the skeleton is appended before the block happens) */
form.woocommerce-checkout .woocommerce-checkout-review-order-table,
form.woocommerce-checkout .woocommerce-checkout-payment {
    position: relative;
}

/* Content-shaped placeholders, injected by pizza-custom-checkout.js
   on `update_checkout` and removed on `updated_checkout`:
   the totals table gets label/amount rows ending in a bolder total
   row; the payment block gets method-shaped rows (icon, title,
   check ring) and a button-shaped pill pinned where Place Order
   sits. Finite rows — nothing tiles with the container height. */
.pcf-skeleton {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 20px 2px;
    background: #fff;
    pointer-events: none;
    overflow: hidden; /* filler rows clip at the container edge */
}
.pcf-skeleton__row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pcf-skeleton__row > :last-child:not(:only-child) {
    margin-left: auto;
}
/* rows without a right-hand amount keep everything left-aligned */
.pcf-skeleton__row--start > :last-child:not(:only-child) {
    margin-left: 0;
}
.pcf-skeleton--cart .pcf-skeleton__circle {
    background-color: #d9d9d9;
}
.pcf-skeleton__bar,
.pcf-skeleton__circle,
.pcf-skeleton__button {
    background-color: #ececec;
    background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 58%);
    background-size: 200% 100%;
    background-position: 200% 0;
    background-repeat: no-repeat;
    animation: pcf-skeleton-bar 1.3s ease-in-out infinite;
}
.pcf-skeleton__bar {
    height: 13px;
    border-radius: 7px;
}
/* the totals table sits in the grey cart box (.order-details, #EEE) —
   match its background and run the bars a step darker so they read
   against the grey */
.pcf-skeleton--cart {
    background: #eee;
}
.pcf-skeleton--cart .pcf-skeleton__bar {
    background-color: #d9d9d9;
}
.pcf-skeleton__row--total .pcf-skeleton__bar {
    height: 17px;
    border-radius: 9px;
}
.pcf-skeleton__circle {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
}
.pcf-skeleton__button {
    flex: none;
    height: 48px;
    border-radius: 15px;
    margin-top: 6px;
}
@media (prefers-reduced-motion: reduce) {
    .pcf-skeleton__bar,
    .pcf-skeleton__circle,
    .pcf-skeleton__button {
        animation: none;
    }
}

/* ============================================================
   Section headings — every checkout section title is the
   .pcf-section-heading icon-chip component (styled further down);
   this keeps any remaining plain h3 on the shared rhythm.
   ============================================================ */
form.woocommerce-checkout h3 {
    margin: 0 0 14px;
}

/* ============================================================
   Opt-in checkbox rows (SMS order updates, SMS marketing, save
   payment method, ship-to-different) — one shared control:
   20px rounded square that fills with ink and a white check when
   on, 13px muted label. Mirrors the .wc-stripe-save-source
   checkbox below so every checkbox on checkout reads the same.
   The !importants beat the generic .form-control sizing rules in
   this file and the theme's negative-margin checkbox hacks.
   ============================================================ */
form.woocommerce-checkout .pi-cefw-optional-fees-list label,
form.woocommerce-checkout label.checkbox {
    display: block;
    position: relative;
    padding-left: 30px; /* hanging indent: wrapped lines align after the box */
    margin: 10px 0 !important;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    color: var(--pm-muted, #6b6b6b);
    cursor: pointer;
}
form.woocommerce-checkout .pi-cefw-optional-fees-list input[type="checkbox"],
form.woocommerce-checkout label.checkbox input[type="checkbox"] {
    position: absolute !important;
    left: 0;
    top: 0; /* box height matches the 20px line-height of the first line */
    -webkit-appearance: none;
    appearance: none;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid var(--pm-line, #e4e4e4) !important;
    border-radius: 6px !important;
    background: #fff center / 12px 12px no-repeat;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}
form.woocommerce-checkout .pi-cefw-optional-fees-list input[type="checkbox"]:checked,
form.woocommerce-checkout label.checkbox input[type="checkbox"]:checked {
    border-color: var(--pm-ink, #111) !important;
    background-color: var(--pm-ink, #111);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
form.woocommerce-checkout .pi-cefw-optional-fees-list input[type="checkbox"]:focus-visible,
form.woocommerce-checkout label.checkbox input[type="checkbox"]:focus-visible {
    outline: 3px solid rgba(17, 17, 17, .30);
    outline-offset: 2px;
}

/* Optional extra-fee services (conditional-extra-fees plugin) — the
   row it injects into the review table joins the same design: the
   heading reads like the totals labels and each service is a
   standard opt-in checkbox row */
form.woocommerce-checkout .pi-condition-fees {
    padding: 14px 0;
}
form.woocommerce-checkout .pi-condition-fees > strong {
    display: block;
    margin: 0 0 8px;
    color: #111;
}
form.woocommerce-checkout .pi-cefw-optional-fees-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
form.woocommerce-checkout .pi-cefw-optional-fees-list li {
    margin: 0;
    padding: 0;
}
form.woocommerce-checkout label.checkbox a {
    color: inherit;
    text-decoration: underline;
}

/* Field helper notes (e.g. under the phone field) — same secondary
   text treatment as the opt-in labels */
form.woocommerce-checkout .form-row .description {
    display: block;
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--pm-muted, #6b6b6b);
}

/* ============================================================
   Tip form — hairline separator above, soft panel background,
   pill selectors. The active pill fills with the store accent
   (--pm-accent, printed inline by form-checkout.php).
   ============================================================ */
#pizza-tip-content {
    --pm-accent: #111; /* per-store override printed by form-checkout.php */
    /* no top margin: the tip opens a new .column-left, so the billing
       card's bottom margin can't collapse with it (bootstrap cols keep
       min-height:1px) — a margin here would DOUBLE the section beat */
    margin: 0;
    padding: 18px 0 0;
    /* hairline towards the order total above; below, the "Payment"
       section heading (.pcf-payment-heading) draws the separator */
    border-top: 1px solid #e4e4e4;
    outline: none;
}
#pizza-tip-content fieldset {
    margin: 0;
    padding: 16px;
    background: #fafafa;
    border: 0;
    border-radius: 12px;
}
/* On phones the panel look wastes width and sits indented next to
   the full-bleed blocks around it — go flat and flush instead */
@media (max-width: 767px) {
    #pizza-tip-content fieldset {
        padding: 0;
        background: transparent;
        border-radius: 0;
    }
}
/* Pill selectors — flex overrides the partial's bootstrap cols */
#pizza-tip-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}
#pizza-tip-selector::before,
#pizza-tip-selector::after {
    content: none;
}
#pizza-tip-selector > div {
    flex: 1 1 auto;
    float: none;
    width: auto;
    min-width: 72px;
    padding: 0;
}

/* ============================================================
   Delivery route summary (cart-shipping.php → fragment into
   #shipping_selection_form): three flat stat tiles — distance,
   estimated time, delivery fee — plus the in-house/third-party
   note. While the route is being calculated (address picked,
   fragment not landed yet) pcfShowDeliveryCalculating() shows a
   moped riding a dotted road over three shimmer tiles.
   ============================================================ */
.pcf-delivery-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 8px;
    margin-top: 16px;
}
.pcf-delivery-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 12px;
    background: #fff;
    border: 1px solid #e4e4e4;
}
.pcf-delivery-stat > i {
    margin-bottom: 2px;
    font-size: 16px;
    line-height: 1;
    color: var(--pm-accent, #111);
}
.pcf-delivery-stat__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.2;
    color: #6b6b6b;
}
.pcf-delivery-stat__value {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #111;
}
.delivery_information-info {
    margin: 12px 0 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6b6b6b;
}

/* --- Calculating state --- */
.pcf-delivery-calc {
    margin-top: 16px;
}
.pcf-delivery-calc__text {
    display: block;
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.5;
    color: #6b6b6b;
}
.pcf-delivery-calc__road {
    position: relative;
    height: 30px;
    margin-bottom: 12px;
    border-bottom: 2px dashed #e4e4e4;
    overflow: hidden;
}
.pcf-delivery-calc__road i {
    position: absolute;
    bottom: 3px;
    left: -10%;
    font-size: 18px;
    color: var(--pm-accent, #111);
    animation: pcf-delivery-ride 2s linear infinite;
}
@keyframes pcf-delivery-ride {
    from { left: -10%; }
    to   { left: 104%; }
}
/* shimmer bars inside the placeholder tiles reuse .pcf-skeleton__bar */
.pcf-delivery-stat--skeleton .pcf-skeleton__bar {
    width: 72%;
}
.pcf-delivery-stat--skeleton .pcf-skeleton__bar:first-child {
    width: 48%;
    height: 9px;
}
@media (prefers-reduced-motion: reduce) {
    .pcf-delivery-calc__road i {
        animation: none;
        left: 8px;
    }
}
/* Phones: no tiles, no borders — a plain stacked list, one fact per
   row: icon, label, value pushed to the right edge */
@media (max-width: 767px) {
    .pcf-delivery-stats {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .pcf-delivery-stat {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 0;
        background: transparent;
        border: 0;
    }
    .pcf-delivery-stat > i {
        width: 20px;
        margin: 0;
        text-align: center;
    }
    .pcf-delivery-stat__label {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        color: #6b6b6b;
    }
    .pcf-delivery-stat__value {
        margin-left: auto;
        font-size: 14px;
    }
    .pcf-delivery-stat--skeleton .pcf-skeleton__bar {
        width: 34%;
        height: 9px;
    }
    .pcf-delivery-stat--skeleton .pcf-skeleton__bar:last-child {
        width: 22%;
        height: 13px;
        margin-left: auto;
    }
}

.tip-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #ddd;
    border-radius: 999px;
    background-color: #fff;
    color: #111;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.tip-selector:hover {
    border-color: #111;
}
.tip-selector.active {
    border-color: var(--pm-accent);
    background-color: var(--pm-accent);
    color: #fff;
}

.tip-selector input {
    display:none;
}

/* Custom amount row — one flex row of pills matching the tip
   selectors: a $-prefixed amount pill plus an accent-filled
   Update pill, both 44px. The !importants are needed to beat the
   generic checkout form rules further down in this file
   (.input-group-addon / .form-control / .btn, all !important).
   The JS and the partial show this row with display:flex. */
#pizza-tip-content .container-fluid {
    width: auto;
    padding: 0;
    margin: 0;
}
#pizza-tip-selector-other {
    display: none;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 12px 0 0;
    border: 0;
}
#pizza-tip-selector-other::before,
#pizza-tip-selector-other::after {
    content: none;
}
#pizza-tip-selector-other > div {
    float: none;
    width: auto;
    padding: 0;
    margin: 0;
}
#pizza-tip-selector-other > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}
#pizza-tip-selector-other > div:last-child {
    flex: 0 0 auto;
}
#pizza-tip-selector-other .input-group {
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    padding: 0 18px;
    border: 1.5px solid #ddd;
    border-radius: 999px;
    background: #fff;
    transition: border-color .16s ease;
}
#pizza-tip-selector-other .input-group:focus-within {
    border-color: #111;
}
#pizza-tip-selector-other .form-control {
    order: 2;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #111;
    font-size: 13px;
    font-weight: 600;
    -moz-appearance: textfield;
}
#pizza-tip-selector-other .form-control::-webkit-outer-spin-button,
#pizza-tip-selector-other .form-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#pizza-tip-selector-other .form-control:focus {
    outline: none;
}
/* Currency prefix: a small accent chip with the $ — reads as "this
   field takes a dollar amount", not decoration */
#pizza-tip-selector-other .input-group-addon {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    margin: 0 10px 0 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--pm-accent, #111) !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
#pizza-tip-other-amount-update {
    width: 100%;
    min-width: 108px;
    height: 44px;
    padding: 0 26px;
    border: 1.5px solid var(--pm-accent) !important;
    border-radius: 999px !important;
    background-color: var(--pm-accent) !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: filter .16s ease;
}
#pizza-tip-other-amount-update:hover,
#pizza-tip-other-amount-update:focus {
    filter: brightness(.92);
}

/*
    Order ahead calendar
*/

.order-schedule {
    margin-bottom: 10px;
}

.order-schedule-input {
    display:none !important;    
}

.order-schedule-options {
    margin-bottom: 15px;    
}

.order-delivery-alert,
.order-schedule-alert {
    display:none;
    margin: 15px 0 0 0 !important;
    border-radius:0 !important;
    background-color:#e2401c !important;
    border:0 !important;
    color:#FFF !important;
}

.order-delivery-alert {
    display:block;
}

.order_ahead_type {
    visibility: hidden;
}

/* ============================================================
   Order-ahead scheduler — flat "1 Pick a date / 2 Pick a time"
   stack (no card chrome), dates above and times below on every
   width. Dates (#date-selectable — no calendar; the allowed days
   are a short list, each a tappable card) render as a grid on
   desktop and a swipeable snap strip on phones; the time-slot
   grid follows. checkout-new.js builds both radio groups, writes
   the chosen day into the posted hidden #order_ahead_date, and
   toggles .has-date on the container (step 2's label wakes up,
   the placeholder goes). Selected time-slot colors come from the
   per-store accent rules printed inline by form-checkout.php
   (!important); date cards use the --pm-accent token (same
   inline per-store value).
   ============================================================ */
/* Flat, no card chrome: dates above, times below on every width */
.order_ahead-container {
    display: block;
    background: transparent;
    border: 0;
}
.order_ahead-panel {
    min-width: 0;
    padding: 0;
}
.order_ahead-calendar {
    background: transparent;
    border: 0;
    margin: 0 0 16px;
}
.order_ahead-panel__label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    color: #111;
}
.order_ahead-panel__label span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    background: var(--pm-accent, #111);
    color: #fff;
    font-size: 13px;
}
/* step 2 sleeps until a date is picked */
.order_ahead-container:not(.has-date) .order_ahead-time-picker .order_ahead-panel__label {
    color: #9b9b9b;
}
.order_ahead-container:not(.has-date) .order_ahead-time-picker .order_ahead-panel__label span {
    background: #c9c9c9;
}

/* --- Time slots: uniform pill grid, scrolling on its own --- */
.order_ahead-time-picker {
    display: block;
    width: auto;
    text-align: left;
    overflow: visible;
    min-height: 0;
    max-height: none;
}
.order_ahead-time-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px;
    align-content: start;
    width: 100%;
    max-height: 336px;
    padding: 0 2px 2px 0; /* room for the slot focus outline */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.order_ahead-time-picker-message {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 160px;
    text-align: center;
    font-size: 13px;
    color: #6b6b6b;
}
.order_ahead_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0;
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 50%;
}
.order_ahead_icon svg {
    width: 24px;
    height: 24px;
    fill: #111; /* per-store accent !important from form-checkout.php */
}

.radio-time-picker {
    display: block;
    position: relative; /* anchors the visually-hidden radio */
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
}
.radio-time-picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0; /* keeps the radio focusable — display:none killed keyboard use */
}
.radio-time-picker label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 8px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 0;
    color: #111;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.radio-time-picker label:hover {
    border-color: #111;
}
.radio-time-picker input:focus-visible + label {
    outline: 2px solid #111;
    outline-offset: 2px;
}
/* fallback; the per-store accent rule in form-checkout.php wins */
.radio-time-picker input:checked + label {
    color: #FFF !important;
    background-color: #111;
    border: 1px solid #111;
}

/* --- Date cards: the allowed days as tappable cards (Today /
   Tomorrow / weekday + day + month), built by checkout-new.js
   into #date-selectable. Same radio-behind-label pattern as the
   time slots; the chosen value lands in the posted hidden
   #order_ahead_date input. --- */
.order_ahead-date-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
    align-content: start;
    max-height: 336px;
    padding: 0 2px 2px 0; /* room for the card focus outline */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.radio-date-picker {
    position: relative; /* anchors the visually-hidden radio */
}
.radio-date-picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0; /* focusable, unlike display:none */
}
.radio-date-picker label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-height: 68px;
    margin: 0;
    padding: 10px 6px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 0;
    text-align: center;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.radio-date-picker label:hover {
    border-color: #111;
}
.radio-date-picker input:focus-visible + label {
    outline: 2px solid #111;
    outline-offset: 2px;
}
.radio-date-picker__dow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    color: #6b6b6b;
}
.radio-date-picker__num {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    color: #111;
}
.radio-date-picker__mon {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
    color: #6b6b6b;
}
.radio-date-picker input:checked + label {
    background: var(--pm-accent, #111);
    border-color: var(--pm-accent, #111);
}
.radio-date-picker input:checked + label .radio-date-picker__dow,
.radio-date-picker input:checked + label .radio-date-picker__num,
.radio-date-picker input:checked + label .radio-date-picker__mon {
    color: #fff;
}

/* Phones: the date cards become a swipeable snap strip */
@media (max-width: 767px) {
    .order_ahead-date-container {
        display: flex;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 2px 8px; /* focus ring + breathing room over the scrollbar */
        scroll-snap-type: x proximity;
    }
    .radio-date-picker {
        flex: 0 0 84px;
        scroll-snap-align: start;
    }
    .order_ahead-time-container {
        max-height: 264px;
    }
}


.order-schedule input:checked + label {
    color: #FFF !important;
    background-color: #111;
    border: 1px solid #111;
}

.woocommerce-billing-fields .checkbox {
    margin-left: 20px;
    line-height: 23px;
}

.restaurant-block {
    border: 1px solid #CCC;
    margin-bottom: 30px;
    padding: 15px;
}

.order-details {
    padding: 15px;
    background-color: #EEE;
    width: auto !important;
    float: none !important;
    clear: none !important;
    margin-bottom:30px;
}

.order-details .form-control {
    margin-bottom:15px !important;
}

.input-text, 
input[type=email], 
input[type=password],
input[type=search], 
input[type=text], 
input[type=url], 
textarea {
    border-radius:0 !important;
}

.input-group-addon {
    background:#DEDEDE !important;
    color:#111 !important;
    border:0 !important;
    border-radius:0 !important;
}

.form-control {
    border-width:2px !important;
    box-shadow:0 0 0 !important;
    height:36px !important;
}

.woocommerce-invalid-required-field .form-control {
    border-color:#e2401c !important;
}

/* Beats the theme's fixed 50px .form-control height on specificity alone —
   !important here would also override the inline height the browser writes
   during drag-resize, turning the vertical resize handle into a no-op. */
textarea.form-control {
    height:auto;
}

/* Order notes (and any checkout textarea) grow vertically only —
   horizontal resize breaks out of the column */
form.woocommerce-checkout textarea {
    resize: vertical;
}

.btn {
    border-radius:0 !important;    
}

.btn.active, 
.btn:active {
    box-shadow:none !important;
}

.btn.btn-default {
    border:2px solid #111 !important;
    background:#FFF !important;
    color:#111 !important;
    border-radius: 10px !important;
}

.btn.btn-default i {
    margin-right:5px;
}

.order-schedule input:checked + .btn-default,
.btn.btn-default.active {
    border:2px solid #111 !important;
    background: #111 !important;
    color:#FFF !important;
}

.orderDetails-content-tab {
    padding: 25px 0 0;
}

/* Flush with the container edge like every other checkout row */
.sms_subscription {
    padding: 0;
}

.sms_subscription label {
    font-size: 13px;
    line-height: 22px;
    font-weight: normal;
}

.woocommerce-terms-and-conditions-wrapper {
    padding: 0 !important;
    margin-top: 0 !important;
    font-size: 13px !important;
    line-height: 19px !important;
    margin-bottom: 6px !important;
}

/* ============================================================
   Checkout payment methods
   WooCommerce method selector (li.wc_payment_method) + the
   Stripe Payment Element panel (.payment_box). Flat rows on
   hairline dividers — no card chrome, no fills; the only
   selection cue is the check ring, tinted with the store's
   accent (--pm-accent, set inline from form-checkout.php).
   ============================================================ */
#payment {
    --pm-ink: #111;
    --pm-surface: #fff;
    --pm-line: #e4e4e4;
    --pm-panel: #fafafa;
    --pm-muted: #6b6b6b;
    --pm-radius: 12px;
    --pm-accent: #111; /* per-store override printed by form-checkout.php */
}

/* --- Method list reset -------------------------------------- */
#payment ul.payment_methods {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}
#payment ul.payment_methods::before,
#payment ul.payment_methods::after {
    content: none;
    display: none;
}
#payment .payment_methods li.wc_payment_method {
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
}
/* Hairline between method rows (the ~ combinator skips the
   .payment_box <div>s interleaved between the <li>s) */
#payment ul.payment_methods > li.wc_payment_method ~ li.wc_payment_method {
    border-top: 1px solid var(--pm-line);
}

/* Hide the native radio but keep it focusable for keyboard users */
#payment .payment_methods li.wc_payment_method > input.input-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* --- The selectable row ------------------------------------- */
#payment .payment_methods li.wc_payment_method > label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 16px 44px 16px 0; /* right room for the indicator */
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--pm-ink);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: color .18s ease;
}
/* Neutralise the parent (pizzaro) theme's Font Awesome radio markers rendered
   on label:before (\f10c unchecked, \f192 on the checked method). The theme's
   checked selector is high-specificity (1,5,4), so we out-specify it (1,6,4)
   — keeping our indicator on ::after the only marker. */
#payment .payment_methods li.wc_payment_method > label::before,
#payment .payment_methods li.wc_payment_method > input.input-radio[type=radio]:first-child:checked + label::before {
    content: none;
}

/* Right-side selection indicator */
#payment .payment_methods li.wc_payment_method > label::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 2px solid var(--pm-line);
    border-radius: 50%;
    background: transparent center / 13px 13px no-repeat;
    transition: border-color .18s ease, background-color .18s ease;
}

#payment .payment_methods li.wc_payment_method .payment_method-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    font-size: 20px;
    line-height: 1;
    color: var(--pm-ink);
    transition: color .18s ease;
}
#payment .payment_methods li.wc_payment_method .payment_method-title {
    font-size: 15px;
    letter-spacing: .2px;
}

/* Hover — only the ring reacts */
#payment .payment_methods li.wc_payment_method > label:hover::after {
    border-color: var(--pm-ink);
}

/* Keyboard focus */
#payment .payment_methods li.wc_payment_method > input.input-radio:focus-visible + label {
    outline: 3px solid rgba(17, 17, 17, .35);
    outline-offset: 2px;
}

/* Selected — accent-filled ring with a white check; no row fill */
#payment .payment_methods li.wc_payment_method > input.input-radio:checked + label::after {
    border-color: var(--pm-accent);
    background-color: var(--pm-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* --- Payment fields / gateway description panel -------------
   Flat like the method rows: no fill, no frame. Gateway
   descriptions read as muted helper text under their row. */
#payment .payment_box {
    position: relative;
    margin: 0 0 14px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--pm-muted);
    font-size: 14px;
    line-height: 1.5;
    animation: pmBoxIn .28s ease both;
}
#payment .payment_box::before {
    content: none; /* remove WC's pointer triangle */
}
#payment .payment_box > :first-child { margin-top: 0; }
#payment .payment_box > :last-child { margin-bottom: 0; }
@keyframes pmBoxIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Saved cards (woo-stripe tokens) — clean flat list, no fills
   ul.wc-saved-payment-methods > li.wc-stripe-saved-method
   (brand __icon, __title, __see-more) + the "new method" row.
   Rows are transparent and separated by hairline dividers; the
   only selection cue is the accent-tinted check ring on the
   right — same language as the method selector above.
   ============================================================ */
#payment .wc-saved-payment-methods {
    list-style: none;
    margin: 2px 0 6px;
    padding: 0;
}
#payment .wc-saved-payment-methods li {
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
}
#payment .wc-saved-payment-methods li + li {
    border-top: 1px solid var(--pm-line);
}

/* Hide the native radios — the whole row is the control */
#payment .wc-stripe-saved-method__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* Row = flat selectable line */
#payment .wc-stripe-saved-method__label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 40px 14px 0; /* right room for the check ring */
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--pm-ink);
    font-size: 14px;
    cursor: pointer;
    transition: color .16s ease;
}

/* Brand logo chip — kept on white so card logos render true */
#payment .wc-stripe-saved-method__icon {
    flex: none;
    width: 40px;
    height: 26px;
    padding: 2px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--pm-line);
    border-radius: 5px;
}
#payment .wc-stripe-saved-method__title {
    flex: 1 1 auto;
    font-weight: 600;
    letter-spacing: .2px;
    font-variant-numeric: tabular-nums;
}

/* Check ring on the right — the single selection indicator */
#payment .wc-stripe-saved-method__label::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 2px solid var(--pm-line);
    border-radius: 50%;
    background: transparent center / 13px 13px no-repeat;
    transition: border-color .16s ease, background-color .16s ease;
}
#payment .wc-stripe-saved-method__label:hover::after {
    border-color: var(--pm-ink);
}
#payment .wc-stripe-saved-method__input:checked + .wc-stripe-saved-method__label::after,
#payment .wc-stripe-saved-method.selected > .wc-stripe-saved-method__label::after {
    border-color: var(--pm-accent);
    background-color: var(--pm-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Keyboard focus */
#payment .wc-stripe-saved-method__input:focus-visible + .wc-stripe-saved-method__label {
    outline: 3px solid rgba(17, 17, 17, .30);
    outline-offset: 2px;
}

/* "See more" link (shown in the row while the list is collapsed) */
#payment .wc-stripe-saved-method__see-more {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 600;
    color: var(--pm-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
#payment .wc-stripe-saved-method__see-more:hover { color: var(--pm-ink); }
/* Once expanded, the per-row links are noise — picking a card re-collapses */
#payment .wc-saved-payment-methods__expanded .wc-stripe-saved-method__see-more { display: none; }

/* "Use a new payment method" row — same flat row, plus glyph */
#payment .woocommerce-SavedPaymentMethods-new .wc-stripe-saved-method__label {
    color: var(--pm-muted);
    font-weight: 600;
}
#payment .woocommerce-SavedPaymentMethods-new .wc-stripe-saved-method__label:hover,
#payment .woocommerce-SavedPaymentMethods-new .wc-stripe-saved-method__input:checked + .wc-stripe-saved-method__label {
    color: var(--pm-ink);
}
#payment .wc-stripe-saved-method__plus {
    position: relative;
    flex: none;
    width: 40px;  /* match the brand-chip width so titles align */
    height: 26px;
}
#payment .wc-stripe-saved-method__plus::before,
#payment .wc-stripe-saved-method__plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}
#payment .wc-stripe-saved-method__plus::before { width: 14px; height: 2px; }
#payment .wc-stripe-saved-method__plus::after { width: 2px; height: 14px; }

/* New-card element wrapper + gateway description */
#payment .wc-stripe-gateway-container { margin-top: 14px; }
#payment .wc-stripe-gateway-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--pm-muted);
    margin: 0 0 10px;
}

/* "Save this card" — custom checkbox (theme's .wc-stripe-save-source).
   Its native input is visually hidden and a styled span is the box, so
   the form-wide label.checkbox rules must be undone here: no hanging
   indent on the label, and the input stays 1px/invisible (the
   !importants re-beat the unified rules above). The 10px gap matches
   the box-to-text distance of the other opt-in checkboxes. */
#payment .wc-stripe-save-source {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
}
#payment .wc-stripe-save-source label.checkbox {
    display: inline-flex;
    margin: 0 !important;
    padding-left: 0;
}
#payment .wc-stripe-save-source input[type="checkbox"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
}
#payment .wc-stripe-save-source .save-source-checkbox {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--pm-line);
    border-radius: 6px;
    background: #fff center / 12px 12px no-repeat;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}
#payment .wc-stripe-save-source input[type="checkbox"]:checked + .save-source-checkbox {
    border-color: var(--pm-ink);
    background-color: var(--pm-ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
#payment .wc-stripe-save-source input[type="checkbox"]:focus-visible + .save-source-checkbox {
    outline: 3px solid rgba(17, 17, 17, .30);
    outline-offset: 2px;
}
#payment .wc-stripe-save-source .save-source-label {
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
}

@media (max-width: 575px) {
    #payment .payment_methods li.wc_payment_method > label {
        padding: 14px 40px 14px 0;
    }
}

.woocommerce-checkout-payment-buttons button {
    border-radius: 15px !important;
    height: 48px !important;
    font-size:17px !important;
}

@media not (min-width: 1400px){
    

} /* 1200 - 1399 */

@media not (min-width: 1200px){
    
    
} /*  992 - 1199 */

@media not (min-width: 992px){
    
    .column-wraper {
        position:relative;
    }

    .column-right {
        position:relative !important;
        right:0;
    }
    
}  /*  768 -  991 */

@media not (min-width: 768px){
    
}  /*  576 -  767 */

@media not (min-width: 576px){
    
    .order-schedule-options label {
        margin-bottom:15px;
    }
    
    .restaurant-block {
        border:0;
        margin-bottom: 30px;
        padding:0;
    }

    .order-actions-button {
        display: block !important;
        padding: 5px 10px !important;
        margin-bottom: 10px;
        text-align: center;
        font-size: 12px;
    }

}

/* =========================================================================
   Checkout presentation enhancements
   ("Your details" heading, collapsible discounts/notes,
   sticky/mobile order summary)
   Scoped to the checkout page via body.woocommerce-checkout.
   ========================================================================= */

/* --- Phone helper text --- */
body.woocommerce-checkout #billing_phone_field .description {
    display: block;
    margin-top: 6px; /* same helper-text offset as .form-row .description */
    font-size: 0.85em;
    opacity: 0.75;
}

/* --- Collapsible disclosures (coupon / gift card / order notes) --- */
body.woocommerce-checkout .checkout-disclosure-toggle,
body.woocommerce-checkout .checkout-summary-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    /* These sit inside the gray (#EEE) order-review box, where inherited text
       can be near-white. Force a readable white card like .restaurant-block. */
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 6px;
    font: inherit;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}
body.woocommerce-checkout .checkout-disclosure-toggle {
    margin: 8px 0;
}
body.woocommerce-checkout .checkout-disclosure-label,
body.woocommerce-checkout .checkout-disclosure-caret {
    color: #333;
}
body.woocommerce-checkout .checkout-disclosure-toggle:hover,
body.woocommerce-checkout .checkout-summary-toggle:hover {
    border-color: #999;
}
body.woocommerce-checkout .checkout-disclosure-toggle:focus-visible,
body.woocommerce-checkout .checkout-summary-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
body.woocommerce-checkout .checkout-disclosure-caret::before {
    content: "\002B"; /* + */
    display: inline-block;
    font-weight: 700;
}
body.woocommerce-checkout .checkout-disclosure-toggle[aria-expanded="true"] .checkout-disclosure-caret::before {
    content: "\2212"; /* − */
}
body.woocommerce-checkout .checkout-disclosure-panel[hidden] {
    display: none;
}
body.woocommerce-checkout .checkout-disclosure-panel {
    margin: 0 0 8px;
    /* BFC: keep inner form margins from collapsing out of the panel, so the
       sibling <hr> separator gets the same gap whether the panel is open. */
    display: flow-root;
}

/* Separator between the gift-card and coupon disclosures. The theme's global
   hr rule is asymmetric (margin: 0 0 1em) — pin both sides so the divider
   spacing never shifts as the disclosures around it open and close. */
body.woocommerce-checkout #order_review hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin: 16px 0;
}
/* The revealed panel repeats the label as its own <h4> ("Coupon code!",
   "Have a gift card?"); hide it to avoid duplication / low-contrast heading. */
body.woocommerce-checkout .checkout-disclosure-panel > h4 {
    display: none;
}

/* Two-line toggles: title with an optional helper line below it. */
body.woocommerce-checkout .checkout-disclosure-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
body.woocommerce-checkout .checkout-disclosure-sub {
    font-size: 0.82em;
    font-weight: 400;
    color: #6b6b6b;
}
/* "✓ Added" pill on the Order Notes toggle once a note exists. */
body.woocommerce-checkout .checkout-disclosure-badge {
    flex: none;
    margin: 0 10px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #f1f7f1;
    color: #2e7d32;
    font-size: 0.78em;
    font-weight: 600;
    white-space: nowrap;
}
body.woocommerce-checkout .checkout-disclosure-badge[hidden] {
    display: none;
}

/* --- Order notes panel: card joined to the underside of its toggle --- */
body.woocommerce-checkout .checkout-disclosure-toggle[aria-controls="checkout-notes-panel"][aria-expanded="true"] {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: #ececec;
}
body.woocommerce-checkout #checkout-notes-panel {
    margin: 0 0 8px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #ccc;
    border-top: 0;
    border-radius: 0 0 6px 6px;
}
/* Core template prints an "Additional information" <h3> for pickup-only
   carts; the toggle is the title now. */
body.woocommerce-checkout #checkout-notes-panel h3 {
    display: none;
}
body.woocommerce-checkout #checkout-notes-panel .form-row {
    margin: 0;
    padding: 0;
}
/* The field label is screen-reader-only (title lives on the toggle) —
   fallback in case the theme ships no .screen-reader-text rule. */
body.woocommerce-checkout #checkout-notes-panel label.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
body.woocommerce-checkout #order_comments {
    display: block;
    width: 100%;
    min-height: 88px;
    padding: 10px 12px;
    background: #fafafa;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    box-shadow: none;
    line-height: 1.5;
    transition: border-color .15s ease, background-color .15s ease;
}
body.woocommerce-checkout #order_comments:focus {
    background: #fff;
    border-color: var(--pm-accent, #111);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-accent, #111) 15%, transparent);
    outline: 0;
}
body.woocommerce-checkout .checkout-notes-count {
    display: block;
    margin-top: 6px;
    font-size: 0.8em;
    text-align: right;
    color: #6b6b6b;
}
body.woocommerce-checkout .checkout-notes-count.is-low {
    color: #e2401c;
}
body.woocommerce-checkout .checkout-notes-count[hidden] {
    display: none;
}

/* --- Prominent grand total --- */
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
    font-size: 1.15em;
    font-weight: 700;
}

/* --- Sticky order summary (desktop) --- */
@media (min-width: 992px) {
    body.woocommerce-checkout .column-wraper {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    /* .column-right keeps the legacy `position:absolute !important` overlay
       (line 5) — any position/top set on it lands on the ABSOLUTE box (a
       stray top:20px here pushed the summary below the left column). Pin it
       flush and full-height, and stick #order_review inside it instead. */
    body.woocommerce-checkout .column-right {
        top: 0;
        bottom: 0;
    }
    /* Pin the summary from the SUBTOTAL down: the sticky offset is
       shifted up by the measured height of everything above the tfoot
       (--pcf-review-items, set by pcfPinReviewTotals in
       pizza-custom-checkout.js on load / updated_checkout / resize).
       The item lines scroll away with the page; the totals and the
       gift card / coupon forms pin 20px from the top and ride along. */
    body.woocommerce-checkout #order_review {
        position: -webkit-sticky;
        position: sticky;
        top: calc(20px - var(--pcf-review-items, 0px));
    }
    /* items scroll off-screen naturally — no internal scrollbar here */
    body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tbody {
        max-height: none;
        overflow: visible;
    }
}

/* hidden everywhere except inside the open mobile order overview */
.checkout-order-update-link {
    display: none;
}

/* --- Mobile collapsed summary header --- */
body.woocommerce-checkout .checkout-summary-toggle {
    display: none; /* shown on mobile only */
    font-weight: 700;
    margin: 0 0 12px;
}
body.woocommerce-checkout .checkout-summary-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    text-align: left;
}
/* "3 items" on its own line, then order type · timing below it */
body.woocommerce-checkout .checkout-summary-items,
body.woocommerce-checkout .checkout-summary-meta {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: #6b6b6b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.woocommerce-checkout .checkout-summary-items:empty,
body.woocommerce-checkout .checkout-summary-meta:empty {
    display: none;
}
body.woocommerce-checkout .checkout-summary-total {
    font-weight: 700;
}
body.woocommerce-checkout .checkout-summary-caret {
    flex: none;
    width: 9px;
    height: 9px;
    margin: -3px 2px 0 12px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg);
    transition: transform .2s ease;
}
body.woocommerce-checkout .checkout-summary-toggle[aria-expanded="true"] .checkout-summary-caret {
    transform: rotate(225deg) translate(-2px, -2px);
}
/* While update_order_review runs (`.is-loading` set by
   pizza-custom-checkout.js), the stale total becomes a shimmer
   placeholder bar matching the fragment skeletons */
body.woocommerce-checkout .checkout-summary-toggle.is-loading .checkout-summary-total {
    min-width: 64px;
    min-height: 14px;
    border-radius: 7px;
    color: transparent;
    background-color: #ececec;
    background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 58%);
    background-size: 200% 100%;
    background-position: 200% 0;
    background-repeat: no-repeat;
    animation: pcf-skeleton-bar 1.3s ease-in-out infinite;
}
@keyframes pcf-skeleton-bar {
    to {
        background-position: -100% 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.woocommerce-checkout .checkout-summary-toggle.is-loading .checkout-summary-total {
        animation: none;
    }
}
/* The theme's `.site { overflow-x: hidden }` makes the #page wrapper
   the sticky scrollport, killing position:sticky for BOTH the mobile
   summary bar and the desktop #order_review (it silently never stuck —
   the box just scrolled away with the page). The wrapper doesn't
   scroll itself and nothing on checkout overflows horizontally, so it
   can be visible at every width. */
body.woocommerce-checkout #page.site {
    overflow: visible;
}

@media (max-width: 991px) {
    /* The bar rides along on scroll — sticky 15px from the top, the
       same spacing as the 15px side gutters it sits inside */
    body.woocommerce-checkout .checkout-summary-toggle {
        display: flex;
        position: -webkit-sticky;
        position: sticky;
        top: 15px;
        /* above the page content but BELOW the handheld navigation
           drawer (z 10000) and its floating header button (9999) —
           only the open overview outranks the site chrome */
        z-index: 9990;
        margin: 0 0 16px;
    }
    body.woocommerce-checkout #order_review {
        display: none;
    }

    /* Open: the order overview takes over the viewport under the bar,
       scrolling on its own while the page behind stays put; only the
       Place Order button floats above it, pinned to the bottom */
    body.woocommerce-checkout.checkout-summary-open {
        overflow: hidden;
    }
    /* the gift-card/coupon forms move above #payment on mobile
       (pcfPlaceWalletForms) — the divider that sat between them in
       the order review stays behind; hide it */
    body.woocommerce-checkout #order_review > hr {
        display: none;
    }

    /* the open overview already shows everything the bar says —
       hide it; "Continue" (the floating button) closes the overlay */
    body.woocommerce-checkout.checkout-summary-open .checkout-summary-toggle {
        display: none;
    }
    body.woocommerce-checkout.checkout-summary-open #order_review {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 20000;
        margin: 0;
        /* room for the Update Order link + Continue button below */
        padding: 20px 15px 132px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        animation: pcf-summary-in .22s ease;
    }
    /* Fixed footer panel in the cart's background behind Update Order +
       Continue — the summary content scrolls behind it, not behind bare
       floating buttons. Sits above the overlay content (20000), below
       the buttons (20020). pointer-events:none — it's purely a backdrop. */
    body.woocommerce-checkout.checkout-summary-open #order_review::after {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 116px;
        z-index: 20010;
        background: #eee; /* .order-details overlay background */
        border-top: 1px solid #e4e4e4;
        pointer-events: none;
    }
    body.woocommerce-checkout.checkout-summary-open #place_order {
        position: fixed;
        left: 15px;
        right: 15px;
        bottom: 15px;
        width: calc(100% - 30px);
        z-index: 20020;
    }
    /* "Update Order" — quiet text link floating above Continue,
       back to the shop cart to edit the order */
    body.woocommerce-checkout.checkout-summary-open .checkout-order-update-link {
        display: block;
        position: fixed;
        left: 15px;
        right: 15px;
        bottom: 79px;
        z-index: 20020;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        color: #111;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}
@keyframes pcf-summary-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.woocommerce-checkout.checkout-summary-open #order_review {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.woocommerce-checkout * {
        scroll-behavior: auto;
    }
}
/* ============================================================
   Wallet forms — "Have a gift card?" and "Add a coupon code" are
   one identical component; only the toggle text differs. Each is
   a single row: code input growing next to an accent Apply
   button, with inline notices above. The h4s inside the panels
   duplicate the disclosure toggles, so they're hidden.
   ============================================================ */
.cart_checkout_coupon h4,
.add_gift_card_form h4 {
    display: none;
}
/* body-scoped so it outranks the disclosure-panel's flow-root
   (the coupon container IS the panel); flex establishes the same
   block formatting context, so the margin-containment holds */
body.woocommerce-checkout .cart_checkout_coupon,
.cart_checkout_coupon,
.add_gift_card_form #wc_gc_cart_redeem_form {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    padding: 4px 0 12px;
}
.cart_checkout_coupon .clear {
    display: none; /* empty clearfix div would add a phantom flex gap */
}
.cart_checkout_coupon .form-row,
.add_gift_card_form .form-row {
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
}
.cart_checkout_coupon .form-row:has(input),
.add_gift_card_form .form-row:has(input) {
    flex: 1 1 0;
    min-width: 0;
}
.cart_checkout_coupon .form-row:has(button),
.add_gift_card_form .form-row:has(button) {
    flex: 0 0 auto;
}
.cart_checkout_coupon input[name="coupon_code"],
.add_gift_card_form #wc_gc_cart_code {
    display: block;
    width: 100% !important;
    min-width: 0;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 2px solid #ddd !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    transition: border-color .16s ease;
}
.cart_checkout_coupon input[name="coupon_code"]:focus,
.add_gift_card_form #wc_gc_cart_code:focus {
    outline: none;
    border-color: #111 !important;
}
/* body-scoped: the per-store inline style block prints
   `.btn.btn-default { color/border: accent !important }` after the
   stylesheets, so the coupon button needs the extra specificity
   (the gift card selector already carries an ID) */
body.woocommerce-checkout .cart_checkout_coupon .cart-apply-coupon,
.add_gift_card_form #wc_gc_cart_redeem_send {
    flex: 0 0 auto;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 26px !important;
    border: 2px solid var(--pm-accent, #111) !important;
    background: var(--pm-accent, #111) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1 !important;
    cursor: pointer;
    transition: filter .16s ease;
}
body.woocommerce-checkout .cart_checkout_coupon .cart-apply-coupon:hover,
body.woocommerce-checkout .cart_checkout_coupon .cart-apply-coupon:focus,
.add_gift_card_form #wc_gc_cart_redeem_send:hover,
.add_gift_card_form #wc_gc_cart_redeem_send:focus {
    filter: brightness(.92);
}
/* Inline notices — same compact treatment in both forms */
.cart_checkout_coupon-alert,
.add_gift_card_form .wc_gc_add_gift_card_form__notices {
    flex: 1 1 100%;
    margin: 0;
}
.cart_checkout_coupon-alert:empty,
.add_gift_card_form .wc_gc_add_gift_card_form__notices:empty {
    display: none;
}
.cart_checkout_coupon-alert .woocommerce-error,
.cart_checkout_coupon-alert .woocommerce-message,
.add_gift_card_form .wc_gc_add_gift_card_form__notices .woocommerce-error,
.add_gift_card_form .wc_gc_add_gift_card_form__notices .woocommerce-message,
.add_gift_card_form .wc_gc_add_gift_card_form__notices .woocommerce-info {
    list-style: none;
    margin: 0 0 2px !important;
    padding: 10px 12px !important;
    background: #fdf1f0 !important;
    border: 0 !important;
    border-left: 3px solid #e2401c !important;
    color: #4a1a14 !important;
    font-size: 13px;
    line-height: 1.45;
}
.cart_checkout_coupon-alert .woocommerce-message,
.add_gift_card_form .wc_gc_add_gift_card_form__notices .woocommerce-message {
    background: #f1f7f1 !important;
    border-left-color: #2e7d32 !important;
    color: #1d3b1f !important;
}
.cart_checkout_coupon-alert li,
.add_gift_card_form .wc_gc_add_gift_card_form__notices li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ============================================================
   Placing the order — the Place Order button stays crisp above
   the processing veil and shows an inline spinner while the
   order submits; everything else dims quietly behind it.
   ============================================================ */
form.checkout.processing #place_order {
    position: relative;
    z-index: 5; /* above the blockUI veil (z 3) */
}
/* No pointer-events lock while "placing": a cancelled wallet sheet can
   leave this state on (no WC event fires) and the customer must be able
   to click again. Double submits are already guarded — WooCommerce
   ignores submits while the form has .processing. */
#place_order.pcf-placing {
    cursor: progress;
}
.pcf-btn-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 9px;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pcf-spin .7s linear infinite;
}
@keyframes pcf-spin {
    to {
        transform: rotate(360deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .pcf-btn-spinner {
        animation: none;
        border-top-color: rgba(255, 255, 255, .35);
    }
}

/* ============================================================
   Flat checkout — square corners on every control, matching the
   cart drawer's flat presentation. Genuine circles (order-step
   numbers, payment check rings, skeleton icon dots) stay round
   on purpose.
   ============================================================ */
body.woocommerce-checkout .checkout-summary-toggle,
body.woocommerce-checkout .checkout-disclosure-toggle,
body.woocommerce-checkout .btn,
body.woocommerce-checkout .btn.btn-default,
.woocommerce-checkout-payment-buttons button,
#place_order,
.tip-selector,
#pizza-tip-selector-other .input-group,
#pizza-tip-other-amount-update,
form.woocommerce-checkout label.checkbox input[type="checkbox"],
form.woocommerce-checkout .pi-cefw-optional-fees-list input[type="checkbox"],
#payment .wc-stripe-save-source .save-source-checkbox,
#pizza-tip-content fieldset,
.pcf-skeleton__bar,
.pcf-skeleton__button,
body.woocommerce-checkout .checkout-summary-toggle.is-loading .checkout-summary-total,
.cart_checkout_coupon input,
.cart_checkout_coupon .btn,
.cart_checkout_coupon button,
.add_gift_card_form input,
.add_gift_card_form button {
    border-radius: 0 !important;
}

/* ============================================================
   Section headings (section_heading() in
   class-pizza-custom-features-custom-checkout-ui.php) — the one
   design every checkout section title uses: accent-filled icon
   chip, uppercase "Step N" overline, h3 title, optional muted
   subline inline after the title. The payment instance adds
   --rule for extra top spacing (its 2px ink border was removed).
   All render outside #payment / non-AJAX, so fragment refreshes
   never touch them.
   ============================================================ */
body.woocommerce-checkout .pcf-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
}
/* payment instance: extra breathing room above, no rule */
body.woocommerce-checkout .pcf-section-heading--rule {
    margin: 24px 0 16px;
}
/* 40px matches the rendered text block (overline + the title's
   inherited-line-height line box), so the chip and the text read
   as one vertically centered line */
body.woocommerce-checkout .pcf-section-heading__icon {
    flex: none;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--pm-accent, #111);
    color: #fff;
    font-size: 16px;
    line-height: 1;
}
/* The title and subline share one line (the sub wraps under it on
   narrow screens) so a full heading is two lines tall, not three;
   only the overline gets its own line. */
body.woocommerce-checkout .pcf-section-heading__text {
    display: block;
    min-width: 0;
    /* pin the strut: the theme's inherited line-height pads the title's
       line box unevenly, pushing the visible text off the chip's center */
    line-height: 1.2;
}
body.woocommerce-checkout .pcf-section-heading__step {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--pm-accent, #111);
}
/* three class hops: outweighs the mobile form h3 rule (0,2,3) */
body.woocommerce-checkout .pcf-section-heading .pcf-section-heading__title {
    display: inline;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: #111;
}
body.woocommerce-checkout .pcf-section-heading__sub {
    display: inline;
    margin-left: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--pm-muted, #6b6b6b);
}

/* ============================================================
   Mobile spacing normalization (≤991px, the single-column
   checkout that pairs with the sticky summary bar).
   One 4px scale for every space on the page:
     40px  between top-level sections (cards, tip, payment) —
           the sections are flat (no card chrome on phones), so
           the beat alone carries the separation
     32px  after the order-steps bar and the sticky summary bar
     24px  before the final consent/place-order cluster
     16px  inside cards / between component groups
     12px  between form fields, stacked options, toggle rows
      8px  sibling gaps (button pairs, pills)
   Tap targets: 44px for every control; the 48px Place Order CTA
   is the one deliberate exception.
   This section is last in the file on purpose: it out-orders
   every equal-specificity rule above it, and carries !important
   only where the rule it replaces has it.
   ============================================================ */
@media (max-width: 991px) {

    /* --- Section rhythm: a single 40px beat between sections --- */
    body.woocommerce-checkout .pizzaro-order-steps {
        padding-bottom: 16px;
        margin: 32px 0 !important; /* equal air above and below the bar */
    }
    body.woocommerce-checkout .checkout-summary-toggle {
        margin: 0 0 32px;
    }
    body.woocommerce-checkout .restaurant-block {
        margin-bottom: 40px;
    }
    /* no top margin — the preceding section's 40px carries the beat
       (different bootstrap columns, margins can't collapse) */
    body.woocommerce-checkout #pizza-tip-content {
        margin: 0;
        padding: 16px 0 0;
    }
    /* the payment heading opens its section with the same 40px beat */
    body.woocommerce-checkout .pcf-section-heading--rule {
        margin: 40px 0 16px;
    }

    /* --- In-card rhythm --- */
    body.woocommerce-checkout form.woocommerce-checkout h3 {
        margin: 0 0 12px;
    }
    body.woocommerce-checkout .orderDetails-content-tab {
        padding: 16px 0 0;
    }
    body.woocommerce-checkout .order-delivery-alert,
    body.woocommerce-checkout .order-schedule-alert {
        margin: 12px 0 0 !important;
    }
    body.woocommerce-checkout form.woocommerce-checkout .pi-condition-fees {
        padding: 16px 0;
    }

    /* --- Fields: 12px row gap, 44px controls, 14px inner padding --- */
    body.woocommerce-checkout form.woocommerce-checkout p.form-row {
        margin: 0 0 12px;
        padding: 0;
    }
    body.woocommerce-checkout form.woocommerce-checkout .form-group {
        margin-bottom: 12px;
    }
    /* inputs/selects only — #order_comments keeps its auto height */
    body.woocommerce-checkout input.form-control,
    body.woocommerce-checkout select.form-control {
        height: 44px !important;
        padding-left: 14px;
        padding-right: 14px;
    }
    body.woocommerce-checkout .order-details .form-control {
        margin-bottom: 12px !important;
    }

    /* --- Buttons: 44px targets, 14px side padding, centered flex --- */
    body.woocommerce-checkout .btn.btn-default {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 10px 14px;
    }
    body.woocommerce-checkout .btn.btn-default i {
        margin-right: 8px;
    }
    /* Pickup/Delivery tabs and ASAP/Schedule options: identical 2-up
       rows with an 8px gap instead of the 30px bootstrap gutter
       (tabs) / full-width stack (schedule options) */
    body.woocommerce-checkout #orderDetails-tabs,
    body.woocommerce-checkout .order-schedule-options {
        display: flex;
        gap: 8px;
        margin: 0 0 16px;
    }
    body.woocommerce-checkout #orderDetails-tabs::before,
    body.woocommerce-checkout #orderDetails-tabs::after,
    body.woocommerce-checkout .order-schedule-options::before,
    body.woocommerce-checkout .order-schedule-options::after {
        content: none;
    }
    body.woocommerce-checkout #orderDetails-tabs > div,
    body.woocommerce-checkout .order-schedule-options > div {
        flex: 1 1 0;
        float: none;
        width: auto;
        min-width: 0;
        padding: 0;
    }
    body.woocommerce-checkout #orderDetails-tabs { margin-bottom: 0; }
    body.woocommerce-checkout .order-schedule-options label {
        margin-bottom: 0;
    }
    body.woocommerce-checkout .tip-selector {
        min-height: 44px;
        padding: 10px 16px;
    }

    /* --- Checkbox opt-ins: flush left, 12px rhythm --- */
    body.woocommerce-checkout .woocommerce-billing-fields .checkbox {
        margin-left: 0;
    }
    body.woocommerce-checkout form.woocommerce-checkout .pi-cefw-optional-fees-list label,
    body.woocommerce-checkout form.woocommerce-checkout label.checkbox {
        margin: 12px 0 !important;
    }

    /* --- Payment: 16px groups, 44px method rows --- */
    /* the wallet toggles between the payment heading and the methods
       breathe a little wider than their desktop 8px */
    body.woocommerce-checkout .checkout-disclosure-toggle {
        margin: 12px 0;
    }
    body.woocommerce-checkout .checkout-disclosure-toggle[aria-controls="checkout-notes-panel"][aria-expanded="true"] {
        margin-bottom: 0;
    }
    body.woocommerce-checkout #payment ul.payment_methods {
        margin: 0 0 24px;
    }
    /* air before the consent + Place Order cluster */
    body.woocommerce-checkout .woocommerce-checkout-payment-buttons {
        margin-top: 24px;
    }
    body.woocommerce-checkout #payment .payment_methods li.wc_payment_method > label {
        padding: 12px 40px 12px 0; /* 12 + 20px line = 44px row */
    }
    body.woocommerce-checkout #payment .wc-stripe-saved-method__label {
        padding: 12px 40px 12px 0;
    }
    body.woocommerce-checkout #payment .payment_box {
        margin: 0 0 16px;
    }
    body.woocommerce-checkout #payment .wc-saved-payment-methods {
        margin: 4px 0 8px;
    }
    body.woocommerce-checkout #payment .wc-stripe-gateway-container {
        margin-top: 16px;
    }
    body.woocommerce-checkout #payment .wc-stripe-gateway-desc {
        margin: 0 0 12px;
    }
    body.woocommerce-checkout #payment .wc-stripe-save-source {
        margin: 16px 0;
    }
    body.woocommerce-checkout .sms_subscription {
        margin: 0 0 12px;
    }
    body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
        margin-bottom: 8px !important;
    }

    /* --- Open order overview: 16px top, gutters as everywhere --- */
    body.woocommerce-checkout.checkout-summary-open #order_review {
        padding: 16px 15px 132px;
    }
}