/* ============================================================
   CUSTOMER COMMON — shared across every /customer/*.php page
   (unified bottom nav, notification bell, success FX, mini charts)
   ============================================================ */

/* ---------- Unified bottom nav ---------- */
.cnav{
  position:fixed;left:0;right:0;bottom:0;z-index:400;
  display:flex;height:60px;
  background:var(--surf,#fff);
  border-top:1.5px solid var(--bdr,#e8e0d8);
  box-shadow:0 -4px 24px rgba(0,0,0,.06);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.cnav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:9.5px;font-weight:700;color:var(--txt3,#a09b97);text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:color .15s,transform .1s;padding:5px 2px;
}
.cnav-item:active{transform:scale(.92);opacity:.8}
.cnav-item.on{color:var(--pri,#9b2335)}
.cnav-item.on svg{stroke:var(--pri,#9b2335)}
body{padding-bottom:74px}

/* ---------- Notification bell ---------- */
.ntf-wrap{position:relative;display:inline-flex}
.ntf-bell{
  width:38px;height:38px;border-radius:50%;border:1.5px solid var(--bdr,#e8e0d8);background:none;
  color:var(--txt2,#6b6460);display:flex;align-items:center;justify-content:center;position:relative;
  cursor:pointer;transition:all .15s;flex-shrink:0;-webkit-tap-highlight-color:transparent;
}
.ntf-bell:hover{border-color:var(--pri,#9b2335);color:var(--pri,#9b2335)}
.ntf-bell.ringing svg{animation:ntf-ring .5s ease}
@keyframes ntf-ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(11deg)}60%{transform:rotate(-7deg)}80%{transform:rotate(4deg)}}
.ntf-dot{
  position:absolute;top:5px;right:5px;min-width:9px;height:9px;padding:0 2px;border-radius:99px;
  background:var(--red,#dc2626);border:2px solid var(--surf,#fff);
}
.ntf-panel{
  display:none;position:absolute;top:calc(100% + 10px);right:0;width:320px;max-width:88vw;max-height:420px;
  overflow:hidden;background:var(--surf,#fff);border:1px solid var(--bdr,#e8e0d8);border-radius:16px;
  box-shadow:0 20px 60px rgba(26,23,20,.22);z-index:9999;flex-direction:column;
}
.ntf-panel.open{display:flex;animation:ntf-pop .16s ease}
@keyframes ntf-pop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.ntf-panel-hdr{
  display:flex;align-items:center;justify-content:space-between;padding:12px 14px;
  border-bottom:1px solid var(--bdr,#e8e0d8);font-size:13px;font-weight:900;color:var(--txt,#1a1714);
}
.ntf-mark-all{background:none;border:none;font-size:11px;font-weight:700;color:var(--pri,#9b2335);cursor:pointer;padding:2px}
.ntf-list{overflow-y:auto;flex:1;padding:6px}
.ntf-empty{padding:32px 16px;text-align:center;font-size:12px;color:var(--txt3,#a09b97)}
.ntf-item{
  display:flex;gap:10px;align-items:flex-start;padding:10px 8px;border-radius:10px;cursor:pointer;
  transition:background .12s;text-align:left;
}
.ntf-item:hover{background:var(--surf2,#f7f6f4)}
.ntf-item.unread{background:var(--pri-l,rgba(155,35,53,.06))}
.ntf-item-ico{width:34px;height:34px;border-radius:50%;background:var(--pri-l,rgba(155,35,53,.09));color:var(--pri,#9b2335);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px}
.ntf-item-body{flex:1;min-width:0}
.ntf-item-title{font-size:12.5px;font-weight:800;color:var(--txt,#1a1714);margin-bottom:2px}
.ntf-item-text{font-size:11.5px;color:var(--txt2,#6b6460);line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ntf-item-time{font-size:10px;color:var(--txt3,#a09b97);margin-top:4px;font-weight:600}
.ntf-item-dot{width:7px;height:7px;border-radius:50%;background:var(--pri,#9b2335);flex-shrink:0;margin-top:5px}

/* ---------- Generic loading spinner (shared) ---------- */
.cfx-spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(0,0,0,.12);border-top-color:var(--pri,#9b2335);border-radius:50%;animation:cfx-spin .6s linear infinite;vertical-align:-3px}
@keyframes cfx-spin{to{transform:rotate(360deg)}}
.cfx-skeleton{background:linear-gradient(90deg,var(--surf2,#f2f0ee) 25%,var(--bdr,#e8e0d8) 37%,var(--surf2,#f2f0ee) 63%);background-size:400% 100%;animation:cfx-shimmer 1.4s ease infinite;border-radius:8px}
@keyframes cfx-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---------- Success celebration overlay ---------- */
#cfx-overlay{
  position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;
  background:rgba(20,16,14,.46);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .22s ease;
}
#cfx-overlay.show{display:flex;opacity:1}
.cfx-card{
  background:var(--surf,#fff);border-radius:22px;padding:34px 30px 28px;text-align:center;max-width:300px;width:90%;
  box-shadow:0 24px 70px rgba(0,0,0,.3);transform:scale(.85);transition:transform .28s cubic-bezier(.34,1.56,.64,1);
  position:relative;overflow:hidden;
}
#cfx-overlay.show .cfx-card{transform:scale(1)}
.cfx-check-wrap{width:76px;height:76px;margin:0 auto 16px;position:relative}
.cfx-check-circle{stroke:var(--green,#2d9e6b);stroke-width:3;fill:none;stroke-dasharray:166;stroke-dashoffset:166;animation:cfx-draw-circle .5s ease forwards}
.cfx-check-mark{stroke:var(--green,#2d9e6b);stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:cfx-draw-check .35s .45s ease forwards}
@keyframes cfx-draw-circle{to{stroke-dashoffset:0}}
@keyframes cfx-draw-check{to{stroke-dashoffset:0}}
.cfx-title{font-size:17px;font-weight:900;color:var(--txt,#1a1714);margin-bottom:6px;opacity:0;animation:cfx-fade-up .35s .55s ease forwards}
.cfx-sub{font-size:12.5px;color:var(--txt2,#6b6460);line-height:1.5;opacity:0;animation:cfx-fade-up .35s .65s ease forwards}
@keyframes cfx-fade-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.cfx-confetti{position:absolute;top:-10px;border-radius:2px;opacity:0;animation:cfx-fall 1.1s ease-in forwards}
@keyframes cfx-fall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(220px) rotate(360deg)}}

/* ---------- Toast (used if a page doesn't already define one) ---------- */
.cfx-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(6px);background:#1a1714;color:#fff;padding:9px 18px;border-radius:99px;font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:all .2s;white-space:nowrap;z-index:99998;max-width:90vw}
.cfx-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Stats mini bar chart (no money figures) ---------- */
.cstat-chart{display:flex;align-items:flex-end;gap:8px;height:110px;padding:6px 4px 0}
.cstat-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.cstat-bar{width:100%;max-width:26px;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,var(--pri,#9b2335),var(--pri-d,#7a1c29));min-height:4px;transition:height .5s cubic-bezier(.22,1,.36,1);position:relative}
.cstat-bar-col.empty .cstat-bar{background:var(--bdr,#e8e0d8)}
.cstat-bar-num{font-size:10px;font-weight:800;color:var(--txt2,#6b6460);margin-bottom:2px}
.cstat-bar-lbl{font-size:10px;font-weight:700;color:var(--txt3,#a09b97)}

@media(max-width:380px){
  .cnav-item{font-size:8.6px}
  .ntf-panel{width:290px}
}