
/*
========================================
WATERFALL — THE ONE
CART COUPON DETAILS V4

Compatible with older CSS validators.
No :where(), :has(), minmax() or grid.
========================================
*/

/* 1. Coupon details container */

.woocommerce-cart .wf-one-cart-item dl.variation,
.woocommerce-checkout .wf-one-cart-item dl.variation {
    display: block !important;
    width: 100%;
    max-width: 100%;
    margin: 16px 0 !important;
    padding: 16px !important;
    background: #FAFAFA;
    border: 1px solid #E6E6E6;
    border-left: 4px solid #F1059A;
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.5;
}

/* 2. Reset default WooCommerce layout */

.woocommerce-cart .wf-one-cart-item dl.variation dt,
.woocommerce-cart .wf-one-cart-item dl.variation dd,
.woocommerce-checkout .wf-one-cart-item dl.variation dt,
.woocommerce-checkout .wf-one-cart-item dl.variation dd {
    display: block !important;
    margin: 0 !important;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

/* 3. Left column: Coupon names */

.woocommerce-cart .wf-one-cart-item dl.variation dt,
.woocommerce-checkout .wf-one-cart-item dl.variation dt {
    float: left !important;
    clear: both !important;
    width: 64% !important;
    padding: 9px 6px 9px 0 !important;
    color: #17232B;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

/* 4. Right column: Coupon values */

.woocommerce-cart .wf-one-cart-item dl.variation dd,
.woocommerce-checkout .wf-one-cart-item dl.variation dd {
    float: left !important;
    clear: none !important;
    width: 36% !important;
    padding: 9px 0 !important;
    color: #17232B;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

/* 5. Reset paragraph spacing */

.woocommerce-cart .wf-one-cart-item dl.variation dd p,
.woocommerce-checkout .wf-one-cart-item dl.variation dd p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit;
    line-height: inherit;
}

/* 6. Sports Coupons heading */

.woocommerce-cart .wf-one-cart-item dt.variation-SportsCoupons,
.woocommerce-checkout .wf-one-cart-item dt.variation-SportsCoupons {
    color: #000000 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.woocommerce-cart .wf-one-cart-item dd.variation-SportsCoupons,
.woocommerce-checkout .wf-one-cart-item dd.variation-SportsCoupons {
    color: #626569 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* 7. Allocated Credit separator */

.woocommerce-cart .wf-one-cart-item dt.variation-AllocatedSportsCredit,
.woocommerce-cart .wf-one-cart-item dd.variation-AllocatedSportsCredit,
.woocommerce-checkout .wf-one-cart-item dt.variation-AllocatedSportsCredit,
.woocommerce-checkout .wf-one-cart-item dd.variation-AllocatedSportsCredit {
    border-top: 1px solid #DDDDDD;
    padding-top: 14px !important;
    font-weight: 700 !important;
}

/* 8. Remaining Credit highlighted pink */

.woocommerce-cart .wf-one-cart-item dt.variation-RemainingAppCredit,
.woocommerce-cart .wf-one-cart-item dd.variation-RemainingAppCredit,
.woocommerce-checkout .wf-one-cart-item dt.variation-RemainingAppCredit,
.woocommerce-checkout .wf-one-cart-item dd.variation-RemainingAppCredit {
    color: #F1059A !important;
    font-weight: 800 !important;
}

/* 9. Mobile layout */

@media screen and (max-width: 767px) {

    .woocommerce-cart .wf-one-cart-item dl.variation,
    .woocommerce-checkout .wf-one-cart-item dl.variation {
        padding: 14px !important;
        margin: 14px 0 !important;
    }

    .woocommerce-cart .wf-one-cart-item dl.variation dt,
    .woocommerce-checkout .wf-one-cart-item dl.variation dt {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        padding: 10px 0 0 !important;
        font-size: 13px;
        text-align: left;
    }

    .woocommerce-cart .wf-one-cart-item dl.variation dd,
    .woocommerce-checkout .wf-one-cart-item dl.variation dd {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        padding: 2px 0 8px !important;
        font-size: 13px;
        text-align: left;
    }

    .woocommerce-cart .wf-one-cart-item dt.variation-AllocatedSportsCredit,
    .woocommerce-checkout .wf-one-cart-item dt.variation-AllocatedSportsCredit {
        margin-top: 8px !important;
    }

    .woocommerce-cart .wf-one-cart-item dd.variation-AllocatedSportsCredit,
    .woocommerce-checkout .wf-one-cart-item dd.variation-AllocatedSportsCredit {
        border-top: none;
        padding-top: 2px !important;
    }
}


/*
=========================================
WATERFALL — THE ONE
DESKTOP CART LAYOUT FIX V5

Fixes:
- Coupon names split into multiple words
- Price text wrapping
- Narrow 64% / 36% columns
- Desktop coupon readability

Mobile design remains unchanged.
=========================================
*/

@media screen and (min-width: 768px) {

    /* 1. Coupon details card */

    .woocommerce-cart .wf-one-cart-item dl.variation {

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 16px 0 !important;
        padding: 18px !important;

        overflow: hidden;

        background: #FAFAFA;

        border: 1px solid #E6E6E6;
        border-left: 4px solid #F1059A;
        border-radius: 8px;
    }

    /* 2. Remove two-column float layout */

    .woocommerce-cart .wf-one-cart-item dl.variation dt,
    .woocommerce-cart .wf-one-cart-item dl.variation dd {

        display: block !important;

        float: none !important;
        clear: both !important;

        width: 100% !important;
        max-width: 100% !important;

        text-align: left !important;

        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;

        box-sizing: border-box;
    }

    /* 3. Coupon name */

    .woocommerce-cart .wf-one-cart-item dl.variation dt {

        padding: 8px 0 0 !important;
        margin: 0 !important;

        color: #17232B;

        font-size: 13px;
        font-weight: 700;
        line-height: 1.5;
    }

    /* 4. Coupon amount */

    .woocommerce-cart .wf-one-cart-item dl.variation dd {

        padding: 2px 0 12px !important;
        margin: 0 !important;

        color: #17232B;

        font-size: 13px;
        font-weight: 600;
        line-height: 1.5;
    }

    .woocommerce-cart .wf-one-cart-item dl.variation dd p {

        margin: 0 !important;
        padding: 0 !important;
    }

    /* 5. Section heading */

    .woocommerce-cart .wf-one-cart-item
    dt.variation-SportsCoupons {

        padding-top: 0 !important;

        font-size: 15px;
        font-weight: 800;
    }

    .woocommerce-cart .wf-one-cart-item
    dd.variation-SportsCoupons {

        margin-bottom: 12px !important;

        color: #626569;
        font-size: 12px;
    }

    /* 6. Allocated credit separator */

    .woocommerce-cart .wf-one-cart-item
    dt.variation-AllocatedSportsCredit {

        border-top: 1px solid #DDDDDD;

        padding-top: 14px !important;
        margin-top: 6px !important;
    }

    .woocommerce-cart .wf-one-cart-item
    dd.variation-AllocatedSportsCredit {

        border-top: none !important;

        padding-top: 2px !important;
    }

    /* 7. Remaining credit */

    .woocommerce-cart .wf-one-cart-item
    dt.variation-RemainingAppCredit {

        color: #F1059A !important;

        font-weight: 800 !important;
    }

    .woocommerce-cart .wf-one-cart-item
    dd.variation-RemainingAppCredit {

        color: #17232B !important;

        font-weight: 800 !important;
    }
}


/*
========================================
WATERFALL — THE ONE
MOBILE CART TEXT FIX V6

Fix:
- Words splitting in the middle
- Non-Peak wrapping awkwardly
- Coupon information readability

Desktop layout remains unchanged.
========================================
*/

@media screen and (max-width: 767px) {

    /* Coupon information card */

    .woocommerce-cart .wf-one-cart-item dl.variation {

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        padding: 12px !important;
        margin: 14px 0 !important;

        box-sizing: border-box;
    }

    /* Prevent breaking words in the middle */

    .woocommerce-cart .wf-one-cart-item dl.variation dt,
    .woocommerce-cart .wf-one-cart-item dl.variation dd,
    .woocommerce-cart .wf-one-cart-item dl.variation dt *,
    .woocommerce-cart .wf-one-cart-item dl.variation dd * {

        overflow-wrap: normal !important;
        word-break: normal !important;

        -webkit-hyphens: none !important;
        hyphens: none !important;

        white-space: normal !important;
        letter-spacing: normal !important;
    }

    /* Coupon names */

    .woocommerce-cart .wf-one-cart-item dl.variation dt {

        display: block !important;

        float: none !important;
        clear: both !important;

        width: 100% !important;

        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;

        padding: 8px 0 0 !important;
        margin: 0 !important;
    }

    /* Coupon values */

    .woocommerce-cart .wf-one-cart-item dl.variation dd {

        display: block !important;

        float: none !important;
        clear: both !important;

        width: 100% !important;

        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.5 !important;

        padding: 2px 0 8px !important;
        margin: 0 !important;

        text-align: left !important;
    }

    /* Remove unnecessary spacing */

    .woocommerce-cart .wf-one-cart-item dl.variation dd p {

        margin: 0 !important;
        padding: 0 !important;
    }

    /* Keep summary labels readable */

    .woocommerce-cart .wf-one-cart-item
    dt.variation-AllocatedSportsCredit,

    .woocommerce-cart .wf-one-cart-item
    dt.variation-RemainingAppCredit {

        font-size: 12px !important;
        font-weight: 800 !important;

        padding-top: 12px !important;
    }

    /* Retain Waterfall brand styling */

    .woocommerce-cart .wf-one-cart-item
    dt.variation-RemainingAppCredit {

        color: #F1059A !important;
    }
}


/*
==========================================
WATERFALL — COUPON THREE-ROW LAYOUT
Mobile and Desktop
==========================================
*/

/* Row 2: Peak / Non-Peak and Quantity */

.woocommerce-cart .wf-one-cart-item .wf-pkg-coupon-slot,
.woocommerce-checkout .wf-one-cart-item .wf-pkg-coupon-slot {
    display: block !important;
    width: 100% !important;

    margin: 3px 0 2px !important;

    color: #626569 !important;
    font-size: 13px !important;
    font-weight: 600 !important;

    white-space: nowrap !important;
}

/* Row 3: Included coupon value */

.woocommerce-cart .wf-one-cart-item .wf-pkg-coupon-value,
.woocommerce-checkout .wf-one-cart-item .wf-pkg-coupon-value {
    display: block !important;
    width: 100% !important;

    color: #17232B !important;
    font-size: 13px !important;
    font-weight: 700 !important;

    white-space: normal !important;
}

/* Avoid extra paragraph spacing */

.woocommerce-cart .wf-one-cart-item dl.variation dd p,
.woocommerce-checkout .wf-one-cart-item dl.variation dd p {
    margin: 0 !important;
}

/* On smaller screens */

@media screen and (max-width: 767px) {

    .woocommerce-cart .wf-one-cart-item .wf-pkg-coupon-slot,
    .woocommerce-checkout .wf-one-cart-item .wf-pkg-coupon-slot {
        font-size: 12px !important;
    }

    .woocommerce-cart .wf-one-cart-item .wf-pkg-coupon-value,
    .woocommerce-checkout .wf-one-cart-item .wf-pkg-coupon-value {
        font-size: 12px !important;
    }
}


