/* =====================================================
   Food Ordering — Frontend Customer Panel (v2 Final)
   Path: public/assets/frontend/css/style.css
   ===================================================== */

:root{
    --pr:#d32f2f; --prl:#ef5350; --prb:#ffebee;
    --or:#ef6c00; --orb:#fff3e0;
    --gr:#2e7d32; --grb:#e8f5e9;
    --ylb:#fffde7; --bd:#f0ece8;
    --bg:#fafaf8; --td:#1a1a1a; --tm:#888;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--td)}

/* ===== ORDER TYPE POPUP ===== */
.pop-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:1;transition:opacity .3s}
.pop-ov.hidden{opacity:0;pointer-events:none}
.pop-card{background:#fff;border-radius:20px;width:100%;max-width:520px;padding:2rem;box-shadow:0 20px 60px rgba(0,0,0,.15);max-height:90vh;overflow-y:auto;animation:popIn .3s ease}
@keyframes popIn{from{transform:scale(.9) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.pop-card h3{font-weight:800;font-size:1.25rem;text-align:center;margin-bottom:.15rem}
.pop-sub{text-align:center;color:var(--tm);font-size:.85rem;margin-bottom:1.25rem}

.ot-opts{display:flex;gap:.6rem;margin-bottom:1rem}
.ot-o{flex:1;padding:1rem .5rem;border:2px solid var(--bd);border-radius:14px;cursor:pointer;text-align:center;transition:all .2s}
.ot-o:hover{border-color:var(--pr)}
.ot-o.sel{border-color:var(--pr);background:var(--prb)}
.ot-o .ic{font-size:1.8rem;margin-bottom:.25rem}
.ot-o .lb{font-weight:800;font-size:.85rem}

.sched-wrap{margin-top:.75rem;display:none}
.sched-wrap.show{display:block}
.timing-opts{display:flex;gap:.5rem;margin-bottom:.75rem}
.t-opt{flex:1;padding:.6rem;border:2px solid var(--bd);border-radius:10px;text-align:center;cursor:pointer;font-weight:700;font-size:.82rem;transition:all .15s}
.t-opt:hover{border-color:var(--pr)}
.t-opt.sel{border-color:var(--pr);background:var(--prb);color:var(--pr)}
.sched-fields{display:none;gap:.5rem}
.sched-fields.show{display:flex}
.sched-fields input,.sched-fields select{border:2px solid var(--bd);border-radius:10px;padding:.55rem .75rem;font-size:.85rem;outline:none;font-family:inherit;flex:1}
.sched-fields input:focus,.sched-fields select:focus{border-color:var(--pr)}

.del-sec{display:none;margin-top:.75rem}
.del-sec.show{display:block}
.del-sec label{font-weight:700;font-size:.75rem;text-transform:uppercase;color:#666;margin-bottom:.3rem;display:block}
.del-sec input{width:100%;padding:.65rem 1rem;border:2px solid var(--bd);border-radius:10px;font-size:.88rem;outline:none}
.del-sec input:focus{border-color:var(--pr)}
.del-msg{font-size:.78rem;margin-top:.3rem;font-weight:600}
.del-msg.ok{color:var(--gr)}
.del-msg.er{color:var(--pr)}

.pop-btn{width:100%;padding:.8rem;border:none;border-radius:12px;background:linear-gradient(135deg,var(--pr),var(--prl));color:#fff;font-weight:800;font-size:.95rem;cursor:pointer;transition:all .2s;margin-top:1rem}
.pop-btn:hover{box-shadow:0 6px 20px rgba(211,47,47,.3)}
.pop-btn:disabled{opacity:.5;cursor:not-allowed}

/* ===== HEADER ===== */
.fo-hd{background:#fff;border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:100}
.fo-htop{padding:.55rem 0;display:flex;align-items:center;justify-content:space-between}
.fo-logo{display:flex;align-items:center;gap:.55rem;text-decoration:none}
.fo-lbox{width:40px;height:40px;border-radius:10px;background:var(--pr);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem}
.fo-logo h5{font-weight:800;font-size:.95rem;color:var(--td);margin:0}
.fo-logo small{font-size:.68rem;color:var(--tm)}
.fo-acts{display:flex;align-items:center;gap:.4rem}
.fo-pill{display:flex;align-items:center;gap:.35rem;padding:.35rem .75rem;border-radius:50px;font-weight:700;font-size:.75rem;cursor:pointer;border:none;background:var(--grb);color:var(--gr)}
.fo-pill.del{background:var(--orb);color:var(--or)}
.fo-lbtn{padding:.4rem .85rem;border:2px solid var(--bd);border-radius:10px;font-weight:700;font-size:.78rem;color:#666;text-decoration:none;transition:all .15s}
.fo-lbtn:hover{border-color:var(--pr);color:var(--pr)}
.fo-cbtn{position:relative;width:40px;height:40px;border-radius:12px;background:var(--pr);color:#fff;border:none;font-size:1.1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
.fo-cbtn:hover{background:var(--prl)}
.fo-cbtn .bg{position:absolute;top:-5px;right:-5px;width:20px;height:20px;background:var(--or);color:#fff;font-size:.6rem;font-weight:800;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.fo-sbar{padding:.4rem 0;display:flex;align-items:center;gap:1.25rem;font-size:.78rem;color:var(--tm);border-top:1px solid #f5f5f5;flex-wrap:wrap}
.fo-sbar .op{color:var(--gr);font-weight:700}
.fo-sbar .op i{font-size:.5rem}

/* ===== MOBILE CATEGORY BAR ===== */
.mob-cats{display:none;overflow-x:auto;white-space:nowrap;padding:.75rem 0;gap:.4rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mob-cats::-webkit-scrollbar{display:none}
.mob-cats .mc{display:inline-flex;align-items:center;gap:.3rem;padding:.45rem .85rem;border-radius:50px;border:2px solid var(--bd);font-weight:700;font-size:.78rem;color:#888;text-decoration:none;background:#fff;flex-shrink:0;transition:all .15s}
.mob-cats .mc:hover,.mob-cats .mc.active{background:var(--pr);color:#fff;border-color:var(--pr)}
@media(max-width:991px){.mob-cats{display:flex}}

/* ===== BANNER ===== */
.fo-bn{padding:1rem 0}
.fo-bimg{border-radius:14px;overflow:hidden;height:240px;background:linear-gradient(135deg,#fce4ec,#fff3e0);display:flex;align-items:center;justify-content:center;color:#ccc;font-size:1.1rem}
@media(max-width:991px){.fo-bimg{height:180px}}

/* ===== MAIN LAYOUT ===== */
.fo-main{display:flex;gap:1.5rem;padding:1rem 0 3rem}
.fo-side{width:200px;flex-shrink:0;position:sticky;top:110px;align-self:flex-start;max-height:calc(100vh - 130px);overflow-y:auto}
.fo-cl{display:block;padding:.5rem .75rem;font-weight:600;font-size:.83rem;color:#888;text-decoration:none;border-radius:8px;margin-bottom:2px;border-left:3px solid transparent;transition:all .15s}
.fo-cl:hover{background:var(--prb);color:var(--pr)}
.fo-cl.active{background:var(--prb);color:var(--pr);border-left-color:var(--pr);font-weight:700}
.fo-menu{flex:1;min-width:0}
.ct{font-weight:800;font-size:1.1rem;padding:.6rem 0 .4rem;margin-bottom:.4rem;border-bottom:2px solid var(--bd);scroll-margin-top:120px}
@media(max-width:991px){.fo-side{display:none}}

/* ===== DIETARY ICONS ===== */
.di{width:16px;height:16px;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.di.veg{border:2px solid var(--gr)}
.di.veg::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--gr)}
.di.non-veg{border:2px solid var(--pr)}
.di.non-veg::after{content:'';width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:7px solid var(--pr)}
.di.vegan{border:2px solid #00695c}
.di.vegan::after{content:'🌱';font-size:8px}

/* ===== FOOD ITEM CARD ===== */
.fi{display:flex;gap:.85rem;padding:.85rem;background:#fff;border-radius:14px;border:1px solid var(--bd);margin-bottom:.5rem;transition:all .2s;cursor:pointer}
.fi:hover{box-shadow:0 4px 16px rgba(0,0,0,.05);border-color:#e0e0e0}
.fi-img{width:100px;height:85px;border-radius:10px;overflow:hidden;flex-shrink:0;background:#f5f5f5;display:flex;align-items:center;justify-content:center;color:#ddd;font-size:1.4rem}
.fi-img img{width:100%;height:100%;object-fit:cover}
.fi-info{flex:1;min-width:0}
.fi-top{display:flex;align-items:flex-start;gap:.4rem;margin-bottom:.2rem;flex-wrap:wrap}
.fi-nm{font-weight:800;font-size:.88rem}
.fi-tg{font-size:.6rem;font-weight:700;padding:.12rem .35rem;border-radius:4px;background:var(--ylb);color:#f57f17}
.fi-tg.addon{background:var(--orb);color:var(--or)}
.fi-ds{font-size:.75rem;color:#aaa;line-height:1.35;margin-bottom:.4rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fi-bt{display:flex;align-items:center;justify-content:space-between}
.fi-pr{font-weight:800;font-size:1rem;color:var(--pr)}
.fi-add{padding:.35rem .85rem;border:2px solid var(--pr);border-radius:8px;background:#fff;color:var(--pr);font-weight:800;font-size:.78rem;cursor:pointer;transition:all .15s}
.fi-add:hover{background:var(--pr);color:#fff}
@media(max-width:575px){.fi-img{width:75px;height:65px}}

/* ===== PRODUCT DETAIL MODAL ===== */
.pd-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:5000;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .25s}
.pd-ov.show{opacity:1;pointer-events:auto}
.pd-card{background:#fff;border-radius:20px;width:100%;max-width:550px;max-height:90vh;overflow-y:auto;animation:popIn .3s ease}
.pd-img{height:220px;overflow:hidden;border-radius:20px 20px 0 0;background:#f5f5f5;display:flex;align-items:center;justify-content:center;color:#ddd;font-size:3rem;position:relative}
.pd-img img{width:100%;height:100%;object-fit:cover}
.pd-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;border:none;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pd-body{padding:1.25rem}
.pd-nm{font-weight:800;font-size:1.15rem;margin-bottom:.15rem}
.pd-ds{font-size:.85rem;color:#999;line-height:1.5;margin-bottom:1rem}
.pd-pr{font-weight:800;font-size:1.3rem;color:var(--pr);margin-bottom:1rem}

.ag{margin-bottom:1rem;padding:1rem;background:#fafaf8;border-radius:12px;border:1px solid var(--bd)}
.ag-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.ag-nm{font-weight:800;font-size:.88rem}
.ag-req{font-size:.65rem;font-weight:700;padding:.15rem .4rem;border-radius:4px}
.ag-req.required{background:var(--prb);color:var(--pr)}
.ag-req.optional{background:var(--grb);color:var(--gr)}
.ag-sub{font-size:.72rem;color:var(--tm);margin-bottom:.5rem}
.ao{display:flex;align-items:center;justify-content:space-between;padding:.45rem .6rem;border-radius:6px;margin-bottom:.2rem;transition:background .15s}
.ao:hover{background:#f0f0f0}
.ao label{font-size:.85rem;font-weight:600;color:#555;cursor:pointer;display:flex;align-items:center;gap:.5rem}
.ao input{accent-color:var(--pr)}
.ao .ap{font-size:.82rem;font-weight:700;color:var(--gr)}

.pd-qty{display:flex;align-items:center;gap:.5rem;margin:1rem 0}
.pd-qb{width:36px;height:36px;border-radius:10px;border:2px solid var(--bd);background:#fff;font-weight:800;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.pd-qb:hover{border-color:var(--pr);color:var(--pr)}
.pd-qv{font-weight:800;font-size:1.1rem;min-width:30px;text-align:center}
.pd-total{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-top:2px solid var(--bd);margin-top:.5rem}
.pd-total-pr{font-weight:800;font-size:1.2rem;color:var(--pr)}
.pd-addbtn{padding:.7rem 2rem;border:none;border-radius:12px;background:linear-gradient(135deg,var(--pr),var(--prl));color:#fff;font-weight:800;font-size:.92rem;cursor:pointer;transition:all .2s}
.pd-addbtn:hover{box-shadow:0 4px 16px rgba(211,47,47,.3)}

/* ===== CART DRAWER ===== */
.c-ov{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:2000;opacity:0;pointer-events:none;transition:opacity .3s}
.c-ov.show{opacity:1;pointer-events:auto}
.c-dr{position:fixed;top:0;right:0;width:400px;max-width:100%;height:100vh;background:#fff;z-index:2001;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s ease;box-shadow:-8px 0 30px rgba(0,0,0,.1)}
.c-dr.show{transform:translateX(0)}
.c-hd{padding:1.15rem;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between}
.c-hd h5{font-weight:800;margin:0;font-size:1rem}
.c-cls{background:none;border:none;font-size:1.2rem;color:#999;cursor:pointer}
.c-bd{flex:1;overflow-y:auto;padding:.85rem}
.c-ft{padding:1.15rem;border-top:1px solid var(--bd)}
.c-r{display:flex;justify-content:space-between;margin-bottom:.4rem;font-size:.85rem}
.c-r .l{color:var(--tm)}
.c-r.gr{font-weight:800;font-size:1.05rem;border-top:2px solid var(--bd);padding-top:.65rem;margin-top:.4rem}
.c-co{display:block;width:100%;padding:.75rem;border:none;border-radius:12px;background:linear-gradient(135deg,var(--pr),var(--prl));color:#fff;font-weight:800;font-size:.9rem;cursor:pointer;margin-top:.65rem;transition:all .2s;text-align:center;text-decoration:none}
.c-co:hover{box-shadow:0 6px 20px rgba(211,47,47,.3);color:#fff}

/* ===== CART DRAWER ITEMS (horizontal qty + price + delete) ===== */
.c-i{display:flex;align-items:center;gap:.6rem;padding:.85rem;background:#fafaf8;border:1px solid var(--bd);border-radius:12px;margin-bottom:.6rem}
.c-i-diet{flex-shrink:0;align-self:flex-start;margin-top:2px}
.c-i-mid{flex:1;min-width:0}
.c-i-nm{font-weight:800;font-size:.9rem;color:var(--td);line-height:1.2}
.c-i-meta{font-size:.72rem;color:#999;font-weight:600;line-height:1.5;margin-top:.15rem}
.c-i-right{display:flex;flex-direction:row;align-items:center;gap:.6rem;flex-shrink:0}
.c-i-q{display:flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--bd);border-radius:8px;padding:.15rem}
.c-i-qb{width:26px;height:26px;border-radius:6px;border:none;background:#f5f5f5;font-weight:800;font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--td);transition:all .15s}
.c-i-qb:hover{background:var(--prb);color:var(--pr)}
.c-i-qv{font-weight:800;font-size:.85rem;min-width:18px;text-align:center}
.c-i-pr{color:var(--pr);font-weight:800;font-size:.95rem;min-width:55px;text-align:right}
.c-i-rm{background:none;border:none;color:#ccc;cursor:pointer;font-size:1rem;padding:0}
.c-i-rm:hover{color:var(--pr)}

/* ===== TOAST ===== */
.fo-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--gr);color:#fff;padding:.6rem 1.5rem;border-radius:12px;font-weight:700;font-size:.88rem;z-index:9998;transition:transform .3s ease;box-shadow:0 4px 16px rgba(0,0,0,.15)}
.fo-toast.show{transform:translateX(-50%) translateY(0)}

/* ===== CHECKOUT ===== */
.co-sec{padding:1.5rem 0 3rem}
.co-card{background:#fff;border-radius:14px;border:1px solid var(--bd);padding:1.5rem;margin-bottom:1rem}
.co-card h6{font-weight:800;margin-bottom:1rem}
.co-card .form-label{font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.3px;color:#666}
.co-card .form-control,.co-card .form-select{border:2px solid var(--bd);border-radius:10px;padding:.6rem .85rem;font-size:.88rem}
.co-card .form-control:focus,.co-card .form-select:focus{border-color:var(--pr);box-shadow:0 0 0 3px rgba(211,47,47,.08)}
.co-pay{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:2px solid var(--bd);border-radius:10px;cursor:pointer;transition:all .15s;margin-bottom:.5rem}
.co-pay:hover{border-color:var(--pr)}
.co-pay.sel{border-color:var(--pr);background:var(--prb)}
.co-pay input{accent-color:var(--pr)}
.co-pay .pi{font-size:1.2rem;color:var(--pr)}
.co-pay .pl{font-weight:700;font-size:.88rem}
.co-sum{background:#fff;border-radius:14px;border:1px solid var(--bd);padding:1.5rem;position:sticky;top:80px}

/* ===== ORDER SUCCESS ===== */
.os-card{text-align:center;background:#fff;border-radius:16px;border:1px solid var(--bd);padding:3rem 2rem;max-width:500px;margin:3rem auto}
.os-ic{font-size:4rem;color:var(--gr);margin-bottom:1rem}

/* ===== FOOTER ===== */
.fo-ft{background:#1a1a1a;padding:1.75rem 0 1rem;margin-top:2rem}
.fo-ft h6{color:#fff;font-weight:800;font-size:.85rem;margin-bottom:.4rem}
.fo-ft p,.fo-ft a{font-size:.78rem;color:#888;text-decoration:none}
.fo-ft a:hover{color:var(--prl)}

/* ===== EMPTY STATE ===== */
.fo-empty{text-align:center;padding:3rem 1rem;color:#ccc}
.fo-empty i{font-size:3.5rem;display:block;margin-bottom:.75rem}
.fo-empty p{font-size:1rem;font-weight:600;color:#aaa}

/* ===== ADD TO public/assets/frontend/css/style.css ===== */

.gps-btn{width:100%;padding:.65rem;border:2px solid var(--gr);border-radius:10px;background:var(--grb);color:var(--gr);font-weight:700;font-size:.85rem;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:.4rem}
.gps-btn:hover{background:var(--gr);color:#fff}
.gps-btn:disabled{opacity:.6;cursor:not-allowed}
.del-or{text-align:center;margin:.6rem 0;position:relative;font-size:.72rem;color:#bbb}
.del-or::before,.del-or::after{content:'';position:absolute;top:50%;width:38%;height:1px;background:var(--bd)}
.del-or::before{left:0}.del-or::after{right:0}
.del-check-btn{width:100%;padding:.6rem;border:none;border-radius:10px;background:var(--pr);color:#fff;font-weight:700;font-size:.85rem;cursor:pointer;margin-top:.5rem;transition:all .15s}
.del-check-btn:hover{background:var(--prl)}
.del-check-btn:disabled{opacity:.6;cursor:not-allowed}

/* ===== ADD TO public/assets/frontend/css/style.css ===== */

/* ===== AUTH PAGES (login / register) ===== */
.auth-wrap{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 200px);padding:2rem 1rem}
.auth-card{background:#fff;border-radius:20px;border:1px solid var(--bd);padding:2rem;width:100%;max-width:420px;box-shadow:0 10px 40px rgba(0,0,0,.05)}
.auth-head{text-align:center;margin-bottom:1.5rem}
.auth-icon{width:60px;height:60px;border-radius:50%;background:var(--prb);color:var(--pr);font-size:1.8rem;display:flex;align-items:center;justify-content:center;margin:0 auto .75rem}
.auth-head h3{font-weight:800;font-size:1.35rem;margin-bottom:.15rem}
.auth-head p{color:var(--tm);font-size:.85rem}
.auth-field{margin-bottom:1rem}
.auth-field label{display:block;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.3px;color:#666;margin-bottom:.35rem}
.auth-field input{width:100%;padding:.7rem .9rem;border:2px solid var(--bd);border-radius:10px;font-size:.9rem;outline:none;font-family:inherit;transition:border .15s}
.auth-field input:focus{border-color:var(--pr)}
.auth-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.15rem}
.auth-check{font-size:.82rem;color:#666;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.4rem}
.auth-check input{accent-color:var(--pr)}
.auth-btn{width:100%;padding:.8rem;border:none;border-radius:12px;background:linear-gradient(135deg,var(--pr),var(--prl));color:#fff;font-weight:800;font-size:.92rem;cursor:pointer;transition:all .2s}
.auth-btn:hover{box-shadow:0 6px 20px rgba(211,47,47,.3)}
.auth-foot{text-align:center;margin-top:1.25rem;font-size:.85rem;color:#666}
.auth-foot a{color:var(--pr);font-weight:700;text-decoration:none}
.auth-foot a:hover{text-decoration:underline}
.auth-back{text-align:center;margin-top:.75rem}
.auth-back a{color:#aaa;font-size:.8rem;text-decoration:none;font-weight:600}
.auth-back a:hover{color:var(--pr)}
.auth-alert{padding:.7rem 1rem;border-radius:10px;font-size:.82rem;font-weight:600;margin-bottom:1rem}
.auth-alert.er{background:var(--prb);color:var(--pr)}
.auth-alert.ok{background:var(--grb);color:var(--gr)}

/* ===== ADD TO public/assets/frontend/css/style.css ===== */

/* Guest login banner on checkout */
.co-login-banner{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--orb);border:1px solid var(--or);border-radius:12px;padding:.75rem 1.1rem;margin-bottom:1.25rem;font-size:.85rem;color:#7a4a00;flex-wrap:wrap}

/* Saved addresses on checkout */
.saved-addr-list{display:flex;flex-direction:column;gap:.5rem}
.saved-addr{display:flex;align-items:flex-start;gap:.6rem;padding:.75rem .9rem;border:2px solid var(--bd);border-radius:10px;cursor:pointer;transition:all .15s}
.saved-addr:hover{border-color:var(--pr)}
.saved-addr:has(input:checked){border-color:var(--pr);background:var(--prb)}
.saved-addr input{accent-color:var(--pr);margin-top:3px}
.saved-addr span{display:flex;flex-direction:column}
.saved-addr strong{font-size:.85rem;font-weight:800}
.saved-addr small{font-size:.78rem;color:#888}


/* ===== ADD TO public/assets/frontend/css/style.css ===== */

/* ===== ACCOUNT SECTION ===== */
.acc-sec{padding:1.5rem 0 3rem}
.acc-wrap{display:flex;gap:1.5rem;align-items:flex-start}

/* Sidebar */
.acc-side{width:260px;flex-shrink:0;background:#fff;border:1px solid var(--bd);border-radius:16px;overflow:hidden;position:sticky;top:90px}
.acc-user{padding:1.25rem;display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--bd);background:var(--prb)}
.acc-avatar{width:46px;height:46px;border-radius:50%;background:var(--pr);color:#fff;font-weight:800;font-size:1.2rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.acc-uname{font-weight:800;font-size:.92rem;line-height:1.2}
.acc-uemail{font-size:.75rem;color:#888;word-break:break-all}
.acc-nav{padding:.6rem}
.acc-nav a,.acc-logout{display:flex;align-items:center;gap:.65rem;padding:.7rem .85rem;border-radius:10px;font-weight:700;font-size:.88rem;color:#666;text-decoration:none;transition:all .15s;width:100%;border:none;background:none;cursor:pointer;text-align:left}
.acc-nav a:hover,.acc-logout:hover{background:var(--prb);color:var(--pr)}
.acc-nav a.active{background:var(--pr);color:#fff}
.acc-nav a i,.acc-logout i{font-size:1rem}
.acc-logout{color:var(--pr)}

/* Main */
.acc-main{flex:1;min-width:0}
.acc-title{font-weight:800;font-size:1.3rem;margin-bottom:.1rem}
.acc-sub{color:var(--tm);font-size:.85rem;margin-bottom:1.25rem}

/* Stats */
.acc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.acc-stat{background:#fff;border:1px solid var(--bd);border-radius:14px;padding:1.1rem;display:flex;align-items:center;gap:.85rem}
.acc-stat-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.acc-stat-num{font-weight:800;font-size:1.25rem;line-height:1}
.acc-stat-lbl{font-size:.75rem;color:#888;margin-top:.2rem}

/* Order rows */
.acc-order{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:1rem 1.15rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.6rem;flex-wrap:wrap}
.acc-order-no{font-weight:800;font-size:.92rem}
.acc-order-meta{font-size:.76rem;color:#999;margin-top:.15rem}
.acc-order-r{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.acc-order-total{font-weight:800;font-size:.95rem;color:var(--pr)}

/* Status badges */
.acc-status{font-size:.68rem;font-weight:800;padding:.25rem .6rem;border-radius:50px;text-transform:uppercase;letter-spacing:.3px}
.acc-status-pending{background:#fff3e0;color:#ef6c00}
.acc-status-accepted{background:#e3f2fd;color:#1565c0}
.acc-status-processing{background:#e3f2fd;color:#1565c0}
.acc-status-ready{background:#e8f5e9;color:#2e7d32}
.acc-status-completed{background:#e8f5e9;color:#2e7d32}
.acc-status-cancelled{background:#ffebee;color:#d32f2f}

/* Cards */
.acc-card{background:#fff;border:1px solid var(--bd);border-radius:14px;padding:1.25rem;margin-bottom:1rem}
.acc-card .form-label{font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.3px;color:#666}
.acc-card .form-control{border:2px solid var(--bd);border-radius:10px;padding:.6rem .85rem;font-size:.88rem}
.acc-card .form-control:focus{border-color:var(--pr);box-shadow:0 0 0 3px rgba(211,47,47,.08)}

/* Detail head */
.acc-detail-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}

/* Addresses */
.acc-addr{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.acc-default-badge{font-size:.62rem;font-weight:800;background:var(--grb);color:var(--gr);padding:.15rem .5rem;border-radius:50px;margin-left:.4rem;text-transform:uppercase}

/* Empty */
.acc-empty{text-align:center;padding:2.5rem 1rem;color:#ccc;background:#fff;border:1px solid var(--bd);border-radius:14px}
.acc-empty i{font-size:2.5rem;display:block;margin-bottom:.5rem}
.acc-empty p{font-size:.95rem;font-weight:600;color:#aaa}

/* Responsive */
@media(max-width:768px){
    .acc-wrap{flex-direction:column}
    .acc-side{width:100%;position:static}
    .acc-stats{grid-template-columns:1fr}
}


/* ===== ADD TO public/assets/frontend/css/style.css ===== */

/* Coupon box on checkout */
.co-coupon{margin:1rem 0 .5rem}
.co-coupon-input{display:flex;gap:.5rem}
.co-coupon-input input{flex:1;border:2px solid var(--bd);border-radius:10px;padding:.55rem .85rem;font-size:.85rem;outline:none;font-family:inherit;text-transform:uppercase}
.co-coupon-input input:focus{border-color:var(--pr)}
.co-coupon-input button{padding:.55rem 1.1rem;border:none;border-radius:10px;background:var(--td);color:#fff;font-weight:700;font-size:.82rem;cursor:pointer;transition:all .15s}
.co-coupon-input button:hover{background:var(--pr)}
.co-coupon-input button:disabled{opacity:.6;cursor:not-allowed}
.co-coupon-applied{display:flex;align-items:center;justify-content:space-between;padding:.55rem .85rem;background:var(--grb);border:1px solid var(--gr);border-radius:10px;font-size:.85rem;color:var(--gr);font-weight:700}
.co-coupon-applied button{background:none;border:none;color:var(--gr);cursor:pointer;font-size:.85rem}
.co-coupon-msg{font-size:.78rem;font-weight:600;margin-top:.4rem}
.co-coupon-msg.ok{color:var(--gr)}
.co-coupon-msg.er{color:var(--pr)}

/* ===== ADD TO public/assets/frontend/css/style.css ===== */

/* ===== ORDER TRACKING ===== */
.trk-sec{padding:1.5rem 0 3rem}

/* Progress bar */
.trk-progress{display:flex;align-items:flex-start;justify-content:space-between;padding:2rem 0;position:relative}
.trk-step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;z-index:1}
.trk-dot{width:46px;height:46px;border-radius:50%;background:#f0ece8;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#ccc;transition:all .4s ease;border:3px solid #f0ece8}
.trk-step.done .trk-dot{background:var(--grb);color:var(--gr);border-color:var(--gr)}
.trk-step.active .trk-dot{background:var(--gr);color:#fff;border-color:var(--gr);box-shadow:0 0 0 6px rgba(46,125,50,.15);animation:trkPulse 2s infinite}
@keyframes trkPulse{0%,100%{box-shadow:0 0 0 6px rgba(46,125,50,.15)}50%{box-shadow:0 0 0 12px rgba(46,125,50,.08)}}
.trk-label{font-size:.72rem;font-weight:700;color:#ccc;margin-top:.5rem;text-align:center}
.trk-step.done .trk-label{color:var(--gr)}
.trk-step.active .trk-label{color:var(--gr);font-weight:800}
.trk-line{position:absolute;top:23px;left:calc(50% + 23px);right:calc(-50% + 23px);height:3px;background:#f0ece8;z-index:-1;transition:background .4s}
.trk-step.done .trk-line{background:var(--gr)}

/* Status message */
.trk-status-msg{text-align:center;padding:1.25rem;background:#fafaf8;border:1px solid var(--bd);border-radius:14px;font-size:.95rem;font-weight:700;color:var(--td);margin:1rem 0}
.trk-status-msg i{margin-right:.35rem;font-size:1.1rem}

/* Cancelled */
.trk-cancelled{text-align:center;padding:2rem;background:var(--prb);border:1px solid var(--pr);border-radius:14px;margin:1rem 0}
.trk-cancelled i{font-size:3rem;color:var(--pr);display:block;margin-bottom:.5rem}
.trk-cancelled h4{font-weight:800;color:var(--pr);margin:0 0 .3rem}
.trk-cancelled p{font-size:.88rem;color:#666;margin:0}

/* Auto-refresh indicator */
.trk-refresh{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.75rem;color:#999;font-weight:600;margin-bottom:1.25rem}
.trk-pulse{width:8px;height:8px;border-radius:50%;background:var(--gr);animation:trkBlink 1.5s infinite}
@keyframes trkBlink{0%,100%{opacity:1}50%{opacity:.3}}
.trk-timer{background:var(--bd);padding:.1rem .4rem;border-radius:4px;font-size:.7rem;font-weight:800;min-width:20px;text-align:center}

/* Cards */
.trk-card{background:#fff;border:1px solid var(--bd);border-radius:14px;padding:1.25rem;margin-bottom:1rem}

/* Mobile responsive */
@media(max-width:575px){
    .trk-dot{width:38px;height:38px;font-size:.95rem}
    .trk-label{font-size:.62rem}
    .trk-line{top:19px;left:calc(50% + 19px);right:calc(-50% + 19px)}
}