/* =============================================================================
   WSW — Witrey Social Widget  |  Frontend CSS
   Floating widget: button, drawer, channels, animations.
   ============================================================================= */

/* ── Custom properties (base — override via wp_add_inline_style) ─────────────── */
:root {
  --wsw-primary:        #25D366;
  --wsw-primary-dark:   color-mix(in srgb, var(--wsw-primary) 80%, #000);
  --wsw-white:          #ffffff;
  --wsw-shadow:         0 4px 20px rgba(0, 0, 0, 0.18);
  --wsw-shadow-hover:   0 6px 28px rgba(0, 0, 0, 0.28);
  --wsw-radius:         50px;
  --wsw-z:              99999;
  --wsw-gap:            12px;
  --wsw-transition:     0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  --wsw-transition-fast:0.18s ease;

  /* Tamaños del botón principal */
  --wsw-btn-sm:  44px;
  --wsw-btn-md:  56px;
  --wsw-btn-lg:  64px;
  --wsw-btn-xl:  72px;

  /* Tamaños de canal en el drawer */
  --wsw-ch-sm:   36px;
  --wsw-ch-md:   44px;
  --wsw-ch-lg:   52px;
  --wsw-ch-xl:   60px;

  /* Offset desde el borde de la pantalla */
  --wsw-offset-x: 20px;
  --wsw-offset-y: 20px;
}

/* ── Contenedor principal ────────────────────────────────────────────────────── */
.wsw-widget {
  position: fixed;
  bottom: var(--wsw-offset-y);
  z-index: var(--wsw-z);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wsw-gap);
  /* El drawer aparece encima del botón: flex-direction column-reverse */
  flex-direction: column-reverse;
}

.wsw-position-bottom-right { right: var(--wsw-offset-x); }
.wsw-position-bottom-left  { left:  var(--wsw-offset-x); }

/* Cuando el drawer está abierto el contenedor se alinea correctamente */
.wsw-position-bottom-left  { align-items: flex-start; }
.wsw-position-bottom-right { align-items: flex-end;   }

/* ── Botón principal ──────────────────────────────────────────────────────────── */
.wsw-main-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  background:      var(--wsw-primary);
  color:           var(--wsw-white);
  border:          none;
  border-radius:   var(--wsw-radius);
  cursor:          pointer;
  text-decoration: none;
  font-family:     inherit;
  font-size:       14px;
  font-weight:     600;
  line-height:     1;
  white-space:     nowrap;
  box-shadow:      var(--wsw-shadow);
  transition:      transform var(--wsw-transition),
                   box-shadow var(--wsw-transition-fast),
                   background var(--wsw-transition-fast);
  padding:         0;
  overflow:        hidden;
}

/* Tamaños según clase del contenedor */
.wsw-size-sm .wsw-main-btn { width: var(--wsw-btn-sm); height: var(--wsw-btn-sm); }
.wsw-size-md .wsw-main-btn { width: var(--wsw-btn-md); height: var(--wsw-btn-md); }
.wsw-size-lg .wsw-main-btn { width: var(--wsw-btn-lg); height: var(--wsw-btn-lg); }
.wsw-size-xl .wsw-main-btn { width: var(--wsw-btn-xl); height: var(--wsw-btn-xl); }

/* Con texto CTA el botón se expande horizontalmente */
.wsw-main-btn:has(.wsw-cta-text) {
  padding: 0 20px;
  width: auto !important;
  border-radius: var(--wsw-radius);
}

.wsw-main-btn:hover,
.wsw-main-btn:focus-visible {
  transform:  scale(1.06) translateY(-2px);
  box-shadow: var(--wsw-shadow-hover);
  outline:    none;
}
.wsw-main-btn:active {
  transform: scale(0.97);
}

/* Canal único: usa el color de marca del canal */
.wsw-main-btn.wsw-direct {
  background: var(--wsw-channel-color, var(--wsw-primary));
}

/* ── Iconos del botón principal ───────────────────────────────────────────────── */
.wsw-main-btn .wsw-channel-icon,
.wsw-main-btn .wsw-icon-open,
.wsw-main-btn .wsw-icon-close {
  display:    flex;
  align-items: center;
  flex-shrink: 0;
}

.wsw-size-sm .wsw-main-btn svg { width: 20px; height: 20px; }
.wsw-size-md .wsw-main-btn svg { width: 26px; height: 26px; }
.wsw-size-lg .wsw-main-btn svg { width: 30px; height: 30px; }
.wsw-size-xl .wsw-main-btn svg { width: 34px; height: 34px; }

/* Gestión open/close icons */
.wsw-icon-close        { display: none; }
.wsw-widget.is-open .wsw-icon-open  { display: none; }
.wsw-widget.is-open .wsw-icon-close { display: flex; }

/* ── CTA text ─────────────────────────────────────────────────────────────────── */
.wsw-cta-text {
  font-size:   13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ── Drawer ───────────────────────────────────────────────────────────────────── */
.wsw-drawer {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  /* Estado inicial: oculto, desplazado hacia abajo */
  opacity:        0;
  visibility:     hidden;
  transform:      translateY(12px) scale(0.95);
  transform-origin: bottom center;
  transition:
    opacity   var(--wsw-transition-fast),
    visibility 0s linear var(--wsw-transition-fast),
    transform var(--wsw-transition);
  pointer-events: none;
}

/* Alineación del drawer según posición */
.wsw-position-bottom-right .wsw-drawer { align-items: flex-end;   }
.wsw-position-bottom-left  .wsw-drawer { align-items: flex-start; }

/* Drawer abierto */
.wsw-widget.is-open .wsw-drawer {
  opacity:        1;
  visibility:     visible;
  transform:      translateY(0) scale(1);
  transition:
    opacity   var(--wsw-transition-fast),
    visibility 0s linear 0s,
    transform var(--wsw-transition);
  pointer-events: auto;
}

/* ── Canal individual en el drawer ───────────────────────────────────────────── */
.wsw-channel-btn {
  display:         flex;
  align-items:     center;
  gap:             10px;
  background:      var(--wsw-channel-color, #555);
  color:           var(--wsw-white);
  border-radius:   var(--wsw-radius);
  text-decoration: none;
  font-size:       13px;
  font-weight:     600;
  white-space:     nowrap;
  box-shadow:      var(--wsw-shadow);
  transition:      transform var(--wsw-transition),
                   box-shadow var(--wsw-transition-fast);
  /* Padding lateral; altura la fija el tamaño */
  padding: 0 16px 0 6px;
}

/* Altura de botones de canal */
.wsw-size-sm .wsw-channel-btn { height: var(--wsw-ch-sm); }
.wsw-size-md .wsw-channel-btn { height: var(--wsw-ch-md); }
.wsw-size-lg .wsw-channel-btn { height: var(--wsw-ch-lg); }
.wsw-size-xl .wsw-channel-btn { height: var(--wsw-ch-xl); }

.wsw-channel-btn:hover,
.wsw-channel-btn:focus-visible {
  transform:  scale(1.04) translateY(-1px);
  box-shadow: var(--wsw-shadow-hover);
  outline:    none;
}

/* Icono del canal */
.wsw-channel-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  /* El círculo de fondo */
  background:      rgba(255,255,255,0.18);
  border-radius:   50%;
}

.wsw-size-sm .wsw-channel-icon { width: 28px; height: 28px; }
.wsw-size-md .wsw-channel-icon { width: 32px; height: 32px; }
.wsw-size-lg .wsw-channel-icon { width: 40px; height: 40px; }
.wsw-size-xl .wsw-channel-icon { width: 48px; height: 48px; }

.wsw-size-sm .wsw-channel-icon svg { width: 15px; height: 15px; }
.wsw-size-md .wsw-channel-icon svg { width: 18px; height: 18px; }
.wsw-size-lg .wsw-channel-icon svg { width: 22px; height: 22px; }
.wsw-size-xl .wsw-channel-icon svg { width: 26px; height: 26px; }

/* Animación de entrada por canal (stagger) */
.wsw-widget.is-open .wsw-channel-btn {
  animation: wswSlideIn var(--wsw-transition) both;
}
.wsw-widget.is-open .wsw-channel-btn:nth-child(1) { animation-delay: 0.00s; }
.wsw-widget.is-open .wsw-channel-btn:nth-child(2) { animation-delay: 0.05s; }
.wsw-widget.is-open .wsw-channel-btn:nth-child(3) { animation-delay: 0.10s; }
.wsw-widget.is-open .wsw-channel-btn:nth-child(4) { animation-delay: 0.15s; }
.wsw-widget.is-open .wsw-channel-btn:nth-child(5) { animation-delay: 0.20s; }

@keyframes wswSlideIn {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0)  scale(1);     }
}

/* ── Animaciones de atención en el botón principal ───────────────────────────── */

/* Pulso */
@keyframes wswPulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(0,0,0,0.25), var(--wsw-shadow); }
  50%       { box-shadow: 0 0 0 12px rgba(0,0,0,0),   var(--wsw-shadow); }
}
.wsw-anim-pulse .wsw-main-btn {
  animation: wswPulse 2.4s ease infinite;
}
.wsw-anim-pulse .wsw-main-btn:hover {
  animation: none;
}

/* Shake */
@keyframes wswShake {
  0%, 100% { transform: rotate(0deg);   }
  15%       { transform: rotate(-12deg); }
  30%       { transform: rotate(10deg);  }
  45%       { transform: rotate(-8deg);  }
  60%       { transform: rotate(6deg);   }
  75%       { transform: rotate(-4deg);  }
  90%       { transform: rotate(2deg);   }
}
.wsw-anim-shake .wsw-main-btn {
  animation: wswShake 3s ease 1s infinite;
  transform-origin: center bottom;
}
.wsw-anim-shake .wsw-main-btn:hover {
  animation: none;
  transform: scale(1.06) translateY(-2px);
}

/* ── Tooltip de label al hacer hover en el botón principal ───────────────────── */
.wsw-main-btn::after {
  content:         attr(aria-label);
  position:        absolute;
  background:      rgba(0,0,0,0.75);
  color:           #fff;
  font-size:       11px;
  font-weight:     500;
  padding:         4px 10px;
  border-radius:   4px;
  white-space:     nowrap;
  pointer-events:  none;
  opacity:         0;
  transform:       translateY(4px);
  transition:      opacity 0.15s, transform 0.15s;
  bottom:          calc(100% + 8px);
}

/* Solo mostrar tooltip cuando hay label y NO hay cta-text visible */
.wsw-main-btn:not(:has(.wsw-cta-text)):hover::after,
.wsw-main-btn:not(:has(.wsw-cta-text)):focus-visible::after {
  opacity:   1;
  transform: translateY(0);
}

/* ── Botón "cerrar backdrop" invisible cuando el drawer está abierto ─────────── */
.wsw-backdrop {
  display:   none;
  position:  fixed;
  inset:     0;
  z-index:   calc(var(--wsw-z) - 1);
  background: transparent;
  cursor:    default;
}
.wsw-widget.is-open ~ .wsw-backdrop,
.wsw-backdrop.is-active {
  display: block;
}

/* ── Responsive ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --wsw-offset-x: 14px;
    --wsw-offset-y: 14px;
  }
  /* En móvil los labels de los canales se ocultan para ahorrar espacio */
  .wsw-channel-label {
    display: none;
  }
  .wsw-channel-btn {
    padding: 0 10px 0 6px;
    border-radius: 50%;
  }
  /* El canal sin label queda como un círculo */
  .wsw-size-sm .wsw-channel-btn { width: var(--wsw-ch-sm); padding: 0; justify-content: center; }
  .wsw-size-md .wsw-channel-btn { width: var(--wsw-ch-md); padding: 0; justify-content: center; }
  .wsw-size-lg .wsw-channel-btn { width: var(--wsw-ch-lg); padding: 0; justify-content: center; }
  .wsw-size-xl .wsw-channel-btn { width: var(--wsw-ch-xl); padding: 0; justify-content: center; }
  .wsw-channel-icon { margin: 0 auto; }
}

/* ── Reduced motion ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wsw-main-btn,
  .wsw-channel-btn,
  .wsw-drawer {
    transition: none !important;
    animation:  none !important;
  }
}