/* Suhaal Call & WhatsApp Button — front-end styles */

.suhaal-cw-wrap{
  position: fixed;
  bottom: 22px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.suhaal-cw-wrap.suhaal-cw--right{ right: 22px; align-items: flex-end; }
.suhaal-cw-wrap.suhaal-cw--left{ left: 22px; align-items: flex-start; }

.suhaal-cw-btn{
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  overflow: hidden;
  transition: width .3s ease, box-shadow .2s ease, transform .2s ease;
  flex: none;
}
.suhaal-cw-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.28);
}

.suhaal-cw-btn--whatsapp{ background: #25D366; }
.suhaal-cw-btn--whatsapp:hover{ background: #20BD5A; }

.suhaal-cw-btn--call{ background: #E53935; }
.suhaal-cw-btn--call:hover{ background: #C62828; }

.suhaal-cw-icon{
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.suhaal-cw-icon svg{ width: 26px; height: 26px; }

.suhaal-cw-label{
  position: relative;
  z-index: 2;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width .3s ease, opacity .2s ease, padding .3s ease;
  padding-right: 0;
}

/* Expand on hover to reveal label (desktop only) */
@media (hover: hover) and (pointer: fine){
  .suhaal-cw--labels .suhaal-cw-btn:hover{ width: auto; padding-right: 4px; }
  .suhaal-cw--labels .suhaal-cw-btn:hover .suhaal-cw-label{
    max-width: 160px;
    opacity: 1;
    padding-right: 18px;
  }
}

/* Pulsing ring to draw attention */
.suhaal-cw-ring{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: inherit;
  opacity: 0.55;
  animation: suhaal-cw-pulse 2.2s ease-out infinite;
  z-index: 1;
}
.suhaal-cw-btn--call .suhaal-cw-ring{ animation-delay: .5s; }

@keyframes suhaal-cw-pulse{
  0%   { transform: scale(1);   opacity: 0.45; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .suhaal-cw-ring{ animation: none; display: none; }
  .suhaal-cw-btn, .suhaal-cw-label{ transition: none; }
}

/* Mobile-only display mode */
@media (min-width: 783px){
  .suhaal-cw-wrap.suhaal-cw--mobile-only{ display: none; }
}

/* Mobile sizing */
@media (max-width: 480px){
  .suhaal-cw-wrap{ bottom: 16px; gap: 12px; }
  .suhaal-cw-wrap.suhaal-cw--right{ right: 16px; }
  .suhaal-cw-wrap.suhaal-cw--left{ left: 16px; }
  .suhaal-cw-btn, .suhaal-cw-icon{ width: 50px; height: 50px; }
  .suhaal-cw-icon svg{ width: 23px; height: 23px; }
}

/* Admin live-preview containment */
.suhaal-cw-wrap.suhaal-cw--preview{
  position: relative;
  bottom: auto; right: auto; left: auto;
  flex-direction: row-reverse;
  justify-content: flex-start;
}