/* WhatsApp Rotator Pro — Frontend Styles */

.war-wrapper {
  display: inline-block;
}

.war-button {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 50px;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease;
  cursor: pointer;
  border: none;
  outline: none;
  line-height: 1.4;
  white-space: nowrap;
}

.war-button:hover,
.war-button:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.5);
  color: #ffffff !important;
  text-decoration: none !important;
}

.war-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
}

.war-button svg {
  flex-shrink: 0;
}

/* Pulse animation variant (optional class: war-pulse) */
@keyframes war-pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(37, 211, 102, 0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(37, 211, 102, 0);   }
}

.war-pulse .war-button {
  animation: war-pulse-ring 2s ease-out infinite;
}