/* Royal Living WhatsApp Widget v1.1 — Frontend */

#royal1-wa-widget {
  --wa-color:  #9a7645;
  --wa-size:   60px;
  --wa-icon:   30px;
  --wa-pad:    14px;
  --wa-bottom: 28px;
  --wa-side:   28px;

  position: fixed;
  z-index: 99999;

  /* Posición por defecto: abajo izquierda */
  bottom: var(--wa-bottom);
  left:   var(--wa-side);
  right:  auto;
  top:    auto;

  /* Entrada: oculto inicialmente */
  opacity: 0;
  pointer-events: none;
  transform: scale(0.55);
  transition: opacity .38s ease, transform .38s ease;
}

/* ── Posición horizontal ─────────────────────────────────────────── */
#royal1-wa-widget.royal1-pos-right {
  left:  auto;
  right: var(--wa-side);
}

/* ── Alineación vertical: centro ────────────────────────────────── */
#royal1-wa-widget.royal1-valign-middle {
  bottom: auto;
  top:    50%;
  transform: translateY(-50%) scale(0.55);
}

/* ── Estado visible (añadido por JS tras el delay) ──────────────── */
#royal1-wa-widget.royal1-visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
#royal1-wa-widget.royal1-valign-middle.royal1-visible {
  transform: translateY(-50%) scale(1);
}

/* ── Botón ──────────────────────────────────────────────────────── */
#royal1-wa-btn {
  position: relative;
  display:  inline-flex;
  align-items: center;
  justify-content: center;
  height:    var(--wa-size);
  min-width: var(--wa-size);
  border-radius: 100px;
  background-color: var(--wa-color);
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
  text-decoration: none;
  outline-offset: 3px;
  overflow: hidden;
  white-space: nowrap;
  transition: transform .22s ease, box-shadow .22s ease;
}

#royal1-wa-btn:hover,
#royal1-wa-btn:focus-visible {
  transform: scale(1.07);
  box-shadow: 0 6px 24px rgba(0,0,0,.32);
  outline: 3px solid var(--wa-color);
}

/* ── Icono SVG ──────────────────────────────────────────────────── */
#royal1-wa-btn svg {
  width:     var(--wa-icon);
  height:    var(--wa-icon);
  flex-shrink: 0;
  margin: 0 var(--wa-pad);
}

/* ── Variante píldora (con etiqueta) ────────────────────────────── */
#royal1-wa-btn.royal1-has-label {
  padding-right: calc(var(--wa-pad) + 2px);
}

/* En posición derecha: icono al borde derecho, label a la izquierda */
.royal1-pos-right #royal1-wa-btn.royal1-has-label {
  flex-direction: row-reverse;
  padding-right: 0;
  padding-left:  calc(var(--wa-pad) + 2px);
}

.royal1-wa-label {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: .15px;
  padding-right: 2px;
}
.royal1-pos-right .royal1-wa-label {
  padding-right: 0;
  padding-left:  2px;
}

/* ── Pulso animado ──────────────────────────────────────────────── */
.royal1-wa-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--wa-color);
  opacity: .42;
  animation: r1wa-pulse 2.5s ease-out infinite;
  pointer-events: none;
}

@keyframes r1wa-pulse {
  0%   { transform: scale(1);   opacity: .42; }
  70%  { transform: scale(1.65); opacity: 0;  }
  100% { transform: scale(1.65); opacity: 0;  }
}

/* ── Tooltip (solo cuando no hay label) ─────────────────────────── */
.royal1-wa-tooltip {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #1f1f1f;
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  font-family: inherit;
}
.royal1-wa-tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
}

/* Tooltip a la derecha (botón a la izquierda) */
.royal1-pos-left .royal1-wa-tooltip {
  left: calc(100% + 12px);
  right: auto;
}
.royal1-pos-left .royal1-wa-tooltip::after {
  right: 100%; left: auto;
  border-right-color: #1f1f1f;
}

/* Tooltip a la izquierda (botón a la derecha) */
.royal1-pos-right .royal1-wa-tooltip {
  right: calc(100% + 12px);
  left: auto;
}
.royal1-pos-right .royal1-wa-tooltip::after {
  left: 100%; right: auto;
  border-left-color: #1f1f1f;
}

#royal1-wa-btn:hover .royal1-wa-tooltip,
#royal1-wa-btn:focus-visible .royal1-wa-tooltip {
  opacity: 1;
}

/* ── Visibilidad por dispositivo ────────────────────────────────── */
@media (max-width: 767px) {
  #royal1-wa-widget.royal1-hide-mobile  { display: none !important; }
}
@media (min-width: 768px) {
  #royal1-wa-widget.royal1-hide-desktop { display: none !important; }
}