/* cart.css - Cart section, cart items, checkout, payment, time slots, order summary, promo codes, inputs */

/* Cart Section */
.cart-section{
    background:var(--bg);
    border:1px solid var(--l);
    border-radius:24px;
    padding:40px;
    color:#fff;
    max-width:1000px;
    margin:40px auto;
    display:none;
}

.cart-section.active{display:block !important;}

.cart-top{
    display:flex;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    align-items:center;
    margin-bottom:30px;
    padding-bottom:30px;
    border-bottom:2px solid var(--l);
}

.cart-top .meta{font-size:16px;color:var(--m);margin-top:8px;}

.cartlist{margin-bottom:30px;}

.cartrow{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    padding:20px;
    background:rgba(255,255,255,.03);
    border-radius:16px;
    margin-bottom:15px;
    border:1px solid var(--l);
    transition:all .3s;
}

.cartrow:hover{
    border-color:rgba(255,255,255,.2);
    transform:translateX(5px);
}

.cartrow .left{flex:1;}

.cartrow .left b{
    font-weight:700;
    font-size:18px;
    display:block;
    margin-bottom:8px;
}

.cartrow .left .d{font-size:14px;color:var(--m);line-height:1.5;}

.cartrow .right{
    display:flex;
    gap:20px;
    align-items:center;
}

.cartrow .right .pmc{
    display:flex;
    gap:10px;
    align-items:center;
    background:rgba(0,0,0,.2);
    padding:8px;
    border-radius:12px;
}

.cartrow .right button{
    background:transparent;
    color:#fff;
    border:1px solid rgba(255,255,255,.3);
    border-radius:10px;
    padding:8px 16px;
    font-weight:900;
    cursor:pointer;
    transition:all .2s;
}

.cartrow .right button:hover{background:rgba(255,255,255,.1);}

.cartrow .price{
    font-weight:900;
    min-width:80px;
    text-align:right;
    color:var(--t);
    font-size:20px;
}

.total{font-weight:900;color:var(--t);font-size:24px;}

.err{
    display:none;
    margin:20px 0;
    padding:20px;
    background:rgba(255,90,90,.15);
    color:#ff5a5a;
    font-weight:700;
    font-size:15px;
    border-radius:12px;
    border-left:4px solid #ff5a5a;
}

.err.show{
    display:block !important;
    animation:shakeMinError 0.5s ease;
}

@keyframes shakeMinError{
    0%,100%{transform:translateX(0);}
    15%{transform:translateX(-8px);}
    30%{transform:translateX(8px);}
    45%{transform:translateX(-6px);}
    60%{transform:translateX(6px);}
    75%{transform:translateX(-3px);}
    90%{transform:translateX(3px);}
}

.infopanel{
    background:rgba(0,0,0,.2);
    padding:30px;
    border-radius:16px;
    border:1px solid var(--l);
}

.infogrid{
    display:grid;
    grid-template-columns:1fr;
    gap:15px;
    margin-top:20px;
}

.inp{
    width:100%;
    border-radius:12px;
    border:1px solid var(--l);
    background:rgba(0,0,0,.2);
    color:#fff;
    padding:18px;
    font-weight:600;
    font-size:16px;
    transition:all .3s;
}

.inp:focus{
    outline:none;
    border-color:var(--accent-modern);
    background:rgba(0,0,0,.3);
    box-shadow:0 0 20px rgba(255,71,87,.1);
}

.inp::placeholder{color:rgba(255,255,255,.4);font-weight:500;}

.note{
    font-size:14px;
    color:var(--m);
    margin-top:20px;
    font-style:italic;
    padding:20px;
    background:rgba(255,255,255,.03);
    border-radius:12px;
    border-left:4px solid var(--accent-modern);
}

/* Checkout Page */
.checkout-section{
    max-width:900px;
    margin:60px auto;
    padding:0 20px;
    display:none;
}

.checkout-section.active{display:block !important;}

.checkout-card{
    background:var(--bg);
    border-radius:24px;
    padding:40px;
    border:1px solid var(--l);
}

.checkout-header{
    text-align:center;
    margin-bottom:40px;
    padding-bottom:30px;
    border-bottom:2px solid var(--l);
}

.checkout-header h2{
    font-family:var(--handwriting);
    font-size:48px;
    margin-bottom:15px;
    letter-spacing:2px;
    font-weight:700;
}

.checkout-header p{color:var(--m);font-size:16px;}

.order-summary{
    background:rgba(0,0,0,.2);
    border-radius:20px;
    padding:30px;
    margin-bottom:30px;
}

.summary-title{
    font-weight:700;
    margin-bottom:25px;
    color:var(--accent-modern);
    font-size:18px;
    text-transform:uppercase;
    letter-spacing:2px;
}

.summary-item{
    display:flex;
    justify-content:space-between;
    padding:15px 0;
    border-bottom:1px solid var(--l);
    font-size:15px;
}

.summary-item:last-child{border-bottom:none;}
.summary-item .item-name{flex:1;}
.summary-item .item-qty{color:var(--m);margin:0 20px;}

.summary-total{
    display:flex;
    justify-content:space-between;
    padding:25px;
    background:var(--accent-modern);
    border-radius:16px;
    margin-top:25px;
    font-size:22px;
    font-weight:900;
}

/* Time Slot Selection */
.time-slots{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
    gap:10px;
    margin-top:15px;
}

.time-slot{
    padding:12px;
    background:rgba(255,255,255,.05);
    border:2px solid var(--l);
    border-radius:10px;
    text-align:center;
    cursor:pointer;
    transition:all .3s;
    font-size:14px;
}

.time-slot:hover{
    border-color:var(--accent-modern);
    background:rgba(255,71,87,.1);
}

.time-slot.selected{
    background:var(--accent-modern);
    border-color:var(--accent-modern);
    font-weight:700;
}

.time-slot.disabled{
    opacity:0.3;
    cursor:not-allowed;
}

.payment-methods{margin:30px 0;}

.payment-title{
    font-weight:700;
    margin-bottom:25px;
    font-size:18px;
    text-transform:uppercase;
    letter-spacing:2px;
}

.payment-option{
    display:flex;
    align-items:center;
    gap:20px;
    padding:20px;
    background:rgba(255,255,255,.03);
    border:2px solid var(--l);
    border-radius:16px;
    margin-bottom:15px;
    cursor:pointer;
    transition:all .3s;
}

.payment-option:hover,.payment-option.selected{
    border-color:var(--accent-modern);
    background:rgba(255,71,87,.05);
    transform:translateX(10px);
}

.payment-option input{width:24px;height:24px;accent-color:var(--accent-modern);}
.payment-option label{flex:1;cursor:pointer;font-weight:600;font-size:16px;}
.payment-option .fee{color:var(--m);font-size:13px;}

.confirm-btn{
    width:100%;
    background:var(--accent-modern);
    color:#fff;
    border:0;
    border-radius:16px;
    padding:22px;
    font-weight:700;
    font-size:18px;
    cursor:pointer;
    transition:all .3s;
    margin-top:30px;
    text-transform:uppercase;
    letter-spacing:2px;
}

.confirm-btn:hover:not(:disabled){
    background:var(--a-light);
    transform:translateY(-3px);
    box-shadow:0 15px 40px rgba(255,71,87,.4);
}

.confirm-btn:disabled{opacity:.5;cursor:not-allowed;}

.back-btn{
    background:transparent;
    border:2px solid var(--l);
    color:#fff;
    padding:15px 30px;
    border-radius:12px;
    cursor:pointer;
    margin-bottom:30px;
    font-weight:600;
    transition:all .3s;
    display:inline-flex;
    align-items:center;
    gap:10px;
}

.back-btn:hover{
    border-color:var(--accent-modern);
    color:var(--accent-modern);
}

/* SumUp */
#sumup-card{border-radius:12px;overflow:hidden;}
#sumup-card iframe{border-radius:12px;}
.sumup-processing{text-align:center;padding:30px;}
.sumup-processing .fa-spinner{font-size:32px;color:var(--accent-modern);margin-bottom:15px;}

/* Promo Code Input */
.promo-input-wrap{
    display:flex;
    gap:10px;
    margin-top:20px;
    padding:20px;
    background:rgba(255,255,255,.03);
    border-radius:16px;
    border:1px solid var(--l);
}
.promo-input-wrap input{
    flex:1;
    padding:15px;
    border-radius:12px;
    border:1px solid var(--l);
    background:rgba(0,0,0,.2);
    color:#fff;
    font-size:15px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;
}
.promo-input-wrap input:focus{outline:none;border-color:var(--accent-modern);}
.promo-input-wrap button{
    padding:15px 25px;
    background:var(--accent-modern);
    color:#fff;
    border:none;
    border-radius:12px;
    font-weight:700;
    cursor:pointer;
    transition:all .3s;
    white-space:nowrap;
}
.promo-input-wrap button:hover{background:var(--a-light);}
.promo-applied{
    margin-top:15px;
    padding:15px 20px;
    background:rgba(46,204,113,.15);
    border:1px solid var(--success);
    border-radius:12px;
    color:var(--success);
    font-weight:700;
    display:none;
    align-items:center;
    gap:10px;
    justify-content:space-between;
}
.promo-applied.show{display:flex;}