/* ============================================================
   EMMZED — CART-DRAWER.CSS  (BATCH 2 / 002CPANEL)
   Slide-out cart drawer + abandoned-cart recovery bar
   ============================================================ */

/* ---------- Drawer overlay + panel ---------- */
.cd-overlay {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2600;
    overflow: hidden;   /* 045CPANEL: hidden drawer must never widen the page */
    background: rgba(8,9,11,.5); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
}
.cd-overlay.open { opacity: 1; visibility: visible; }
.cd-panel {
    position: fixed; top: 0; right: 0; z-index: 2601; height: 100vh; height: 100dvh;
    width: min(420px, 92vw); background: #fff; color: #222;
    display: flex; flex-direction: column;
    transform: translateX(105%); transition: transform .32s cubic-bezier(.2,.75,.3,1);
    box-shadow: -14px 0 50px rgba(0,0,0,.22);
}
.cd-overlay.open .cd-panel { transform: translateX(0); }

/* header */
.cd-head { display:flex; align-items:center; justify-content:space-between; padding:18px 18px 14px; border-bottom:1px solid #eee; flex-shrink:0; }
.cd-title { font-size:17px; font-weight:900; display:flex; align-items:center; gap:8px; }
.cd-count { background:#d7ff22; color:#111; font-size:12px; font-weight:900; padding:2px 9px; border-radius:50px; }
.cd-close { width:36px; height:36px; border-radius:50%; border:none; background:#f4f4f4; color:#333; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cd-close:hover { background:#eee; }

/* free-delivery meter */
.cd-meter { padding:12px 18px; background:#fafafa; border-bottom:1px solid #eee; flex-shrink:0; }
.cd-meter-track { height:8px; background:#ececec; border-radius:50px; overflow:hidden; margin:6px 0 4px; }
.cd-meter-fill { height:100%; background:linear-gradient(90deg,#d7ff22,#9be600); border-radius:50px; width:0%; transition:width .5s ease; }
.cd-meter-txt { font-size:11.5px; color:#666; line-height:1.4; }
.cd-meter-txt b { color:#111; }

/* items */
.cd-items { flex:1; overflow-y:auto; padding:8px 0; -webkit-overflow-scrolling:touch; }
.cd-item { display:flex; gap:12px; padding:12px 18px; border-bottom:1px solid #f3f3f3; align-items:center; }
.cd-item img { width:54px; height:54px; border-radius:9px; object-fit:cover; background:#f6f6f6; flex-shrink:0; }
.cd-item .cd-noimg { width:54px; height:54px; border-radius:9px; background:#f6f6f6; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.cd-item-info { flex:1; min-width:0; }
.cd-item-name { font-size:13px; font-weight:700; line-height:1.3; margin-bottom:3px; color:#222;
    overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cd-item-price { font-size:12px; color:#888; }
.cd-item-price b { color:#111; }
.cd-qty { display:flex; align-items:center; border:1px solid #eee; border-radius:7px; overflow:hidden; flex-shrink:0; }
.cd-qty button { width:28px; height:30px; border:none; background:#f6f6f6; font-size:15px; font-weight:800; cursor:pointer; color:#333; line-height:1; }
.cd-qty button:hover { background:#eee; }
.cd-qty span { min-width:26px; text-align:center; font-size:13px; font-weight:800; }
.cd-rm { background:none; border:none; color:#bbb; font-size:11px; cursor:pointer; margin-top:5px; padding:2px 0; }
.cd-rm:hover { color:#e53935; }

.cd-empty { text-align:center; padding:50px 24px; color:#999; }
.cd-empty .e-ico { font-size:46px; margin-bottom:10px; }

/* footer */
.cd-foot { padding:16px 18px 20px; border-top:1px solid #eee; background:#fafafa; flex-shrink:0; }
.cd-total { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.cd-total-l { font-size:13px; color:#666; font-weight:700; }
.cd-total-v { font-size:22px; font-weight:900; color:#111; }
.cd-actions { display:flex; flex-direction:column; gap:9px; }
.cd-btn { display:flex; align-items:center; justify-content:center; gap:7px; text-align:center; text-decoration:none; border-radius:10px; padding:13px; font-size:13px; font-weight:800; cursor:pointer; border:none; transition:transform .15s, background .2s; }
.cd-btn:hover { transform:translateY(-2px); }
.cd-checkout { background:#111; color:#fff; }
.cd-checkout:hover { background:#000; }
.cd-wa { background:#25d366; color:#fff; }
.cd-wa:hover { background:#20bd5a; }
.cd-viewcart { background:#fff; color:#111; border:1.5px solid #ddd; }

/* ---------- Abandoned-cart recovery bar ---------- */
.acr-bar {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 2500;
    background:#111; color:#fff; border-radius:14px; padding:12px 14px;
    display:flex; align-items:center; gap:12px; box-shadow:0 14px 40px rgba(0,0,0,.3);
    transform:translateY(140%); transition:transform .4s cubic-bezier(.2,.75,.3,1);
    max-width:560px; margin:0 auto;
}
.acr-bar.show { transform:translateY(0); }
.acr-ico { font-size:24px; flex-shrink:0; }
.acr-txt { flex:1; min-width:0; font-size:12.5px; line-height:1.4; }
.acr-txt b { color:#d7ff22; }
.acr-wa { background:#25d366; color:#fff; text-decoration:none; font-size:12px; font-weight:800; padding:9px 13px; border-radius:9px; white-space:nowrap; flex-shrink:0; }
.acr-x { background:none; border:none; color:#888; font-size:18px; cursor:pointer; padding:0 2px; flex-shrink:0; }

@media (prefers-color-scheme: dark) {
    .cd-panel { background:#1b1c1f; color:#eee; }
    .cd-head { border-color:#2c2d31; } .cd-close { background:#2c2d31; color:#eee; }
    .cd-meter { background:#15161a; border-color:#2c2d31; } .cd-meter-track { background:#2c2d31; }
    .cd-item { border-color:#2c2d31; } .cd-item-name,.cd-item-price b,.cd-total-v { color:#fff; }
    .cd-qty { border-color:#2c2d31; } .cd-qty button { background:#26272b; color:#eee; }
    .cd-foot { background:#15161a; border-color:#2c2d31; }
    .cd-viewcart { background:#26272b; color:#fff; border-color:#333; }
}