/**
 * pb_contactbuttons.css
 * Botones flotantes de contacto — Prestaboost
 * Compatible con PrestaShop 9 / Hummingbird
 */

/* ─────────────────────────────────────────────────────────────
   VARIABLES
───────────────────────────────────────────────────────────── */
:root {
  --pb-wa-color:     #25D366;
  --pb-wa-hover:     #1eaf55;
  --pb-tg-color:     #29B6F6;
  --pb-tg-hover:     #0396d6;
  --pb-toggle-color: #075E54;
  --pb-toggle-hover: #064a43;
  --pb-shadow:       0 4px 24px rgba(0,0,0,.18);
  --pb-radius:       50px;
  --pb-gap:          10px;
  --pb-z:            9999;
  --pb-size:         56px;
  --pb-transition:   .25s cubic-bezier(.4,0,.2,1);
}

/* ─────────────────────────────────────────────────────────────
   WIDGET CONTAINER
───────────────────────────────────────────────────────────── */
.pb-contact-widget {
  position: fixed;
  bottom: 24px;
  z-index: var(--pb-z);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--pb-gap);
}

.pb-contact-widget--right { right: 20px; }
.pb-contact-widget--left  { left: 20px; align-items: flex-start; }

/* ─────────────────────────────────────────────────────────────
   WRAPPER (relative para posicionar los botones)
───────────────────────────────────────────────────────────── */
.pb-contact-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--pb-gap);
}

.pb-contact-widget--left .pb-contact-wrapper {
  align-items: flex-start;
}

/* ─────────────────────────────────────────────────────────────
   TOGGLE BUTTON
───────────────────────────────────────────────────────────── */
.pb-contact-toggle {
  width:  var(--pb-size);
  height: var(--pb-size);
  border-radius: 50%;
  border: none;
  background: var(--pb-toggle-color);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--pb-shadow);
  transition: background var(--pb-transition), transform var(--pb-transition);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.pb-contact-toggle:hover,
.pb-contact-toggle:focus-visible {
  background: var(--pb-toggle-hover);
  transform: scale(1.08);
  outline: none;
}

.pb-contact-toggle:active { transform: scale(.94); }

.pb-icon {
  position: absolute;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--pb-transition), transform var(--pb-transition);
}

.pb-icon svg { width: 100%; height: 100%; }

/* Estado cerrado */
.pb-icon--close {
  opacity: 0;
  transform: rotate(-90deg) scale(.7);
}

/* Estado abierto */
.pb-contact-toggle[aria-expanded="true"] .pb-icon--chat {
  opacity: 0;
  transform: rotate(90deg) scale(.7);
}

.pb-contact-toggle[aria-expanded="true"] .pb-icon--close {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* ─────────────────────────────────────────────────────────────
   BOTONES CANALES
───────────────────────────────────────────────────────────── */
.pb-contact-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  /* Oculto por defecto */
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-height .35s cubic-bezier(.4,0,.2,1),
              opacity     var(--pb-transition);
}

.pb-contact-buttons.is-open {
  max-height: 320px;
  opacity: 1;
  pointer-events: auto;
}

/* ─────────────────────────────────────────────────────────────
   BOTÓN INDIVIDUAL
───────────────────────────────────────────────────────────── */
.pb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--pb-size);
  padding: 0 18px 0 8px;
  border-radius: var(--pb-radius);
  text-decoration: none;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--pb-shadow);
  transition: filter var(--pb-transition), transform var(--pb-transition);
  /* Animación de entrada */
  transform: translateY(12px) scale(.92);
  opacity: 0;
  transition: transform var(--pb-transition),
              opacity   var(--pb-transition),
              filter    var(--pb-transition);
}

.pb-contact-buttons.is-open .pb-btn {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.pb-contact-buttons.is-open .pb-btn:nth-child(1) { transition-delay: .05s; }
.pb-contact-buttons.is-open .pb-btn:nth-child(2) { transition-delay: .12s; }

.pb-btn:hover  { filter: brightness(1.1); transform: translateY(-2px) scale(1); }
.pb-btn:active { transform: scale(.95); }

.pb-btn__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pb-btn__icon svg { width: 24px; height: 24px; }

.pb-btn--whatsapp { background: var(--pb-wa-color); }
.pb-btn--telegram  { background: var(--pb-tg-color); }

/* ─────────────────────────────────────────────────────────────
   MENSAJE OFFLINE
───────────────────────────────────────────────────────────── */
.pb-offline {
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  max-width: 240px;
  box-shadow: var(--pb-shadow);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  transform: translateY(12px);
  opacity: 0;
  transition: transform var(--pb-transition), opacity var(--pb-transition);
}

.pb-contact-buttons.is-open .pb-offline {
  transform: translateY(0);
  opacity: 1;
}

.pb-offline__icon {
  color: #888;
  flex-shrink: 0;
  margin-top: 2px;
}

.pb-offline__icon svg { width: 20px; height: 20px; }

.pb-offline__msg {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #555;
}

/* ─────────────────────────────────────────────────────────────
   BOTONES EN FICHA DE PRODUCTO
───────────────────────────────────────────────────────────── */
.pb-product-contact {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  background: #fafafa;
}

.pb-product-contact__title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.pb-product-contact__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pb-product-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: filter var(--pb-transition), transform var(--pb-transition);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.pb-product-btn:hover  { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.pb-product-btn:active { transform: scale(.96); }

.pb-product-btn--wa { background: var(--pb-wa-color); }
.pb-product-btn--tg { background: var(--pb-tg-color); }

.pb-product-offline {
  font-size: 13px;
  color: #777;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .pb-contact-widget--right { right: 12px; }
  .pb-contact-widget--left  { left:  12px; }

  :root { --pb-size: 50px; }

  .pb-btn {
    font-size: 12px;
    padding: 0 14px 0 6px;
  }

  .pb-btn__icon {
    width: 36px;
    height: 36px;
  }

  .pb-offline { max-width: 210px; }
}

/* ─────────────────────────────────────────────────────────────
   ACCESIBILIDAD — REDUCED MOTION
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pb-contact-toggle,
  .pb-icon,
  .pb-contact-buttons,
  .pb-btn,
  .pb-offline {
    transition: none !important;
  }
}