/* ============================================================
   KOPI DAKAS — Revisi UI/UX
   Semua class diberi prefix untuk isolasi total
   ============================================================ */

/* ---------- Utility ikon ---------- */
.rev-ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Halaman Detail Outlet ---------- */
.od-hero{position:relative;height:180px;overflow:hidden;background:linear-gradient(135deg,#0000E7,#3d5cff)}
.od-cover{width:100%;height:100%;object-fit:cover;display:block}
.od-cover-ph{background:linear-gradient(135deg,#1b2aa8,#0000E7)}
.od-back{position:absolute;top:12px;left:12px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:#0000E7;box-shadow:0 4px 12px rgba(0,0,60,.25);z-index:2}
.od-back .rev-ic{transform:rotate(180deg)}
.od-hero-overlay{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;gap:12px;padding:14px;background:linear-gradient(180deg,transparent,rgba(0,0,40,.85))}
.od-avatar{width:64px;height:64px;border-radius:50%;border:3px solid #fff;object-fit:cover;flex:none;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.od-avatar-ph{display:grid;place-items:center;background:#fff;color:#0000E7}
.od-avatar-ph .rev-ic{width:28px;height:28px}
.od-hero-overlay h2{color:#fff;font-size:19px;padding:0 0 2px;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.od-owner{color:rgba(255,255,255,.9);font-size:13px;margin:0}
.od-body{padding:14px}
.od-section{background:#fff;border:1px solid var(--ln);border-radius:16px;padding:14px;margin-bottom:12px}
.od-section h3{font-size:15px;padding:0 0 8px;color:#111;display:flex;align-items:center;gap:6px}
.od-section p{font-size:14px;line-height:1.55;color:#4b5563;margin:0 0 8px}
.od-section p:last-child{margin-bottom:0}
.od-section p .rev-ic{width:15px;height:15px;color:#0000E7;vertical-align:-2px;margin-right:2px}
.od-map{width:100%;height:180px;border:0;border-radius:12px;margin:8px 0;display:block}
.od-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border-radius:12px;font-weight:700;font-size:14px;background:var(--l);color:#0000E7;border:0;margin-bottom:8px;text-decoration:none;cursor:pointer}
.od-btn .rev-ic{width:17px;height:17px}
.od-btn-pri{background:linear-gradient(135deg,#0000E7,#3d5cff);color:#fff;box-shadow:0 6px 16px rgba(0,0,231,.25)}
.od-stock-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.od-stock-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;background:#f7f8fe}
.od-stock-item.empty{opacity:.55}
.od-stock-item img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none}
.od-stock-info{flex:1;min-width:0}
.od-stock-info b{display:block;font-size:13px;color:#111;line-height:1.3}
.od-stock-info small{display:block;font-size:12px;color:#6b7280}
.od-stock-qty{font-size:11px;font-weight:700;padding:4px 9px;border-radius:9px;background:#e8edff;color:#0000E7;flex:none}
.od-stock-item.empty .od-stock-qty{background:#fee2e2;color:#b91c1c}
html[data-theme=dark] .od-section{background:var(--l);border-color:var(--ln)}
html[data-theme=dark] .od-section h3,html[data-theme=dark] .od-stock-info b{color:#eef0ff}
html[data-theme=dark] .od-section p,html[data-theme=dark] .od-stock-info small{color:#9aa1b8}
html[data-theme=dark] .od-stock-item{background:#1c1f35}
html[data-theme=dark] .od-btn{background:#262a48}
html[data-theme=dark] .od-btn-pri{background:linear-gradient(135deg,#0000E7,#3d5cff)}

/* Kartu outlet di home — bisa diklik */
#ds-home-list .ds-outlet{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
#ds-home-list .ds-outlet:active{transform:scale(.98)}
#ds-home-list .ds-outlet::after{content:"";position:absolute;inset:0;border-radius:15px;pointer-events:none}
#ds-home-list .ds-outlet{position:relative}
#ds-home-list .ds-outlet .ds-outlet-head::after{content:"Detail";font-size:11px;color:#0000E7;font-weight:700;margin-left:auto;margin-right:8px}
#ds-home-list .ds-outlet .ds-outlet-head{display:flex;align-items:center;gap:6px}
#ds-home-list .ds-outlet .ds-stock{margin-left:0}

/* ---------- Tombol ganda menu (Tambah + Beli) ---------- */
.ad-dual{display:flex;gap:6px;width:100%}
.ad-dual .adb{flex:1;width:auto}
.rev-beli{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:9px 6px;border-radius:12px;background:linear-gradient(135deg,#0000E7,#3d5cff);color:#fff;font-weight:700;font-size:12.5px;border:0;box-shadow:0 4px 10px rgba(0,0,231,.28)}
.rev-beli .rev-ic{width:14px;height:14px}
.rev-beli:active{transform:scale(.96)}
.rev-beli-full{margin-top:6px;width:100%;display:flex;align-items:center;justify-content:center;gap:5px;padding:9px;border-radius:12px;background:linear-gradient(135deg,#0000E7,#3d5cff);color:#fff;font-weight:700;font-size:12.5px;border:0}
.rev-beli-full .rev-ic{width:14px;height:14px}

/* ---------- Animasi sukses checkout (ala GoPay) ---------- */
#rev-succ{position:fixed;inset:0;z-index:9999;background:rgba(8,10,40,.78);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease;pointer-events:none}
#rev-succ.show{opacity:1;pointer-events:auto}
.rev-succ-svg{width:130px;height:130px;filter:drop-shadow(0 8px 24px rgba(34,197,94,.5))}
.rev-succ-circle{stroke:#22c55e;stroke-width:3;fill:none;stroke-dasharray:158;stroke-dashoffset:158;animation:revCircle 0.65s ease-out forwards}
.rev-succ-tick{stroke:#22c55e;stroke-width:5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:revTick 0.4s 0.5s cubic-bezier(.65,0,.45,1) forwards}
@keyframes revCircle{to{stroke-dashoffset:0}}
@keyframes revTick{to{stroke-dashoffset:0}}
.rev-succ-title{color:#fff;font-size:22px;font-weight:800;margin-top:20px;opacity:0;animation:revFade .4s .7s ease forwards}
.rev-succ-sub{color:rgba(255,255,255,.8);font-size:14px;margin-top:6px;opacity:0;animation:revFade .4s .85s ease forwards}
@keyframes revFade{to{opacity:1}}
.rev-succ-pulse{position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.35),transparent 70%);animation:revPulse 1.4s ease-out;pointer-events:none}
@keyframes revPulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.2);opacity:0}}

/* ---------- Keranjang profesional ---------- */
.rev-cart-outlet{border:1px solid var(--ln);border-radius:16px;padding:14px;margin-bottom:14px;background:var(--bg)}
.rev-cart-outlet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.rev-cart-outlet-head b{font-size:14px}
.rev-cart-outlet-head button{font-size:12px;font-weight:700;color:#0000E7}
.rev-cart-outlet-info{display:flex;gap:10px;align-items:center}
.rev-cart-outlet-info img{width:50px;height:50px;border-radius:12px;object-fit:cover;flex:none}
.rev-cart-outlet-info div{flex:1;min-width:0}
.rev-cart-outlet-info b{display:block;font-size:14px}
.rev-cart-outlet-info small{display:block;font-size:12px;color:var(--g);line-height:1.4}
.rev-cart-map{width:100%;height:180px;border:0;border-radius:12px;margin-top:10px;display:block}
.rev-cart-voucher{border:1px solid var(--ln);border-radius:16px;padding:14px;margin-bottom:14px;background:var(--bg)}
.rev-cart-voucher h4{font-size:13px;color:var(--g);margin:0 0 8px;font-weight:600;text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;gap:6px}
.rev-cart-voucher h4 .rev-ic{width:15px;height:15px;color:#0000E7}
.rev-cart-voucher select{padding:11px;border-radius:11px;border:1px solid var(--ln);background:#fff;font-size:14px;width:100%}
.rev-cart-voucher small{display:block;color:#15803d;font-size:12px;font-weight:600;margin-top:8px;padding:8px 10px;background:#e3f7ec;border-radius:9px}
.rev-cart-voucher small.warn{color:#b91c1c;background:#fee2e2}
.rev-cart-total{background:linear-gradient(135deg,#f7f8fe,#eef1ff);border-radius:16px;padding:16px;margin:14px 0}
.rev-cart-row{display:flex;justify-content:space-between;font-size:13px;color:#4b5563;padding:4px 0}
.rev-cart-row.disc{color:#15803d;font-weight:600}
.rev-cart-row.grand{border-top:1px dashed var(--ln);margin-top:8px;padding-top:10px;font-size:16px;font-weight:800;color:#111}
.rev-cart-row.grand span:last-child{color:#0000E7}

/* ---------- Pesanan lebih detail ---------- */
.rev-ord-card{border:1px solid var(--ln);border-radius:16px;padding:0;margin-bottom:14px;overflow:hidden;background:var(--bg)}
.rev-ord-head{padding:12px 14px;background:linear-gradient(135deg,#f7f8fe,#eef1ff);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ln)}
.rev-ord-head small{font-size:11px;color:var(--g);display:block}
.rev-ord-head b{font-size:14px;color:#111}
.rev-ord-status{font-size:11px;font-weight:700;padding:4px 10px;border-radius:10px;background:#fff;color:#0000E7;border:1px solid #0000E7}
.rev-ord-status.selesai{background:#e3f7ec;color:#15803d;border-color:#86efac}
.rev-ord-status.proses{background:#fff7e6;color:#d97706;border-color:#fcd34d}
.rev-ord-status.dibatalkan{background:#fee2e2;color:#b91c1c;border-color:#fca5a5}
.rev-ord-body{padding:12px 14px}
.rev-ord-sales{display:flex;align-items:center;gap:10px;padding:10px;background:#f7f8fe;border-radius:12px;margin-bottom:12px}
.rev-ord-sales img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.rev-ord-sales div{flex:1;min-width:0}
.rev-ord-sales b{display:block;font-size:13px;color:#111}
.rev-ord-sales small{display:block;font-size:11px;color:var(--g)}
.rev-ord-sales .rev-ic{width:16px;height:16px;color:#6b7280}
.rev-ord-items{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.rev-ord-item{display:flex;gap:10px;align-items:center}
.rev-ord-item img{width:46px;height:46px;border-radius:10px;object-fit:cover;flex:none}
.rev-ord-item div{flex:1;min-width:0}
.rev-ord-item b{display:block;font-size:13px;color:#111;line-height:1.3}
.rev-ord-item small{display:block;font-size:12px;color:var(--g)}
.rev-ord-item span{font-size:13px;font-weight:700;color:#0000E7;flex:none}
.rev-ord-meta{padding:10px;background:#f7f8fe;border-radius:12px;font-size:12px;color:#4b5563;line-height:1.6;margin-bottom:10px}
.rev-ord-meta .rev-ic{width:14px;height:14px;color:#0000E7;vertical-align:-2px;margin-right:4px}
.rev-ord-total{display:flex;justify-content:space-between;padding-top:10px;border-top:1px dashed var(--ln);font-weight:800;font-size:15px;color:#111}
.rev-ord-total span:last-child{color:#0000E7}
.rev-ord-disc{color:#15803d;font-size:12px;text-align:right;margin-top:2px}
html[data-theme=dark] .rev-ord-card{background:var(--l)}
html[data-theme=dark] .rev-ord-head,html[data-theme=dark] .rev-ord-sales,html[data-theme=dark] .rev-ord-meta{background:#1c1f35}
html[data-theme=dark] .rev-ord-head b,html[data-theme=dark] .rev-ord-sales b,html[data-theme=dark] .rev-ord-item b{color:#eef0ff}

/* ---------- Admin: Kelola Sales ---------- */
.rev-admin-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.rev-admin-head h2{font-size:20px;padding:0}
.rev-admin-add{padding:10px 14px;border-radius:11px;background:linear-gradient(135deg,#0000E7,#3d5cff);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;gap:6px;box-shadow:0 4px 12px rgba(0,0,231,.3)}
.rev-admin-add .rev-ic{width:15px;height:15px}
.rev-sales-card{border:1px solid var(--ln);border-radius:16px;margin-bottom:12px;background:var(--bg);overflow:hidden}
.rev-sales-top{display:flex;gap:12px;padding:12px;align-items:center;border-bottom:1px solid var(--ln)}
.rev-sales-top img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;border:2px solid #e4e6f5}
.rev-sales-top .rev-sales-ph{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#0000E7,#3d5cff);color:#fff;display:grid;place-items:center;flex:none}
.rev-sales-top .rev-sales-ph .rev-ic{width:24px;height:24px}
.rev-sales-info{flex:1;min-width:0}
.rev-sales-info b{display:block;font-size:15px;color:#111;line-height:1.3}
.rev-sales-info small{display:block;font-size:12px;color:var(--g);margin-top:2px;line-height:1.4}
.rev-sales-badge{font-size:10px;font-weight:800;padding:3px 8px;border-radius:8px;letter-spacing:.5px;align-self:flex-start}
.rev-sales-badge.aktif{background:#e3f7ec;color:#15803d}
.rev-sales-badge.nonaktif{background:#fee2e2;color:#b91c1c}
.rev-sales-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ln)}
.rev-sales-stats>div{background:var(--bg);padding:10px 8px;text-align:center}
.rev-sales-stats small{display:block;font-size:10px;color:var(--g);text-transform:uppercase;letter-spacing:.5px}
.rev-sales-stats b{display:block;font-size:14px;color:#0000E7;margin-top:3px}
.rev-sales-actions{display:flex;gap:1px;background:var(--ln)}
.rev-sales-actions button{flex:1;background:var(--bg);padding:11px 6px;font-size:11px;font-weight:700;color:#0000E7;display:flex;flex-direction:column;align-items:center;gap:4px;border:0}
.rev-sales-actions button .rev-ic{width:17px;height:17px}
.rev-sales-actions button:active{background:#f7f8fe}
html[data-theme=dark] .rev-sales-card,html[data-theme=dark] .rev-sales-stats>div,html[data-theme=dark] .rev-sales-actions button{background:var(--l)}
html[data-theme=dark] .rev-sales-info b{color:#eef0ff}
html[data-theme=dark] .rev-sales-actions button:active{background:#262a48}

/* ---------- Modal rev (pakai ulang modal() yang ada) ---------- */
.rev-modal-avatar{width:70px;height:70px;border-radius:50%;object-fit:cover;border:3px solid #e4e6f5;display:block;margin:0 auto 10px}
.rev-modal-upload{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border:1.5px dashed #0000E7;border-radius:12px;color:#0000E7;font-weight:600;font-size:13px;cursor:pointer;margin:8px 0}
.rev-modal-upload .rev-ic{width:16px;height:16px}
.rev-modal-hint{font-size:11px;color:var(--g);margin:-4px 0 8px;line-height:1.4}
.rev-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rev-stock-row{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--ln);border-radius:12px;margin-bottom:8px}
.rev-stock-row img{width:40px;height:40px;border-radius:9px;object-fit:cover;flex:none}
.rev-stock-row .rev-stock-info{flex:1;min-width:0}
.rev-stock-row b{display:block;font-size:13px;color:#111}
.rev-stock-row small{display:block;font-size:11px;color:var(--g)}
.rev-stock-row .rev-stock-actions{display:flex;gap:4px;align-items:center}
.rev-stock-row .rev-stock-actions input{width:56px;padding:6px;border-radius:8px;border:1px solid var(--ln);font-size:12px;text-align:center}
.rev-stock-row .rev-stock-actions button{padding:6px 10px;border-radius:8px;background:#0000E7;color:#fff;font-size:11px;font-weight:700}

/* ---------- Sales dashboard ---------- */
.rev-sd-hero{position:relative;background:linear-gradient(135deg,#0000E7,#2a3dff);border-radius:18px;padding:18px;color:#fff;margin-bottom:14px;overflow:hidden}
.rev-sd-hero::after{content:"";position:absolute;right:-30px;top:-30px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.08)}
.rev-sd-hero-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;position:relative}
.rev-sd-hero-head img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.4);flex:none}
.rev-sd-hero-head .rev-sales-ph{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;flex:none}
.rev-sd-hero-head .rev-sales-ph .rev-ic{width:26px;height:26px;color:#fff}
.rev-sd-hero-head b{display:block;font-size:17px;line-height:1.25}
.rev-sd-hero-head small{display:block;font-size:12px;opacity:.85;margin-top:2px}
.rev-sd-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative}
.rev-sd-stat{background:rgba(255,255,255,.13);border-radius:12px;padding:11px;backdrop-filter:blur(6px)}
.rev-sd-stat small{display:block;font-size:10.5px;opacity:.8;text-transform:uppercase;letter-spacing:.5px}
.rev-sd-stat b{display:block;font-size:16px;margin-top:3px;font-weight:800}
.rev-sd-section{background:var(--bg);border:1px solid var(--ln);border-radius:16px;padding:14px;margin-bottom:12px}
.rev-sd-section h3{font-size:15px;padding:0 0 10px;display:flex;justify-content:space-between;align-items:center}
.rev-sd-section h3 span{font-size:12px;font-weight:600;color:var(--g)}
.rev-sd-menu{display:flex;flex-direction:column;gap:8px}
.rev-sd-menu-row{display:flex;align-items:center;gap:10px;padding:8px;background:#f7f8fe;border-radius:10px}
.rev-sd-menu-row img{width:36px;height:36px;border-radius:8px;object-fit:cover;flex:none}
.rev-sd-menu-row b{flex:1;font-size:13px;color:#111}
.rev-sd-menu-row .rev-sd-qty{font-size:13px;font-weight:800;color:#0000E7}
.rev-sd-menu-row .rev-sd-bar{height:4px;border-radius:2px;background:#e4e6f5;margin-top:4px;overflow:hidden;width:100%}
.rev-sd-menu-row .rev-sd-bar i{display:block;height:100%;background:linear-gradient(90deg,#0000E7,#3d5cff)}
.rev-sd-menu-info{flex:1;min-width:0}
.rev-sd-orders{display:flex;flex-direction:column;gap:10px}
.rev-sd-ord{border:1px solid var(--ln);border-radius:12px;padding:11px;background:var(--bg)}
.rev-sd-ord-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.rev-sd-ord-head b{font-size:13px;color:#111}
.rev-sd-ord-head small{font-size:11px;color:var(--g)}
.rev-sd-ord-body{font-size:12px;color:#4b5563;line-height:1.55;margin-bottom:8px}
.rev-sd-ord-actions{display:flex;gap:6px;flex-wrap:wrap}
.rev-sd-ord-actions button{flex:1;min-width:0;padding:9px;border-radius:10px;font-size:12px;font-weight:700;border:0;background:#eef1ff;color:#0000E7;display:flex;align-items:center;justify-content:center;gap:4px}
.rev-sd-ord-actions button.pri{background:linear-gradient(135deg,#0000E7,#3d5cff);color:#fff}
.rev-sd-ord-actions button .rev-ic{width:13px;height:13px}
html[data-theme=dark] .rev-sd-section{background:var(--l)}
html[data-theme=dark] .rev-sd-menu-row{background:#1c1f35}
html[data-theme=dark] .rev-sd-menu-row b,html[data-theme=dark] .rev-sd-ord-head b{color:#eef0ff}
html[data-theme=dark] .rev-sd-ord{background:var(--l)}
html[data-theme=dark] .rev-sd-ord-body{color:#9aa1b8}

/* ---------- Responsive ---------- */
@media(max-width:380px){
  .ad-dual{flex-direction:column}
  .rev-sd-stats{grid-template-columns:1fr 1fr}
  .rev-cart-outlet-info img{width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){
  .rev-succ-circle,.rev-succ-tick,.rev-succ-title,.rev-succ-sub,.rev-succ-pulse{animation:none;opacity:1;stroke-dashoffset:0}
}