/* Button: uses most of the original structure/classes, just enhanced */
.pn-call-btn{
  --bg1:#fdf7f4;
  --bg2:#efe6e2; /* slightly darker */
  --text:#111;
  --ring: rgba(33,33,45,0.15);

  background: linear-gradient(135deg,var(--bg1),var(--bg2));
  border-radius: 16px;
  padding: 14px 18px;
  gap: 16px;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .25s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
}

.pn-call-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.7);
}

.pn-call-btn:active{
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
}

.pn-call-btn__label .text-1,
.pn-call-btn__label .text-2{
  display:block;
  line-height:1.1;
  font-weight:700;
  color:var(--text);
}

.pn-call-btn__label .text-2{
  opacity:.5;
  font-weight:600;
  font-size:.92em;
  margin-top:2px;
}

/* Icon container keeps the original <i><span> structure */
.pn-call-btn__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:999px;
  background: rgba(255,255,255,.6);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7);
  position:relative;
  overflow:visible;
}

/* The pulsing behavior: a short pulse burst every 5s */
.phone-svg{
  display:block;
  will-change: transform, filter;
  animation: phonePulse 5s ease-in-out infinite;
  transform-origin: 50% 50%;
}

/* Optional subtle ripple ring using ::after */
.pn-call-btn__icon::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow: 0 0 0 0 var(--ring);
  animation: ringPulse 5s ease-out infinite;
}

/* Keyframes: pulse phase in the first ~18% (≈0.9s of 5s), idle afterwards */
@keyframes phonePulse{
  0%   { transform: scale(1); filter:none; }
  5%   { transform: scale(1.18); filter: drop-shadow(0 2px 6px rgba(0,0,0,.15)); }
  8%   { transform: scale(1.0); }
  12%  { transform: scale(1.12); }
  15%  { transform: scale(1.0); }
  18%  { transform: scale(1.06); }
  22%  { transform: scale(1.0); }
  100% { transform: scale(1); filter:none; }
}

/* Ring only during the same pulse window */
@keyframes ringPulse{
  0%   { box-shadow: 0 0 0 0 var(--ring); opacity:1; }
  5%   { box-shadow: 0 0 0 6px rgba(33,33,45,0.10); }
  10%  { box-shadow: 0 0 0 12px rgba(33,33,45,0.06); }
  18%  { box-shadow: 0 0 0 18px rgba(33,33,45,0.02); opacity:.6; }
  22%  { box-shadow: 0 0 0 0 rgba(33,33,45,0); opacity:0; }
  100% { box-shadow: 0 0 0 0 rgba(33,33,45,0); opacity:0; }
}

/* Make sure text and layout play nicely inside your existing utility classes */
.pn-call-btn.d-inline-flex{
  align-items:center;
  justify-content:space-between;
  min-width: 280px;
}

/* Optional: responsive sizing */
@media (max-width: 480px){
  .pn-call-btn{
    padding:12px 14px;
  }
  .pn-call-btn__icon{ width:38px; height:38px; }
}