/*================ CHECKOUT HERO ================*/

.checkout-hero{
    padding:140px 0 70px;
    text-align:center;
    background:var(--surface-color);
}

.checkout-hero-subtitle{
    display:block;
    margin-bottom:12px;
    color:var(--primary);
    font-size:.85rem;
    text-transform:uppercase;
    letter-spacing:2px;
}

.checkout-hero h1{
    margin-bottom:12px;
    color:var(--heading);
    font-size:clamp(2.2rem,5vw,4rem);
}

.checkout-hero p{
    color:var(--text-light);
}


/*================ CHECKOUT PAGE ================*/

.checkout-page{
    padding:80px 0;
}

.checkout-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 380px;
    gap:50px;
    align-items:start;
}


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

.checkout-section-header{
    display:flex;
    align-items:flex-start;
    gap:16px;
    margin-bottom:30px;
}

.checkout-section-header > span{
    width:38px;
    height:38px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    font-size:.8rem;
    font-weight:700;
}

.checkout-section-header h2{
    color:var(--heading);
    margin-bottom:6px;
}

.checkout-section-header p{
    color:var(--text-light);
    font-size:.9rem;
}


/*================ FORM ================*/

.checkout-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    padding:32px;
    background:var(--card-bg);
    border-radius:24px;
    box-shadow:0 10px 35px rgba(0,0,0,.06);
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.form-group.full-width{
    grid-column:1 / -1;
}

.form-group label{
    color:var(--heading);
    font-size:.9rem;
    font-weight:600;
}

.form-group label span{
    margin-left:5px;
    color:var(--text-light);
    font-size:.75rem;
    font-weight:400;
}


/*================ INPUTS ================*/

.form-group input,
.form-group textarea{
    width:100%;
    border:1px solid rgba(59,41,36,.15);
    border-radius:13px;
    padding:14px 15px;
    background:var(--bg-color);
    color:var(--text-color);
    font:inherit;
    outline:none;
    transition:.25s ease;
}

.form-group textarea{
    resize:vertical;
    min-height:100px;
}

.form-group input:focus,
.form-group textarea:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(119,81,68,.12);
}


/*================ PAYMENT HEADER ================*/

.payment-header{
    grid-column:1 / -1;
    margin-top:15px;
    margin-bottom:0;
}


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

.payment-methods{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.payment-option{
    cursor:pointer;
}

.payment-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.payment-option-content{
    min-height:95px;
    display:flex;
    align-items:center;
    gap:15px;
    padding:18px;
    border:1px solid rgba(59,41,36,.12);
    border-radius:16px;
    background:var(--bg-color);
    transition:.25s ease;
}

.payment-option-content > i{
    color:var(--primary);
    font-size:1.4rem;
}

.payment-option-content span{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.payment-option-content strong{
    color:var(--heading);
}

.payment-option-content small{
    color:var(--text-light);
}

.payment-option input:checked + .payment-option-content{
    border-color:var(--primary);
    box-shadow:0 0 0 2px var(--primary);
}


/*================ PLACE ORDER ================*/

.place-order-btn{
    grid-column:1 / -1;
    min-height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    border:none;
    border-radius:15px;
    background:var(--primary);
    color:#fff;
    font:inherit;
    font-weight:600;
    cursor:pointer;
    transition:.3s ease;
}

.place-order-btn:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
}

.place-order-btn:active{
    transform:scale(.98);
}


/*================ CHECKOUT SUMMARY ================*/

.checkout-summary{
    position:sticky;
    top:30px;
    padding:28px;
    background:var(--card-bg);
    border-radius:24px;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
}

.checkout-summary-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:25px;
}

.checkout-summary-header h2{
    color:var(--heading);
}

.checkout-summary-header a{
    color:var(--primary);
    text-decoration:none;
    font-size:.85rem;
}


/*================ CHECKOUT ITEMS ================*/

.checkout-items{
    display:flex;
    flex-direction:column;
    gap:16px;
    max-height:400px;
    overflow-y:auto;
    padding-right:5px;
}

.checkout-item{
    display:grid;
    grid-template-columns:65px 1fr auto;
    gap:12px;
    align-items:center;
}

.checkout-item-image{
    width:65px;
    height:65px;
    overflow:hidden;
    border-radius:12px;
    background:var(--surface-color);
}

.checkout-item-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.checkout-item-info h4{
    color:var(--heading);
    font-size:.9rem;
    margin-bottom:5px;
}

.checkout-item-info span{
    color:var(--text-light);
    font-size:.8rem;
}

.checkout-item-total{
    color:var(--heading);
    font-weight:700;
    font-size:.9rem;
}


/*================ SUMMARY DETAILS ================*/

.checkout-summary-details{
    margin-top:25px;
}

.checkout-summary-details .summary-divider{
    margin:20px 0;
}


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

.checkout-security{
    display:flex;
    gap:12px;
    align-items:flex-start;
    margin-top:25px;
    padding:15px;
    border-radius:14px;
    background:var(--surface-color);
}

.checkout-security > i{
    color:var(--primary);
    margin-top:3px;
}

.checkout-security strong{
    display:block;
    color:var(--heading);
    font-size:.85rem;
    margin-bottom:4px;
}

.checkout-security p{
    color:var(--text-light);
    font-size:.75rem;
    line-height:1.5;
}


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

.order-success{
    position:fixed;
    inset:0;
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(8px);
}

.order-success[hidden]{
    display:none;
}

.order-success-content{
    width:min(100%,450px);
    padding:45px 30px;
    text-align:center;
    background:var(--card-bg);
    border-radius:25px;
    box-shadow:0 25px 70px rgba(0,0,0,.25);
    animation:successPop .4s ease;
}

@keyframes successPop{

    from{
        opacity:0;
        transform:scale(.9) translateY(15px);
    }

    to{
        opacity:1;
        transform:scale(1) translateY(0);
    }

}

.success-icon{
    width:75px;
    height:75px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    font-size:2rem;
}

.order-success-content h2{
    color:var(--heading);
    margin-bottom:10px;
}

.order-success-content p{
    color:var(--text-light);
    line-height:1.7;
    margin-bottom:18px;
}

.order-success-content > span{
    display:block;
    color:var(--primary);
    font-weight:700;
    margin-bottom:25px;
}

.back-to-menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:13px 24px;
    border-radius:13px;
    background:var(--primary);
    color:#fff;
    text-decoration:none;
    transition:.3s ease;
}

.back-to-menu-btn:hover{
    background:var(--primary-dark);
}


/*================ DARK MODE ================*/

[data-theme="dark"] .checkout-form,
[data-theme="dark"] .checkout-summary,
[data-theme="dark"] .order-success-content{
    box-shadow:0 12px 40px rgba(0,0,0,.3);
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .payment-option-content{
    border-color:rgba(255,255,255,.1);
}