/*======================================
EIVOX CHECKOUT CSS
Version: 1.0
======================================*/


/*======================================
CHECKOUT LAYOUT
======================================*/

.checkout{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:30px;

    align-items:start;

}


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

.checkout-section{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    padding:28px;

    box-shadow:var(--shadow-sm);

}

.checkout-section+.checkout-section{

    margin-top:25px;

}


/*======================================
SECTION TITLE
======================================*/

.checkout-title{

    margin-bottom:24px;

    font-size:1.35rem;

    font-weight:var(--weight-bold);

    color:var(--text);

}


/*======================================
CART ITEM
======================================*/

.cart-item{

    display:flex;

    gap:18px;

    align-items:center;

    padding:18px 0;

    border-bottom:1px solid var(--border);

}

.cart-item:last-child{

    border-bottom:none;

}

.cart-image{

    width:90px;

    height:90px;

    border-radius:var(--radius);

    overflow:hidden;

    flex-shrink:0;

}

.cart-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.cart-content{

    flex:1;

}

.cart-title{

    font-size:1rem;

    font-weight:var(--weight-semibold);

    color:var(--text);

}

.cart-meta{

    margin-top:6px;

    font-size:13px;

    color:var(--text-muted);

}

.cart-price{

    font-size:1.2rem;

    font-weight:var(--weight-bold);

    color:var(--primary);

}


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

.quantity{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:14px;

}

.quantity button{

    width:36px;

    height:36px;

    border:none;

    border-radius:var(--radius);

    background:var(--surface);

    color:var(--text);

    cursor:pointer;

    transition:var(--transition);

}

.quantity button:hover{

    background:var(--primary);

    color:#fff;

}

.quantity input{

    width:60px;

    text-align:center;

}


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

.coupon{

    display:flex;

    gap:15px;

    margin-top:25px;

}

.coupon input{

    flex:1;

}


/*======================================
PAYMENT METHODS
======================================*/

.payment-method{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px;

    margin-bottom:16px;

    border:1px solid var(--border);

    border-radius:var(--radius);

    cursor:pointer;

    transition:var(--transition);

}

.payment-method:hover{

    border-color:var(--primary);

}

.payment-method.active{

    border-color:var(--primary);

    background:rgba(37,99,235,.08);

}

.payment-method img{

    width:50px;

    height:auto;

}


/*======================================
ORDER SUMMARY
======================================*/

.order-summary{

    position:sticky;

    top:100px;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    padding:28px;

    box-shadow:var(--shadow);

}

.summary-row{

    display:flex;

    justify-content:space-between;

    margin-bottom:18px;

    color:var(--text-light);

}

.summary-row.total{

    margin-top:22px;

    padding-top:22px;

    border-top:1px solid var(--border);

    font-size:1.3rem;

    font-weight:var(--weight-bold);

    color:var(--text);

}


/*======================================
SECURITY
======================================*/

.checkout-security{

    margin-top:25px;

    padding:18px;

    border-radius:var(--radius);

    background:var(--surface);

    color:var(--text-muted);

    font-size:14px;

}

.checkout-security i,
.checkout-security svg{

    margin-right:8px;

    color:var(--success);

}


/*======================================
SUCCESS
======================================*/

.order-success{

    text-align:center;

    padding:50px 25px;

}

.order-success-icon{

    width:90px;

    height:90px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(34,197,94,.12);

    color:var(--success);

}

.order-success-icon i,
.order-success-icon svg{

    width:45px;

    height:45px;

}

.order-success h2{

    margin-bottom:12px;

    color:var(--text);

}

.order-success p{

    color:var(--text-muted);

}


/*======================================
RESPONSIVE
======================================*/

@media(max-width:991px){

    .checkout{

        grid-template-columns:1fr;

    }

    .order-summary{

        position:static;

    }

}

@media(max-width:767px){

    .checkout-section{

        padding:20px;

    }

    .cart-item{

        flex-wrap:wrap;

    }

    .cart-image{

        width:70px;

        height:70px;

    }

    .coupon{

        flex-direction:column;

    }

    .coupon .btn{

        width:100%;

    }

}

@media(max-width:480px){

    .payment-method{

        flex-wrap:wrap;

    }

    .summary-row{

        font-size:14px;

    }

}