/* WP Join Buttons – Exact Animation CSS */

@keyframes pulse-green {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.75); transform: scale(1); }
  50%  { box-shadow: 0 0 0 11px rgba(37,211,102,0);  transform: scale(1.07); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0);     transform: scale(1); }
}

@keyframes pulse-blue {
  0%   { box-shadow: 0 0 0 0 rgba(0,136,204,0.75); transform: scale(1); }
  50%  { box-shadow: 0 0 0 11px rgba(0,136,204,0);  transform: scale(1.07); }
  100% { box-shadow: 0 0 0 0 rgba(0,136,204,0);     transform: scale(1); }
}

@keyframes shimmer-wa {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes shimmer-tg {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes slidein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Wrapper ── */
.wjb-wrapper {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding: 0;
  max-width: 100%;
  margin: 0 0 24px 0;
  box-sizing: border-box;
}

.wjb-wrapper.wjb-auto {
  margin-bottom: 28px;
}

/* ── Rows ── */
.wjb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1.5px solid transparent;
  box-sizing: border-box;
}

.wjb-row:last-child {
  margin-bottom: 0;
}

.wjb-row.wjb-whatsapp {
  background: linear-gradient(105deg, #f0faf4 0%, #f0faf4 38%, #c6f0d9 50%, #f0faf4 62%, #f0faf4 100%);
  background-size: 300% 100%;
  border-color: #b2dfcc;
  animation: shimmer-wa 3.2s linear infinite, slidein 0.5s ease both;
}

.wjb-row.wjb-telegram {
  background: linear-gradient(105deg, #eaf6fd 0%, #eaf6fd 38%, #bde6f8 50%, #eaf6fd 62%, #eaf6fd 100%);
  background-size: 300% 100%;
  border-color: #a8d8f0;
  animation: shimmer-tg 3.2s linear infinite 1.6s, slidein 0.5s ease 0.15s both;
}

/* ── Left (icon + label) ── */
.wjb-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.wjb-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.wjb-icon svg {
  display: block;
}

.wjb-label {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}

/* ── Buttons ── */
.wjb-btn {
  padding: 9px 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #fff !important;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
  flex-shrink: 0;
  line-height: 1.4;
}

.wjb-btn.wjb-btn-wa {
  background: #25D366;
  animation: pulse-green 1.8s ease-in-out infinite;
}

.wjb-btn.wjb-btn-tg {
  background: #0088cc;
  animation: pulse-blue 1.8s ease-in-out infinite;
  animation-delay: 0.9s;
}

.wjb-btn:hover {
  animation: none !important;
  transform: scale(1.08) !important;
  opacity: 0.92;
  color: #fff !important;
  text-decoration: none !important;
}

/* ── Theme compatibility resets ── */
.wjb-wrapper *,
.wjb-wrapper *::before,
.wjb-wrapper *::after {
  box-sizing: border-box;
}

.wjb-wrapper a.wjb-btn,
.wjb-wrapper a.wjb-btn:visited,
.wjb-wrapper a.wjb-btn:link {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ── Mobile ── */
@media (max-width: 480px) {
  .wjb-row { padding: 11px 13px; }
  .wjb-label { font-size: 13.5px; }
  .wjb-btn { padding: 8px 15px; font-size: 13px; }
  .wjb-icon { width: 28px; height: 28px; }
  .wjb-icon svg { width: 24px; height: 24px; }
}

@media (max-width: 340px) {
  .wjb-row { flex-wrap: wrap; gap: 8px; }
  .wjb-btn { width: 100%; text-align: center; }
}