/**
 * Foliumpx Helper - WhatsApp Button Widget Styles
 * All color/size values are driven by CSS custom properties set inline by PHP.
 * @since 1.1.0
 */

/* =============================================================================
   BASE WIDGET CONTAINER
   ============================================================================= */

.fpx-whatsapp-widget {
    position: fixed;
    z-index: 9999;
    line-height: 1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Initially hidden — JS shows it after scroll/delay check */
.fpx-whatsapp-widget {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.fpx-whatsapp-widget.fpx-wa-visible {
    opacity: 1;
    pointer-events: all;
}

/* =============================================================================
   POSITION VARIANTS
   ============================================================================= */

.fpx-pos-bottom-right {
    bottom: var(--fpx-wa-bottom, 30px);
    right:  var(--fpx-wa-side,   30px);
}

.fpx-pos-bottom-left {
    bottom: var(--fpx-wa-bottom, 30px);
    left:   var(--fpx-wa-side,   30px);
}

.fpx-pos-vertical-right {
    top:       50%;
    right:     0;
    transform: translateY(-50%);
}

.fpx-pos-vertical-right.fpx-wa-visible {
    transform: translateY(-50%);
}

/* =============================================================================
   BUTTON WRAPPER — holds the rings + the anchor
   ============================================================================= */

.fpx-wa-btn-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* =============================================================================
   MAIN BUTTON (anchor)
   ============================================================================= */

.fpx-wa-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           var(--fpx-wa-size, 60px);
    height:          var(--fpx-wa-size, 60px);
    background:      var(--fpx-wa-bg,   #25D366);
    border-radius:   var(--fpx-wa-radius, 50%);
    padding:         var(--fpx-wa-padding, 14px);
    box-shadow:      var(--fpx-wa-shadow, 0 6px 24px rgba(37, 211, 102, 0.45));
    text-decoration: none;
    cursor:          pointer;
    position:        relative;
    outline:         none;
    border:          none;
    flex-shrink:     0;
}



.fpx-wa-btn:focus-visible {
    outline: 3px solid var(--fpx-wa-bg, #25D366);
    outline-offset: 3px;
}

/* WhatsApp SVG icon */
.fpx-wa-btn svg,
.fpx-wa-icon {
    width:  100%;
    height: 100%;
    fill:   var(--fpx-wa-icon-color, #ffffff);
    display: block;
    flex-shrink: 0;
}

/* =============================================================================
   PULSE RING ANIMATION
   ============================================================================= */

.fpx-wa-rings {
    position:       absolute;
    top:            50%;
    left:           50%;
    transform:      translate(-50%, -50%);
    width:          var(--fpx-wa-size, 60px);
    height:         var(--fpx-wa-size, 60px);
    pointer-events: none;
}

.fpx-wa-ring {
    position:      absolute;
    inset:         0;
    border-radius: 50%;
    background:    var(--fpx-wa-bg, #25D366);
    opacity:       0;
}

.fpx-anim-pulse .fpx-wa-ring { animation: fpx-wa-pulse 2.5s ease-out infinite; }
.fpx-anim-pulse .fpx-wa-ring:nth-child(2) { animation-delay: 1s; }

@keyframes fpx-wa-pulse {
    0%   { transform: scale(1);   opacity: 0.35; }
    100% { transform: scale(1.8); opacity: 0;    }
}

/* =============================================================================
   BOUNCE-IN ANIMATION (runs once on show)
   ============================================================================= */

@keyframes fpx-wa-bounce-in {
    0%   { transform: scale(0);    opacity: 0; }
    55%  { transform: scale(1.18); opacity: 1; }
    75%  { transform: scale(0.93);             }
    100% { transform: scale(1);                }
}

.fpx-anim-bounce.fpx-wa-visible .fpx-wa-btn {
    animation: fpx-wa-bounce-in 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* =============================================================================
   SHAKE ANIMATION (periodic — class toggled by JS)
   ============================================================================= */

@keyframes fpx-wa-shake {
    0%, 100% { transform: rotate(0deg); }
    15%      { transform: rotate(-10deg) scale(1); }
    30%      { transform: rotate(10deg)  scale(1); }
    45%      { transform: rotate(-8deg); }
    60%      { transform: rotate(8deg);  }
    75%      { transform: rotate(-4deg); }
    90%      { transform: rotate(4deg);  }
}

.fpx-wa-do-shake .fpx-wa-btn {
    animation: fpx-wa-shake 0.6s ease-in-out;
}

/* =============================================================================
   NOTIFICATION BADGE
   ============================================================================= */

.fpx-wa-badge {
    position:      absolute;
    top:           -7px;
    right:         -7px;
    background:    #ff3b30;
    color:         #fff;
    font-size:     11px;
    font-weight:   700;
    min-width:     20px;
    height:        20px;
    border-radius: 10px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    padding:       0 5px;
    line-height:   1;
    z-index:       2;
    box-shadow:    0 0 0 2px #fff;
    animation:     fpx-wa-badge-pop 1.8s ease-in-out infinite;
}

@keyframes fpx-wa-badge-pop {
    0%, 100% { transform: scale(1);    }
    50%      { transform: scale(1.15); }
}

/* =============================================================================
   TOOLTIP
   ============================================================================= */

.fpx-wa-tooltip {
    position:       absolute;
    background:     #1a1a1a;
    color:          #fff;
    padding:        9px 15px;
    border-radius:  8px;
    font-size:      13px;
    font-weight:    500;
    white-space:    nowrap;
    pointer-events: none;
    opacity:        0;
    transition:     opacity 0.2s ease, transform 0.2s ease;
    box-shadow:     0 4px 16px rgba(0,0,0,0.25);
    z-index:        1;
    top:            50%;
}

/* Arrow */
.fpx-wa-tooltip::after {
    content:  '';
    position: absolute;
    border:   7px solid transparent;
    top:      50%;
    transform: translateY(-50%);
}

/* Position: right-side widgets — tooltip goes LEFT */
.fpx-pos-bottom-right .fpx-wa-tooltip,
.fpx-pos-vertical-right .fpx-wa-tooltip {
    right:     calc(100% + 14px);
    transform: translateY(-50%) translateX(-6px);
}
.fpx-pos-bottom-right .fpx-wa-tooltip::after,
.fpx-pos-vertical-right .fpx-wa-tooltip::after {
    left:                          100%;
    border-left-color:             #1a1a1a;
}

/* Position: left-side widget — tooltip goes RIGHT */
.fpx-pos-bottom-left .fpx-wa-tooltip {
    left:      calc(100% + 14px);
    transform: translateY(-50%) translateX(6px);
}
.fpx-pos-bottom-left .fpx-wa-tooltip::after {
    right:              100%;
    border-right-color: #1a1a1a;
}

/* Show on hover */
.fpx-whatsapp-widget:hover .fpx-wa-tooltip {
    opacity:   1;
    transform: translateY(-50%) translateX(0);
}

/* =============================================================================
   VERTICAL SIDE PANEL VARIANT
   ============================================================================= */

.fpx-pos-vertical-right .fpx-wa-btn {
    border-radius:  8px 0 0 8px;
    width:          auto;
    height:         auto;
    flex-direction: column;
    gap:            8px;
    padding:        14px 12px;
}

.fpx-pos-vertical-right .fpx-wa-icon {
    width:  28px;
    height: 28px;
}

.fpx-wa-vertical-label {
    writing-mode:    vertical-rl;
    text-orientation: mixed;
    transform:       rotate(180deg);
    font-size:       12px;
    font-weight:     600;
    color:           var(--fpx-wa-icon-color, #ffffff);
    letter-spacing:  0.8px;
    text-transform:  uppercase;
}

/* Vertical position — no pulse rings (they look odd on a pill) */
.fpx-pos-vertical-right .fpx-wa-rings { display: none; }

/* =============================================================================
   CUSTOM CSS PLACEHOLDER (overridden by user custom CSS injected inline)
   ============================================================================= */