/* ==========================================================
   WonderLab CartFlow — Cart Page Styles (v1.0.1+ / refined v1.0.3)

   Matches the visual design of the original Divi-snippet cart
   (recovered from wonderlab-cartflow_backup.zip), retargeted to
   the plugin-owned markup the [wonderlab_cart] shortcode now
   renders. Same brand palette, same card layout, same restrained
   button styling — just without the Divi selectors.

   Palette (from original):
     Ink:                #1f2430   (headings, body)
     Burgundy:           #851625   (primary action)
     Terracotta:         #8f3f2b   (subtotals / accents)
     Coral / peach:      #c69c82   (apply-coupon CTA)
     Card border:        #e7e2db
     Hairline:           #ddd
     Soft border:        #e5e5e5
     Progress gradient:  #6fdc8c → #ffd66b
   ========================================================== */


/* ----------------------------------------------------------
   PAGE WRAPPER
   ---------------------------------------------------------- */

.wlcf-cart-main-wrap {
    background: #fff;
    padding: 32px 20px 64px;
}

/* v1.0.20: explicit Geologica brand font (loaded via wlcf-cart-fonts
   dependency in class-wlcf-cart.php register_cart_assets()). Standard
   system-font fallback kicks in only during the brief loading window. */
/* v1.2.3: dropped the 1280px max-width — the cart page's outer container
   (Divi section / theme content area) already enforces the readable width
   constraint, and our extra cap was causing the cart to render narrower
   than the surrounding page chrome on wider viewports. */
.wlcf-cart {
    margin: 0 auto;
    color: #1f2430;
    font-family: 'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.wlcf-cart,
.wlcf-cart * {
    font-family: 'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.wlcf-cart-title {
    color: #1f2430;
    font-weight: 700;
    font-size: 28px;
    margin: 0 0 24px;
    letter-spacing: -0.3px;
}


/* ----------------------------------------------------------
   2-COLUMN PAGE GRID (products left, summary sidebar right)
   ---------------------------------------------------------- */

/* v1.2.4: bumped the left/right gap from 24px → 40px. With cart items +
   actions + voucher marketplace on the left and sidebar on the right,
   the previous 24px felt cramped — the eye couldn't easily separate
   the two columns. 40px gives a clean visual break between the two
   functional areas of the cart. */
.wlcf-cart-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

@media (max-width: 980px) {
    .wlcf-cart-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}


/* ----------------------------------------------------------
   LEFT COLUMN — PRODUCT LIST
   ---------------------------------------------------------- */

.wlcf-cart-main {
    min-width: 0;
}

.wlcf-cart-items {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Each cart item is a card — same 4-column grid layout as the
   original Divi cart, retargeted to .wlcf-cart-item-* areas.
   Col 1 (28px):    Remove (×), vertically centered
   Col 2 (96px):    Thumbnail, spans all 3 rows
   Col 3 (1fr):     Row 1 = name + variations meta, Row 2 = qty
   Col 4 (140px):   Row 1 = price (sale strikethrough), Row 2 = subtotal */
.wlcf-cart-item {
    display: grid;
    grid-template-columns: 28px 96px 1fr 140px;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "remove thumb info     price"
        "remove thumb qty      subtotal"
        "remove thumb qty      .";
    column-gap: 18px;
    row-gap: 10px;
    align-items: start;
    background: #fff;
    border: 1px solid #e7e2db;
    padding: 18px;
}

/* Thumbnail */
.wlcf-cart-item-thumb {
    grid-area: thumb;
    align-self: start;
}

.wlcf-cart-item-thumb img {
    width: 96px;
    max-width: 96px;
    height: auto;
    display: block;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Product info (name + sku + variations meta) */
.wlcf-cart-item-info {
    grid-area: info;
    min-width: 0;
    padding-top: 2px;
}

.wlcf-cart-item-name {
    color: #1f2430;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.45;
    margin-bottom: 4px;
}

.wlcf-cart-item-name a {
    color: #1f2430;
    text-decoration: none;
}

.wlcf-cart-item-name a:hover {
    color: #851625;
}

.wlcf-cart-item-sku {
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}

.wlcf-cart-item-meta {
    font-size: 13px;
    color: #555;
    margin-top: 2px;
}

.wlcf-cart-item-meta p {
    margin: 2px 0;
}

/* Price column — top row of col 4 (v1.0.32: brand red for consistency
   with the rest of the cart's price displays). */
.wlcf-cart-item-price {
    grid-area: price;
    color: #851625;
    text-align: right;
    font-size: 14px;
    min-height: 18px;
}

.wlcf-cart-item-price .amount,
.wlcf-cart-item-price .woocommerce-Price-amount {
    color: #851625;
}

.wlcf-cart-item-price del,
.wlcf-cart-item-price .wl-old-price {
    color: #7f7f7f;
    font-size: 14px;
    font-weight: 400;
    text-decoration: line-through;
}

/* Subtotal column — second row of col 4, brand red bold */
.wlcf-cart-item-subtotal {
    grid-area: subtotal;
    text-align: right;
    color: #851625;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    align-self: start;
}

.wlcf-cart-item-subtotal del,
.wlcf-cart-item-subtotal ins {
    all: unset;
}

.wlcf-cart-item-subtotal .amount,
.wlcf-cart-item-subtotal .woocommerce-Price-amount {
    color: #851625;
    font-size: 16px;
    font-weight: 700;
}

/* Quantity row — col 3 row 2, with "Quantity:-" prefix label */
.wlcf-cart-item-qty {
    grid-area: qty;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 6px;
}

.wlcf-cart-item-qty::before {
    content: "Quantity:-";
    color: #1f2430;
    font-size: 14px;
    font-weight: 400;
    margin-right: 4px;
}

.wlcf-cart-item-qty .quantity {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.wlcf-cart-item-qty .quantity input.qty {
    width: 28px;
    min-height: 0;
    height: auto;
    padding: 0;
    border: none;
    background: transparent;
    color: #1f2430;
    text-align: center;
    box-shadow: none;
    font-size: 15px;
    font-weight: 500;
    -moz-appearance: textfield;
    appearance: textfield;
}

.wlcf-cart-item-qty .quantity input.qty::-webkit-outer-spin-button,
.wlcf-cart-item-qty .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* v1.0.25: circular outline +/− buttons. Broader selectors + !important
   so we win against whatever's injecting the buttons (Divi WC integration,
   YITH, theme, our own wlcf-quantity.js). Anything inside our cart's qty
   wrapper with .minus or .plus class becomes a circle outline chip. */
.wlcf-cart .quantity .minus,
.wlcf-cart .quantity .plus,
.wlcf-cart-item-qty .minus,
.wlcf-cart-item-qty .plus,
.wlcf-cart-item-qty button.minus,
.wlcf-cart-item-qty button.plus {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #1f2430 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #1f2430 !important;
    box-shadow: none !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wlcf-cart .quantity .minus:hover,
.wlcf-cart .quantity .plus:hover,
.wlcf-cart-item-qty .minus:hover,
.wlcf-cart-item-qty .plus:hover {
    background: #851625 !important;
    border-color: #851625 !important;
    color: #fff !important;
}

.wlcf-cart-item-qty-display {
    color: #1f2430;
    font-size: 15px;
    font-weight: 400;
}

/* Remove × — col 1, vertically centered against the full card height.
   v1.0.22: align-self: stretch makes the remove cell span the full card
   height (overriding the grid container's align-items: start), and the
   flex centering inside puts the × at the vertical middle. Larger glyph. */
.wlcf-cart-item-remove {
    grid-area: remove;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
}

.wlcf-cart-item-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #1f2430;
    font-size: 24px;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
    transition: color 0.15s ease, background 0.15s ease;
}

.wlcf-cart-item-remove-btn:hover {
    color: #851625;
    background: #fff5f6;
}

/* Mobile breakpoint — collapse to 2 columns (thumb + everything-else) */
@media (max-width: 980px) {
    .wlcf-cart-item {
        grid-template-columns: 76px 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "thumb info"
            "thumb qty"
            "thumb remove"
            "thumb subtotal";
        column-gap: 14px;
        row-gap: 8px;
    }
    .wlcf-cart-item-thumb {
        grid-area: thumb;
    }
    .wlcf-cart-item-thumb img {
        width: 76px;
        max-width: 76px;
    }
    .wlcf-cart-item-info {
        grid-area: info;
    }
    .wlcf-cart-item-qty {
        grid-area: qty;
    }
    .wlcf-cart-item-remove {
        grid-area: remove;
        justify-content: flex-start;
    }
    .wlcf-cart-item-subtotal {
        grid-area: subtotal;
        text-align: left;
    }
    .wlcf-cart-item-price {
        display: none; /* mobile: only subtotal visible to save vertical space */
    }
}


/* ----------------------------------------------------------
   LEFT COLUMN — ACTIONS ROW (Continue / Update Cart)
   ---------------------------------------------------------- */

.wlcf-cart-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    padding-top: 18px;
}

/* v1.0.22: brand-red, bold, with a leading ← arrow. Standout link. */
.wlcf-cart-continue {
    color: #851625;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.wlcf-cart-continue::before {
    content: "←";
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
}

.wlcf-cart-continue:hover,
.wlcf-cart-continue:focus {
    color: #6b1020;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ----------------------------------------------------------
   RIGHT COLUMN — SIDEBAR
   ---------------------------------------------------------- */

/* Sidebar — sticky on desktop. min-width: 0 lets it shrink inside the
   minmax(0, 1fr) track instead of pushing past its allocation. */
.wlcf-cart .wlcf-cart-sidebar {
    position: sticky;
    top: 24px;
    min-width: 0;
    width: 100% !important;
    box-sizing: border-box;
    display: block !important;
}

.wlcf-cart .wlcf-cart-main {
    min-width: 0;
    width: 100% !important;
    box-sizing: border-box;
}

@media (max-width: 980px) {
    .wlcf-cart-sidebar {
        position: static;
        top: auto;
    }
}

@media (max-width: 600px) {
    .wlcf-sidebar-section {
        padding: 18px 18px;
    }
    .wlcf-section--checkout {
        padding: 14px 18px 18px;
    }

    /* Tighten Apply button padding on narrow viewports so it fits beside
       the input comfortably. Input padding already at 10px on all sizes. */
    #wl_apply_coupon,
    .wlcf-section--coupon .wlcf-btn-secondary {
        padding: 0 18px;
    }
}

/* v1.0.20: ONE unified Order Summary panel.
   The previous design had 4-5 floating cards stacked vertically. The new
   design wraps everything in a single bordered card with internal
   hairline dividers between sections. Reads as one coherent panel. */
.wlcf-sidebar-panel {
    background: #fff;
    border: 1px solid #e7e2db;
    border-radius: 0;
    overflow: hidden;
}

.wlcf-sidebar-section {
    padding: 22px 22px;
    border-bottom: 1px solid #ece6dd;
}

.wlcf-sidebar-section:last-child {
    border-bottom: none;
}

/* The checkout section has no internal content padding-bottom needed —
   its button visually IS the section. */
.wlcf-section--checkout {
    padding: 18px 22px 22px;
}

/* Section labels — consistent uppercase micro-label across all sections.
   The Points System's own heading uses .wl-points-heading; we override
   it inside our panel for visual consistency. */
.wlcf-section-label,
.wlcf-sidebar-panel .wl-points-heading {
    margin: 0 0 12px;
    color: #1f2430;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.4;
}

/* The hidden WC totals partial — kept in the DOM for JS reads. */
.wlcf-wc-totals {
    display: none;
}


/* ----------------------------------------------------------
   SIDEBAR — COUPON BOX
   The discount input + Apply uses a peach/coral CTA (NOT the
   burgundy primary), matching the original snippet's design.
   ---------------------------------------------------------- */

/* v1.0.22: input + Apply joined as a single pill (rounded on the
   outside corners only) for visual consistency with the checkout's
   pill buttons. Apply button uses the brand red. */
.wlcf-coupon-row {
    display: flex;
    align-items: stretch;
}

.wlcf-coupon-input,
#wl_coupon_code {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: 1px solid #ddd;
    border-right: none;
    padding: 15px !important;
    background: #fff;
    color: #1f2430;
    box-sizing: border-box;
    font-size: 12.5px !important;
    border-radius: 22px 0 0 22px;
    -webkit-appearance: none;
    appearance: none;
}
.wlcf-coupon-input::placeholder,
#wl_coupon_code::placeholder {
    color: #888;
}

.wlcf-coupon-input:focus {
    outline: none;
    border-color: #851625;
}

#wl_apply_coupon,
.wlcf-section--coupon .wlcf-btn-secondary {
    height: 44px;
    padding: 0 22px;
    background: #851625;
    color: #fff;
    border: 1px solid #851625;
    border-radius: 0 22px 22px 0;
    box-shadow: none;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

#wl_apply_coupon:hover,
.wlcf-section--coupon .wlcf-btn-secondary:hover {
    background: #6b1020;
    border-color: #6b1020;
    color: #fff;
}

.wlcf-coupon-native {
    display: none !important;
}


/* ----------------------------------------------------------
   SIDEBAR — POINTS REDEMPTION
   The .wl-points-* selectors are owned by the Points System
   plugin (see its styles.php). We're inside .wlcf-sidebar-panel
   so we can override their styles when needed for cart-side polish.
   ---------------------------------------------------------- */

.wl-points-redemption {
    /* layout-only — visual styling owned by Points System */
}

/* v1.0.24: "Point Balance" label + the actual point value bumped to
   font-weight 800 for visual emphasis inside the cart panel. */
.wlcf-sidebar-panel .wl-points-redemption .wl-line > span {
    font-weight: 800;
}

/* v1.0.25: polish the "points applied" state. The Points System renders:
       <div class="wl-redeem-applied">
           <p class="wl-redeem-applied-text">✓ Using 1000 points (RM 10 off)</p>
           <button class="wl-redeem-remove">Remove Points</button>
       </div>
   The default style was a green-text line + a grey full-width button. Now
   it sits in a soft burgundy-tinted card with the message on the left and
   a pill-style Remove Points button on the right. Wraps on narrow widths. */
.wlcf-sidebar-panel .wl-redeem-applied {
    background: #fff5f6;
    border: 1px solid rgba(133, 22, 37, 0.15);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.wlcf-sidebar-panel .wl-redeem-applied-text {
    margin: 0;
    color: #851625;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wlcf-sidebar-panel .wl-redeem-applied-line {
    display: block;
}

.wlcf-sidebar-panel .wl-redeem-applied-off {
    font-weight: 500;
    font-size: 12.5px;
    opacity: 0.9;
}

.wlcf-sidebar-panel .wl-redeem-remove {
    background: transparent !important;
    border: 1px solid #851625 !important;
    color: #851625 !important;
    border-radius: 999px !important;
    padding: 7px 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    width: auto !important;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.wlcf-sidebar-panel .wl-redeem-remove:hover {
    background: #851625 !important;
    color: #fff !important;
}


/* ----------------------------------------------------------
   SIDEBAR — FREE SHIPPING PROGRESS CARD (v1.0.32)
   Transparent background with a 1px outline border — the progress
   bar already supplies colour, so a tinted fill would compete with
   it. Outline-only keeps the card distinct from the plain summary
   rows without visually clashing with the gradient progress bar.
   ---------------------------------------------------------- */

.wl-delivery-box {
    background: transparent;
    border: 1px solid rgba(133, 22, 37, 0.15);
    border-radius: 10px;
    padding: 14px;
}

.wl-delivery-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #1f2430;
    line-height: 1.4;
}

.wl-delivery-top span:first-child {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
}

/* Price stays hidden — original behavior (the cart subtotal
   already conveys the shipping price separately). */
.wl-delivery-price {
    display: none !important;
}

.wl-progress-bar {
    height: 6px;
    background: #f0e9dd;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.wl-progress-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(to right, #6fdc8c, #ffd66b);
    transition: width 0.4s ease;
}

.wl-delivery-text {
    margin: 0;
    font-size: 14px;
    color: #1f2430;
    line-height: 1.5;
}

.wl-delivery-text strong {
    font-weight: 700;
    color: #851625;
}


/* ----------------------------------------------------------
   SIDEBAR — BOTTOM SUMMARY
   Flat weight 400 throughout (not a bolded total row). Matches
   the original — the visual emphasis comes from the per-line
   item subtotals (terracotta), not the grand-total row.
   ---------------------------------------------------------- */

/* v1.0.30: unified summary section. Subtotal / coupon rows / points then
   Order Total (mid-divider), the FSI progress bar embedded, then Shipping
   and Grand Total. */
.wlcf-bottom-summary {
    margin: 0;
    padding: 0;
    background: transparent;
}

.wlcf-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 7px 0;
    color: #1f2430;
    font-size: 14px;
    line-height: 1.45;
}

.wlcf-bottom-row > span:first-child {
    font-weight: 400;
    color: #555;
}

.wlcf-bottom-row > span:last-child {
    text-align: right;
    font-weight: 500;
    color: #1f2430;
}

/* ─── "Applied Coupon" header above the coupon list (v1.0.31) ─── */
.wlcf-coupon-list-header {
    margin-top: 6px;
    padding-bottom: 2px;
}

.wlcf-coupon-list-header > span:first-child {
    font-weight: 600 !important;
    color: #1f2430 !important;
    font-size: 12.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ─── Coupon rows (one per applied coupon, removable ×) ─── */
.wlcf-coupon-row {
    align-items: center;
    padding-left: 8px;
}

.wlcf-coupon-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600 !important;
    color: #1f2430 !important;
    letter-spacing: 0.04em;
    font-size: 13px;
}

.wlcf-coupon-amount {
    color: #851625 !important;
    font-weight: 600 !important;
}

.wlcf-remove-coupon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: transparent;
    color: #999;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.wlcf-remove-coupon:hover,
.wlcf-remove-coupon:focus {
    background: #851625;
    color: #fff;
    text-decoration: none;
}

.wlcf-coupon-applied-badge {
    display: inline-block;
    background: #fff5f6;
    border: 1px solid rgba(133, 22, 37, 0.2);
    color: #851625;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ─── Order Total row (mid-divider) ─── */
.wlcf-bottom-row.wlcf-bottom-order-total {
    margin-top: 6px;
    margin-bottom: 12px;
    padding-top: 12px;
    padding-bottom: 4px;
    border-top: 1px solid #ece6dd;
    font-size: 15px;
}

.wlcf-bottom-row.wlcf-bottom-order-total > span:first-child,
.wlcf-bottom-row.wlcf-bottom-order-total > span:last-child {
    font-weight: 700;
    color: #1f2430;
}

/* ─── Embedded FSI card between Order Total and Shipping (v1.0.31) ───
   Designed as a distinct brand-tinted callout so the free-shipping nudge
   reads as a separate "deal" element rather than just another summary row. */
.wlcf-summary-fsi {
    margin: 14px 0;
}

/* ─── Grand Total row (anchor of the panel) ─── */
.wlcf-bottom-row.wlcf-bottom-total {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid #ece6dd;
    font-size: 16px;
}

.wlcf-bottom-row.wlcf-bottom-total > span:first-child {
    font-weight: 700;
    color: #851625;
}

.wlcf-bottom-row.wlcf-bottom-total > span:last-child {
    font-weight: 700;
    color: #851625;
}

/* ─── WC notices wrapper at the top of the cart page (v1.1.0) ───
   Styled to match the "Points applied" card design. Selectors are
   prefixed with `.wlcf-cart` and use `!important` so they reliably
   beat the theme / Divi WC integration / WC defaults regardless of
   stylesheet load order. */
.wlcf-cart .wlcf-cart-notices {
    margin: 0 0 24px;
}

.wlcf-cart .wlcf-cart-notices:empty {
    display: none;
}

.wlcf-cart .wlcf-cart-notices .woocommerce-message,
.wlcf-cart .wlcf-cart-notices .woocommerce-info,
.wlcf-cart .wlcf-cart-notices .woocommerce-error {
    margin: 0 0 10px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(133, 22, 37, 0.15) !important;
    background: #fff5f6 !important;
    color: #851625 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    list-style: none !important;
    box-shadow: none !important;
}

.wlcf-cart .wlcf-cart-notices .woocommerce-message:last-child,
.wlcf-cart .wlcf-cart-notices .woocommerce-info:last-child,
.wlcf-cart .wlcf-cart-notices .woocommerce-error:last-child {
    margin-bottom: 0 !important;
}

.wlcf-cart .wlcf-cart-notices .woocommerce-message::before,
.wlcf-cart .wlcf-cart-notices .woocommerce-info::before,
.wlcf-cart .wlcf-cart-notices .woocommerce-error::before {
    display: none !important;
}

.wlcf-cart .wlcf-cart-notices .woocommerce-error {
    border-color: rgba(183, 28, 28, 0.25) !important;
    background: #fff4f4 !important;
    color: #b71c1c !important;
}

.wlcf-cart .wlcf-cart-notices a {
    color: inherit !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

.wlcf-cart .wlcf-cart-notices ul,
.wlcf-cart .wlcf-cart-notices li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Strip default WC "Continue shopping" / "View Deals" / similar action
   buttons that some plugins or themes inject inside notices — they
   don't fit the redesigned card. */
.wlcf-cart .wlcf-cart-notices .button,
.wlcf-cart .wlcf-cart-notices a.button {
    display: none !important;
}

.wlcf-bottom-row.wlcf-bottom-total > span {
    font-weight: 400;
}

/* Coupon chip rendered inline in the discount row */
.wlcf-coupon-chip {
    display: inline-block;
    margin-right: 6px;
    font-size: 14px;
    color: #1f2430;
}

.wlcf-coupon-chip a {
    color: #851625;
    text-decoration: none;
    margin-left: 4px;
    font-weight: 700;
}


/* ----------------------------------------------------------
   BUTTONS — burgundy primary (square corners), no border-radius
   ---------------------------------------------------------- */

.wlcf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 0;
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.wlcf-btn-primary {
    background: #851625;
    color: #fff;
}

.wlcf-btn-primary:hover,
.wlcf-btn-primary:focus {
    background: #851625;
    color: #fff;
    transform: scale(1.02);
}

.wlcf-btn-secondary {
    background: #851625;
    color: #fff;
}

.wlcf-btn-secondary:hover,
.wlcf-btn-secondary:focus {
    background: #851625;
    color: #fff;
    transform: scale(1.02);
}

/* Proceed to Checkout — pill (border-radius: 999px) matching the
   checkout page's Continue / Place Order buttons for cross-page button
   consistency (v1.0.22). 48px tall, brand-burgundy, soft lift on hover. */
.wlcf-cart-checkout {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 22px;
    background: #851625;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: 1px solid #851625;
    border-radius: 999px;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 48px;
    line-height: 1.2;
}

.wlcf-cart-checkout:hover,
.wlcf-cart-checkout:focus {
    background: #6b1020;
    border-color: #6b1020;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(133, 22, 37, 0.18);
}


/* ----------------------------------------------------------
   EMPTY CART STATE
   ---------------------------------------------------------- */

.wlcf-cart-empty {
    text-align: center;
    padding: 48px 20px;
}

.wlcf-cart-empty .wlcf-cart-title {
    text-align: center;
    margin-bottom: 24px;
    color: #1f2430;
}

.wlcf-cart-empty-message {
    margin: 0 auto 24px;
    max-width: 480px;
    font-size: 15px;
    line-height: 1.5;
    color: #1f2430;
}

.wlcf-cart-empty-actions {
    margin: 0;
}

.wlcf-cart-empty-actions .wlcf-btn {
    padding: 14px 28px;
}


/* ============================================================
   CLAIM A VOUCHER — coupon marketplace (v1.2.0)
   ============================================================
   Each card is a brand-bordered ticket. Desktop stacks vertically;
   mobile becomes a horizontal scrolling carousel with snap-points. */

.wlcf-voucher-marketplace {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid #ece6dd;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Establishes a containing block so the inner flex grid can't push
       past the parent cart-main column on Divi-themed pages where global
       overflow rules might otherwise let it spill. */
    min-width: 0;
}

.wlcf-voucher-grid {
    width: 100%;
    box-sizing: border-box;
}

.wlcf-voucher-action {
    flex-shrink: 0;
}

.wlcf-voucher-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.wlcf-voucher-heading {
    margin: 0;
    color: #1f2430;
    font-family: 'Geologica', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.2px;
}

.wlcf-voucher-subtitle {
    margin: 0;
    color: #777;
    font-size: 13px;
    font-weight: 500;
}

/* v1.2.1: 4-up grid on desktop instead of one-card-per-row stack. Cards
   themselves now stack vertically inside (body on top, action button
   at the bottom) so the narrow-column shape reads well. */
.wlcf-voucher-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1200px) {
    .wlcf-voucher-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .wlcf-voucher-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .wlcf-voucher-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Card (v1.2.1) — vertical layout for the 4-up grid ─────── */
.wlcf-voucher-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    background: #fff;
    border: 1px solid #ece6dd;
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    position: relative;
}

.wlcf-voucher-card.is-eligible {
    border-color: rgba(133, 22, 37, 0.4);
    box-shadow: 0 1px 0 rgba(133, 22, 37, 0.04);
}

.wlcf-voucher-card.is-eligible:hover {
    border-color: #851625;
    box-shadow: 0 6px 18px rgba(133, 22, 37, 0.12);
    transform: translateY(-1px);
}

.wlcf-voucher-card.is-applied {
    border-color: #851625;
    background: #fff5f6;
}

.wlcf-voucher-card.is-locked {
    opacity: 0.55;
}

/* v1.2.5: significantly more compact — narrower padding, smaller fonts
   on every element. With only the first 4 vouchers visible by default,
   smaller cards keep the marketplace as a focused row rather than a
   dominant section. */
.wlcf-voucher-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 10px 6px;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ─── Action button row (stacked below body) ─── */
.wlcf-voucher-action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px 10px;
    border-left: none;
    border-top: 1px dashed #ece6dd;
    flex-shrink: 0;
}

.wlcf-voucher-btn {
    width: 100%;
    padding: 6px 10px;
    font-size: 11px;
    letter-spacing: 0.03em;
}

.wlcf-voucher-code {
    color: #851625;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
    line-height: 1.2;
}

.wlcf-voucher-summary {
    color: #1f2430;
    font-size: 11.5px;
    line-height: 1.35;
    margin-bottom: 5px;
}

.wlcf-voucher-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 11px;
}

.wlcf-voucher-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    line-height: 1.3;
}

.wlcf-voucher-status--ok      { color: #1f7a3d; }
.wlcf-voucher-status--applied { color: #851625; }
.wlcf-voucher-status--near    { color: #b56304; }
.wlcf-voucher-status--lock    { color: #888; }

.wlcf-voucher-expires {
    color: #999;
    font-weight: 500;
}

/* Tooltip on the ⓘ for "conditions not yet met" entries */
.wlcf-voucher-tooltip-anchor {
    position: relative;
    color: #888;
    cursor: help;
    margin-left: 2px;
    outline: none;
}

.wlcf-voucher-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    max-width: 280px;
    background: #1f2430;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    white-space: normal;
    z-index: 10;
}

.wlcf-voucher-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1f2430;
}

.wlcf-voucher-tooltip-anchor:hover .wlcf-voucher-tooltip,
.wlcf-voucher-tooltip-anchor:focus .wlcf-voucher-tooltip {
    opacity: 1;
    pointer-events: auto;
}

/* Button styling (action row is defined earlier — stacked under body).
   v1.2.6: all three button states (apply / applied / lock) use the same
   <button> element + same base styles. Identical width / height regardless
   of state — previously the `<span>` element used for Claimed sized
   differently from the `<button>` used for Claim, causing visible
   size mismatches across cards. */
.wlcf-voucher-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    line-height: 1.2;
    box-sizing: border-box;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wlcf-voucher-btn:disabled {
    /* Identical sizing — `disabled` doesn't change layout. */
    cursor: default;
    opacity: 1;
}

.wlcf-voucher-btn--apply {
    background: #851625;
    color: #fff;
    border-color: #851625;
}

.wlcf-voucher-btn--apply:hover,
.wlcf-voucher-btn--apply:focus {
    background: #6b1020;
    border-color: #6b1020;
}

.wlcf-voucher-btn--applied {
    background: transparent;
    color: #851625;
    border-color: #851625;
    cursor: default;
}

.wlcf-voucher-btn--lock {
    background: transparent;
    color: #aaa;
    border-color: #ddd;
    cursor: not-allowed;
    text-transform: none;
    font-size: 14px;
}

/* ─── Show-more toggle (v1.2.4) ─── */
.wlcf-voucher-card.is-hidden {
    display: none;
}

.wlcf-voucher-more-wrap {
    margin-top: 14px;
    text-align: center;
}

.wlcf-voucher-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid #ece6dd;
    color: #851625;
    border-radius: 999px;
    padding: 9px 22px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.wlcf-voucher-more-btn:hover,
.wlcf-voucher-more-btn:focus {
    background: #fff5f6;
    border-color: rgba(133, 22, 37, 0.4);
    outline: none;
}

/* Default state: "Show all" label visible, "Show less" hidden. */
.wlcf-voucher-more-btn__hide { display: none; }

/* Expanded state: flip the labels. */
.wlcf-voucher-marketplace--expanded .wlcf-voucher-more-btn__show { display: none; }
.wlcf-voucher-marketplace--expanded .wlcf-voucher-more-btn__hide { display: inline; }


/* ─── Advanced Coupons free-gift line (WLCF_Free_Gift) ─────────────── */
.wlcf-cart-item-gift-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #851625;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
}
.wlcf-free-gift-price {
    color: #851625;
    font-weight: 600;
}