/*
==============================================================================
TIPA MART
SHOPPING CART

SECTION 1 OF 7
BASE LAYOUT
==============================================================================
*/

/*==================================================
    CART HEADER
==================================================*/

.product-header__subtitle{

    margin-top:10px;

    font-size:15px;

    color:#666;

    line-height:1.7;

}

/*==================================================
CART SECTION
==================================================*/

.cart{

    padding:40px 0 70px;

    background:#f7f8fa;

}

/*==================================================
PAGE HEADER
==================================================*/

.cart__header{

    margin-bottom:30px;

}

.cart__header h1{

    margin:0 0 10px;

    font-size:34px;

    font-weight:700;

    color:#222;

}

.cart__header p{

    margin:0;

    font-size:15px;

    line-height:1.7;

    color:#666;

}

/*==================================================
TWO COLUMN LAYOUT
==================================================*/

.cart__layout{

    display:grid;

    grid-template-columns:minmax(0,1fr) 320px;

    gap:30px;

    align-items:start;

}

.cart__main{

    min-width:0;

}

/*==================================================
SUMMARY COLUMN
==================================================*/

.cart__summary{

    width:100%;

    position:sticky;

    top:20px;

    align-self:start;

}

/*==================================================
TABLE WRAPPER
==================================================*/

.cart__table-wrapper{

    width:100%;

    background:#ffffff;

    border:1px solid #ececec;

    border-radius:10px;

    overflow-x:auto;

    overflow-y:hidden;

    box-shadow:0 6px 20px rgba(0,0,0,.04);

}

/*==================================================
TABLE
==================================================*/

.cart__table{

    width:100%;

    border-collapse:collapse;

    table-layout:auto;

}

.cart__table thead{

    background:#f7f7f7;

}

.cart__table th{

    padding:18px 20px;

    text-align:left;

    font-size:15px;

    font-weight:700;

    color:#333;

    white-space:nowrap;

    border-bottom:1px solid #ececec;

}

.cart__table td{

    padding:22px 20px;

    vertical-align:middle;

    border-bottom:1px solid #f3f3f3;

}

.cart__table tbody tr{

    transition:background .25s ease;

}

.cart__table tbody tr:hover{

    background:#fafafa;

}

.cart__table tbody tr:last-child td{

    border-bottom:none;

}

/*==================================================
PRODUCT COLUMN
==================================================*/

.cart__product{

    min-width:280px;

}

.cart__product-link{

    display:flex;

    align-items:center;

    gap:18px;

    text-decoration:none;

    color:inherit;

}

.cart__image{

    flex-shrink:0;

    width:88px;

    height:88px;

    object-fit:contain;

    padding:8px;

    background:#ffffff;

    border:1px solid #ececec;

    border-radius:8px;

    transition:transform .25s ease;

}

.cart__product-link:hover .cart__image{

    transform:scale(1.05);

}

.cart__details{

    display:flex;

    flex-direction:column;

    gap:8px;

    min-width:0;

}

.cart__details h3{

    margin:0;

    font-size:17px;

    font-weight:600;

    line-height:1.5;

    color:#222;

    transition:color .25s ease;

}

.cart__product-link:hover h3{

    color:var(--primary);

}

.cart__stock{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:max-content;

    padding:4px 10px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}

.cart__stock.in-stock{

    background:#e8f8ee;

    color:#18a558;

}

.cart__stock.out-stock{

    background:#fdeaea;

    color:#d93025;

}

/*==================================================
PRICE
==================================================*/

.cart__price{

    font-size:16px;

    font-weight:600;

    color:#222;

    white-space:nowrap;

}

.cart__line-total{

    font-size:17px;

    font-weight:700;

    color:var(--primary);

    white-space:nowrap;

}

/*==================================================
QUANTITY
==================================================*/

.cart__quantity{

    display:inline-flex;

    align-items:center;

    border:1px solid #dddddd;

    border-radius:8px;

    overflow:hidden;

    background:#ffffff;

}

.cart__qty-btn{

    width:42px;

    height:42px;

    border:none;

    background:#f7f7f7;

    color:#444;

    cursor:pointer;

    transition:all .25s ease;

}

.cart__qty-btn:hover{

    background:var(--primary);

    color:#ffffff;

}

.cart__qty-input{

    width:60px;

    height:42px;

    border:none;

    border-left:1px solid #e5e5e5;

    border-right:1px solid #e5e5e5;

    text-align:center;

    font-size:15px;

    font-weight:600;

    outline:none;

    background:#ffffff;

}

/* Remove browser number arrows */

.cart__qty-input::-webkit-inner-spin-button,
.cart__qty-input::-webkit-outer-spin-button{

    -webkit-appearance:none;

    margin:0;

}

.cart__qty-input{

    appearance:textfield;

    -moz-appearance:textfield;

}

/*==================================================
REMOVE BUTTON
==================================================*/

.cart__remove{

    width:42px;

    height:42px;

    border:none;

    border-radius:8px;

    background:#fdecec;

    color:#d93025;

    cursor:pointer;

    transition:all .25s ease;

}

.cart__remove:hover{

    background:#d93025;

    color:#ffffff;

    transform:scale(1.05);

}

/*==================================================
CONTINUE SHOPPING
==================================================*/

.cart__continue{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 24px;

    border-radius:8px;

    background:#ffffff;

    border:1px solid #dddddd;

    color:#333333;

    text-decoration:none;

    font-weight:600;

    transition:all .25s ease;

}

.cart__continue:hover{

    background:var(--primary);

    border-color:var(--primary);

    color:#ffffff;

}

/*==================================================
    CART FOOTER
==================================================*/

.cart__footer{

    margin-top:20px;

}

/*==================================================
COUPON
==================================================*/

.cart__coupon{

    padding:18px 20px;

    margin-bottom:22px;

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:10px;

    box-shadow:0 4px 14px rgba(0,0,0,.04);

}

.cart__coupon h3{

    margin:0 0 8px;

    font-size:18px;

    font-weight:700;

    color:#082C6C;

}

.cart__coupon p{

    margin:0 0 15px;

    font-size:14px;

    color:#666;

}

.cart__coupon-form{

    display:flex;

    gap:12px;

    align-items:center;

}

.cart__coupon-form input{

    flex:1;

    height:50px;

    padding:0 16px;

    border:1px solid #DDD;

    border-radius:8px;

    font-size:15px;

}

.cart__coupon-form button{

    width:160px;

    height:50px;

    border:none;

    border-radius:8px;

    background:#F5B51D;

    color:#082C6C;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

}

.cart__coupon-form button:hover{

    background:#E5A700;

}

.cart__actions{

    margin-top:18px;

}

/*==================================================
SUMMARY CARD
==================================================*/

.cart__summary{

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:10px;

    padding:24px;

    box-shadow:0 6px 18px rgba(0,0,0,.05);

}

.cart__summary h2{

    margin:0 0 25px;

    font-size:24px;

    font-weight:700;

    color:#222222;

}

.cart__summary-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid #eeeeee;

    font-size:15px;

}

.cart__summary-row:last-of-type{

    border-bottom:none;

}

.cart__summary-row span{

    color:#666666;

}

.cart__summary-row strong{

    font-weight:700;

    color:#222222;

}

.cart__summary-total{

    margin-top:10px;

    padding-top:20px;

    border-top:2px solid #eeeeee;

    font-size:18px;

}

.cart__summary-total span{

    font-weight:700;

    color:#222222;

}

.cart__summary-total strong{

    color:var(--primary);

    font-size:22px;

}

/*==================================================
CHECKOUT BUTTON
==================================================*/

.cart__checkout{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    width:100%;

    margin-top:30px;

    padding:16px;

    border-radius:8px;

    background:var(--primary);

    color:#ffffff;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

    transition:all .25s ease;

}

.cart__checkout:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(13,92,182,.25);

}

/*==================================================
EMPTY CART
==================================================*/

.cart__empty{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:80px 40px;

    background:#ffffff;

    border:1px solid #ececec;

    border-radius:12px;

    box-shadow:0 8px 24px rgba(0,0,0,.05);

}

.cart__empty-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:120px;

    height:120px;

    margin-bottom:30px;

    border-radius:50%;

    background:#f5f7fb;

    color:var(--primary);

    font-size:52px;

}

.cart__empty h2{

    margin:0 0 18px;

    font-size:32px;

    font-weight:700;

    color:#222;

}

.cart__empty p{

    max-width:620px;

    margin:0 auto 35px;

    font-size:16px;

    line-height:1.8;

    color:#666;

}

.cart__continue-shopping{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 30px;

    border-radius:8px;

    background:var(--primary);

    color:#ffffff;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

    transition:all .25s ease;

}

.cart__continue-shopping:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(13,92,182,.25);

}

/*==================================================
TABLET
==================================================*/

@media (max-width:991px){

    .cart{

        padding:30px 0 60px;

    }

    .cart__layout{

        grid-template-columns:1fr;

        gap:30px;

    }

    .cart__summary{

        position:static;

        width:100%;

    }

    .cart__header h1{

        font-size:30px;

    }

}

/*==================================================
MOBILE
==================================================*/

@media (max-width:767px){

    .cart{

        padding:25px 0 50px;

    }

    .cart__header{

        margin-bottom:20px;

    }

    .cart__header h1{

        font-size:26px;

    }

    .cart__header p{

        font-size:14px;

    }

    .cart__table th,

    .cart__table td{

        padding:14px;

    }

    .cart__product{

        min-width:240px;

    }

    .cart__product-link{

        gap:12px;

    }

    .cart__image{

        width:70px;

        height:70px;

    }

    .cart__details h3{

        font-size:15px;

    }

    .cart__qty-btn{

        width:36px;

        height:36px;

    }

    .cart__qty-input{

        width:50px;

        height:36px;

    }

    .cart__summary{

        padding:22px;

    }

    .cart__summary h2{

        font-size:22px;

    }

    .cart__coupon-form{

        flex-direction:column;

    }

    .cart__coupon-form button{

        width:100%;

    }

}

/*==================================================
SMALL MOBILE
==================================================*/

@media (max-width:480px){

    .cart__header h1{

        font-size:22px;

    }

    .cart__table{

        min-width:650px;

    }

    .cart__continue,

    .cart__checkout,

    .cart__continue-shopping{

        width:100%;

        justify-content:center;

    }

    .cart__empty{

        padding:50px 20px;

    }

    .cart__empty-icon{

        width:90px;

        height:90px;

        font-size:42px;

    }

    .cart__empty h2{

        font-size:24px;

    }

}
.cart__footer-actions{

    margin-top:30px;

    padding-top:24px;

    border-top:1px solid #ECECEC;

}

/*==========================================
COUPON
==========================================*/

.cart__coupon-success{

    background:#ECFDF5;

    border:1px solid #BBF7D0;

    border-radius:8px;

    padding:15px;

    margin-top:15px;

}

.cart__coupon-success p{

    color:#166534;

    font-weight:600;

    margin-bottom:12px;

}

.cart__coupon-success strong{

    color:#0B3D91;

}

#removeCoupon{

    background:#DC2626;

    color:#fff;

    border:none;

    padding:10px 18px;

    border-radius:6px;

    cursor:pointer;

    transition:.25s;

}

#removeCoupon:hover{

    background:#B91C1C;

}

#couponMessage{

    margin-top:12px;

    font-weight:600;

}