/* path: zultalk/css/components/buttons.css */

.btn{
  position: relative;
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 16px 16px;
  border-radius: 20px;
  border: 0;
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow2);
  transition: transform .22s ease, box-shadow .22s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  overflow:hidden;
}

.btn:active{ transform: translateY(1px) scale(.99); }

.btn__icon{
  width: 40px;
  height: 40px;
  display:grid;
  place-items:center;
  border-radius: 16px;
  border: 1px solid rgba(15,20,35,.08);
  color: rgba(15,20,35,.86);
  background: linear-gradient(135deg, rgba(255,122,24,.26), rgba(255,182,72,.18));
}

.btn__icon .icon{
  width: 22px;
  height: 22px;
  display:block;
}

.btn__text{ display:flex; flex-direction:column; line-height:1.2; }
.btn__title{ font-weight: 900; letter-spacing:-0.01em; }
.btn__sub{ font-size: 13px; color: var(--muted); margin-top: 4px; }

.btn--wide{ justify-content:center; }

/* Glow sweep: left → right → left (loop) */
.btn--glow{
  --glow-dur: 4.0s;
  --glow-delay: 0s;

  /* Main accent: orange */
  --g1: rgba(255,122,24,.92);
  --g2: rgba(255,182,72,.92);
  --g3: rgba(255,255,255,.62);
}

.btn--ios{
  --g1: rgba(255,122,24,.92);
  --g2: rgba(255,182,72,.92);
  --g3: rgba(255,255,255,.66);
}
.btn--android{
  --g1: rgba(255,182,72,.94);
  --g2: rgba(255,122,24,.92);
  --g3: rgba(255,255,255,.60);
}
.btn--web{
  --g1: rgba(255,122,24,.92);
  --g2: rgba(255,182,72,.90);
  --g3: rgba(255,255,255,.58);
}

.btn--glow::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 22px;

  background:
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      var(--g1) 22%,
      var(--g2) 50%,
      var(--g3) 78%,
      rgba(0,0,0,0) 100%);
  background-size: 240% 100%;
  background-position: 0% 50%;

  filter: blur(12px) saturate(1.3);
  opacity: .82;
  animation: glowSweep var(--glow-dur) ease-in-out infinite alternate;
  animation-delay: var(--glow-delay);
  pointer-events:none;
  will-change: background-position, opacity;
}

.btn--glow::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius: 19px;
  background: rgba(255,255,255,.72);
  pointer-events:none;
}

/* keep content above ::after */
.btn > *{ position: relative; z-index: 1; }

@keyframes glowSweep{
  to{ background-position: 100% 50%; }
}

/* Desktop hover: pause glow + scale */
@media (hover:hover) and (pointer:fine){
  .btn:hover{
    transform: translateY(-2px) scale(1.04);
    box-shadow: var(--shadow);
  }
  .btn--glow:hover::before{
    animation-play-state: paused;
    opacity: .94;
  }
}

@media (max-width: 720px){
  .btn{ padding: 15px 14px; }
}

@media (prefers-reduced-motion: reduce){
  .btn--glow::before{ animation: none; }
}