/* Posizionamento: il tema la mette a destra (displayNav2) */
.orderchat-bell { position: relative; z-index: 1030; }

/* Bottone circolare comodo al click */
.orderchat-bell__btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;      /* leggermente più grande */
  height: 40px;
  border-radius: 9999px;
  padding: 0;
  text-decoration: none !important;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.orderchat-bell__btn:hover{ background-color: rgba(220,53,69,.08); }
.orderchat-bell__btn:focus{ box-shadow: 0 0 0 3px rgba(220,53,69,.25); }

/* Icona più leggibile */
.orderchat-bell__icon{ font-size: 22px; line-height: 1; }

/* Badge più presente (rosso) */
.orderchat-bell__badge{
  position: absolute;
  top: -5px;
  right: -5px;
  padding: .28rem .5rem;
  font-size: 12px;                /* +1 rispetto a prima */
  font-weight: 700;
  border-radius: 999px;
  color: #fff;
  background-color: #dc3545 !important; /* rosso deciso */
  box-shadow: 0 0 0 2px #fff;     /* stacco su header chiaro/scuro */
}

/* Dropdown con ombra morbida */
.orderchat-bell__dropdown{
  min-width: 340px;
  border: 0;
  border-radius: .5rem;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* ====== EFFETTO NOTIFICA MARCATO ====== */
/* 1) micro-respiro del bottone */
.orderchat-bell--active .orderchat-bell__btn{
  background-color: rgba(220,53,69,.06);
  animation: ocBellBreath 1.6s ease-in-out infinite;
  will-change: transform;
}

/* 2) doppia AUREOLA ROSSA (stagger) */
.orderchat-bell--active .orderchat-bell__btn::before,
.orderchat-bell--active .orderchat-bell__btn::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.orderchat-bell--active .orderchat-bell__btn::before{
  box-shadow: 0 0 0 0 rgba(220,53,69,.45);
  animation: ocHaloStrong 1.8s ease-out infinite;
}
.orderchat-bell--active .orderchat-bell__btn::after{
  box-shadow: 0 0 0 0 rgba(220,53,69,.35);
  animation: ocHaloStrong 1.8s ease-out infinite .3s; /* sfasata */
}

/* 3) lieve “swing” della campana (più visibile ma non fastidioso) */
.orderchat-bell--active .orderchat-bell__icon{
  animation: ocBellSwing 1.2s ease-in-out infinite;
  transform-origin: 50% 0; /* perno in alto */
}

/* Keyframes */
@keyframes ocBellBreath{
  0%,100%{ transform: scale(1); }
  50%    { transform: scale(1.08); }
}
@keyframes ocHaloStrong{
  0%   { box-shadow: 0 0 0   0px rgba(220,53,69,.45); }
  60%  { box-shadow: 0 0 0 16px rgba(220,53,69, 0); }
  100% { box-shadow: 0 0 0   0px rgba(220,53,69, 0); }
}
@keyframes ocBellSwing{
  0%,100%{ transform: rotate(0deg); }
  25%    { transform: rotate(12deg); }
  50%    { transform: rotate(0deg); }
  75%    { transform: rotate(-12deg); }
}

/* Accessibilità: se l’utente preferisce meno movimento, spegni le animazioni */
@media (prefers-reduced-motion: reduce){
  .orderchat-bell--active .orderchat-bell__btn,
  .orderchat-bell--active .orderchat-bell__btn::before,
  .orderchat-bell--active .orderchat-bell__btn::after,
  .orderchat-bell--active .orderchat-bell__icon{
    animation: none !important;
  }
}

/* Mobile */
@media (max-width: 575.98px){
  .orderchat-bell__dropdown{ min-width: 280px; }
}