/* إشعارات CalmGastro العائمة (CustomerNotificationPopup). left/right/bottom يضبطها الـ JS حسب الشاشة والعناصر الثابتة */
.cgn{
  --cgn-teal:#6CC0B9; --cgn-purple:#643889; --cgn-ink:#1E2A2E; --cgn-muted:#66767A;
  position:fixed; z-index:48; left:20px; bottom:20px; width:min(370px, calc(100vw - 40px));
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .32s ease, transform .32s cubic-bezier(.2,.7,.3,1)
}
.cgn[hidden]{display:none}
.cgn.in{opacity:1; transform:none; pointer-events:auto; transition:opacity .32s ease, transform .32s cubic-bezier(.2,.7,.3,1), bottom .25s ease}   /* يرتفع بهدوء فقط وهو ظاهر */
.cgn.out{opacity:0; transform:translateY(8px); transition-duration:.24s}
.cgn-card{
  position:relative; overflow:hidden; display:flex; align-items:flex-start; gap:12px;
  background:#fff; border:1px solid rgba(100,56,137,.12); border-radius:15px;
  padding:14px 14px 16px; box-shadow:0 14px 34px -14px rgba(30,42,46,.28), 0 2px 6px rgba(30,42,46,.06);
  color:var(--cgn-ink); font-size:.92rem; line-height:1.55; text-align:start
}
.cgn-ico{
  flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:1.15rem; line-height:1;
  background:rgba(108,192,185,.16); box-shadow:inset 0 0 0 1px rgba(108,192,185,.35)
}
.cgn-card[data-type="stock"] .cgn-ico{background:rgba(100,56,137,.09); box-shadow:inset 0 0 0 1px rgba(100,56,137,.2)}
.cgn-body{flex:1; min-width:0; padding-top:1px}
.cgn-head{margin:0; display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.5em}
.cgn-name{font-weight:700; color:var(--cgn-purple); font-size:.98rem; overflow-wrap:anywhere}
.cgn-city{font-size:.8rem; color:var(--cgn-muted)}
.cgn-text{
  margin:.2rem 0 0; color:var(--cgn-ink); overflow-wrap:anywhere;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; overflow:hidden
}
.cgn-tag{display:inline-block; margin-top:.45rem; font-size:.72rem; font-weight:600; color:#3E8E87; background:rgba(108,192,185,.14); border-radius:999px; padding:.1rem .6rem}
.cgn [hidden]{display:none}
.cgn-close{
  flex:none; width:36px; height:36px; margin:-8px -8px 0 0; border:0; border-radius:50%; background:transparent; color:var(--cgn-muted);
  display:grid; place-items:center; cursor:pointer; transition:background .2s ease, color .2s ease
}
html[dir="rtl"] .cgn-close{margin:-8px 0 0 -8px}
.cgn-close svg{width:18px; height:18px}
.cgn-close:hover{background:rgba(100,56,137,.08); color:var(--cgn-purple)}
.cgn-close:focus-visible{outline:2px solid var(--cgn-purple); outline-offset:1px}
/* مؤشر الوقت المتبقي */
.cgn-bar{position:absolute; inset-inline:0; bottom:0; height:2px; background:rgba(108,192,185,.12)}
.cgn-bar i{display:block; height:100%; width:100%; background:var(--cgn-teal); opacity:.55; transform-origin:left center}
html[dir="rtl"] .cgn-bar i{transform-origin:right center}
@keyframes cgnBar{from{transform:scaleX(1)} to{transform:scaleX(0)}}

@media (max-width:1024px){ .cgn{width:min(340px, calc(100vw - 32px))} }
@media (max-width:640px){
  .cgn{width:auto}
  .cgn-card{padding:12px 12px 14px; gap:10px; font-size:.88rem}
  .cgn-ico{width:34px; height:34px; font-size:1.05rem}
  .cgn-text{-webkit-line-clamp:3; line-clamp:3}
}
@media (prefers-reduced-motion: reduce){
  .cgn, .cgn.out{transform:none; transition:opacity .01s linear}
  .cgn-bar{display:none}
}
@media print{ .cgn{display:none !important} }