/* ==========================================================
   SHYAMANSH CART V5
   BLINKIT STYLE
========================================================== */

:root{

    --green:#0C831F;
    --green-dark:#087118;
    --bg:#F5F7FD;
    --card:#FFFFFF;
    --border:#ECECEC;
    --text:#1C1C1C;
    --muted:#6B6B6B;
    --blue:#EAF2FF;
    --blue-text:#3277FF;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

.cart-page{

    background:#F5F7FD;
    min-height:100vh;
    padding:12px 0 90px;

}

.cart-container{

    max-width:1180px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 340px;
    gap:16px;
    padding:0 12px;
    align-items:start;

}

.cart-left{

    display:flex;
    flex-direction:column;
    gap:12px;

}

.cart-page-heading{

    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:12px;

}

.cart-left h1{

    font-size:34px;
    font-weight:700;
    color:var(--text);

}

#cartItemCount{

    color:var(--muted);
    font-size:16px;

}

.cart-card{

    background:var(--card);
    border:1px solid var(--border);
    border-radius:18px;
    padding:18px;

}

.delivery-box{

    display:flex;
    align-items:center;
    gap:16px;

}

.delivery-icon{

    width:54px;
    height:54px;
    border-radius:14px;
    background:#F5F5F5;
    display:flex;
    justify-content:center;
    align-items:center;
    color:var(--green);
    font-size:26px;
    flex-shrink:0;

}

.delivery-info h3{

    font-size:17px;
    margin-bottom:4px;

}

.delivery-info p{

    color:var(--muted);
    font-size:13px;

}

.cart-savings{

    background:var(--blue);
    border-radius:16px;
    padding:16px 18px;
    display:flex;
    justify-content:space-between;
    align-items:center;

}

.cart-savings span{

    color:var(--blue-text);
    font-weight:600;

}

.cart-savings strong{

    color:var(--blue-text);
    font-size:20px;

}

#cartItems{

    display:flex;
    flex-direction:column;
    gap:16px;

}

.cart-empty{

    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:48px 18px;
    text-align:center;
    color:var(--muted);

}

.cart-empty h3{

    color:var(--text);
    font-size:18px;
    margin-bottom:6px;

}

.cart-item{

    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:16px;
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:center;

}

.cart-product{

    display:flex;
    gap:14px;
    flex:1;

}

.cart-product img{

    width:72px;
    height:72px;
    object-fit:contain;
    background:#FAFAFA;
    border-radius:10px;

}

.cart-info{

    flex:1;

}

.cart-info h4{

    font-size:15px;
    line-height:1.4;
    margin-bottom:6px;

}

.cart-info p{

    color:#777;
    font-size:13px;
    margin-bottom:8px;

}

.cart-price{

    display:flex;
    align-items:center;
    gap:8px;

}

.cart-price strong{

    font-size:18px;

}

.cart-price del{

    color:#999;
    font-size:14px;

}
/* ==========================================================
   RIGHT BILL PANEL
========================================================== */

.cart-right{

    position:sticky;
    top:100px;

}

.bill-card{

    background:#fff;
    border:1px solid #ececec;
    border-radius:12px;
    padding:12px;

}

.bill-card h3{

    font-size:16px;

    font-weight:700;

    margin-bottom:10px;

}

.bill-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:8px 0;

    font-size:13px;

}

.bill-row span{

    display:flex;

    align-items:center;

    gap:6px;

    color:#444;

}

.bill-row i{

    width:18px;

    text-align:center;

    color:#777;

    font-size:14px;

}

.coupon-discount-row strong{

    color:var(--green);

}

.bill-total{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:8px;

    padding-top:10px;

    border-top:1px solid #ececec;

    font-size:15px;

    font-weight:700;

}
.checkout-btn{

    width:100%;
    height:54px;
    margin-top:18px;
    border:none;
    border-radius:12px;
    background:var(--green);
    color:#fff;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;

}

.checkout-btn:hover{

    background:var(--green-dark);

}

.mobile-bottom{

    display:none;

}

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

.cart-actions{

    width:96px;
    height:36px;
    background:var(--green);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    overflow:hidden;
    flex-shrink:0;

}

.cart-actions button{

    width:30px;
    height:36px;
    border:none;
    background:none;
    color:#fff;
    font-size:20px;
    font-weight:700;
    cursor:pointer;

}

.cart-qty{

    color:#fff;
    font-size:15px;
    font-weight:700;
    min-width:20px;
    text-align:center;

}

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

.coupon-box{

    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:16px 18px;
    display:flex;
    justify-content:space-between;
    align-items:center;

}

.coupon-box div{

    display:flex;
    align-items:center;
    gap:10px;
    font-size:15px;
    font-weight:600;

}

.coupon-box span,
.coupon-left span{

    display:flex;
    flex-direction:column;
    gap:2px;

}

.coupon-box small,
.coupon-left small{

    color:var(--muted);
    font-size:12px;
    font-weight:400;

}

.coupon-box i{

    color:var(--green);
    font-size:20px;

}

.coupon-box button{

    border:none;
    background:var(--green);
    color:#fff;
    padding:8px 16px;
    border-radius:8px;
    cursor:pointer;
    font-weight:600;

}

/* ==========================================================
   ADDRESS
========================================================== */

.address-box{

    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:18px;
    display:flex;
    justify-content:space-between;
    align-items:center;

}

.address-box strong{

    display:block;
    margin-bottom:6px;
    font-size:15px;

}

.address-box p{

    color:#777;
    font-size:13px;

}

.address-box button{

    border:none;
    background:var(--green);
    color:#fff;
    padding:8px 14px;
    border-radius:8px;
    cursor:pointer;
    font-size:13px;
    font-weight:600;

}
/* ==========================================================
   DESKTOP CART DRAWER
========================================================== */

/* Overlay */

.cart-overlay{

    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:.25s;
    z-index:9998;

}

.cart-overlay.active{

    opacity:1;
    visibility:visible;

}

/* Drawer */

.cart-drawer{

    position:fixed;
    top:0;
    right:-420px;
    width:390px;
    height:100vh;
    background:var(--bg);
    display:flex;
    flex-direction:column;
    transition:.30s ease;
    z-index:9999;
    box-shadow:-10px 0 30px rgba(0,0,0,.15);
    overflow:hidden;

}

.cart-drawer.active{

    right:0;

}

body.cart-drawer-open{

    overflow:hidden;

}

/* Header */

.drawer-header{

    background:#fff;
    height:64px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 16px;

    border-bottom:1px solid #ececec;

}

.drawer-title{

    display:flex;

    align-items:center;

    gap:12px;

}

.drawer-title h2{

    margin:0;

    font-size:18px;

    font-weight:700;

}

.drawer-back{

    width:36px;

    height:36px;

    border:none;

    background:none;

    font-size:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

}

.drawer-share{

    border:none;

    background:none;

    color:#0C831F;

    font-size:15px;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:6px;

    cursor:pointer;

}
/* Body */

.drawer-body{
    flex:1;
    overflow-y:auto;
    padding:4px 10px 10px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

/* Delivery */

.delivery-card{
    background:#fff;
    border:1px solid #ececec;
    border-radius:14px;
    padding:6px 10px;   /* thinner */
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
}

.delivery-icon{
    width:42px;
    height:42px;
    border-radius:10px;
    font-size:22px;
}

.delivery-content strong{
    font-size:14px;
    margin:0;
}

.delivery-content small{
    font-size:12px;
    margin-top:2px;
}

/* Drawer Product */

.drawer-item{

    display:flex;

    align-items:center;

    gap:12px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:14px;

    padding:10px;

}

.drawer-item img{

    width:64px;

    height:64px;

    object-fit:contain;

    background:#fafafa;

    border-radius:10px;

    flex-shrink:0;

}
.drawer-image{

    width:64px;

    height:64px;

    background:#fafafa;

    border-radius:10px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}

.drawer-info{

    flex:1;

    min-width:0;

}
.drawer-delivery{

    display:inline-flex;

    align-items:center;

    background:#f5f5f5;

    border-radius:6px;

    padding:2px 6px;

    font-size:10px;

    font-weight:700;

    margin-bottom:6px;

}

.drawer-price{

    margin-top:6px;

    font-size:15px;

    font-weight:700;

    color:#1d1d1d;

}

.drawer-info h4{

    font-size:14px;

    font-weight:600;

    line-height:1.35;

    margin:0 0 4px;

}

.drawer-info small{

    display:block;
    color:#777;
    font-size:12px;
    margin-bottom:6px;

}

.drawer-info strong{

    font-size:17px;

}

.drawer-qty{

    width:94px;

    height:38px;

    border-radius:8px;

    background:#0C831F;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 10px;

}

.drawer-qty button{

    border:none;
    background:none;
    color:#fff;
    font-size:20px;
    cursor:pointer;

}

.drawer-qty span{

    color:#fff;
    font-weight:700;

}

/* Empty */

.drawer-empty{

    background:#fff;
    border-radius:16px;
    padding:60px 20px;
    text-align:center;
    color:#777;

}
/* ===========================
   DRAWER COUPON
=========================== */

.coupon-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:14px;

    padding:10px 12px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.coupon-left{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:15px;

    font-weight:600;

}

.coupon-left i{

    color:#0C831F;

    font-size:18px;

}

.coupon-card button{

    border:none;

    background:none;

    color:#0C831F;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

}
/*=================================
DRAWER ADDRESS
=================================*/

.drawer-address{

    background:#fff;
    border:1px solid #ececec;
    border-radius:14px;
    padding:10px 12px;

    display:flex;
    justify-content:space-between;
    align-items:center;

}

.address-left{

    display:flex;
    align-items:flex-start;
    gap:10px;

}

.address-left i{

    color:#666;
    font-size:18px;
    margin-top:2px;

}

.address-left strong{

    display:block;
    font-size:14px;
    font-weight:600;
    margin-bottom:2px;

}

.address-left small{

    color:#777;
    font-size:12px;

}

.address-change{

    border:none;
    background:none;
    color:#0C831F;
    font-size:14px;
    font-weight:700;
    cursor:pointer;

}

/* ==========================================================
   CART FLOW MODALS
========================================================== */

.flow-overlay{

    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    opacity:0;
    visibility:hidden;
    transition:.25s;
    z-index:10020;

}

.flow-overlay.active{

    opacity:1;
    visibility:visible;

}

body.flow-open{

    overflow:hidden;

}

.flow-modal,
.flow-sheet{

    position:fixed;
    background:#fff;
    color:var(--text);
    opacity:0;
    visibility:hidden;
    transition:.25s ease;
    z-index:10030;

}

.flow-modal.active,
.flow-sheet.active{

    opacity:1;
    visibility:visible;

}

.flow-modal{

    top:50%;
    left:50%;
    width:min(100% - 32px,420px);
    transform:translate(-50%,-46%) scale(.98);
    border-radius:16px;
    padding:22px;
    box-shadow:0 20px 60px rgba(0,0,0,.22);

}

.flow-modal.active{

    transform:translate(-50%,-50%) scale(1);

}

.flow-modal h2,
.sheet-header h2{

    font-size:22px;
    line-height:1.2;
    margin-bottom:6px;

}

.flow-modal p,
.sheet-header p{

    color:var(--muted);
    font-size:14px;

}

.flow-modal label,
.address-form label{

    display:block;
    color:#555;
    font-size:13px;
    font-weight:600;
    margin:16px 0 7px;

}

.flow-modal input,
.coupon-entry input,
.address-form input,
.address-form textarea{

    width:100%;
    border:1px solid #dedede;
    border-radius:10px;
    outline:none;
    padding:0 12px;
    font-size:15px;
    background:#fff;

}

.flow-modal input,
.coupon-entry input,
.address-form input{
    height:46px;
}

.address-form textarea{
    min-height:104px;
    padding:12px;
    line-height:1.45;
    resize:vertical;
    font-family:inherit;
}

.flow-modal input:focus,
.coupon-entry input:focus,
.address-form input:focus,
.address-form textarea:focus{

    border-color:var(--green);

}

.flow-primary{

    width:100%;
    height:48px;
    margin-top:16px;
    border:none;
    border-radius:10px;
    background:var(--green);
    color:#fff;
    font-weight:700;
    font-size:15px;
    cursor:pointer;

}

.modal-close,
.sheet-close{

    position:absolute;
    top:14px;
    right:14px;
    width:34px;
    height:34px;
    border:none;
    border-radius:50%;
    background:#f4f4f4;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;

}

.flow-message{

    min-height:18px;
    color:#666;
    font-size:13px;
    margin-top:10px;

}

.flow-sheet{

    left:50%;
    bottom:-100%;
    width:min(100% - 28px,520px);
    max-height:78vh;
    transform:translateX(-50%);
    border-radius:22px 22px 0 0;
    padding:24px;
    overflow-y:auto;
    box-shadow:0 -18px 45px rgba(0,0,0,.22);

}

.flow-sheet.active{

    bottom:0;

}

.coupon-entry{

    display:flex;
    gap:10px;
    margin-top:18px;

}

.coupon-entry button{

    width:96px;
    border:none;
    border-radius:10px;
    background:var(--green);
    color:#fff;
    font-weight:700;
    cursor:pointer;

}

.coupon-list{

    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:14px;

}

.coupon-option{

    width:100%;
    border:1px solid #e6e6e6;
    border-radius:14px;
    background:#fff;
    padding:14px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    text-align:left;
    cursor:pointer;

}

.coupon-option strong{

    color:var(--green);
    font-size:16px;

}

.coupon-option span{

    color:#666;
    font-size:13px;

}

.remove-coupon{

    width:100%;
    margin-top:14px;
    height:42px;
    border:1px solid #f0c6c6;
    border-radius:10px;
    background:#fff6f6;
    color:#ba1a1a;
    font-weight:700;
    cursor:pointer;

}

.address-sheet{

    width:min(100%,720px);
    min-height:58vh;
    background:#f5f6fb;
    padding:28px 24px 26px;

}

.address-sheet-close{

    position:absolute;
    top:-54px;
    left:50%;
    transform:translateX(-50%);
    width:48px;
    height:48px;
    border:none;
    border-radius:50%;
    background:#050505;
    color:#fff;
    font-size:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;

}

.add-address-row{

    width:100%;
    min-height:68px;
    margin:20px 0;
    border:none;
    border-radius:16px;
    background:#fff;
    color:var(--green);
    display:flex;
    align-items:center;
    gap:18px;
    padding:0 26px;
    font-size:20px;
    font-weight:700;
    cursor:pointer;

}

.add-address-row i{

    font-size:28px;

}

.saved-address-block > p{

    color:#666;
    font-size:16px;
    margin-bottom:12px;

}

.saved-address-card{

    background:#fff;
    border:1px solid transparent;
    border-radius:16px;
    padding:16px;
    display:grid;
    grid-template-columns:54px 1fr;
    gap:14px;
    cursor:pointer;

}

.saved-address-card.selected{

    border-color:#bde8c4;

}

.saved-address-icon{

    width:54px;
    height:54px;
    border-radius:12px;
    background:#fafafa;
    color:#d2a531;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;

}

.saved-address-copy strong{

    display:block;
    font-size:18px;
    margin-bottom:4px;

}

.saved-address-copy p{

    color:#666;
    font-size:14px;
    line-height:1.35;

}

.saved-address-actions{

    grid-column:2;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:8px;

}

.saved-address-actions button{

    height:34px;
    border-radius:18px;
    padding:0 12px;
    font-size:13px;
    font-weight:700;
    cursor:pointer;

}

.select-address-btn{

    border:1px solid #caead0;
    background:#f3fff5;
    color:var(--green);

}

.edit-address-btn{

    border:1px solid #e4e4e4;
    background:#fff;
    color:#555;

}

.address-empty{

    background:#fff;
    border-radius:14px;
    padding:16px;
    color:#666;

}

.address-form{

    display:none;
    margin-top:16px;
    background:#fff;
    border-radius:16px;
    padding:16px;

}

.address-form.active{

    display:block;

}

.address-form h3{

    font-size:17px;
    margin-bottom:4px;

}

.address-location-summary{
    margin:12px 0 4px;
    padding:10px 12px;
    border:1px solid #dce8de;
    border-radius:10px;
    background:#f6fbf7;
    color:#23402a;
    font-size:13px;
    font-weight:700;
    line-height:1.35;
}

/* ==========================================================
   PAYMENT PAGE
========================================================== */

.payment-page{

    background:#f5f7fd;
    min-height:100vh;
    padding:24px 12px 70px;

}

.coupon-page{

    background:#f5f7fd;
    min-height:100vh;
    padding:24px 12px 70px;

}

.payment-shell{

    max-width:1080px;
    margin:auto;

}

.coupon-page-shell{

    max-width:980px;
    margin:auto;

}

.payment-header{

    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;

}

.payment-back{

    width:40px;
    height:40px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #ececec;

}

.payment-header h1{

    font-size:28px;

}

.payment-layout{

    display:grid;
    grid-template-columns:1fr 340px;
    gap:16px;
    align-items:start;

}

.coupon-page-grid{

    display:grid;
    grid-template-columns:1fr 320px;
    gap:16px;
    align-items:start;

}

.coupon-page-panel{

    background:#fff;
    border:1px solid #ececec;
    border-radius:14px;
    padding:16px;

}

.coupon-page-summary{

    position:sticky;
    top:100px;

}

.payment-panel{

    background:#fff;
    border:1px solid #ececec;
    border-radius:14px;
    padding:16px;
    margin-bottom:14px;

}

.payment-panel h2{

    font-size:17px;
    margin-bottom:12px;

}

.payment-address,
.payment-method{

    display:flex;
    align-items:flex-start;
    gap:12px;
    border:1px solid #ececec;
    border-radius:12px;
    padding:12px;
    background:#fff;

}

.payment-address i{

    color:var(--green);
    font-size:20px;

}

.payment-address p,
.payment-method small{

    color:#666;
    font-size:13px;

}

.payment-method{

    align-items:center;
    margin-bottom:10px;
    cursor:pointer;

}

.payment-method input{

    accent-color:var(--green);

}

.payment-summary{

    position:sticky;
    top:100px;

}

/* Footer */

.drawer-footer{

    background:#fff;
    border-top:1px solid #ececec;

    padding:8px 12px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    min-height:64px;

}

.drawer-total{

    width:70px;

    line-height:1.1;

}

.drawer-total strong{

    display:block;

    font-size:16px;

    margin-bottom:2px;

}

.drawer-total small{

    color:#777;

    font-size:10px;

    letter-spacing:.5px;

}

#proceedCheckout{

    flex:1;

    height:46px;

    border:none;

    border-radius:10px;

    background:#0C831F;

    color:#fff;

    font-size:15px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    cursor:pointer;

}
/* ==========================================================
   BLINKIT MOBILE RESPONSIVE
========================================================== */

@media (max-width:768px){

/* Full-screen cart drawer */

.cart-overlay{

display:block;

background:rgba(0,0,0,.28);

}

.cart-drawer{

display:flex;
right:-100%;
width:100%;
max-width:none;
height:100dvh;
box-shadow:none;

}

.cart-drawer.active{

right:0;

}

.drawer-header{

height:60px;
padding:0 14px;

}

.drawer-body{

padding:8px 10px 88px;
gap:8px;

}

.drawer-footer{

min-height:70px;
padding:10px 12px calc(10px + env(safe-area-inset-bottom));

}

.drawer-item{

gap:10px;
padding:10px;
align-items:flex-start;

}

.drawer-image,
.drawer-item img{

width:58px;
height:58px;

}

.drawer-info h4{

font-size:13px;

}

.drawer-qty{

width:84px;
height:34px;
padding:0 8px;
flex-shrink:0;

}

.drawer-share{

font-size:14px;

}

/* Page */

.cart-page{

padding:0 0 90px;

background:#F5F7FD;

}

/* One column */

.cart-container{

display:block;

max-width:100%;

padding:0;

}

/* Left */

.cart-left{

padding:16px;

}

/* Hide desktop bill */

.cart-right{

display:none;

}

/* Header */

.cart-left h1{

font-size:24px;

margin-bottom:4px;

}

#cartItemCount{

font-size:14px;

margin-bottom:16px;

}

/* Savings */

.cart-savings{

padding:14px 16px;

border-radius:14px;

}

.cart-savings span{

font-size:14px;

}

.cart-savings strong{

font-size:18px;

}

/* Delivery */

.delivery-box{

padding:16px;

border-radius:16px;

}

.delivery-icon{

width:46px;

height:46px;

font-size:22px;

}

.delivery-info h3{

font-size:16px;

}

.delivery-info p{

font-size:12px;

}

/* Product */

.cart-item{

padding:14px;

border-radius:16px;

align-items:flex-start;

}

.cart-product{

gap:12px;

}

.cart-product img{

width:64px;

height:64px;

}

.cart-info h4{

font-size:14px;

}

.cart-info p{

font-size:12px;

margin-bottom:6px;

}

.cart-price strong{

font-size:16px;

}

.cart-price del{

font-size:12px;

}

/* Quantity */

.cart-actions{

width:84px;

height:34px;

}

.cart-actions button{

width:28px;

height:34px;

font-size:18px;

}

.cart-qty{

font-size:14px;

}

/* Coupon */

.coupon-box{

padding:14px;

border-radius:14px;

}

.coupon-box div{

font-size:14px;

}

/* Address */

.address-box{

padding:14px;

border-radius:14px;

}

.address-box strong{

font-size:14px;

}

.address-box p{

font-size:12px;

}

/* Sticky Mobile Button */

.mobile-bottom{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    background:#fff;

    border-top:1px solid #ececec;

    display:flex;

    align-items:center;

    gap:12px;

    padding:10px 14px;

    z-index:999;

}
.mobile-total{

    width:72px;

    flex-shrink:0;

}

.mobile-total strong{

    display:block;

    font-size:18px;

    font-weight:700;

    line-height:1;

}

.mobile-total small{

    display:block;

    margin-top:3px;

    font-size:10px;

    color:#777;

    letter-spacing:.5px;

}

.mobile-bottom .checkout-btn{

    flex:1;

    height:46px;

    margin:0;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

}

.flow-modal{

    width:calc(100% - 28px);
    padding:20px;

}

.flow-sheet{

    width:100%;
    max-height:82vh;
    border-radius:22px 22px 0 0;
    padding:24px;

}

.address-sheet{

    min-height:64vh;
    padding:26px 24px calc(24px + env(safe-area-inset-bottom));

}

.address-sheet .sheet-header h2{

    font-size:22px;

}

.add-address-row{

    min-height:64px;
    font-size:19px;
    padding:0 22px;

}

.saved-address-card{

    grid-template-columns:52px 1fr;
    border-radius:16px;
    padding:14px;

}

.saved-address-actions{

    grid-column:1 / -1;

}

.address-form{

    padding:14px;

}

.payment-page{

    padding:16px 12px 86px;

}

.payment-layout{

    display:block;

}

.coupon-page-grid{

    display:block;

}

.coupon-page-summary{

    position:static;
    margin-top:14px;

}

.payment-header h1{

    font-size:24px;

}

.payment-summary{

    position:static;

}

/* Body bottom space */

body{

padding-bottom:84px;

}

}




/* ==========================================================
   CUSTOMER ACCOUNT PANEL
========================================================== */

.account-page{
    background:#f5f7fd;
    min-height:100vh;
    padding:24px 12px 80px;
}

.account-shell{
    max-width:1040px;
    margin:auto;
}

.account-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:16px;
    margin-bottom:18px;
}

.account-heading p{
    color:var(--green);
    font-size:13px;
    font-weight:700;
    margin-bottom:4px;
}

.account-heading h1{
    font-size:32px;
    line-height:1.1;
}

.account-back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--green);
    font-weight:700;
    font-size:14px;
}

.account-panel{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.account-loading,
.account-login-card,
.account-profile,
.account-empty-orders,
.account-order-card{
    background:#fff;
    border:1px solid #ececec;
    border-radius:16px;
    padding:18px;
}

.account-login-card,
.account-empty-orders{
    max-width:520px;
    text-align:center;
    margin:auto;
    padding:34px 22px;
}

.account-login-card > i,
.account-empty-orders > i{
    color:var(--green);
    font-size:42px;
    margin-bottom:10px;
}

.account-login-card h2,
.account-empty-orders h2{
    font-size:22px;
    margin-bottom:8px;
}

.account-login-card p,
.account-empty-orders p{
    color:#666;
    font-size:14px;
}

.account-empty-orders a{
    display:inline-flex;
    margin-top:16px;
    color:#fff;
    background:var(--green);
    border-radius:10px;
    padding:11px 16px;
    font-weight:700;
}

.account-profile{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
}

.account-profile small{
    color:#666;
    font-size:12px;
}

.account-profile h2{
    font-size:22px;
    margin-top:2px;
}

.account-profile button{
    border:1px solid #ffd1d1;
    background:#fff7f7;
    color:#bb1b1b;
    border-radius:9px;
    padding:9px 14px;
    font-weight:700;
}

.account-orders{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.account-section-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.account-section-title h2{
    font-size:22px;
}

.account-section-title span{
    color:#666;
    font-size:13px;
}

.account-order-card{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.account-order-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
}

.account-order-top small{
    color:#666;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
}

.account-order-top h3{
    font-size:18px;
    margin:2px 0;
}

.account-order-top p{
    color:#666;
    font-size:13px;
}

.account-order-top > strong{
    font-size:18px;
}

.account-order-items{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.account-order-item{
    display:grid;
    grid-template-columns:52px 1fr auto;
    gap:10px;
    align-items:center;
    background:#fafafa;
    border-radius:12px;
    padding:8px;
}

.account-order-item img{
    width:52px;
    height:52px;
    object-fit:contain;
    border-radius:9px;
    background:#fff;
}

.account-order-item strong{
    display:block;
    font-size:14px;
    line-height:1.3;
}

.account-order-item small{
    color:#666;
    font-size:12px;
}

.account-order-item span{
    font-size:14px;
    font-weight:700;
}

.account-order-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.account-order-actions button{
    min-height:38px;
    border-radius:9px;
    padding:0 13px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:13px;
    font-weight:700;
}

.account-order-actions button:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.track-order-btn{
    background:#effaf1;
    color:var(--green);
    border:1px solid #cfead4;
}

.download-invoice-btn{
    background:#fff;
    color:#333;
    border:1px solid #dedede;
}

.order-cancel-request-btn{
    background:#fff1f2;
    color:#be123c;
    border:1px solid #fecdd3;
}

.order-return-request-btn,
.order-refund-request-btn{
    background:#f8fafc;
    color:#0f172a;
    border:1px solid #dbe4ee;
}

.account-request-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:10px 0 0;
}

.account-request-badges span{
    padding:6px 9px;
    border-radius:999px;
    background:#fff7ed;
    color:#c2410c;
    font-size:11px;
    font-weight:800;
    text-transform:capitalize;
}

.order-track{
    display:none;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    padding-top:4px;
}

.order-track.active{
    display:grid;
}

.track-step{
    position:relative;
    display:flex;
    align-items:center;
    gap:7px;
    color:#777;
    font-size:12px;
    font-weight:700;
}

.track-step span{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#ddd;
    flex-shrink:0;
}

.track-step.done{
    color:var(--green);
}

.track-step.done span{
    background:var(--green);
}

@media(max-width:768px){
    .mobile-bottom{
        min-height:54px;
        padding:7px 10px calc(7px + env(safe-area-inset-bottom));
        gap:8px;
    }

    .mobile-total{
        width:64px;
    }

    .mobile-total strong{
        font-size:15px;
    }

    .mobile-total small{
        font-size:9px;
    }

    .mobile-bottom .checkout-btn{
        height:40px;
        border-radius:9px;
        font-size:14px;
    }

    .drawer-footer{
        min-height:58px;
        padding:7px 10px calc(7px + env(safe-area-inset-bottom));
    }

    .drawer-total{
        width:64px;
    }

    .drawer-total strong{
        font-size:15px;
    }

    #proceedCheckout{
        height:40px;
        border-radius:9px;
        font-size:14px;
    }

    .account-page{
        padding:18px 12px 78px;
    }

    .account-heading{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }

    .account-heading h1{
        font-size:26px;
    }

    .account-profile{
        align-items:flex-start;
        flex-direction:column;
    }

    .account-profile button{
        width:100%;
    }

    .account-order-top{
        align-items:flex-start;
        flex-direction:column;
    }

    .account-order-item{
        grid-template-columns:46px 1fr;
    }

    .account-order-item img{
        width:46px;
        height:46px;
    }

    .account-order-item span{
        grid-column:2;
    }

    .account-order-actions button{
        flex:1;
        justify-content:center;
    }

    .order-track{
        grid-template-columns:1fr;
    }
}

.cart-product .product-image-placeholder,
.drawer-image .product-image-placeholder{
    width:56px;
    height:56px;
    font-size:22px;
}

/* ==========================================================
   POLISHED CUSTOMER PANEL, TRACKING, WALLET AND PAYMENT
========================================================== */

.account-page{
    padding:0 0 82px;
    background:#f3f4f6;
}

.account-shell{
    max-width:720px;
    min-height:100vh;
}

.account-heading{
    display:none;
}

.account-panel{
    gap:16px;
}

.account-app-header{
    min-height:228px;
    padding:54px 24px 28px;
    display:grid;
    grid-template-columns:92px 1fr 44px;
    gap:20px;
    align-items:center;
    color:#fff;
    background:#0876d8;
}

.account-avatar{
    width:92px;
    height:92px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#070b14;
    font-size:44px;
}

.account-app-header h2{
    margin:0 0 4px;
    font-size:32px;
    line-height:1.1;
    font-weight:900;
}

.account-app-header p{
    margin:2px 0;
    font-size:21px;
    line-height:1.25;
    opacity:.92;
}

.account-edit-btn{
    width:44px;
    height:44px;
    border:0;
    background:transparent;
    color:#fff;
    font-size:28px;
}

.account-action-card,
.account-address-card,
.account-menu-card,
.account-subpage,
.wallet-view-transactions,
.wallet-add-money,
.wallet-transactions,
.delivery-partner-card,
.delivery-route-card,
.delivery-summary-card,
.delivery-detail-card{
    margin:18px 24px;
    border:1px solid #e8e8e8;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 20px rgba(15,23,42,.04);
}

.account-action-card{
    margin-top:40px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    padding:26px 0;
}

.account-action-card button{
    min-height:118px;
    display:grid;
    place-items:center;
    gap:12px;
    border:0;
    border-right:1px solid #ededed;
    background:transparent;
    color:#111;
    font-size:20px;
    font-weight:800;
}

.account-action-card button:last-child{
    border-right:0;
}

.account-action-card span,
.account-address-card span,
.account-menu-row span,
.support-contact-card span,
.wallet-view-transactions span,
.delivery-partner-card span,
.delivery-route-card span,
.delivery-summary-card > span{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:#f5f5f5;
    color:#0f172a;
    font-size:28px;
}

.account-address-card{
    padding:24px;
}

.account-address-card h3{
    margin:0 0 22px;
    font-size:28px;
    font-weight:900;
}

.account-address-card > div{
    display:grid;
    grid-template-columns:58px 1fr 42px;
    gap:18px;
    align-items:center;
}

.account-address-card strong{
    display:block;
    font-size:24px;
}

.account-address-card small{
    display:block;
    margin-top:4px;
    color:#777;
    font-size:14px;
}

.account-address-card button{
    border:0;
    background:transparent;
    color:#999;
    font-size:28px;
}

.account-menu-card{
    overflow:hidden;
}

.account-menu-row{
    width:100%;
    min-height:92px;
    display:grid;
    grid-template-columns:58px 1fr 24px;
    gap:22px;
    align-items:center;
    padding:16px 24px;
    border:0;
    border-bottom:1px solid #efefef;
    background:#fff;
    text-align:left;
}

.account-menu-row:last-child{
    border-bottom:0;
}

.account-menu-row strong{
    display:block;
    font-size:24px;
    font-weight:800;
}

.account-menu-row small{
    display:block;
    margin-top:5px;
    color:#888;
    font-size:17px;
    font-weight:600;
}

.account-menu-row > i{
    color:#aaa;
    font-size:24px;
}

.account-mobile-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:130;
    height:72px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid #e6e6e6;
    background:#fff;
}

.account-mobile-nav button{
    border:0;
    background:#fff;
    color:#777;
    display:grid;
    place-items:center;
    gap:2px;
    font-size:13px;
    font-weight:800;
}

.account-mobile-nav i{
    font-size:27px;
}

.account-mobile-nav .active{
    color:#111;
}

.account-subpage{
    min-height:calc(100vh - 118px);
    margin:0;
    padding:38px 24px 96px;
    border:0;
    border-radius:0;
    box-shadow:none;
}

.account-subpage-back,
.delivery-track-head button{
    width:46px;
    height:46px;
    display:inline-grid;
    place-items:center;
    margin-right:18px;
    border:0;
    background:transparent;
    color:#111;
    font-size:31px;
    vertical-align:middle;
}

.account-subpage h2{
    display:inline-block;
    margin:0;
    font-size:28px;
    font-weight:900;
}

.account-subpage > p{
    margin:10px 0 22px 68px;
    color:#777;
    font-weight:700;
}

.account-payment-split{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.account-payment-split span{
    padding:7px 10px;
    border-radius:999px;
    background:#eef6ff;
    color:#0f65ad;
    font-size:12px;
    font-weight:800;
}

.support-contact-card{
    min-height:128px;
    margin-top:38px;
    padding:24px 32px;
    display:grid;
    grid-template-columns:70px 1fr 90px;
    gap:18px;
    align-items:center;
    border:1px solid #e4e4e4;
    border-radius:18px;
    color:#111;
    box-shadow:0 8px 18px rgba(15,23,42,.05);
}

.support-contact-card span{
    background:#eaf5ff;
    color:#0876d8;
}

.support-contact-card strong{
    font-size:24px;
    line-height:1.2;
}

.support-contact-card small{
    display:block;
    margin-top:5px;
    color:#666;
    font-size:17px;
    font-weight:700;
}

.support-contact-card em{
    color:#aaa;
    font-size:13px;
    font-style:normal;
    text-align:right;
}

.wallet-view{
    padding:0 0 96px;
}

.wallet-hero{
    min-height:360px;
    padding:52px 40px 0;
    position:relative;
    color:#fff;
    background:radial-gradient(circle at 72% 20%,rgba(255,214,102,.45),transparent 18%),#070707;
    overflow:visible;
}

.wallet-hero h2{
    display:block;
    text-align:center;
    color:#fff;
}

.wallet-hero .account-subpage-back{
    position:absolute;
    top:48px;
    left:28px;
    color:#fff;
}

.wallet-balance-card{
    position:absolute;
    left:40px;
    right:40px;
    bottom:-74px;
    min-height:170px;
    padding:28px 34px;
    border-radius:22px;
    background:linear-gradient(150deg,#2fb0ff,#0876d8);
    color:#fff;
    box-shadow:0 18px 30px rgba(8,118,216,.26);
}

.wallet-balance-card span{
    display:block;
    font-size:24px;
    font-weight:800;
}

.wallet-balance-card strong{
    display:block;
    margin-top:14px;
    font-size:52px;
    line-height:1;
    font-weight:950;
}

.wallet-balance-card small{
    display:block;
    margin-top:18px;
    opacity:.8;
    font-size:17px;
    font-weight:800;
}

.wallet-view-transactions{
    width:calc(100% - 80px);
    min-height:92px;
    margin:116px 40px 24px;
    padding:18px 28px;
    display:grid;
    grid-template-columns:58px 1fr 24px;
    gap:20px;
    align-items:center;
    text-align:left;
    color:#111;
}

.wallet-view-transactions strong{
    font-size:24px;
}

.wallet-add-money{
    padding:20px;
}

.wallet-add-money label{
    display:block;
    margin-bottom:10px;
    font-weight:900;
}

.wallet-add-money > div{
    display:grid;
    grid-template-columns:1fr 160px;
    gap:10px;
}

.wallet-add-money input{
    min-height:52px;
    border:1px solid #dfe3e8;
    border-radius:10px;
    padding:0 14px;
    font-size:18px;
    font-weight:800;
}

.wallet-add-money button{
    min-height:52px;
    border:0;
    border-radius:10px;
    background:#0876d8;
    color:#fff;
    font-size:16px;
    font-weight:900;
}

.wallet-add-money small{
    display:block;
    margin-top:10px;
    color:#64748b;
    font-weight:700;
}

.wallet-transactions{
    padding:8px;
}

.wallet-transaction-row{
    display:grid;
    grid-template-columns:46px 1fr auto;
    gap:12px;
    align-items:center;
    padding:12px;
    border-bottom:1px solid #f0f0f0;
}

.wallet-transaction-row:last-child{
    border-bottom:0;
}

.wallet-transaction-row span{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#edf7ff;
    color:#0876d8;
}

.wallet-transaction-row strong{
    font-size:16px;
}

.wallet-transaction-row small{
    display:block;
    color:#777;
    font-size:12px;
}

.wallet-transaction-row b.credit{
    color:#15803d;
}

.wallet-transaction-row b.debit{
    color:#dc2626;
}

.wallet-empty{
    padding:18px;
    color:#777;
    font-weight:700;
}

.delivery-track-view{
    min-height:100vh;
    padding-bottom:90px;
    background:#eef2f4;
}

.delivery-track-head{
    min-height:250px;
    padding:64px 36px 32px;
    color:#fff;
    background:#0876d8;
}

.delivery-track-head button{
    color:#fff;
    margin:0 26px 0 0;
}

.delivery-track-head span{
    font-size:25px;
    font-weight:700;
}

.delivery-track-head h2{
    margin:26px 0 0 40px;
    font-size:44px;
    line-height:1.1;
    font-weight:950;
}

.delivery-map-card{
    min-height:300px;
    position:relative;
    margin:24px;
    display:grid;
    place-items:center;
    border-radius:22px;
    background:#cfcfcf;
    color:#fff;
    overflow:hidden;
}

.delivery-map-card button{
    position:absolute;
    top:24px;
    right:24px;
    width:68px;
    height:68px;
    border:0;
    border-radius:50%;
    background:#fff;
    color:#0876d8;
    font-size:34px;
    box-shadow:0 6px 14px rgba(15,23,42,.16);
}

.delivery-map-card p{
    font-size:28px;
    font-style:italic;
    font-weight:900;
    opacity:.75;
}

.map-home-marker{
    position:absolute;
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#f97316;
    color:#fff;
    box-shadow:0 0 0 7px rgba(255,255,255,.65);
}

.delivery-partner-card,
.delivery-route-card,
.delivery-summary-card,
.delivery-detail-card{
    padding:26px;
}

.delivery-partner-card{
    display:grid;
    grid-template-columns:80px 1fr;
    gap:20px;
    align-items:center;
}

.delivery-partner-card strong{
    font-size:27px;
    line-height:1.35;
}

.delivery-route-card{
    display:grid;
    gap:0;
}

.delivery-route-card div{
    position:relative;
    display:grid;
    grid-template-columns:72px 1fr;
    gap:18px;
    padding:16px 0;
}

.delivery-route-card div + div:before{
    content:"";
    position:absolute;
    left:29px;
    top:-20px;
    width:3px;
    height:42px;
    background:#0876d8;
}

.delivery-route-card strong{
    font-size:23px;
}

.delivery-route-card small{
    display:block;
    margin-top:4px;
    color:#777;
    font-size:17px;
}

.delivery-summary-card{
    display:grid;
    grid-template-columns:72px 1fr;
    gap:18px;
    align-items:start;
}

.delivery-summary-card strong{
    font-size:28px;
}

.delivery-summary-card small{
    display:block;
    color:#777;
    font-size:17px;
}

.delivery-summary-images{
    grid-column:2;
    display:flex;
    gap:18px;
    margin-top:18px;
}

.delivery-summary-images img{
    width:106px;
    height:106px;
    object-fit:contain;
    border-radius:16px;
    background:#f1f1f1;
}

.delivery-summary-card button{
    grid-column:1 / -1;
    min-height:72px;
    margin:16px -26px -26px;
    border:0;
    border-top:1px solid #e1e5e9;
    background:#fff;
    font-size:24px;
    font-weight:800;
}

.delivery-detail-card h3{
    margin:0 0 26px;
    font-size:32px;
}

.delivery-detail-card p{
    display:flex;
    justify-content:space-between;
    gap:18px;
    color:#777;
    font-size:18px;
}

.delivery-detail-card strong{
    color:#111;
}

.payment-method{
    display:grid;
    grid-template-columns:48px 1fr;
    gap:14px;
    padding:16px;
    border:1px solid #dde5de;
    background:#fff;
}

.payment-method input{
    position:absolute;
    opacity:0;
}

.payment-method strong{
    display:block;
    font-size:16px;
    font-weight:900;
}

.payment-method small{
    display:block;
    margin-top:4px;
    color:#64748b;
    font-size:12px;
    line-height:1.35;
}

.payment-brand-razorpay{
    display:inline-flex;
    margin-top:9px;
    color:#0b5ed7;
    font-size:18px;
    font-style:normal;
    font-weight:950;
    letter-spacing:0;
}

.payment-method-chips{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:8px;
}

.payment-method-chips b{
    padding:4px 7px;
    border-radius:999px;
    background:#eef6ff;
    color:#1d4ed8;
    font-size:10px;
    font-weight:900;
}

.payment-method:has(input:checked) .payment-method-icon{
    background:#0C831F;
    color:#fff;
}

.order-success-screen{
    position:fixed;
    inset:0;
    z-index:10000;
    display:grid;
    place-items:center;
    background:#fff;
    overflow:hidden;
}

.order-success-content{
    position:relative;
    z-index:2;
    max-width:520px;
    padding:24px;
    text-align:center;
    color:#111;
}

.order-success-content > span{
    width:154px;
    height:154px;
    display:grid;
    place-items:center;
    margin:0 auto 28px;
    border-radius:50%;
    background:#0876d8;
    color:#fff;
    font-size:92px;
}

.order-success-content h1{
    margin:0 0 24px;
    font-size:30px;
    font-weight:800;
}

.order-success-content p,
.order-success-content strong{
    display:block;
    margin:8px 0;
    font-size:26px;
    line-height:1.35;
    font-weight:800;
}

.order-success-content strong{
    font-weight:700;
}

.order-success-confetti{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.order-success-confetti span,
.order-confetti-layer span{
    position:absolute;
    top:-60px;
    width:10px;
    height:34px;
    opacity:.95;
    animation:order-confetti-fall linear forwards;
}

@keyframes order-confetti-fall{
    0%{transform:translateY(-80px) rotate(0deg)}
    100%{transform:translateY(112vh) rotate(540deg)}
}

@media(min-width:769px){
    .account-shell{
        max-width:960px;
        padding:24px 0;
    }

    .account-app-header{
        border-radius:18px;
    }

    .account-mobile-nav{
        position:static;
        max-width:520px;
        margin:20px auto;
        border:1px solid #e6e6e6;
        border-radius:16px;
        overflow:hidden;
    }
}

@media(max-width:520px){
    .account-app-header{
        min-height:196px;
        grid-template-columns:76px 1fr 34px;
        gap:14px;
        padding:42px 24px 22px;
    }

    .account-avatar{
        width:76px;
        height:76px;
        font-size:36px;
    }

    .account-app-header h2{
        font-size:26px;
    }

    .account-app-header p{
        font-size:18px;
    }

    .account-action-card,
    .account-address-card,
    .account-menu-card{
        margin-left:14px;
        margin-right:14px;
    }

    .account-action-card button{
        min-height:96px;
        font-size:16px;
    }

    .account-menu-row{
        min-height:78px;
        padding:12px 16px;
        grid-template-columns:48px 1fr 20px;
        gap:16px;
    }

    .account-menu-row span,
    .account-action-card span,
    .account-address-card span{
        width:48px;
        height:48px;
        font-size:23px;
    }

    .account-menu-row strong{
        font-size:20px;
    }

    .wallet-balance-card strong{
        font-size:42px;
    }

    .wallet-add-money > div{
        grid-template-columns:1fr;
    }

    .delivery-track-head h2{
        margin-left:0;
        font-size:36px;
    }
}

/* ==========================================================
   REQUESTED CHECKOUT, ACCOUNT AND MOBILE FOOTER UPDATES
========================================================== */

@media(max-width:768px){
    body{
        padding-bottom:0 !important;
    }
}

.detect-address-row{
    margin-top:8px;
    color:#0C831F;
    background:#f2fff5;
    border-color:#c9efd1;
}

.payment-page{
    background:#f4f6f4;
    padding:18px 12px 48px;
}

.payment-shell{
    max-width:1180px;
}

.payment-header{
    min-height:58px;
    margin-bottom:12px;
}

.payment-header h1{
    font-size:24px;
    font-weight:900;
}

.payment-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:18px;
}

.payment-main{
    min-width:0;
}

.payment-panel,
.payment-summary{
    border-radius:8px;
    border-color:#e4e8e2;
    box-shadow:0 6px 18px rgba(15,23,42,.04);
}

.payment-panel{
    padding:0;
    overflow:hidden;
}

.payment-panel-title{
    min-height:54px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-bottom:1px solid #eef1ec;
}

.payment-panel-title span{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#0C831F;
    color:#fff;
    font-weight:900;
}

.payment-panel-title h2{
    margin:0;
    font-size:17px;
    font-weight:900;
}

.payment-address{
    margin:14px;
    border-radius:8px;
    background:#f8fff8;
}

.payment-address small{
    display:block;
    margin-top:7px;
    color:#0C831F;
    font-size:12px;
    font-weight:800;
}

.payment-method-list{
    display:grid;
    gap:10px;
    padding:14px;
}

.payment-method{
    position:relative;
    margin:0;
    border-radius:8px;
    transition:.18s;
}

.payment-method:has(input:checked){
    border-color:#0C831F;
    background:#f3fff5;
    box-shadow:0 0 0 2px rgba(12,131,31,.08);
}

.payment-method-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#edf7ee;
    color:#0C831F;
    flex:0 0 38px;
}

.payment-wallet-box{
    margin:0 14px 14px;
    padding:12px;
    border:1px solid #dce8de;
    border-radius:10px;
    background:#fbfffb;
}

.payment-wallet-box[hidden]{
    display:none !important;
}

.payment-wallet-head{
    display:flex;
    align-items:center;
    gap:10px;
}

.payment-wallet-head > div{
    min-width:0;
    flex:1;
}

.payment-wallet-head strong,
.payment-wallet-toggle span{
    display:block;
    color:#111827;
    font-weight:900;
}

.payment-wallet-head small,
.payment-wallet-help{
    display:block;
    color:#64748b;
    font-size:12px;
    line-height:1.35;
}

.payment-wallet-head b{
    color:#0C831F;
    font-size:17px;
    white-space:nowrap;
}

.payment-wallet-toggle{
    display:flex;
    align-items:center;
    gap:8px;
    margin:12px 0 10px;
    cursor:pointer;
}

.payment-wallet-toggle input{
    width:18px;
    height:18px;
    accent-color:#0C831F;
}

.payment-wallet-control{
    display:grid;
    gap:6px;
    margin-bottom:8px;
}

.payment-wallet-control label{
    color:#475569;
    font-size:12px;
    font-weight:800;
}

.payment-wallet-control > div{
    display:flex;
    gap:8px;
}

.payment-wallet-control input{
    min-width:0;
    flex:1;
    height:38px;
    border:1px solid #d7e0d8;
    border-radius:8px;
    padding:0 10px;
    font-weight:900;
}

.payment-wallet-control button{
    flex:0 0 auto;
    height:38px;
    border:0;
    border-radius:8px;
    padding:0 12px;
    background:#0C831F;
    color:#fff;
    font-weight:900;
}

.payment-wallet-row,
.payment-remaining-row{
    display:none;
}

.payment-wallet-row strong{
    color:#0C831F;
}

.payment-summary{
    top:92px;
    padding:16px;
}

.payment-summary h3{
    font-size:18px;
    font-weight:900;
}

.payment-summary .checkout-btn{
    height:50px;
    border-radius:8px;
    font-size:16px;
    font-weight:900;
}

.account-page{
    background:#f4f6f4;
}

.account-heading{
    padding:18px;
    border-radius:8px;
    background:#fff;
    border:1px solid #e6ebe3;
}

.account-heading p{
    color:#0C831F;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.account-profile{
    border-radius:8px;
    background:linear-gradient(135deg,#0C831F,#18a735);
    color:#fff;
}

.account-profile small{
    color:rgba(255,255,255,.78);
}

.account-profile button{
    background:#fff;
    border-color:#fff;
}

.account-order-card{
    border-radius:8px;
    box-shadow:0 8px 22px rgba(15,23,42,.04);
}

.account-order-total{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
}

.account-order-total span{
    padding:4px 8px;
    border-radius:999px;
    background:#effaf1;
    color:#0C831F;
    font-size:12px;
    font-weight:900;
}

.order-track{
    padding:12px;
    border-radius:8px;
    background:#f8faf8;
}

.order-confetti-layer{
    position:fixed;
    inset:0;
    z-index:20000;
    pointer-events:none;
    overflow:hidden;
}

.order-confetti-layer span{
    position:absolute;
    top:-18px;
    width:9px;
    height:14px;
    border-radius:2px;
    opacity:.95;
    animation:order-confetti-fall 2.6s linear forwards;
}

@keyframes order-confetti-fall{
    0%{
        transform:translateY(-20px) rotate(0deg);
    }
    100%{
        transform:translateY(110vh) rotate(540deg);
        opacity:.2;
    }
}

@media(max-width:768px){
    .payment-page{
        padding:0 0 28px;
    }

    .payment-shell{
        max-width:none;
    }

    .payment-header{
        position:sticky;
        top:0;
        z-index:50;
        padding:10px 14px;
        margin:0;
        background:#fff;
        border-bottom:1px solid #edf0ec;
    }

    .payment-layout{
        display:block;
    }

    .payment-panel,
    .payment-summary{
        margin:10px 12px;
        border-radius:8px;
    }

    .payment-summary{
        position:static;
    }

    .payment-method{
        padding:12px;
    }

    .account-heading{
        padding:14px;
    }

    .account-order-total{
        align-items:flex-start;
    }
}

/* ==========================================================
   SHYAMANSH QUICK-COMMERCE CART REFRESH
========================================================== */

:root{
    --green:#0f766e;
    --green-dark:#115e59;
    --bg:#f4f7f9;
    --card:#ffffff;
    --border:#e2ebf0;
    --text:#172026;
    --muted:#607083;
    --blue:#e8f4ff;
    --blue-text:#2563eb;
}

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

.cart-card,
.cart-item,
.coupon-box,
.address-box,
.bill-card,
.delivery-card,
.drawer-item,
.drawer-address{
    border-color:var(--border);
    border-radius:10px;
    box-shadow:0 6px 16px rgba(15,23,42,.05);
}

.cart-left h1{
    color:var(--text);
    font-weight:900;
}

.delivery-icon{
    background:#e4f7f2;
    color:var(--green-dark);
}

.checkout-btn,
.coupon-box button,
.address-box button,
.drawer-footer button,
.flow-primary{
    background:var(--green);
    border-radius:10px;
    box-shadow:0 10px 18px rgba(15,118,110,.18);
}

.checkout-btn:hover,
.coupon-box button:hover,
.address-box button:hover,
.drawer-footer button:hover,
.flow-primary:hover{
    background:var(--green-dark);
}

.cart-actions,
.drawer-qty{
    background:var(--green);
    border-radius:8px;
}

.coupon-box i,
.drawer-share,
.address-change{
    color:var(--green);
}

.cart-overlay{
    background:rgba(10,18,25,.54);
    backdrop-filter:blur(2px);
}

.cart-drawer{
    width:min(420px,100vw);
    background:var(--bg);
    box-shadow:-18px 0 55px rgba(15,23,42,.24);
}

.drawer-header{
    height:68px;
    border-bottom-color:var(--border);
}

.drawer-title h2{
    color:var(--text);
    font-size:19px;
    font-weight:900;
}

.drawer-body{
    gap:9px;
    padding:10px;
}

.delivery-card{
    padding:10px;
}

.drawer-delivery{
    color:#245a35;
    background:#edf8f4;
}

.drawer-info h4{
    color:var(--text);
}

.drawer-price{
    color:var(--text);
    font-weight:900;
}

.bill-total{
    color:var(--text);
}

.drawer-footer{
    border-top:1px solid var(--border);
}

.flow-sheet,
.flow-modal{
    border-radius:12px;
}

.coupon-option{
    border-radius:10px;
}

.coupon-option:hover{
    border-color:var(--green);
    background:#f1faf8;
}

@media(max-width:768px){
    .cart-container{
        grid-template-columns:1fr;
        padding:0 12px;
    }

    .cart-left h1{
        font-size:25px;
    }

    .cart-drawer{
        width:100vw;
        right:-100vw;
    }

    .cart-drawer.active{
        right:0;
    }

    .drawer-header{
        height:62px;
    }

    .drawer-footer{
        padding-bottom:calc(12px + env(safe-area-inset-bottom));
    }
}

/* Compact account panel refinements */
.account-page{
    padding:0 0 24px !important;
    background:#f6f6f6;
}

.account-shell{
    max-width:720px;
    margin:0 auto;
}

.account-mobile-nav{
    display:none !important;
}

.account-app-header{
    min-height:150px !important;
    padding:32px 24px 22px !important;
    grid-template-columns:72px minmax(0,1fr) 34px !important;
    gap:14px !important;
    background:#0876d8;
}

.account-avatar{
    width:72px !important;
    height:72px !important;
    border:0;
    padding:0;
    overflow:hidden;
    cursor:pointer;
}

.account-avatar img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.account-avatar i{
    font-size:34px;
}

.account-app-header h2{
    margin:0 0 4px !important;
    font-size:25px !important;
    line-height:1.1 !important;
}

.account-app-header p{
    margin:1px 0 !important;
    font-size:17px !important;
    line-height:1.25 !important;
}

.account-edit-btn{
    width:34px !important;
    height:34px !important;
    font-size:25px !important;
    cursor:pointer;
}

.account-photo-input{
    display:none !important;
}

.account-action-card,
.account-address-card,
.account-menu-card{
    margin:14px 14px !important;
    border-radius:14px !important;
    box-shadow:0 5px 14px rgba(15,23,42,.04) !important;
}

.account-action-card{
    margin-top:22px !important;
    padding:16px 0 !important;
}

.account-action-card button{
    min-height:74px !important;
    gap:8px !important;
    font-size:15px !important;
}

.account-action-card span,
.account-address-card span,
.account-menu-row span,
.account-utility-card > span{
    width:44px !important;
    height:44px !important;
    border-radius:12px !important;
    font-size:21px !important;
}

.account-address-card{
    padding:17px !important;
}

.account-address-card h3{
    margin:0 0 14px !important;
    font-size:22px !important;
}

.account-address-card > div{
    grid-template-columns:44px minmax(0,1fr) 30px !important;
    gap:14px !important;
}

.account-address-card strong{
    font-size:20px !important;
}

.account-address-card small{
    display:none;
}

.account-address-card button{
    font-size:24px !important;
}

.account-menu-card{
    overflow:hidden;
}

.account-menu-row{
    min-height:64px !important;
    grid-template-columns:44px minmax(0,1fr) 18px !important;
    gap:14px !important;
    padding:10px 18px !important;
}

.account-menu-row strong{
    font-size:19px !important;
    line-height:1.2 !important;
}

.account-menu-row small{
    margin-top:3px !important;
    font-size:14px !important;
}

.account-menu-row > i{
    font-size:20px !important;
}

.account-subpage{
    min-height:100vh !important;
    padding:28px 16px 34px !important;
}

.account-subpage-back{
    width:38px !important;
    height:38px !important;
    margin-right:12px !important;
    font-size:28px !important;
}

.account-subpage h2{
    font-size:24px !important;
}

.account-subpage > p{
    margin:8px 0 16px 52px !important;
}

.account-utility-card{
    margin-top:22px;
    padding:16px;
    border:1px solid #e7e7e7;
    border-radius:14px;
    background:#fff;
}

.account-utility-card > span{
    margin-bottom:14px;
}

.account-utility-empty{
    margin:0 0 12px;
    color:#686868;
    font-size:15px;
    line-height:1.45;
}

.account-utility-form{
    display:grid;
    grid-template-columns:1fr 78px;
    gap:8px;
    margin-bottom:12px;
}

.account-utility-form input{
    min-height:40px;
    border:1px solid #dfe3e8;
    border-radius:9px;
    padding:0 11px;
    font-size:14px;
}

.account-utility-form button,
.account-utility-primary,
.account-choice-grid button{
    min-height:40px;
    border:0;
    border-radius:9px;
    background:#0876d8;
    color:#fff;
    font-size:14px;
    font-weight:800;
}

.account-utility-row{
    min-height:44px;
    display:grid;
    grid-template-columns:34px 1fr;
    gap:10px;
    align-items:center;
    border-bottom:1px solid #f0f0f0;
}

.account-utility-row span{
    color:#0876d8;
}

.account-utility-row strong{
    font-size:15px;
}

.account-choice-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}

.account-choice-grid button{
    background:#f2f2f2;
    color:#111;
}

.account-choice-grid button.active{
    background:#0876d8;
    color:#fff;
}

.account-referral-code{
    margin:10px 0 12px;
    padding:12px;
    border:1px dashed #0876d8;
    border-radius:10px;
    color:#0876d8;
    font-size:22px;
    font-weight:900;
    text-align:center;
}

@media(min-width:769px){
    .account-shell{
        padding:0 !important;
    }

    .account-app-header{
        border-radius:0 !important;
    }
}

/* Account theme, support, and wallet polish */
body.account-dark-mode{
    background:#0f172a !important;
}

body.account-dark-mode .account-page{
    background:#0f172a !important;
    color:#e5e7eb !important;
}

body.account-dark-mode .account-action-card,
body.account-dark-mode .account-address-card,
body.account-dark-mode .account-menu-card,
body.account-dark-mode .account-subpage,
body.account-dark-mode .account-utility-card,
body.account-dark-mode .support-contact-card,
body.account-dark-mode .wallet-view-transactions,
body.account-dark-mode .wallet-add-money,
body.account-dark-mode .wallet-transactions{
    background:#111827 !important;
    border-color:#263244 !important;
    color:#e5e7eb !important;
}

body.account-dark-mode .account-menu-row{
    background:#111827 !important;
    border-color:#263244 !important;
    color:#e5e7eb !important;
}

body.account-dark-mode .account-menu-row strong,
body.account-dark-mode .account-address-card h3,
body.account-dark-mode .account-address-card strong,
body.account-dark-mode .account-subpage h2,
body.account-dark-mode .account-utility-row strong,
body.account-dark-mode .support-contact-card strong,
body.account-dark-mode .wallet-view-transactions strong,
body.account-dark-mode .wallet-transaction-row strong{
    color:#f8fafc !important;
}

body.account-dark-mode .account-menu-row small,
body.account-dark-mode .account-utility-empty,
body.account-dark-mode .support-contact-card small,
body.account-dark-mode .support-contact-card em,
body.account-dark-mode .wallet-add-money small,
body.account-dark-mode .wallet-empty{
    color:#a8b3c7 !important;
}

body.account-dark-mode .account-action-card span,
body.account-dark-mode .account-address-card span,
body.account-dark-mode .account-menu-row span,
body.account-dark-mode .account-utility-card > span,
body.account-dark-mode .wallet-view-transactions span,
body.account-dark-mode .wallet-transaction-row span{
    background:#1f2937 !important;
    color:#e5e7eb !important;
}

body.account-dark-mode .account-choice-grid button{
    background:#1f2937 !important;
    color:#e5e7eb !important;
}

body.account-dark-mode .account-choice-grid button.active{
    background:#0876d8 !important;
    color:#fff !important;
}

.support-view{
    padding-top:20px !important;
}

.support-contact-card{
    min-height:58px !important;
    margin:14px 0 0 !important;
    padding:10px 12px !important;
    grid-template-columns:36px minmax(0,1fr) 66px !important;
    gap:10px !important;
    border-radius:12px !important;
    box-shadow:0 4px 12px rgba(15,23,42,.04) !important;
}

.support-contact-card span{
    width:36px !important;
    height:36px !important;
    border-radius:50% !important;
    font-size:17px !important;
}

.support-contact-card strong{
    font-size:16px !important;
    line-height:1.1 !important;
}

.support-contact-card small{
    margin-top:3px !important;
    font-size:12px !important;
    line-height:1.15 !important;
    font-weight:700 !important;
}

.support-contact-card em{
    font-size:10px !important;
    line-height:1.15 !important;
}

.wallet-view{
    background:#fff !important;
}

.wallet-hero{
    min-height:350px !important;
    background:
        radial-gradient(circle at 78% 20%,rgba(255,214,102,.34),transparent 11%),
        radial-gradient(circle at 26% 13%,rgba(255,237,173,.16),transparent 9%),
        linear-gradient(154deg,#060b12 0%,#141923 45%,#071523 100%) !important;
    overflow:visible !important;
}

.wallet-hero:before,
.wallet-hero:after{
    content:"";
    position:absolute;
    pointer-events:none;
}

.wallet-hero:before{
    inset:0;
    background:
        radial-gradient(ellipse at 80% 34%,rgba(255,185,56,.22) 0 3%,transparent 3.2%),
        radial-gradient(ellipse at 56% 20%,rgba(255,222,124,.16) 0 3%,transparent 3.2%),
        radial-gradient(ellipse at 24% 72%,rgba(255,185,56,.12) 0 4%,transparent 4.2%),
        linear-gradient(120deg,rgba(255,255,255,.04),transparent 45%);
}

.wallet-hero:after{
    width:150px;
    height:118px;
    right:-24px;
    top:48px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,215,98,.28),transparent 62%);
    transform:rotate(-18deg);
}

.wallet-balance-card{
    overflow:hidden !important;
    padding-right:140px !important;
}

.wallet-balance-card:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(110deg,rgba(255,255,255,.16),transparent 48%);
    pointer-events:none;
}

.wallet-balance-card span,
.wallet-balance-card strong,
.wallet-balance-card small{
    position:relative;
    z-index:2;
}

.wallet-coin-refresh{
    position:absolute;
    right:24px;
    top:40px;
    width:92px;
    height:82px;
    border:0;
    padding:0;
    background:transparent;
    cursor:pointer;
    z-index:3;
}

.wallet-coin-refresh i,
.wallet-coin-refresh b{
    position:absolute;
    display:block;
    border-radius:50%;
    background:
        radial-gradient(circle at 34% 30%,#fff0a3 0 18%,transparent 19%),
        linear-gradient(145deg,#ffe37e 0%,#f7a800 62%,#c77700 100%);
    border:3px solid #f7c442;
    box-shadow:
        inset 0 -5px 0 rgba(122,74,0,.22),
        inset 0 4px 0 rgba(255,255,255,.44),
        0 10px 18px rgba(92,55,0,.22);
    transform-style:preserve-3d;
}

.wallet-coin-refresh i:after,
.wallet-coin-refresh b:after{
    content:"$";
    position:absolute;
    inset:8px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:2px solid rgba(159,98,0,.28);
    color:#c17700;
    font-size:22px;
    font-weight:950;
    line-height:1;
}

.wallet-coin-refresh i:nth-child(1){
    width:50px;
    height:50px;
    right:4px;
    top:2px;
}

.wallet-coin-refresh i:nth-child(2){
    width:42px;
    height:42px;
    left:4px;
    top:28px;
}

.wallet-coin-refresh i:nth-child(3){
    width:55px;
    height:55px;
    right:14px;
    bottom:1px;
}

.wallet-coin-refresh b{
    width:46px;
    height:46px;
    left:22px;
    top:8px;
    transform:rotate(-18deg);
}

.wallet-coin-refresh.is-rotating i,
.wallet-coin-refresh.is-rotating b{
    animation:wallet-coin-spin .72s ease;
}

@keyframes wallet-coin-spin{
    0%{
        transform:rotateY(0deg);
    }
    100%{
        transform:rotateY(360deg);
    }
}

@media(max-width:480px){
    .wallet-hero{
        min-height:330px !important;
        padding-left:24px !important;
        padding-right:24px !important;
    }

    .wallet-balance-card{
        left:22px !important;
        right:22px !important;
        min-height:152px !important;
        padding:24px 108px 22px 28px !important;
    }

    .wallet-balance-card span{
        font-size:20px !important;
    }

    .wallet-balance-card strong{
        font-size:40px !important;
    }

    .wallet-balance-card small{
        font-size:14px !important;
    }

    .wallet-coin-refresh{
        right:12px;
        top:40px;
        transform:scale(.82);
        transform-origin:right center;
    }
}

/* Customer live tracking screen */
.delivery-track-view{
    min-height:100vh !important;
    padding:0 0 42px !important;
    background:#eef2f5 !important;
}

.delivery-track-head{
    min-height:250px !important;
    padding:54px 24px 28px !important;
    background:#0876d8 !important;
    color:#fff !important;
}

.delivery-track-head button{
    width:36px !important;
    height:36px !important;
    margin:0 18px 0 0 !important;
    border:0 !important;
    background:transparent !important;
    color:#fff !important;
    font-size:28px !important;
}

.delivery-track-head span{
    font-size:25px !important;
    line-height:1.2 !important;
    font-weight:700 !important;
}

.delivery-track-head h2{
    margin:24px 0 0 48px !important;
    font-size:40px !important;
    line-height:1.08 !important;
    letter-spacing:1px !important;
    font-weight:950 !important;
}

.delivery-live-info{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin:14px 0 0 48px !important;
}

.delivery-live-info span{
    padding:6px 10px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.18) !important;
    color:#fff !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:850 !important;
}

.delivery-map-card{
    min-height:286px !important;
    margin:24px !important;
    position:relative !important;
    display:grid !important;
    place-items:center !important;
    border-radius:20px !important;
    overflow:hidden !important;
    background:
        linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 64px),
        linear-gradient(0deg,rgba(255,255,255,.18) 0 1px,transparent 1px 64px),
        #c8cdd2 !important;
    color:#fff !important;
}

.delivery-map-card:before{
    content:"";
    position:absolute;
    inset:-20%;
    background:
        linear-gradient(34deg,transparent 0 42%,rgba(255,255,255,.34) 42% 44%,transparent 44%),
        linear-gradient(128deg,transparent 0 48%,rgba(255,255,255,.25) 48% 50%,transparent 50%);
    opacity:.55;
}

.delivery-map-card button{
    position:absolute !important;
    top:22px !important;
    right:22px !important;
    z-index:4 !important;
    width:56px !important;
    height:56px !important;
    border:0 !important;
    border-radius:50% !important;
    background:#fff !important;
    color:#0876d8 !important;
    font-size:28px !important;
    box-shadow:0 8px 16px rgba(15,23,42,.16) !important;
}

.delivery-map-card p{
    position:relative !important;
    z-index:2 !important;
    max-width:90% !important;
    margin:0 !important;
    color:rgba(255,255,255,.84) !important;
    font-size:22px !important;
    line-height:1.15 !important;
    font-style:italic !important;
    font-weight:900 !important;
    text-align:center !important;
}

.delivery-live-map{
    position:absolute;
    inset:0;
    z-index:1;
    display:none;
    background:#dbeafe;
}

.delivery-map-card.has-real-map{
    background:#dbeafe !important;
}

.delivery-map-card.has-real-map:before,
.delivery-map-card.has-real-map .delivery-map-route,
.delivery-map-card.has-real-map .map-home-marker,
.delivery-map-card.has-real-map .delivery-rider-marker,
.delivery-map-card.has-real-map p{
    display:none !important;
}

.delivery-map-card.has-real-map .delivery-live-map{
    display:block;
}

.delivery-live-map img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.delivery-map-active{
    background:
        linear-gradient(90deg,rgba(8,118,216,.08) 0 1px,transparent 1px 58px),
        linear-gradient(0deg,rgba(8,118,216,.08) 0 1px,transparent 1px 58px),
        linear-gradient(135deg,#dff1ff,#f8fbff) !important;
}

.delivery-map-active p{
    color:#0876d8 !important;
    font-style:normal !important;
}

.delivery-map-route{
    position:absolute;
    left:20%;
    right:18%;
    top:54%;
    z-index:2;
    height:5px;
    border-radius:999px;
    background:linear-gradient(90deg,#0876d8,#22c55e);
    transform:rotate(-11deg);
    opacity:.9;
}

.delivery-map-card:not(.delivery-map-active) .delivery-map-route{
    display:none;
}

.map-home-marker,
.delivery-rider-marker{
    position:absolute !important;
    z-index:3 !important;
    width:54px !important;
    height:54px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    color:#fff !important;
    box-shadow:0 0 0 7px rgba(255,255,255,.72),0 10px 18px rgba(15,23,42,.18) !important;
}

.map-home-marker{
    left:50% !important;
    top:50% !important;
    background:#f97316 !important;
    transform:translate(-50%,-50%) !important;
}

.delivery-map-active .map-home-marker{
    left:auto !important;
    right:18% !important;
    top:62% !important;
}

.delivery-rider-marker{
    left:22% !important;
    top:42% !important;
    background:#0876d8 !important;
    animation:delivery-rider-move 3.2s ease-in-out infinite alternate;
}

@keyframes delivery-rider-move{
    from{transform:translate(0,0)}
    to{transform:translate(120px,-28px)}
}

.delivery-partner-card,
.delivery-status-timeline,
.delivery-route-card,
.delivery-summary-card,
.delivery-detail-card{
    margin:0 24px 24px !important;
    padding:24px !important;
    border-radius:20px !important;
    background:#f8fbff !important;
    box-shadow:none !important;
}

.delivery-partner-card{
    display:grid !important;
    grid-template-columns:72px 1fr !important;
    gap:18px !important;
    align-items:center !important;
}

.delivery-partner-card > span,
.delivery-route-card span,
.delivery-summary-card > span,
.delivery-status-timeline span{
    width:58px !important;
    height:58px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    background:#eef1f3 !important;
    color:#777 !important;
    font-size:27px !important;
}

.delivery-partner-card strong{
    color:#111827 !important;
    font-size:25px !important;
    line-height:1.34 !important;
    font-weight:950 !important;
}

.delivery-partner-info{
    display:flex;
    flex-direction:column;
    gap:3px;
    margin-top:10px;
    color:#0876d8;
    font-size:16px;
    line-height:1.25;
}

.delivery-partner-info a{
    color:#0876d8;
    font-weight:800;
}

.delivery-status-timeline{
    display:grid !important;
    gap:0 !important;
}

.delivery-status-timeline div{
    position:relative;
    display:grid;
    grid-template-columns:58px 1fr;
    gap:16px;
    align-items:center;
    padding:10px 0;
}

.delivery-status-timeline div + div:before{
    content:"";
    position:absolute;
    left:28px;
    top:-18px;
    width:3px;
    height:36px;
    background:#d4dbe3;
}

.delivery-status-timeline div.done + div:before,
.delivery-status-timeline div.done span{
    background:#0876d8 !important;
    color:#fff !important;
}

.delivery-status-timeline strong{
    color:#111827;
    font-size:20px;
    line-height:1.2;
    font-weight:900;
}

.delivery-status-timeline small{
    display:block;
    margin-top:3px;
    color:#77808b;
    font-size:14px;
    font-weight:700;
}

.delivery-route-card{
    display:grid !important;
    gap:0 !important;
}

.delivery-route-card div{
    position:relative !important;
    display:grid !important;
    grid-template-columns:58px 1fr !important;
    gap:16px !important;
    align-items:center !important;
    padding:10px 0 !important;
}

.delivery-route-card div + div:before{
    left:28px !important;
    top:-18px !important;
    height:38px !important;
    background:#0876d8 !important;
}

.delivery-route-card strong{
    color:#111827 !important;
    font-size:22px !important;
    line-height:1.2 !important;
    font-weight:900 !important;
}

.delivery-route-card small{
    display:block !important;
    margin-top:4px !important;
    color:#707984 !important;
    font-size:15px !important;
    line-height:1.25 !important;
}

.delivery-summary-card{
    display:grid !important;
    grid-template-columns:58px 1fr !important;
    gap:16px !important;
    align-items:start !important;
    padding-bottom:0 !important;
}

.delivery-summary-card strong{
    color:#111827 !important;
    font-size:26px !important;
    line-height:1.15 !important;
    font-weight:950 !important;
}

.delivery-summary-card small{
    display:block !important;
    margin-top:4px !important;
    color:#707984 !important;
    font-size:16px !important;
}

.delivery-summary-images{
    grid-column:2 !important;
    display:flex !important;
    gap:16px !important;
    margin-top:18px !important;
    overflow:hidden !important;
}

.delivery-summary-images img{
    width:94px !important;
    height:94px !important;
    object-fit:contain !important;
    border-radius:14px !important;
    background:#eef1f3 !important;
}

.delivery-summary-card button{
    grid-column:1 / -1 !important;
    min-height:70px !important;
    margin:18px -24px 0 !important;
    border:0 !important;
    border-top:1px solid #dde4ea !important;
    background:#fff !important;
    color:#111827 !important;
    font-size:23px !important;
    font-weight:800 !important;
}

.delivery-detail-card h3{
    margin:0 0 24px !important;
    color:#111827 !important;
    font-size:30px !important;
    font-weight:950 !important;
}

.delivery-detail-card p{
    display:flex !important;
    justify-content:space-between !important;
    gap:18px !important;
    margin:0 0 22px !important;
    color:#77808b !important;
    font-size:18px !important;
    font-weight:700 !important;
}

.delivery-detail-card strong{
    color:#111827 !important;
    font-weight:900 !important;
}

.order-track small{
    display:block;
    margin-top:3px;
    color:#6b7280;
    font-size:11px;
    font-weight:600;
}

@media(max-width:480px){
    .delivery-track-head{
        min-height:210px !important;
        padding:42px 22px 24px !important;
    }

    .delivery-track-head span{
        font-size:20px !important;
    }

    .delivery-track-head h2{
        margin:18px 0 0 48px !important;
        font-size:30px !important;
    }

    .delivery-live-info{
        margin:12px 0 0 48px !important;
        gap:6px !important;
    }

    .delivery-live-info span{
        padding:5px 8px !important;
        font-size:10px !important;
    }

    .delivery-map-card{
        min-height:250px !important;
        margin:16px 12px !important;
        border-radius:16px !important;
    }

    .delivery-map-card p{
        font-size:18px !important;
    }

    .delivery-partner-card,
    .delivery-status-timeline,
    .delivery-route-card,
    .delivery-summary-card,
    .delivery-detail-card{
        margin:0 12px 14px !important;
        padding:18px !important;
        border-radius:16px !important;
    }

    .delivery-partner-card{
        grid-template-columns:58px 1fr !important;
        gap:14px !important;
    }

    .delivery-partner-card strong{
        font-size:19px !important;
    }

    .delivery-status-timeline strong,
    .delivery-route-card strong{
        font-size:17px !important;
    }

    .delivery-summary-card strong{
        font-size:22px !important;
    }

    .delivery-summary-images img{
        width:72px !important;
        height:72px !important;
    }

    .delivery-detail-card h3{
        font-size:24px !important;
    }

    .delivery-detail-card p{
        font-size:15px !important;
    }
}

.order-request-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:grid;
    place-items:end center;
    padding:16px;
    background:rgba(15,23,42,.48);
}

.order-request-card{
    width:min(100%,460px);
    position:relative;
    background:#fff;
    border-radius:18px;
    padding:22px;
    box-shadow:0 22px 70px rgba(15,23,42,.28);
}

.order-request-close{
    position:absolute;
    right:14px;
    top:14px;
    width:34px;
    height:34px;
    border:0;
    border-radius:50%;
    background:#f1f5f9;
    color:#111827;
}

.order-request-card h2{
    margin:0 44px 4px 0;
    font-size:22px;
    line-height:1.15;
}

.order-request-card p{
    margin:0 0 14px;
    color:#64748b;
    font-size:13px;
    font-weight:700;
}

.order-request-card label{
    display:block;
    margin:12px 0 6px;
    color:#111827;
    font-size:13px;
    font-weight:800;
}

.order-request-card textarea,
.order-request-card input[type="file"]{
    width:100%;
    border:1px solid #dbe4ee;
    border-radius:12px;
    background:#fff;
    color:#111827;
    font-size:14px;
    outline:none;
}

.order-request-card textarea{
    resize:vertical;
    min-height:92px;
    padding:12px;
}

.order-request-card input[type="file"]{
    padding:10px;
}

.order-request-card small{
    display:block;
    min-height:18px;
    margin:8px 0 14px;
    color:#64748b;
    font-size:12px;
}

.order-request-card .flow-primary{
    width:100%;
    min-height:46px;
    border-radius:12px;
}

body.account-dark-mode .order-request-card{
    background:#111827;
    color:#e5e7eb;
}

body.account-dark-mode .order-request-card h2,
body.account-dark-mode .order-request-card label{
    color:#f8fafc;
}

body.account-dark-mode .order-request-card textarea,
body.account-dark-mode .order-request-card input[type="file"]{
    background:#0f172a;
    border-color:#263244;
    color:#e5e7eb;
}

.cart-stock-warning{
    margin-top:6px;
    color:#b42318;
    font-size:12px;
    font-weight:800;
}

.cart-plus:disabled,
.drawer-plus:disabled{
    opacity:.45;
    cursor:not-allowed;
}

/* Address picker refresh */
.address-sheet{
    width:min(100% - 18px,540px);
    max-height:calc(100vh - 72px);
    background:#f5f6fb;
    padding:30px 16px 24px;
    border-radius:30px 30px 0 0;
}

.address-sheet .sheet-header h2{
    margin:2px 2px 22px;
    color:#171b23;
    font-size:24px;
    line-height:1.15;
    letter-spacing:0;
}

.address-sheet-close{
    top:-68px;
    width:56px;
    height:56px;
    background:#050505;
    color:#fff;
    font-size:24px;
    box-shadow:0 12px 28px rgba(0,0,0,.28);
}

.add-address-row{
    min-height:66px;
    margin:0 0 24px;
    border-radius:16px;
    padding:0 22px;
    color:#078a31;
    font-size:20px;
    font-weight:800;
    box-shadow:0 6px 18px rgba(17,24,39,.04);
}

.add-address-row i{
    font-size:28px;
    -webkit-text-stroke:.6px currentColor;
}

.saved-address-block > p{
    margin:0 2px 14px;
    color:#5f626b;
    font-size:17px;
    font-weight:500;
}

.saved-address-card{
    position:relative;
    grid-template-columns:58px minmax(0,1fr) 44px;
    gap:14px;
    align-items:flex-start;
    margin-bottom:14px;
    padding:18px 16px;
    border:0;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 22px rgba(17,24,39,.04);
}

.saved-address-icon{
    width:54px;
    height:54px;
    border-radius:12px;
    background:#f8f8f8;
    color:#d7ad31;
    font-size:28px;
}

.saved-address-copy strong{
    color:#151922;
    font-size:20px;
    line-height:1.1;
}

.saved-address-copy p{
    margin:6px 0 0;
    color:#7a7d86;
    font-size:15px;
    line-height:1.28;
}

.saved-address-actions{
    grid-column:auto;
    justify-content:flex-end;
    margin:0;
}

.saved-address-more{
    width:34px;
    height:34px;
    border:1px solid #dfe4e8;
    border-radius:50%;
    background:#fff;
    color:#078a31;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
}

.saved-address-menu{
    position:absolute;
    right:14px;
    top:58px;
    display:none;
    min-width:128px;
    padding:8px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    box-shadow:0 16px 34px rgba(15,23,42,.16);
    z-index:2;
}

.saved-address-card.show-menu .saved-address-menu{
    display:grid;
    gap:6px;
}

.saved-address-menu button{
    width:100%;
    height:34px;
    border:0;
    border-radius:9px;
    padding:0 10px;
    background:#f8fafc;
    color:#111827;
    font-size:13px;
    font-weight:800;
    text-align:left;
}

.saved-address-menu .select-address-btn{
    color:#078a31;
}

.saved-address-menu .delete-address-btn{
    color:#dc2626;
}

.address-empty{
    background:#fff;
    border-radius:16px;
    padding:18px;
}

.address-sheet.form-open{
    width:min(100% - 14px,560px);
    max-height:calc(100vh - 22px);
    padding:28px 16px 0;
    background:#fff;
}

.address-sheet.form-open .sheet-header,
.address-sheet.form-open .add-address-row,
.address-sheet.form-open .saved-address-block{
    display:none;
}

.address-sheet.form-open .address-sheet-close{
    top:18px;
    right:18px;
    left:auto;
    transform:none;
    width:36px;
    height:36px;
    background:transparent;
    color:#5b5f68;
    box-shadow:none;
    font-size:28px;
    z-index:3;
}

.address-form,
.address-form.active{
    display:none;
}

.address-sheet.form-open .address-form.active{
    display:flex;
    min-height:calc(100vh - 64px);
    margin:0;
    padding:8px 2px 110px;
    border-radius:0;
    background:#fff;
    box-shadow:none;
    flex-direction:column;
    gap:12px;
}

.address-form h3{
    margin:0 44px 16px 0;
    color:#171b23;
    font-size:25px;
    line-height:1.15;
}

.address-form-section{
    margin-bottom:2px;
}

.address-form-eyebrow,
.address-details-title{
    margin:0 0 12px;
    color:#8f9299;
    font-size:16px;
    font-weight:700;
}

.address-label-options{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.address-label-btn{
    min-height:48px;
    border:1px solid #e4e7ec;
    border-radius:13px;
    background:#fff;
    color:#20242c;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:16px;
    font-weight:800;
    box-shadow:0 6px 16px rgba(17,24,39,.04);
}

.address-label-btn i{
    color:#d7ad31;
    font-size:20px;
}

.address-label-btn.active{
    border-color:#128a2e;
    background:#f1fff4;
    color:#111827;
}

.address-location-summary{
    margin:0;
    padding:10px 12px;
    border:0;
    border-radius:14px;
    background:#f4f5f7;
    color:#5b5f68;
    font-size:13px;
    font-weight:700;
}

.address-input-wrap{
    position:relative;
    display:block;
    margin:0!important;
}

.address-form .address-input-wrap input{
    width:100%;
    min-height:62px;
    border:1px solid #c9c9c9;
    border-radius:16px;
    background:#fff;
    color:#2a2e35;
    font-size:17px;
    font-weight:500;
    padding:0 20px;
}

.address-form .address-input-wrap input::placeholder{
    color:#9b9da3;
}

.address-input-wrap--readonly span{
    position:absolute;
    top:-13px;
    left:18px;
    padding:0 6px;
    background:#fff;
    color:#93969d;
    font-size:14px;
    font-weight:700;
    z-index:1;
}

.address-form .address-input-wrap--readonly input{
    border-color:transparent;
    background:#f5f5f5;
}

.address-details-title{
    margin-top:18px;
    margin-bottom:0;
    font-weight:600;
}

.address-complete-hidden{
    display:none!important;
}

.address-save-bar{
    position:sticky;
    bottom:0;
    margin:10px -16px -1px;
    padding:14px 16px 18px;
    background:#fff;
    box-shadow:0 -10px 28px rgba(17,24,39,.08);
}

.address-save-bar .flow-primary{
    width:100%;
    min-height:58px;
    border-radius:13px;
    background:#098c22;
    font-size:20px;
    font-weight:800;
}

.address-form .flow-message{
    min-height:18px;
    margin:2px 0 0;
    color:#c12121;
    font-size:13px;
    font-weight:800;
    text-align:center;
}

@media (max-width:540px){
    .address-label-options{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

    .address-sheet{
        width:100%;
        max-height:calc(100vh - 76px);
        padding-left:16px;
        padding-right:16px;
    }

    .address-sheet.form-open{
        width:100%;
        max-height:calc(100vh - 18px);
    }
}

/* Compact mobile address form tuning */
.address-sheet.form-open{
    max-height:74vh;
    padding:14px 14px 0;
}

.address-sheet.form-open .address-form.active{
    min-height:auto;
    padding:2px 0 74px;
    gap:6px;
}

.address-form h3{
    margin-bottom:8px;
    font-size:20px;
}

.address-form-eyebrow,
.address-details-title{
    margin-bottom:5px;
    font-size:13px;
}

.address-label-options{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
}

.address-label-btn{
    min-height:36px;
    border-radius:10px;
    gap:5px;
    font-size:12px;
    white-space:nowrap;
}

.address-label-btn i{
    font-size:15px;
}

.address-form .address-input-wrap input{
    min-height:42px;
    border-radius:12px;
    padding:0 13px;
    font-size:14px;
}

.address-location-summary{
    min-height:36px;
    display:flex;
    align-items:center;
    padding:7px 11px;
    font-size:12px;
}

.address-input-wrap--readonly span{
    top:-10px;
    font-size:11px;
}

.address-details-title{
    margin-top:7px;
}

.address-save-bar{
    padding:9px 14px 11px;
}

.address-save-bar .flow-primary{
    min-height:44px;
    font-size:16px;
}

@media (max-width:420px){
    .address-label-btn{
        font-size:11px;
    }

    .address-label-btn i{
        font-size:14px;
    }
}

/* Extra compact address popup and visible saved-address actions */
.address-sheet{
    width:min(100% - 12px,500px);
    min-height:auto;
    max-height:62vh;
    padding:18px 14px 16px;
    border-radius:24px 24px 0 0;
}

.address-sheet .sheet-header h2{
    margin:0 0 14px;
    font-size:22px;
}

.address-sheet-close{
    width:46px;
    height:46px;
    top:-56px;
    font-size:20px;
}

.add-address-row{
    min-height:50px;
    margin:0 0 16px;
    border-radius:13px;
    padding:0 16px;
    gap:12px;
    font-size:17px;
}

.add-address-row i{
    font-size:24px;
}

.saved-address-block > p{
    margin:0 2px 10px;
    font-size:15px;
}

.saved-address-card{
    grid-template-columns:44px minmax(0,1fr);
    gap:10px;
    margin-bottom:10px;
    padding:12px;
    border-radius:14px;
}

.saved-address-icon{
    width:42px;
    height:42px;
    border-radius:10px;
    font-size:22px;
}

.saved-address-copy strong{
    font-size:17px;
}

.saved-address-copy p{
    margin-top:4px;
    font-size:13px;
    line-height:1.22;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.saved-address-inline-actions{
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:2px;
    color:#9ca3af;
    font-size:12px;
    font-weight:800;
}

.saved-address-inline-actions button{
    border:0;
    background:transparent;
    padding:0;
    color:#078a31;
    font-size:12px;
    font-weight:800;
}

.saved-address-inline-actions .delete-address-btn{
    color:#dc2626;
}

.saved-address-actions,
.saved-address-more,
.saved-address-menu{
    display:none!important;
}

.address-sheet.form-open{
    width:min(100% - 10px,500px);
    max-height:68vh;
    padding:12px 12px 0;
}

.address-sheet.form-open .address-form.active{
    padding:0 0 64px;
    gap:5px;
}

.address-form h3{
    margin:0 40px 6px 0;
    font-size:19px;
}

.address-form-eyebrow,
.address-details-title{
    margin-bottom:4px;
    font-size:12px;
}

.address-label-options{
    gap:4px;
}

.address-label-btn{
    min-height:32px;
    border-radius:9px;
    gap:4px;
    font-size:11px;
    box-shadow:none;
}

.address-label-btn i{
    font-size:14px;
}

.address-location-summary{
    min-height:32px;
    border-radius:10px;
    padding:5px 9px;
    font-size:11px;
}

.address-form .address-input-wrap input{
    min-height:38px;
    border-radius:10px;
    padding:0 11px;
    font-size:13px;
}

.address-details-title{
    margin-top:5px;
    line-height:1.25;
}

.address-save-bar{
    margin:6px -12px -1px;
    padding:8px 12px 10px;
}

.address-save-bar .flow-primary{
    min-height:40px;
    border-radius:11px;
    font-size:15px;
}

/* SHYAMANSH PAYMENT EXPERIENCE V2 */
.payment-page{background:#f5f7f5;color:#17201a;padding:20px 16px 72px}.payment-shell{max-width:1120px}.payment-header{display:flex;align-items:center;gap:14px;min-height:72px;margin:0 0 12px}.payment-back{flex:0 0 42px;width:42px;height:42px;border-radius:8px;color:#17201a;box-shadow:0 2px 8px rgba(20,44,26,.06)}.payment-heading-copy{min-width:0;flex:1}.payment-eyebrow{display:block;color:#0c831f;font-size:11px;font-weight:900;text-transform:uppercase}.payment-heading-copy h1{margin:2px 0 0;font-size:25px;line-height:1.15}.payment-heading-copy p{margin:4px 0 0;color:#667269;font-size:13px}.payment-secure-badge{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid #dfe9e1;border-radius:8px;background:#fff;color:#0c831f}.payment-secure-badge>i{font-size:20px}.payment-secure-badge span{display:grid}.payment-secure-badge strong{font-size:12px}.payment-secure-badge small{color:#718077;font-size:10px}.payment-progress{display:flex;align-items:center;justify-content:center;max-width:560px;margin:0 auto 20px;padding:10px 18px;border:1px solid #e3eae4;border-radius:8px;background:#fff}.payment-progress span{display:flex;align-items:center;gap:6px;color:#879189;font-size:12px}.payment-progress span i{display:grid;place-items:center;width:24px;height:24px;border:1px solid #d9e1da;border-radius:50%;font-size:11px}.payment-progress em{width:66px;height:1px;margin:0 10px;background:#dbe3dc}.payment-progress .is-complete,.payment-progress .is-current{color:#0c831f}.payment-progress .is-complete i,.payment-progress .is-current i{border-color:#0c831f;background:#e9f8ec}.payment-progress b{font-weight:800}.payment-layout{grid-template-columns:minmax(0,1fr) 370px;gap:20px}.payment-panel,.payment-summary{border:1px solid #e1e8e2;border-radius:8px;box-shadow:0 5px 18px rgba(26,50,31,.05)}.payment-panel-title{background:#fbfcfb}.payment-panel-title span{border-radius:6px}.payment-address{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;padding:14px;border:1px solid #dce8de;background:#f8fff9}.payment-address>i{display:none}.payment-address-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:8px;background:#dff5e3;color:#0c831f;font-size:18px}.payment-address-label{display:block;margin-bottom:2px;color:#6a756c;font-size:11px;font-weight:800;text-transform:uppercase}.payment-address strong{font-size:15px}.payment-address p{margin:3px 0;color:#414c44;font-size:13px;line-height:1.4}.payment-address small i{margin-right:3px}.payment-change-address{align-self:start;padding:6px 9px;border:1px solid #b8ddbf;border-radius:6px;color:#0c831f;font-size:12px;font-weight:900;background:#fff}.payment-method-list{gap:8px;padding:12px 14px 14px}.payment-method{grid-template-columns:42px minmax(0,1fr);align-items:center;padding:14px 46px 14px 14px;border-color:#e1e7e2;cursor:pointer}.payment-method:after{content:"";position:absolute;right:16px;top:50%;width:18px;height:18px;border:2px solid #c7d0c9;border-radius:50%;transform:translateY(-50%)}.payment-method:has(input:checked):after{border-color:#0c831f;background:#0c831f;box-shadow:inset 0 0 0 4px #fff}.payment-method:hover{border-color:#a9d5b1;background:#fbfffc}.payment-method:has(input:checked){border-color:#0c831f;background:#f3fff5;box-shadow:0 0 0 1px rgba(12,131,31,.08)}.payment-method-chips b{border-radius:4px;background:#eef4ef;color:#536158}.payment-brand-razorpay{font-size:13px}.payment-summary{position:sticky;top:92px;padding:16px;background:#fff}.payment-summary-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #edf0ed}.payment-summary-head span{color:#0c831f;font-size:10px;font-weight:900}.payment-summary-head h3{margin:2px 0 0;font-size:19px}.payment-summary-head a{color:#0c831f;font-size:12px;font-weight:900}.payment-delivery-promise{display:flex;align-items:center;gap:10px;margin:14px 0;padding:11px;border-radius:7px;background:#eef9f0;color:#0c831f}.payment-delivery-promise>i{font-size:18px}.payment-delivery-promise span{display:grid}.payment-delivery-promise strong{font-size:12px}.payment-delivery-promise small{margin-top:2px;color:#627267;font-size:10px}.payment-summary .bill-row{padding:8px 0;color:#667169;font-size:13px}.payment-summary .bill-row strong{color:#263129}.payment-summary .bill-total{margin-top:8px;padding:14px 0 8px;border-top:1px dashed #cfd8d1}.payment-primary-action{position:relative;width:100%;margin-top:10px;background:#0c831f;box-shadow:0 6px 14px rgba(12,131,31,.2)}.payment-primary-action:hover{background:#087319}.payment-primary-action:disabled{opacity:.65;cursor:not-allowed}.payment-trust-row{display:flex;gap:7px;margin-top:12px;color:#768179;font-size:10px;line-height:1.4}.payment-trust-row i{margin-top:1px;color:#0c831f}.payment-policy-row{display:flex;justify-content:space-between;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #edf0ed;color:#59665d;font-size:10px;font-weight:800}.payment-policy-row i{color:#0c831f}
@media(max-width:768px){.payment-page{padding:0 0 112px}.payment-header{position:sticky;top:0;z-index:50;min-height:64px;padding:9px 12px;margin:0;background:#fff;border-bottom:1px solid #e7ece8}.payment-heading-copy h1{font-size:18px}.payment-heading-copy p,.payment-eyebrow,.payment-secure-badge{display:none}.payment-progress{margin:10px 12px;padding:9px 10px}.payment-progress em{width:34px;margin:0 6px}.payment-progress span b{font-size:10px}.payment-layout{display:block}.payment-panel,.payment-summary{margin:10px 12px}.payment-panel-title{min-height:48px;padding:11px 13px}.payment-panel-title h2{font-size:15px}.payment-address{grid-template-columns:40px minmax(0,1fr);padding:11px}.payment-address-icon{width:38px;height:38px}.payment-change-address{grid-column:2;margin-top:8px;justify-self:start}.payment-method{grid-template-columns:38px minmax(0,1fr);padding:12px 42px 12px 12px}.payment-method-icon{width:36px;height:36px}.payment-method strong{font-size:14px}.payment-method-chips{margin-top:6px}.payment-summary{position:static;padding:14px}.payment-summary .payment-primary-action{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;width:calc(100% - 24px);height:54px;margin:0;border:4px solid #fff;box-shadow:0 8px 24px rgba(12,44,19,.3)}.payment-trust-row{margin-bottom:2px}}
/* SHYAMANSH ONLINE PAYMENT LABEL */
.payment-online-options{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.payment-online-options b{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border:1px solid #dce6de;border-radius:5px;background:#fff;color:#3d4a40;font-size:10px;font-weight:800}.payment-online-options i{color:#0c831f;font-size:13px}.payment-method-security{display:flex;align-items:center;gap:5px;margin-top:9px;color:#0c831f;font-size:10px;font-weight:900}.payment-method-security i{font-size:12px}
@media(max-width:480px){.payment-online-options{gap:5px}.payment-online-options b{padding:5px 6px;font-size:9px}}
/* SHYAMANSH PAYMENT SVG ICONS */
.payment-online-options b{min-height:34px;padding:5px 8px}.payment-online-options svg{display:block;width:28px;height:20px;flex:0 0 28px}.payment-online-options b span{white-space:nowrap}
/* SHYAMANSH ACCOUNT-FIRST WALLET */
.payment-method.is-disabled{opacity:.55;cursor:not-allowed;background:#f7f8f7}.payment-method.is-disabled:after{background:#e7ebe8}.checkout-wallet-funding{margin-top:14px;padding-top:14px;border-top:1px solid #e2ebe4}.checkout-wallet-funding-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.checkout-wallet-funding-head span{display:flex;align-items:center;gap:7px;color:#17321d}.checkout-wallet-funding-head i{color:#0c831f}.checkout-wallet-funding-head small{color:#718078;text-align:right}.checkout-wallet-auth,.checkout-wallet-otp,.checkout-wallet-add>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:10px}.checkout-wallet-funding input{min-width:0;height:40px;padding:0 11px;border:1px solid #d7e1d9;border-radius:6px}.checkout-wallet-funding button{min-height:40px;padding:0 12px;border:0;border-radius:6px;background:#0c831f;color:#fff;font-weight:900}.checkout-wallet-funding button:disabled{background:#a7b3aa;cursor:not-allowed}.checkout-wallet-quick{display:flex;gap:6px;margin-top:10px}.checkout-wallet-quick button{min-height:32px;padding:0 9px;border:1px solid #bcdcc2;background:#fff;color:#0c831f;font-size:11px}.checkout-wallet-funding p{margin:9px 0 0;color:#66736a;font-size:11px;line-height:1.4}.checkout-wallet-funding p.is-error{color:#b42318}@media(max-width:480px){.checkout-wallet-auth,.checkout-wallet-otp,.checkout-wallet-add>div{grid-template-columns:1fr}.checkout-wallet-funding-head{display:grid}.checkout-wallet-funding-head small{text-align:left}}