/* =============================================================================
   WP Chat Buttons – Frontend CSS
   =============================================================================
   Pixel-exact copy of pharmacare.co.il style + animations.

   HTML structure (per button):
     div.wpcb-btn-wrap          ← positions the two layers
       span.wpcb-glow           ← outer pulsing glow ring  (zoom 1.3s)
       a.wpcb-btn-circle  > svg ← inner solid icon circle  (wobble 1s)

   The hard-reset covers only #wpcb-desktop / #wpcb-mobile descendants.
   The .wpcb-cta-box lives inside post content and is NOT reset.
   ============================================================================= */

/* ── CSS Custom Properties (overridden inline by PHP) ───────────────────── */
:root {
    --wpcb-wa-color:     rgb(28, 215, 65);
    --wpcb-wa-glow:      rgba(35, 217, 72, 0.70);
    --wpcb-tg-color:     rgb(44, 159, 216);
    --wpcb-tg-glow:      rgba(44, 159, 216, 0.74);
    --wpcb-radius:       50%;
    --wpcb-size:         56px;
    --wpcb-spacing:      20px;
    --wpcb-bottom-extra: 0px;
}

/* ── Hard Reset – ONLY for the two plugin containers ───────────────────── */
#wpcb-desktop,
#wpcb-mobile,
#wpcb-desktop *,
#wpcb-mobile * {
    box-sizing:       border-box     !important;
    font-family:      -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    line-height:      1              !important;
    margin:           0              !important;
    padding:          0              !important;
    border:           none           !important;
    outline:          none           !important;
    text-decoration:  none           !important;
    list-style:       none           !important;
    float:            none           !important;
    clear:            none           !important;
    background-image: none           !important;
}

/* =============================================================================
   KEYFRAMES  (exact copies from pharmacare.co.il)
   ============================================================================= */

/* Outer glow pulse – pharmacare "zoom" */
@keyframes wpcb-zoom {
    0%   { transform: scale(0.9); box-shadow: 0 0 0 0   var(--wpcb-pulse, rgba(0,0,0,.4)); }
    70%  { transform: scale(1);   box-shadow: 0 0 0 15px rgba(0,0,0,0); }
    100% { transform: scale(0.9); box-shadow: 0 0 0 0   rgba(0,0,0,0); }
}

/* Icon wobble – pharmacare "phone-vr-circle-fill" */
@keyframes wpcb-wobble {
    0%          { transform: rotate(0deg)   scale(1) skew(1deg); }
    10%         { transform: rotate(-25deg) scale(1) skew(1deg); }
    20%         { transform: rotate(25deg)  scale(1) skew(1deg); }
    30%         { transform: rotate(-25deg) scale(1) skew(1deg); }
    40%         { transform: rotate(25deg)  scale(1) skew(1deg); }
    50%,100%    { transform: rotate(0deg)   scale(1) skew(1deg); }
}

/* CTA button float */
@keyframes wpcb-float {
    0%, 100% { transform: translateY(0px);  }
    50%      { transform: translateY(-6px); }
}


/* =============================================================================
   #wpcb-desktop  –  Fixed column of buttons, bottom-right
   Visible on ALL screen sizes (mobile + desktop).
   ============================================================================= */

#wpcb-desktop {
    position:        fixed          !important;
    bottom:          25px           !important;
    right:           25px           !important;
    left:            auto           !important;
    top:             auto           !important;
    display:         flex           !important;
    flex-direction:  column         !important;
    align-items:     center         !important;
    gap:             0              !important;   /* buttons touch, wrap handles spacing */
    z-index:         99999          !important;
    width:           auto           !important;
    height:          auto           !important;
    background:      transparent    !important;
    transform:       none           !important;
}

/* ── .wpcb-btn-wrap  –  108×108 wrapper (matches pharmacare outer wrap) ── */
#wpcb-desktop .wpcb-btn-wrap {
    position:        relative       !important;
    width:           108px          !important;
    height:          108px          !important;
    display:         flex           !important;
    align-items:     center         !important;
    justify-content: center         !important;
}

/* ── span.wpcb-glow  –  72×72 pulsing ring ─────────────────────────────── */
#wpcb-desktop .wpcb-glow {
    position:      absolute        !important;
    width:         72px            !important;
    height:        72px            !important;
    top:           50%             !important;
    left:          50%             !important;
    transform:     translate(-50%, -50%) !important;
    border-radius: 50%             !important;
    display:       block           !important;
    animation:     wpcb-zoom 1.3s ease infinite !important;
    z-index:       0               !important;
}

#wpcb-desktop .wpcb-glow--wa {
    background-color: var(--wpcb-wa-glow) !important;
    --wpcb-pulse:     var(--wpcb-wa-glow);
}
#wpcb-desktop .wpcb-glow--tg {
    background-color: var(--wpcb-tg-glow) !important;
    --wpcb-pulse:     var(--wpcb-tg-glow);
    animation-delay:  0.45s !important;
}

/* ── a.wpcb-btn-circle  –  61×61 inner solid icon circle ────────────────── */
#wpcb-desktop .wpcb-btn-circle {
    position:        relative        !important;
    display:         flex            !important;
    align-items:     center          !important;
    justify-content: center          !important;
    width:           61px            !important;
    height:          61px            !important;
    border-radius:   50%             !important;
    color:           #ffffff         !important;
    cursor:          pointer         !important;
    box-shadow:      0 4px 14px rgba(0,0,0,0.22) !important;
    animation:       wpcb-wobble 1s ease-in-out infinite !important;
    z-index:         1               !important;
    padding:         0               !important;
    overflow:        hidden          !important;
}

#wpcb-desktop .wpcb-btn-circle--wa {
    background-color: var(--wpcb-wa-color) !important;
    background:       var(--wpcb-wa-color) !important;
}
#wpcb-desktop .wpcb-btn-circle--tg {
    background-color: var(--wpcb-tg-color) !important;
    background:       var(--wpcb-tg-color) !important;
    animation-delay:  0.45s !important;
}

/* ── SVG icon ───────────────────────────────────────────────────────────── */
#wpcb-desktop .wpcb-btn-circle svg {
    width:       55%     !important;
    height:      55%     !important;
    fill:        #ffffff !important;
    display:     block   !important;
    flex-shrink: 0       !important;
}

/* ── Hover: pause, lift ─────────────────────────────────────────────────── */
#wpcb-desktop .wpcb-btn-wrap:hover .wpcb-glow,
#wpcb-desktop .wpcb-btn-wrap:hover .wpcb-btn-circle {
    animation-play-state: paused !important;
}
#wpcb-desktop .wpcb-btn-wrap:hover .wpcb-btn-circle {
    transform:  scale(1.1) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.30) !important;
}

/* ── Active ─────────────────────────────────────────────────────────────── */
#wpcb-desktop .wpcb-btn-circle:active {
    transform:            scale(0.93) !important;
    animation-play-state: paused     !important;
}

/* ── Focus ring (a11y) ──────────────────────────────────────────────────── */
#wpcb-desktop .wpcb-btn-circle:focus-visible {
    outline:        3px solid #fff !important;
    outline-offset: 2px            !important;
}

/* ── Mobile ≤ 768px  –  slightly bigger glow, slightly smaller icon ────── */
@media (max-width: 768px) {
    #wpcb-desktop {
        bottom: 12px !important;
        right:  8px  !important;
    }

    #wpcb-desktop .wpcb-btn-wrap {
        width:  90px !important;
        height: 90px !important;
    }

    #wpcb-desktop .wpcb-glow {
        width:  78px !important;
        height: 78px !important;
    }

    #wpcb-desktop .wpcb-btn-circle {
        width:  55px !important;
        height: 55px !important;
    }
}


/* =============================================================================
   #wpcb-mobile  –  always hidden (sticky bar disabled)
   ============================================================================= */

#wpcb-mobile {
    display: none !important;
}


/* =============================================================================
   .wpcb-cta-box  –  CTA banner injected above first H2 in post content
   Matches pharmacare.co.il section exactly.
   ============================================================================= */

.wpcb-cta-box {
    display:          block;
    width:            100%;
    background-color: transparent;
    border:           none;
    border-radius:    0;
    padding:          30px 20px 28px;
    margin:           0 0 30px;
    text-align:       center;
    direction:        rtl;
    font-family:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    box-sizing:       border-box;
}

/* Title  –  blue, 25.5px, bold */
.wpcb-cta-box__title {
    margin:      0 0 22px !important;
    padding:     0        !important;
    font-size:   25.5px   !important;
    font-weight: 700      !important;
    line-height: 1.0      !important;
    color:       rgb(52, 120, 206) !important;
    text-align:  center   !important;
}

/* Buttons wrapper */
.wpcb-cta-box__buttons {
    display:         flex;
    flex-direction:  row;
    justify-content: center;
    align-items:     stretch;
    gap:             60px;
    flex-wrap:       wrap;
}

/* ── Each CTA button ────────────────────────────────────────────────────── */
.wpcb-cta__btn {
    display:         inline-flex   !important;
    flex-direction:  row           !important;
    align-items:     center        !important;
    justify-content: center        !important;
    gap:             14px          !important;
    padding:         14px 30px     !important;
    border-radius:   6px           !important;
    border:          none          !important;
    text-decoration: none          !important;
    cursor:          pointer       !important;
    min-width:       220px         !important;
    color:           #ffffff       !important;
    font-family:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
    animation:       wpcb-float 3s ease-in-out infinite !important;
    box-shadow:      0 6px 20px rgba(0,0,0,0.18) !important;
    direction:       rtl           !important;
    transition:      filter 0.2s ease, box-shadow 0.2s ease !important;
}

/* Telegram – pharmacare exact gradient */
.wpcb-cta__btn--tg {
    background: linear-gradient(180deg, rgb(1, 136, 207) 0%, rgb(0, 85, 130) 100%) !important;
    animation-delay: 0s !important;
}
/* WhatsApp – pharmacare exact gradient */
.wpcb-cta__btn--wa {
    background: linear-gradient(180deg, rgb(56, 218, 74) 0%, rgb(10, 172, 27) 100%) !important;
    animation-delay: 0.4s !important;
}

.wpcb-cta__btn:hover {
    filter:               brightness(1.08)    !important;
    animation-play-state: paused              !important;
    transform:            translateY(-2px)    !important;
    box-shadow:           0 10px 28px rgba(0,0,0,0.24) !important;
}
.wpcb-cta__btn:active {
    transform: translateY(0) scale(0.97) !important;
    filter:    brightness(0.94)          !important;
}

/* ── CTA Icon (plain SVG, no background circle) ────────────────────────── */
.wpcb-cta__btn-icon {
    display:         flex              !important;
    align-items:     center            !important;
    justify-content: center            !important;
    flex-shrink:     0                 !important;
    width:           auto              !important;
    height:          auto              !important;
    background:      none              !important;
    border-radius:   0                 !important;
    padding:         0                 !important;
}
.wpcb-cta__btn-icon svg {
    width:   30px   !important;
    height:  30px   !important;
    fill:    #ffffff !important;
    display: block  !important;
}

/* ── CTA Text block ────────────────────────────────────────────────────── */
.wpcb-cta__btn-text {
    display:        flex           !important;
    flex-direction: column         !important;
    align-items:    flex-start     !important;  /* RTL: flex-start = RIGHT side */
    gap:            3px            !important;
    text-align:     right          !important;
    direction:      rtl            !important;
}
.wpcb-cta__btn-text strong {
    display:     block   !important;
    font-size:   20px    !important;
    font-weight: 700     !important;
    line-height: 1.2     !important;
    color:       #ffffff !important;
    white-space: nowrap  !important;
}
.wpcb-cta__btn-text span {
    display:     block              !important;
    font-size:   14px               !important;
    font-weight: 400                !important;
    line-height: 1.3                !important;
    color:       rgba(255,255,255,.88) !important;
    white-space: nowrap             !important;
}

/* ── Mobile CTA: stack vertically, full width ───────────────────────────── */
@media (max-width: 600px) {
    .wpcb-cta-box {
        padding: 22px 16px 20px !important;
    }
    .wpcb-cta-box__title {
        font-size: 20px !important;
    }
    .wpcb-cta-box__buttons {
        flex-direction: column  !important;
        align-items:    stretch !important;
        gap:            32px    !important;
    }
    .wpcb-cta__btn {
        min-width: unset !important;
        width:     100%  !important;
        padding:   12px 20px !important;
    }
}