/* Shopgez Header Notification Bell - Journal3 compatible */
.shopgez-bell-wrap{display:inline-flex;align-items:center;position:relative;vertical-align:middle;margin:0 10px;flex:0 0 auto}
.shopgez-bell-btn{position:relative;background:transparent;border:0;cursor:pointer;padding:6px;border-radius:10px;line-height:0;display:inline-flex;align-items:center;justify-content:center}
.shopgez-bell-btn:focus{outline:2px solid rgba(0,0,0,.15);outline-offset:2px}

/* Icon (CSS background-image is set inline) */
.shopgez-bell-icon{
  width:28px !important;height:28px !important;display:inline-block !important;flex:0 0 auto !important;
  background-repeat:no-repeat !important;background-position:center !important;background-size:contain !important;
}

/* Badge */
.shopgez-bell-badge{
  position:absolute;top:0;right:0;
  min-width:18px;height:18px;border-radius:999px;
  font-size:11px !important;line-height:18px !important;font-weight:700 !important;
  display:flex;align-items:center;justify-content:center;
  background:#e53935 !important;color:#fff !important;
  padding:0 5px;box-sizing:border-box;z-index:3;
}

/* Panel */
.shopgez-bell-panel{
  position:absolute;right:0;top:42px;
  width:320px;max-width:min(360px, calc(100vw - 20px));
  background:#fff;border:1px solid rgba(0,0,0,.08);
  border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.12);
  overflow:hidden;z-index:9999;
}
.shopgez-bell-panel-title{
  padding:10px 12px;font-weight:700;
  border-bottom:1px solid rgba(0,0,0,.06);
  color:#222 !important;
}
.shopgez-bell-panel-body{max-height:360px;overflow:auto}
.shopgez-bell-item{
  padding:10px 12px;border-bottom:1px solid rgba(0,0,0,.06);
  text-decoration:none;display:block;color:#222 !important;
}
.shopgez-bell-item:hover{background:rgba(0,0,0,.03)}
.shopgez-bell-item-title{font-weight:700;margin:0 0 4px 0;font-size:13px;color:#d32f2f !important}
.shopgez-bell-item-msg{margin:0;font-size:12px;opacity:.85;white-space:normal;color:#333 !important}
.shopgez-bell-empty{padding:14px 12px;opacity:.7;font-size:13px;color:#333 !important}

@media (max-width:480px){
  .shopgez-bell-wrap{margin:0 6px;}
}

/* Journal3 placement: between logo (order:0) and search (order:2) */
.desktop-header-active .shopgez-bell-wrap{order:1 !important}
.desktop-header-active .desktop-search-wrapper{order:2 !important}
.mobile-header-active .shopgez-bell-wrap{order:1 !important}
.mobile-header-active .mobile-search-wrapper{order:2 !important}


/* Ring animation when there are unread notifications */
@keyframes shopgezBellRing {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(-12deg); }
  20% { transform: rotate(12deg); }
  30% { transform: rotate(-10deg); }
  40% { transform: rotate(10deg); }
  50% { transform: rotate(-6deg); }
  60% { transform: rotate(6deg); }
  70% { transform: rotate(-3deg); }
  80% { transform: rotate(3deg); }
  90% { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}

/* Periodic attention animation when there are unread notifications (no GIF) */
@keyframes shopgezBellAttention {
  0% { transform: rotate(0deg); }
  2% { transform: rotate(-12deg); }
  4% { transform: rotate(12deg); }
  6% { transform: rotate(-10deg); }
  8% { transform: rotate(10deg); }
  10% { transform: rotate(-6deg); }
  12% { transform: rotate(6deg); }
  14% { transform: rotate(-3deg); }
  16% { transform: rotate(3deg); }
  18% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

.shopgez-has-unread .shopgez-bell-icon {
  animation: shopgezBellAttention 4.5s ease-in-out infinite;
  transform-origin: 50% 15%;
}


/* Badge gentle pulse when there are unread notifications */
@keyframes shopgezBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.shopgez-has-unread .shopgez-bell-badge {
  animation: shopgezBadgePulse 1.4s ease-in-out infinite;
  transform-origin: 50% 50%;
}

/* Ensure titles render consistently whether they are links or plain text */
.shopgez-bell-item-title{display:block;text-decoration:none;}
.shopgez-bell-item-title:visited{color:inherit;}
.shopgez-bell-item-title:hover{text-decoration:underline;}
