/* =========================================================
   CHICKENS FAST FOOD - CUSTOM CART PAGE
   FINAL CLEAN VERSION
========================================================= */

:root{
    --cf-red: #ff1717;
    --cf-red-dark: #e31313;
    --cf-text: #171717;
    --cf-muted: #7c7c7c;
    --cf-border: #e9e9e9;
    --cf-soft-border: #f1c6ad;
    --cf-bg: #f7f7f7;
    --cf-white: #ffffff;
    --cf-soft: #fff8f3;
}

body{
    margin: 0;
    background: var(--cf-bg);
    color: var(--cf-text);
    font-family: "Poppins", sans-serif;
}

body.page-template-page-cart{
    background: var(--cf-bg);
}

/* =========================================================
   WRAPPER
========================================================= */
.cart-wrapper{
    max-width: 1280px;
    margin: 0 auto;
    padding: 34px 20px 70px;
}

/* =========================================================
   TOPBAR
========================================================= */
.cart-topbar{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid #1f1f1f;
}

.cart-heading h1{
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
    color: #121212;
}

.cart-heading p{
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
    color: #777777;
}

/* =========================================================
   BACK BUTTON - RED
========================================================= */
body.page-template-page-cart .cart-wrapper a.cart-back-btn,
body.page-template-page-cart .cart-wrapper a.cart-back-btn:link,
body.page-template-page-cart .cart-wrapper a.cart-back-btn:visited,
body.page-template-page-cart .cart-wrapper a.cart-back-btn:hover,
body.page-template-page-cart .cart-wrapper a.cart-back-btn:focus,
body.page-template-page-cart .cart-wrapper a.cart-back-btn:active,
body.page-template-page-cart .cart-wrapper .cart-back-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    background: var(--cf-red) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid var(--cf-red) !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: .2s ease !important;
}

body.page-template-page-cart .cart-wrapper a.cart-back-btn:hover,
body.page-template-page-cart .cart-wrapper .cart-back-btn:hover{
    background: var(--cf-red-dark) !important;
    border-color: var(--cf-red-dark) !important;
    color: #ffffff !important;
}

/* =========================================================
   LAYOUT
========================================================= */
.cart-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 312px;
    gap: 16px;
    align-items: start;
}

/* REMOVE OUTLINES FROM BOTH MAIN CARDS */
.cart-card,
.summary-card{
    background: var(--cf-white);
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 18px;
}

.cart-card{
    overflow: hidden;
}

/* =========================================================
   TABLE HEAD
========================================================= */
.cart-table-head{
    display: grid;
    grid-template-columns: minmax(0, 2.7fr) 1fr .9fr 1fr auto;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid #2b2b2b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #6d6d6d;
}

.cart-table-head span:last-child{
    text-align: right;
}

/* =========================================================
   CART ROW
========================================================= */
.cart-row{
    display: grid;
    grid-template-columns: minmax(0, 2.7fr) 1fr .9fr 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 16px 18px;
    border-top: none !important;
}

.cart-product{
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cart-product-thumb-link{
    display: inline-flex;
    flex-shrink: 0;
}

.cart-product-image,
.cart-product img{
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid #efefef;
    background: #fff;
}

.cart-product-info{
    min-width: 0;
}

.cart-product-title{
    margin: 0 0 4px;
    font-size: 15px;
    line-height: 1.18;
    font-weight: 700;
    color: #111111;
}

.cart-product-title a,
.cart-product-title a:link,
.cart-product-title a:visited{
    color: #111111 !important;
    text-decoration: none !important;
}

.cart-product-title a:hover{
    color: var(--cf-red) !important;
}

.cart-product-meta{
    margin: 0;
    font-size: 12px;
    color: #8b8b8b;
}

.cart-product-info dl.variation{
    margin: 6px 0 0;
    font-size: 12px;
    color: #8b8b8b;
}

.cart-product-info dl.variation dt,
.cart-product-info dl.variation dd{
    display: inline;
    margin: 0;
}

.cart-product-info dl.variation dd{
    margin-right: 8px;
}

.cart-price,
.cart-total{
    font-size: 14px;
    font-weight: 700;
    color: #222222;
}

/* =========================================================
   QTY
========================================================= */
.cart-qty-wrap{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.cart-qty-wrap .quantity{
    margin: 0;
    width: 100%;
}

.cart-qty-wrap input.qty{
    width: 86px !important;
    max-width: 100% !important;
    height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid #dddddd !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #111111 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: textfield !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
}

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

.cart-qty-note{
    font-size: 11px;
    line-height: 1;
    color: #9a9a9a;
}

/* =========================================================
   REMOVE BUTTON
========================================================= */
.cart-action{
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

body.page-template-page-cart .cart-wrapper a.remove-btn,
body.page-template-page-cart .cart-wrapper a.remove-btn:link,
body.page-template-page-cart .cart-wrapper a.remove-btn:visited,
body.page-template-page-cart .cart-wrapper .remove-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 96px !important;
    max-width: 140px !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    background: #ffffff !important;
    background-image: none !important;
    color: var(--cf-red) !important;
    border: 1px solid #ffb8b8 !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: .2s ease !important;
}

body.page-template-page-cart .cart-wrapper a.remove-btn:hover,
body.page-template-page-cart .cart-wrapper .remove-btn:hover{
    background: #fff4f4 !important;
    color: var(--cf-red-dark) !important;
    border-color: #ffaeae !important;
}

/* =========================================================
   SUMMARY
========================================================= */
.summary-card{
    padding: 16px 14px 14px;
    overflow: hidden;
}

.summary-title{
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 800;
    color: #111111;
}

.summary-line{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    font-size: 14px;
    color: #252525;
}

.summary-line .muted-text{
    color: #8b8b8b;
    font-size: 13px;
}

.summary-divider{
    height: 1px;
    margin: 4px 0 8px;
    background: #2b2b2b;
}

.summary-total{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0 14px;
}

.summary-total span:first-child{
    font-size: 14px;
    font-weight: 700;
    color: #222222;
}

.summary-total span:last-child{
    font-size: 18px;
    font-weight: 800;
    color: #111111;
}

/* =========================================================
   SUMMARY BUTTONS
========================================================= */
body.page-template-page-cart .cart-wrapper .summary-card .cart-btn,
body.page-template-page-cart .cart-wrapper .summary-card a.cart-btn,
body.page-template-page-cart .cart-wrapper .summary-card button.cart-btn,
body.page-template-page-cart .cart-wrapper .summary-card input.cart-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 10px 0 0 !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    outline: none !important;
    background-image: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: .2s ease !important;
    box-sizing: border-box !important;
}

/* UPDATE CART - RED */
body.page-template-page-cart .cart-wrapper .summary-card .cart-btn-update,
body.page-template-page-cart .cart-wrapper .summary-card a.cart-btn-update,
body.page-template-page-cart .cart-wrapper .summary-card button.cart-btn-update,
body.page-template-page-cart .cart-wrapper .summary-card input.cart-btn-update{
    background: var(--cf-red) !important;
    color: #ffffff !important;
    border: 1px solid var(--cf-red) !important;
}

body.page-template-page-cart .cart-wrapper .summary-card .cart-btn-update:hover,
body.page-template-page-cart .cart-wrapper .summary-card a.cart-btn-update:hover,
body.page-template-page-cart .cart-wrapper .summary-card button.cart-btn-update:hover,
body.page-template-page-cart .cart-wrapper .summary-card input.cart-btn-update:hover{
    background: var(--cf-red-dark) !important;
    color: #ffffff !important;
    border-color: var(--cf-red-dark) !important;
    cursor:pointer;
}

/* CLEAR CART */
body.page-template-page-cart .cart-wrapper .summary-card .cart-btn-clear,
body.page-template-page-cart .cart-wrapper .summary-card a.cart-btn-clear,
body.page-template-page-cart .cart-wrapper .summary-card button.cart-btn-clear,
body.page-template-page-cart .cart-wrapper .summary-card input.cart-btn-clear{
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #ececec !important;
}

body.page-template-page-cart .cart-wrapper .summary-card .cart-btn-clear:hover,
body.page-template-page-cart .cart-wrapper .summary-card a.cart-btn-clear:hover,
body.page-template-page-cart .cart-wrapper .summary-card button.cart-btn-clear:hover,
body.page-template-page-cart .cart-wrapper .summary-card input.cart-btn-clear:hover{
    background: #fcfcfc !important;
    color: #111111 !important;
    border-color: #e3e3e3 !important;
}

/* CHECKOUT */
body.page-template-page-cart .cart-wrapper .summary-card .cart-btn-checkout,
body.page-template-page-cart .cart-wrapper .summary-card a.cart-btn-checkout,
body.page-template-page-cart .cart-wrapper .summary-card button.cart-btn-checkout,
body.page-template-page-cart .cart-wrapper .summary-card input.cart-btn-checkout{
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid var(--cf-soft-border) !important;
}

body.page-template-page-cart .cart-wrapper .summary-card .cart-btn-checkout:hover,
body.page-template-page-cart .cart-wrapper .summary-card a.cart-btn-checkout:hover,
body.page-template-page-cart .cart-wrapper .summary-card button.cart-btn-checkout:hover,
body.page-template-page-cart .cart-wrapper .summary-card input.cart-btn-checkout:hover{
    background: var(--cf-soft) !important;
    color: #111111 !important;
    border-color: #efc4ab !important;
}

.summary-tip{
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.45;
    color: #7c7c7c;
}

.mobile-label{
    display: none;
}

.cff-empty-cart-btn{
    display: inline-flex;
    width: auto !important;
    margin-top: 14px;
    padding: 0 18px;
}

/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991px){
    .cart-layout{
        grid-template-columns: 1fr;
    }

    .summary-card{
        max-width: 100%;
    }
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767px){
    .cart-wrapper{
        padding: 24px 14px 50px;
    }

    .cart-topbar{
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-bottom: 14px;
        padding-bottom: 16px;
    }

    .cart-heading h1{
        font-size: 20px;
        margin-bottom: 6px;
    }

    .cart-heading p{
        font-size: 13px;
    }

    body.page-template-page-cart .cart-wrapper a.cart-back-btn,
    body.page-template-page-cart .cart-wrapper .cart-back-btn{
        align-self: flex-end !important;
        min-height: 42px !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
    }

    .cart-layout{
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .cart-card,
    .summary-card{
        border-radius: 18px;
    }

    .cart-table-head{
        display: none;
    }

    .cart-row{
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 14px 16px;
    }

    .cart-product{
        align-items: flex-start;
        gap: 10px;
    }

    .cart-product-image,
    .cart-product img{
        width: 58px;
        height: 58px;
        min-width: 58px;
        border-radius: 10px;
    }

    .cart-product-title{
        font-size: 14px;
        line-height: 1.22;
        margin-bottom: 5px;
    }

    .cart-price,
    .cart-total,
    .cart-action{
        text-align: left !important;
    }

    .cart-price,
    .cart-total{
        display: block;
        font-size: 16px;
        line-height: 1.3;
        font-weight: 700;
    }

    .mobile-label{
        display: inline-block;
        margin-right: 4px;
        font-weight: 700;
        color: #4a4a4a;
    }

    .cart-qty-wrap{
        width: 100%;
        gap: 8px;
    }

    .cart-qty-wrap .quantity{
        width: 100%;
    }

    .cart-qty-wrap input.qty{
        width: 100% !important;
        height: 42px !important;
        border-radius: 14px !important;
    }

    .cart-action{
        justify-content: stretch;
    }

    body.page-template-page-cart .cart-wrapper a.remove-btn,
    body.page-template-page-cart .cart-wrapper .remove-btn{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        border-radius: 14px !important;
    }

    .summary-card{
        padding: 16px 14px 14px;
    }

    .summary-title{
        font-size: 16px;
        margin-bottom: 12px;
    }

    .summary-line{
        padding: 10px 0;
        font-size: 14px;
    }

    .summary-total{
        padding: 14px 0;
    }

    .summary-total span:last-child{
        font-size: 20px;
    }

    body.page-template-page-cart .cart-wrapper .summary-card .cart-btn,
    body.page-template-page-cart .cart-wrapper .summary-card a.cart-btn,
    body.page-template-page-cart .cart-wrapper .summary-card button.cart-btn,
    body.page-template-page-cart .cart-wrapper .summary-card input.cart-btn{
        min-height: 42px !important;
        height: 42px !important;
        border-radius: 14px !important;
        font-size: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .summary-tip{
        margin-top: 10px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
}


/* =========================================================
   FORCE CART BUTTON COLORS - KEEP AT VERY BOTTOM
========================================================= */

/* BACK TO MENU */
body.page-template-page-cart .cart-wrapper a.cart-back-btn,
body.page-template-page-cart .cart-wrapper a.cart-back-btn:link,
body.page-template-page-cart .cart-wrapper a.cart-back-btn:visited,
body.page-template-page-cart .cart-wrapper a.cart-back-btn:hover,
body.page-template-page-cart .cart-wrapper a.cart-back-btn:focus,
body.page-template-page-cart .cart-wrapper a.cart-back-btn:active{
    background: #ff1717 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #ff1717 !important;
}

/* UPDATE CART */
body.page-template-page-cart .summary-card .cart-btn-update,
body.page-template-page-cart .summary-card a.cart-btn-update,
body.page-template-page-cart .summary-card button.cart-btn-update,
body.page-template-page-cart .summary-card input.cart-btn-update,
body.page-template-page-cart .summary-card .cart-btn-update:hover,
body.page-template-page-cart .summary-card a.cart-btn-update:hover,
body.page-template-page-cart .summary-card button.cart-btn-update:hover,
body.page-template-page-cart .summary-card input.cart-btn-update:hover,
body.page-template-page-cart .summary-card button[name="update_cart"],
body.page-template-page-cart .summary-card button[name="update_cart"]:hover,
body.page-template-page-cart .summary-card input[name="update_cart"],
body.page-template-page-cart .summary-card input[name="update_cart"]:hover{
    background: #ff1717 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid #ff1717 !important;
    box-shadow: none !important;
}

/* CLEAR CART */
body.page-template-page-cart .summary-card .cart-btn-clear,
body.page-template-page-cart .summary-card a.cart-btn-clear,
body.page-template-page-cart .summary-card button.cart-btn-clear,
body.page-template-page-cart .summary-card input.cart-btn-clear,
body.page-template-page-cart .summary-card .cart-btn-clear:hover,
body.page-template-page-cart .summary-card a.cart-btn-clear:hover,
body.page-template-page-cart .summary-card button.cart-btn-clear:hover,
body.page-template-page-cart .summary-card input.cart-btn-clear:hover,
body.page-template-page-cart .summary-card a[href*="cff_clear_cart"],
body.page-template-page-cart .summary-card a[href*="cff_clear_cart"]:hover{
    background: #ffffff !important;
    background-image: none !important;
    color: #111111 !important;
    border: 1px solid #ececec !important;
    box-shadow: none !important;
}

/* CHECKOUT */
body.page-template-page-cart .summary-card .cart-btn-checkout,
body.page-template-page-cart .summary-card a.cart-btn-checkout,
body.page-template-page-cart .summary-card button.cart-btn-checkout,
body.page-template-page-cart .summary-card input.cart-btn-checkout,
body.page-template-page-cart .summary-card .cart-btn-checkout:hover,
body.page-template-page-cart .summary-card a.cart-btn-checkout:hover,
body.page-template-page-cart .summary-card button.cart-btn-checkout:hover,
body.page-template-page-cart .summary-card input.cart-btn-checkout:hover,
body.page-template-page-cart .summary-card a.checkout-button,
body.page-template-page-cart .summary-card a.checkout-button:hover,
body.page-template-page-cart .summary-card .checkout-button,
body.page-template-page-cart .summary-card .checkout-button:hover{
    background: #ffffff !important;
    background-image: none !important;
    color: #111111 !important;
    border: 1px solid #f1c6ad !important;
    box-shadow: none !important;
}

/* REMOVE ITEM */
body.page-template-page-cart .cart-wrapper a.remove-btn,
body.page-template-page-cart .cart-wrapper a.remove-btn:link,
body.page-template-page-cart .cart-wrapper a.remove-btn:visited,
body.page-template-page-cart .cart-wrapper a.remove-btn:hover,
body.page-template-page-cart .cart-wrapper a.remove-btn:focus,
body.page-template-page-cart .cart-wrapper a.remove-btn:active,
body.page-template-page-cart .cart-wrapper a.remove,
body.page-template-page-cart .cart-wrapper a.remove:hover{
    background: #ffffff !important;
    background-image: none !important;
    color: #ff1717 !important;
    border: 1px solid #ffb8b8 !important;
    box-shadow: none !important;
}

/* REMOVE BLACK THEME BUTTON STYLE */
body.page-template-page-cart .cart-wrapper button,
body.page-template-page-cart .cart-wrapper input[type="submit"],
body.page-template-page-cart .cart-wrapper .button,
body.page-template-page-cart .cart-wrapper a.button{
    background-image: none !important;
}

/* KEEP BOTH MAIN CARDS WITHOUT OUTLINE */
body.page-template-page-cart .cart-card,
body.page-template-page-cart .summary-card{
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* =========================================================
   FORCE UPDATE CART BUTTON ONLY
   KEEP THIS AT THE VERY BOTTOM
========================================================= */

body.page-template-page-cart .summary-card button[name="update_cart"],
body.page-template-page-cart .summary-card input[name="update_cart"],
body.page-template-page-cart .summary-card .button[name="update_cart"],
body.page-template-page-cart .summary-card .cart-btn-update,
body.page-template-page-cart .summary-card .cart-btn-update.button,
body.page-template-page-cart .summary-card button.cart-btn.cart-btn-update,
body.page-template-page-cart .summary-card input.cart-btn.cart-btn-update,
body.page-template-page-cart .summary-card button[type="submit"][name="update_cart"]{
    background: #ff1717 !important;
    background-color: #ff1717 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid #ff1717 !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

body.page-template-page-cart .summary-card button[name="update_cart"]:hover,
body.page-template-page-cart .summary-card input[name="update_cart"]:hover,
body.page-template-page-cart .summary-card .button[name="update_cart"]:hover,
body.page-template-page-cart .summary-card .cart-btn-update:hover,
body.page-template-page-cart .summary-card .cart-btn-update.button:hover,
body.page-template-page-cart .summary-card button.cart-btn.cart-btn-update:hover,
body.page-template-page-cart .summary-card input.cart-btn.cart-btn-update:hover,
body.page-template-page-cart .summary-card button[type="submit"][name="update_cart"]:hover{
    background: #e31313 !important;
    background-color: #e31313 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid #e31313 !important;
    box-shadow: none !important;
}