@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.6; }
  70% { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
@keyframes wa-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
  60% { transform: translateY(-2px); }
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wa-btn-wrap { position: relative; display: inline-flex; align-items: center; }
.wa-pulse { position: absolute; inset: 0; border-radius: 999px; background: #25D366; animation: pulse-ring 2s ease-out infinite; pointer-events: none; }
.wa-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(90deg, #25D366 0%, #20c55a 40%, #2eec72 60%, #25D366 100%);
  background-size: 200% auto; color: #fff; border: none; border-radius: 999px;
  padding: 9px 20px; font-size: 14px; font-weight: 500; cursor: pointer;
  animation: shimmer 2.5s linear infinite;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 12px rgba(37,211,102,0.35);
}
.wa-btn:hover { transform: scale(1.05); box-shadow: 0 4px 20px rgba(37,211,102,0.55); }
.wa-btn:active { transform: scale(0.97); }
.wa-icon { animation: wa-bounce 2s ease-in-out infinite; display:inline-flex; }
.wa-btn:hover .wa-icon { animation: wa-bounce 0.4s ease-in-out infinite; }

.badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: #0F6E56; border-radius: 999px;
  font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px;
}

.popup-box {
  display: none;
  background: var(--color-background-primary);
  border: 0.5px solid #1D9E75;
  border-radius: var(--border-radius-lg);
  padding: 1.25rem;
  margin-top: 12px;
  animation: slideDown 0.2s ease;
}
.popup-box.open { display: block; }

.product-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--border-radius-md);
  border: 0.5px solid var(--color-border-tertiary);
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
  margin-bottom: 7px; user-select: none;
}
.product-item:hover { background: var(--color-background-secondary); border-color: #1D9E75; }
.product-item.selected { background: #EAF3DE; border-color: #1D9E75; }
.product-item.selected .p-check { background: #25D366; border-color: #25D366; }
.product-item.selected .p-check::after { display: block; }
.p-check {
  width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0;
  border: 1.5px solid var(--color-border-secondary);
  background: var(--color-background-primary);
  position: relative; transition: all 0.12s;
}
.p-check::after {
  content: ''; display: none; position: absolute;
  left: 4px; top: 1px; width: 5px; height: 9px;
  border: 2px solid #fff; border-top: none; border-left: none;
  transform: rotate(45deg);
}
.p-tag { margin-left: auto; font-size: 11px; background: #EAF3DE; color: #0F6E56; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }

.send-btn {
  width: 100%; padding: 10px; border-radius: 999px; border: none; cursor: pointer;
  background: linear-gradient(90deg, #25D366 0%, #20c55a 40%, #2eec72 60%, #25D366 100%);
  background-size: 200% auto; color: #fff; font-size: 14px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  animation: shimmer 2.5s linear infinite;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 10px rgba(37,211,102,0.3); margin-top: 12px;
}
.send-btn:hover { transform: scale(1.02); box-shadow: 0 4px 18px rgba(37,211,102,0.5); }
.send-btn:disabled { background: var(--color-background-secondary); color: var(--color-text-tertiary); animation: none; box-shadow: none; cursor: not-allowed; transform: none; }
.sel-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.sel-all-btn { font-size:12px; color:#0F6E56; background:none; border:none; cursor:pointer; font-weight:500; padding:0; }
.sel-all-btn:hover { text-decoration:underline; }
.close-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.close-x { background:none; border:none; cursor:pointer; color:var(--color-text-secondary); font-size:18px; line-height:1; padding:0; }
.close-x:hover { color:var(--color-text-primary); 

.stylish-text{
        font-size:28px;
        font-weight:700;
        color:#0c0c0c;
        padding:25px 40px;
        border-radius:20px;

        

        box-shadow:
            8px 8px 18px rgba(0,0,0,0.45),
            -4px -4px 10px rgba(255,255,255,0.08),
            inset 2px 2px 5px rgba(255,255,255,0.15),
            inset -2px -2px 5px rgba(0,0,0,0.3);

        text-shadow:
            2px 2px 4px rgba(0,0,0,0.5),
            0 0 10px rgba(255,255,255,0.3);

        transform: perspective(500px) rotateX(8deg);
        transition: all 0.4s ease;
        letter-spacing:1px;
    }

    .stylish-text:hover{
        transform: perspective(500px) rotateX(0deg) scale(1.05);
        box-shadow:
            12px 12px 25px rgba(0,0,0,0.55),
            0 0 25px rgba(34,197,94,0.6);
    }

}