/* --- Modern Floating Action Button (FAB) --- */
#svp-floating-widget {
  position: fixed;
  bottom: 25px;
  left: 25px;
  z-index: 99999;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: svpFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s;
}

@keyframes svpFadeIn { to { opacity: 1; } }

/* --- The Container & Input --- */
.svp-floating-toggle {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Hide the actual checkbox but keep it functional */
.svp-floating-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

/* --- The Button (Circle) --- */
.svp-fab-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 20px -5px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

/* --- State: OFF (Default) --- */
.svp-fab-btn {
  transform: scale(1);
}

.svp-fab-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 25px -8px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
}

/* --- The Icon --- */
.svp-bell-icon {
  width: 24px;
  height: 24px;
  stroke: #1e293b; /* Dark Slate */
  fill: transparent;
  stroke-width: 2px;
  transition: all 0.3s ease;
  z-index: 2;
}

/* --- State: ON (Subscribed) --- */
/* Gradient Background */
.svp-floating-toggle input:checked + .svp-fab-btn {
  background: linear-gradient(135deg, #E52E99 0%, #9945FF 100%);
  box-shadow: 0 10px 30px -5px rgba(229, 46, 153, 0.5); /* Pink Glow */
}

/* Icon change on Active */
.svp-floating-toggle input:checked + .svp-fab-btn .svp-bell-icon {
  stroke: #ffffff;
  fill: #ffffff;
  transform: rotate(0deg); /* Reset shake if needed */
}

/* --- Status Dot (The Little Indicator) --- */
.svp-status-dot {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 8px;
  height: 8px;
  background-color: #E52E99; /* Pink Dot when OFF */
  border-radius: 50%;
  border: 1.5px solid #fff;
  transition: all 0.3s ease;
  z-index: 3;
}

/* Hide dot when ON */
.svp-floating-toggle input:checked + .svp-fab-btn .svp-status-dot {
  background-color: #10b981; /* Green success dot */
  border-color: transparent;
  transform: scale(0);
}

/* --- Tooltip / Label --- */
.svp-tooltip {
  position: absolute;
  left: 68px; /* Right of the button */
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  background: #ffffff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,0.05);
}

/* Show Tooltip on Hover */
.svp-floating-toggle:hover .svp-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Mobile Optimization: Even Smaller */
@media (max-width: 600px) {
  #svp-floating-widget { bottom: 15px; left: 15px; }
  
  /* Very Compact Button */
  .svp-fab-btn { 
    width: 36px;  /* Reduced from 44px */
    height: 36px; 
  }
  
  /* Smaller Icon */
  .svp-bell-icon { 
    width: 16px; /* Reduced from 20px */
    height: 16px; 
  }
  
  /* Adjust Dot Position */
  .svp-status-dot {
    top: 8px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-width: 1px;
  }
  
  /* Hide Tooltip on Mobile */
  .svp-tooltip { display: none; }
}