/* =====================================================
   WhatsApp Float Button Plugin — style.css v4.2
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
    --war-green:        #25D366;
    --war-green-dark:   #128C7E;
    --war-green-deeper: #075E54;
    --war-white:        #ffffff;
    --war-text:         #111b21;
    --war-muted:        #667781;
    --war-input-bg:     #f0f2f5;
    --war-error:        #e53935;
    --war-font:         'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --war-offset:       20px;
    --war-z:            100000;
}

/* ── Root ────────────────────────────────────────── */
#war-float-root {
    position: fixed !important;
    z-index: var(--war-z) !important;
    display: flex !important;
    gap: 10px !important;
    font-family: var(--war-font) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}
#war-float-root *, #war-float-root *::before, #war-float-root *::after {
    box-sizing: border-box !important;
    font-family: var(--war-font) !important;
}

/* ── Positions ── */

/* Bottom Right (Default) */
#war-float-root.war-pos-bottom-right,
#war-float-root.war-pos-right,
#war-float-root.war-pos-desk-bottom-right {
    bottom: var(--war-offset) !important;
    right: var(--war-offset) !important;
    top: auto !important; left: auto !important;
    transform: none !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

/* Bottom Left */
#war-float-root.war-pos-bottom-left,
#war-float-root.war-pos-left,
#war-float-root.war-pos-desk-bottom-left {
    bottom: var(--war-offset) !important;
    left: var(--war-offset) !important;
    top: auto !important; right: auto !important;
    transform: none !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* Top Right */
#war-float-root.war-pos-top-right,
#war-float-root.war-pos-desk-top-right {
    top: var(--war-offset) !important;
    right: var(--war-offset) !important;
    bottom: auto !important; left: auto !important;
    transform: none !important;
    flex-direction: column-reverse !important;
    align-items: flex-end !important;
}

/* Top Left */
#war-float-root.war-pos-top-left,
#war-float-root.war-pos-desk-top-left {
    top: var(--war-offset) !important;
    left: var(--war-offset) !important;
    bottom: auto !important; right: auto !important;
    transform: none !important;
    flex-direction: column-reverse !important;
    align-items: flex-start !important;
}

/* Bottom Center */
#war-float-root.war-pos-bottom-center,
#war-float-root.war-pos-desk-bottom-center {
    bottom: var(--war-offset) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: auto !important; right: auto !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Top Center */
#war-float-root.war-pos-top-center,
#war-float-root.war-pos-desk-top-center {
    top: var(--war-offset) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: auto !important; right: auto !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
}

/* Middle Right */
#war-float-root.war-pos-middle-right,
#war-float-root.war-pos-desk-middle-right {
    top: 50% !important;
    right: var(--war-offset) !important;
    transform: translateY(-50%) !important;
    bottom: auto !important; left: auto !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

/* Middle Left */
#war-float-root.war-pos-middle-left,
#war-float-root.war-pos-desk-middle-left {
    top: 50% !important;
    left: var(--war-offset) !important;
    transform: translateY(-50%) !important;
    bottom: auto !important; right: auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* ── FAB ─────────────────────────────────────────── */
.war-fab {
    position: relative !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: var(--war-green) !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(37,211,102,.4), 0 2px 6px rgba(0,0,0,.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform .2s, background .2s !important;
    outline: none !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.war-fab:hover {
    background: var(--war-green-dark) !important;
    transform: scale(1.07) !important;
}
.war-fab:active { transform: scale(.95) !important; }

.war-fab-icon {
    position: relative !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.war-fab-icon > svg:first-child {
    width: 28px !important;
    height: 28px !important;
    display: block !important;
    transition: opacity .18s, transform .18s !important;
}
.war-fab-close {
    position: absolute !important;
    inset: 0 !important;
    width: 18px !important;
    height: 18px !important;
    margin: auto !important;
    opacity: 0 !important;
    transform: rotate(-90deg) scale(.6) !important;
    transition: opacity .18s, transform .18s !important;
    pointer-events: none !important;
}
.war-fab.war-open .war-fab-icon > svg:first-child {
    opacity: 0 !important;
    transform: rotate(90deg) scale(.6) !important;
}
.war-fab.war-open .war-fab-close {
    opacity: 1 !important;
    transform: rotate(0deg) scale(1) !important;
}

/* Tooltip */
.war-fab-tooltip {
    position: absolute !important;
    white-space: nowrap !important;
    background: var(--war-green-deeper) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity .18s, transform .18s !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    line-height: 1.4 !important;
}

/* Tooltip positioning */
.war-pos-bottom-right .war-fab-tooltip,
.war-pos-right .war-fab-tooltip,
.war-pos-desk-bottom-right .war-fab-tooltip,
.war-pos-top-right .war-fab-tooltip,
.war-pos-desk-top-right .war-fab-tooltip,
.war-pos-middle-right .war-fab-tooltip,
.war-pos-desk-middle-right .war-fab-tooltip {
    right: calc(100% + 10px) !important;
    left: auto !important;
    top: 50% !important; bottom: auto !important;
    transform: translateY(-50%) !important;
}
.war-pos-bottom-left .war-fab-tooltip,
.war-pos-left .war-fab-tooltip,
.war-pos-desk-bottom-left .war-fab-tooltip,
.war-pos-top-left .war-fab-tooltip,
.war-pos-desk-top-left .war-fab-tooltip,
.war-pos-middle-left .war-fab-tooltip,
.war-pos-desk-middle-left .war-fab-tooltip {
    left: calc(100% + 10px) !important;
    right: auto !important;
    top: 50% !important; bottom: auto !important;
    transform: translateY(-50%) !important;
}
.war-pos-bottom-center .war-fab-tooltip,
.war-pos-desk-bottom-center .war-fab-tooltip {
    bottom: calc(100% + 10px) !important;
    top: auto !important; right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}
.war-pos-top-center .war-fab-tooltip,
.war-pos-desk-top-center .war-fab-tooltip {
    top: calc(100% + 10px) !important;
    bottom: auto !important; right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}
.war-fab:hover .war-fab-tooltip { opacity: 1 !important; }

/* Pulse ring */
.war-pulse {
    position: absolute !important;
    inset: -5px !important;
    border-radius: 50% !important;
    border: 2.5px solid var(--war-green) !important;
    animation: war-pulse 2.2s ease-out infinite !important;
    pointer-events: none !important;
}
@keyframes war-pulse {
    0%   { opacity: .6; transform: scale(1); }
    70%  { opacity: 0;  transform: scale(1.55); }
    100% { opacity: 0;  transform: scale(1.55); }
}

/* ── Unread Badge ─────────────────────────────────── */
.war-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    min-width: 19px !important;
    height: 19px !important;
    padding: 0 5px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
    z-index: 10 !important;
    line-height: 1 !important;
    pointer-events: none !important;
    transition: transform .2s, opacity .2s !important;
}
.war-badge.war-badge-hide {
    transform: scale(0) !important;
    opacity: 0 !important;
}

/* ── Button Attention Animations ─────────────────── */
.war-anim-shake {
    animation: war-shake 4s ease-in-out infinite !important;
}
@keyframes war-shake {
    0%, 80%, 100% { transform: scale(1) rotate(0deg); }
    82%           { transform: scale(1.08) rotate(-9deg); }
    86%           { transform: scale(1.08) rotate(9deg); }
    90%           { transform: scale(1.08) rotate(-7deg); }
    94%           { transform: scale(1.08) rotate(7deg); }
    97%           { transform: scale(1.05) rotate(0deg); }
}

.war-anim-bounce {
    animation: war-bounce 3.2s ease-in-out infinite !important;
}
@keyframes war-bounce {
    0%, 75%, 100% { transform: translateY(0); }
    80%           { transform: translateY(-9px); }
    85%           { transform: translateY(0); }
    90%           { transform: translateY(-5px); }
    95%           { transform: translateY(0); }
}

.war-anim-none .war-pulse {
    display: none !important;
}

/* ── Proactive Greeting Bubble ───────────────────── */
.war-greeting-bubble {
    position: relative !important;
    background: #ffffff !important;
    color: #1e293b !important;
    padding: 10px 14px 10px 12px !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.08) !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    max-width: 260px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .2s !important;
    opacity: 0 !important;
    transform: translateY(8px) scale(.92) !important;
    user-select: none !important;
    font-family: var(--war-font) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin-bottom: 2px !important;
    z-index: 5 !important;
}
.war-greeting-bubble.war-bubble-show {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}
.war-greeting-bubble[hidden] {
    display: none !important;
}
.war-greeting-bubble:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.18), 0 3px 8px rgba(0,0,0,.1) !important;
}
.war-bubble-content {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding-right: 14px !important;
}
.war-bubble-avatar {
    width: 26px !important;
    height: 26px !important;
    background: #f0fdf4 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.war-bubble-avatar svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}
.war-bubble-text {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    line-height: 1.35 !important;
}
.war-bubble-close {
    position: absolute !important;
    top: 5px !important;
    right: 7px !important;
    width: 18px !important;
    height: 18px !important;
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    padding: 0 !important;
    transition: color .15s, background .15s !important;
}
.war-bubble-close:hover {
    color: #ef4444 !important;
    background: #fee2e2 !important;
}

/* Bubble tail pointers */
.war-pos-bottom-right .war-greeting-bubble::after,
.war-pos-desk-bottom-right .war-greeting-bubble::after,
.war-pos-mob-bottom-right .war-greeting-bubble::after,
.war-pos-middle-right .war-greeting-bubble::after,
.war-pos-desk-middle-right .war-greeting-bubble::after,
.war-pos-mob-middle-right .war-greeting-bubble::after {
    content: "" !important;
    position: absolute !important;
    bottom: -6px !important;
    right: 20px !important;
    width: 12px !important;
    height: 12px !important;
    background: #fff !important;
    transform: rotate(45deg) !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    border-right: 1px solid rgba(0,0,0,.08) !important;
}
.war-pos-bottom-left .war-greeting-bubble::after,
.war-pos-desk-bottom-left .war-greeting-bubble::after,
.war-pos-mob-bottom-left .war-greeting-bubble::after,
.war-pos-middle-left .war-greeting-bubble::after,
.war-pos-desk-middle-left .war-greeting-bubble::after,
.war-pos-mob-middle-left .war-greeting-bubble::after {
    content: "" !important;
    position: absolute !important;
    bottom: -6px !important;
    left: 20px !important;
    width: 12px !important;
    height: 12px !important;
    background: #fff !important;
    transform: rotate(45deg) !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    border-right: 1px solid rgba(0,0,0,.08) !important;
}
.war-pos-top-right .war-greeting-bubble::after,
.war-pos-desk-top-right .war-greeting-bubble::after,
.war-pos-mob-top-right .war-greeting-bubble::after {
    content: "" !important;
    position: absolute !important;
    top: -6px !important;
    right: 20px !important;
    width: 12px !important;
    height: 12px !important;
    background: #fff !important;
    transform: rotate(45deg) !important;
    border-top: 1px solid rgba(0,0,0,.08) !important;
    border-left: 1px solid rgba(0,0,0,.08) !important;
}
.war-pos-top-left .war-greeting-bubble::after,
.war-pos-desk-top-left .war-greeting-bubble::after,
.war-pos-mob-top-left .war-greeting-bubble::after {
    content: "" !important;
    position: absolute !important;
    top: -6px !important;
    left: 20px !important;
    width: 12px !important;
    height: 12px !important;
    background: #fff !important;
    transform: rotate(45deg) !important;
    border-top: 1px solid rgba(0,0,0,.08) !important;
    border-left: 1px solid rgba(0,0,0,.08) !important;
}

/* ── Scroll Depth Trigger ────────────────────────── */
#war-float-root.war-scroll-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(20px) !important;
    transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.5,.64,1) !important;
}
#war-float-root:not(.war-scroll-hidden) {
    transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.5,.64,1) !important;
}

/* ── Popup ───────────────────────────────────────── */
.war-popup {
    width: 260px !important;
    background: var(--war-white) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.16) !important;
    overflow: hidden !important;
    transform-origin: bottom right !important;
    animation: war-popup-in .25s cubic-bezier(.34,1.5,.64,1) forwards !important;
}
.war-pos-bottom-left .war-popup, .war-pos-left .war-popup, .war-pos-middle-left .war-popup,
.war-pos-desk-bottom-left .war-popup, .war-pos-desk-middle-left .war-popup { transform-origin: bottom left !important; }
.war-pos-top-right .war-popup, .war-pos-desk-top-right .war-popup { transform-origin: top right !important; }
.war-pos-top-left .war-popup, .war-pos-desk-top-left .war-popup { transform-origin: top left !important; }
.war-pos-bottom-center .war-popup, .war-pos-desk-bottom-center .war-popup { transform-origin: bottom center !important; }
.war-pos-top-center .war-popup, .war-pos-desk-top-center .war-popup { transform-origin: top center !important; }
@keyframes war-popup-in {
    from { opacity: 0; transform: scale(.82) translateY(12px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.war-popup[hidden] { display: none !important; }

/* Header */
.war-popup-header {
    background: var(--war-green-deeper) !important;
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}
.war-popup-avatar {
    flex-shrink: 0 !important;
    width: 34px !important;
    height: 34px !important;
    background: var(--war-green) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.war-popup-avatar svg { width: 20px !important; height: 20px !important; display: block !important; }
.war-popup-meta { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.war-popup-name {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.war-popup-status {
    color: rgba(255,255,255,.72) !important;
    font-size: 11px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.war-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #4ade80 !important;
    display: inline-block !important;
    animation: war-blink 1.8s ease-in-out infinite !important;
}
@keyframes war-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}

/* Body */
.war-popup-body {
    padding: 10px 11px 12px !important;
    background: #fff !important;
}

/* Chat bubble intro */
.war-popup-intro {
    display: block !important;
    background: #f0f2f5 !important;
    border-radius: 0 8px 8px 8px !important;
    padding: 7px 9px !important;
    font-size: 12px !important;
    color: var(--war-text) !important;
    margin: 0 0 10px !important;
    line-height: 1.4 !important;
}

/* Fields */
.war-field {
    margin-bottom: 6px !important;
}
.war-field label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    color: var(--war-muted) !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    background: none !important;
    border: none !important;
}
.war-input {
    width: 100% !important;
    padding: 6px 8px !important;
    background: #f0f2f5 !important;
    border: 1.5px solid transparent !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    color: var(--war-text) !important;
    outline: none !important;
    transition: border-color .18s, background .18s !important;
    display: block !important;
    height: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.war-input:focus {
    border-color: var(--war-green) !important;
    background: #fff !important;
    box-shadow: 0 0 0 2px rgba(37,211,102,.12) !important;
}
.war-input::placeholder { color: #b0bac0 !important; }

/* Phone row */
.war-phone-row {
    display: flex !important;
    gap: 5px !important;
    align-items: stretch !important;
}
.war-select {
    padding: 6px 4px !important;
    background: #f0f2f5 !important;
    border: 1.5px solid transparent !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    color: var(--war-text) !important;
    cursor: pointer !important;
    outline: none !important;
    flex: 0 0 76px !important;
    width: 76px !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.war-select:focus { border-color: var(--war-green) !important; }
.war-input-phone {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
}

/* Error */
.war-error {
    font-size: 11px !important;
    color: var(--war-error) !important;
    min-height: 14px !important;
    margin: 0 0 3px !important;
    font-weight: 500 !important;
    padding: 0 !important;
    display: block !important;
    background: none !important;
    border: none !important;
}

/* Submit button */
.war-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    padding: 7px 10px !important;
    background: var(--war-green) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .18s, transform .15s !important;
    margin: 5px 0 0 !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
    height: auto !important;
}
.war-btn svg { width: 13px !important; height: 13px !important; display: inline-block !important; }
.war-btn:hover  { background: var(--war-green-dark) !important; transform: translateY(-1px) !important; }
.war-btn:active { transform: translateY(0) !important; }
.war-btn:disabled { opacity: .6 !important; cursor: not-allowed !important; transform: none !important; }

/* ── Mobile Responsive Positions (Screens <= 768px) ── */
@media (max-width: 768px) {
    :root {
        --war-offset: 14px;
    }

    .war-popup {
        max-width: calc(100vw - 28px) !important;
    }

    /* Mobile Bottom Right (Default) */
    #war-float-root.war-pos-mob-bottom-right {
        bottom: var(--war-offset) !important;
        right: var(--war-offset) !important;
        top: auto !important; left: auto !important;
        transform: none !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }

    /* Mobile Bottom Left */
    #war-float-root.war-pos-mob-bottom-left {
        bottom: var(--war-offset) !important;
        left: var(--war-offset) !important;
        top: auto !important; right: auto !important;
        transform: none !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Mobile Bottom Center */
    #war-float-root.war-pos-mob-bottom-center {
        bottom: var(--war-offset) !important;
        left: 50% !important;
        right: auto !important; top: auto !important;
        transform: translateX(-50%) !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Mobile Right Center / Middle Right */
    #war-float-root.war-pos-mob-middle-right {
        top: 50% !important;
        right: var(--war-offset) !important;
        bottom: auto !important; left: auto !important;
        transform: translateY(-50%) !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }

    /* Mobile Left Center / Middle Left */
    #war-float-root.war-pos-mob-middle-left {
        top: 50% !important;
        left: var(--war-offset) !important;
        bottom: auto !important; right: auto !important;
        transform: translateY(-50%) !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Mobile Top Right */
    #war-float-root.war-pos-mob-top-right {
        top: var(--war-offset) !important;
        right: var(--war-offset) !important;
        bottom: auto !important; left: auto !important;
        transform: none !important;
        flex-direction: column-reverse !important;
        align-items: flex-end !important;
    }

    /* Mobile Top Left */
    #war-float-root.war-pos-mob-top-left {
        top: var(--war-offset) !important;
        left: var(--war-offset) !important;
        bottom: auto !important; right: auto !important;
        transform: none !important;
        flex-direction: column-reverse !important;
        align-items: flex-start !important;
    }

    /* Mobile Top Center */
    #war-float-root.war-pos-mob-top-center {
        top: var(--war-offset) !important;
        left: 50% !important;
        right: auto !important; bottom: auto !important;
        transform: translateX(-50%) !important;
        flex-direction: column-reverse !important;
        align-items: center !important;
    }

    /* Mobile Tooltips */
    .war-pos-mob-bottom-right .war-fab-tooltip,
    .war-pos-mob-top-right .war-fab-tooltip,
    .war-pos-mob-middle-right .war-fab-tooltip {
        right: calc(100% + 10px) !important;
        left: auto !important;
        top: 50% !important; bottom: auto !important;
        transform: translateY(-50%) !important;
    }
    .war-pos-mob-bottom-left .war-fab-tooltip,
    .war-pos-mob-top-left .war-fab-tooltip,
    .war-pos-mob-middle-left .war-fab-tooltip {
        left: calc(100% + 10px) !important;
        right: auto !important;
        top: 50% !important; bottom: auto !important;
        transform: translateY(-50%) !important;
    }
    .war-pos-mob-bottom-center .war-fab-tooltip {
        bottom: calc(100% + 10px) !important;
        top: auto !important; right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    .war-pos-mob-top-center .war-fab-tooltip {
        top: calc(100% + 10px) !important;
        bottom: auto !important; right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* Mobile Popup Origins */
    .war-pos-mob-bottom-right .war-popup { transform-origin: bottom right !important; }
    .war-pos-mob-bottom-left .war-popup { transform-origin: bottom left !important; }
    .war-pos-mob-middle-right .war-popup { transform-origin: center right !important; }
    .war-pos-mob-middle-left .war-popup { transform-origin: center left !important; }
    .war-pos-mob-top-right .war-popup { transform-origin: top right !important; }
    .war-pos-mob-top-left .war-popup { transform-origin: top left !important; }
    .war-pos-mob-bottom-center .war-popup { transform-origin: bottom center !important; }
    .war-pos-mob-top-center .war-popup { transform-origin: top center !important; }
}

@media (max-width: 360px) {
    #war-float-root.war-pos-right, #war-float-root.war-pos-bottom-right, #war-float-root.war-pos-mob-bottom-right { right: 10px !important; }
    #war-float-root.war-pos-left,  #war-float-root.war-pos-bottom-left,  #war-float-root.war-pos-mob-bottom-left  { left:  10px !important; }
}

/* ── Thank-you view ──────────────────────────────── */
#war-thankyou-view {
    text-align: center !important;
    padding: 8px 0 4px !important;
    animation: war-fadein .3s ease forwards !important;
}
@keyframes war-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Multi-Agent Team Directory ───────────────────── */
#war-agent-view {
    animation: war-fadein .25s ease forwards !important;
}
.war-agents-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 10px !important;
    max-height: 310px !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
}
.war-agents-list::-webkit-scrollbar {
    width: 4px !important;
}
.war-agents-list::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 4px !important;
}
.war-agents-list::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 4px !important;
}
.war-agent-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all .2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
    position: relative !important;
    outline: none !important;
}
.war-agent-card:hover, .war-agent-card:focus {
    border-color: #25D366 !important;
    background: #f0fdf4 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(37,211,102,0.14) !important;
}
.war-agent-card:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}
.war-agent-avatar-wrap {
    position: relative !important;
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8fafc !important;
    border-radius: 50% !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 19px !important;
}
.war-agent-status-dot {
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06) !important;
}
.war-agent-details {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.war-agent-name-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
}
.war-agent-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.war-agent-hours {
    font-size: 10px !important;
    color: #64748b !important;
    background: #f1f5f9 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}
.war-agent-dept {
    font-size: 11px !important;
    color: #64748b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
}
.war-agent-arrow {
    color: #94a3b8 !important;
    transition: transform .2s, color .2s !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
}
.war-agent-card:hover .war-agent-arrow,
.war-agent-card:focus .war-agent-arrow {
    color: #25D366 !important;
    transform: translateX(3px) !important;
}

/* ── Form Agent Banner & Back Navigation ──────────── */
.war-form-agent-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 7px 10px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
}
.war-back-to-team {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: all .15s !important;
    line-height: 1 !important;
}
.war-back-to-team:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}
.war-active-agent-info {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 11px !important;
    text-align: right !important;
    min-width: 0 !important;
}
.war-active-agent-avatar {
    font-size: 17px !important;
    line-height: 1 !important;
}
.war-active-agent-text {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.war-active-agent-text strong {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.war-active-agent-text span {
    font-size: 10px !important;
    color: #64748b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ── WooCommerce 1-Click WhatsApp Integration ──────── */
.war-woo-btn-wrapper,
.war-woo-cart-btn-wrapper {
    display: block !important;
    clear: both !important;
    margin: 12px 0 !important;
    width: 100% !important;
}
.war-woo-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 22px !important;
    font-family: var(--war-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all .2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    text-align: center !important;
}
.war-woo-btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}
.war-woo-style-whatsapp_green {
    background: #25D366 !important;
    color: #ffffff !important;
    border: 1px solid #20bd5a !important;
    box-shadow: 0 3px 10px rgba(37,211,102,0.25) !important;
}
.war-woo-style-whatsapp_green:hover,
.war-woo-style-whatsapp_green:focus {
    background: #1eb956 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(37,211,102,0.35) !important;
}
.war-woo-style-whatsapp_green:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}
.war-woo-style-theme_outline {
    background: #ffffff !important;
    color: #128C7E !important;
    border: 2px solid #25D366 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
}
.war-woo-style-theme_outline:hover,
.war-woo-style-theme_outline:focus {
    background: #f0fdf4 !important;
    color: #075E54 !important;
    border-color: #128C7E !important;
    transform: translateY(-1px) !important;
}
.war-woo-style-theme_outline:active {
    transform: translateY(0) !important;
}
.war-woo-cart-btn {
    width: 100% !important;
    margin-top: 10px !important;
    font-size: 15px !important;
    padding: 13px 24px !important;
}

/* ==================================================================
 * FLOATING PHONE CALL & SOCIAL MEDIA CHANNELS (v7.2.0)
 * ================================================================== */

/* ── Floating Phone Call Button Base ────────────────────────────── */
#war-call-root {
    position: fixed !important;
    z-index: 99998 !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .25s ease !important;
}

.war-call-fab {
    position: relative !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background-color: var(--call-bg, #0ea5e9) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .25s !important;
    outline: none !important;
}

.war-call-fab:hover,
.war-call-fab:focus {
    transform: scale(1.08) !important;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5), 0 3px 8px rgba(0, 0, 0, 0.2) !important;
}

.war-call-fab:active {
    transform: scale(0.95) !important;
}

.war-call-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.war-call-pulse {
    position: absolute !important;
    inset: -4px !important;
    border-radius: 50% !important;
    border: 2px solid var(--call-bg, #0ea5e9) !important;
    opacity: 0 !important;
    animation: war-call-pulse-kf 2.2s infinite ease-out !important;
    pointer-events: none !important;
}

@keyframes war-call-pulse-kf {
    0% { transform: scale(1); opacity: .7; }
    50% { transform: scale(1.22); opacity: 0; }
    100% { transform: scale(1.22); opacity: 0; }
}

/* Call Tooltip */
.war-call-tooltip {
    position: absolute !important;
    background: #0f172a !important;
    color: #f8fafc !important;
    font-family: var(--war-font) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
    opacity: 0 !important;
    transition: opacity .2s ease, transform .2s ease !important;
    z-index: 99999 !important;
}

.war-call-fab:hover .war-call-tooltip {
    opacity: 1 !important;
}

/* ── Call Button Desktop 8 Positions ────────────────────────────── */
#war-call-root.war-call-pos-desk-bottom-right {
    bottom: var(--war-offset) !important;
    right: var(--war-offset) !important;
    top: auto !important; left: auto !important;
}
#war-call-root.war-call-pos-desk-bottom-right .war-call-tooltip {
    right: calc(100% + 10px) !important; top: 50% !important; transform: translateY(-50%) !important;
}

#war-call-root.war-call-pos-desk-bottom-left {
    bottom: var(--war-offset) !important;
    left: var(--war-offset) !important;
    top: auto !important; right: auto !important;
}
#war-call-root.war-call-pos-desk-bottom-left .war-call-tooltip {
    left: calc(100% + 10px) !important; top: 50% !important; transform: translateY(-50%) !important;
}

#war-call-root.war-call-pos-desk-top-right {
    top: var(--war-offset) !important;
    right: var(--war-offset) !important;
    bottom: auto !important; left: auto !important;
}
#war-call-root.war-call-pos-desk-top-right .war-call-tooltip {
    right: calc(100% + 10px) !important; top: 50% !important; transform: translateY(-50%) !important;
}

#war-call-root.war-call-pos-desk-top-left {
    top: var(--war-offset) !important;
    left: var(--war-offset) !important;
    bottom: auto !important; right: auto !important;
}
#war-call-root.war-call-pos-desk-top-left .war-call-tooltip {
    left: calc(100% + 10px) !important; top: 50% !important; transform: translateY(-50%) !important;
}

#war-call-root.war-call-pos-desk-bottom-center {
    bottom: var(--war-offset) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: auto !important; right: auto !important;
}
#war-call-root.war-call-pos-desk-bottom-center .war-call-tooltip {
    bottom: calc(100% + 10px) !important; left: 50% !important; transform: translateX(-50%) !important;
}

#war-call-root.war-call-pos-desk-top-center {
    top: var(--war-offset) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: auto !important; right: auto !important;
}
#war-call-root.war-call-pos-desk-top-center .war-call-tooltip {
    top: calc(100% + 10px) !important; left: 50% !important; transform: translateX(-50%) !important;
}

#war-call-root.war-call-pos-desk-middle-right {
    top: 50% !important;
    right: var(--war-offset) !important;
    transform: translateY(-50%) !important;
    bottom: auto !important; left: auto !important;
}
#war-call-root.war-call-pos-desk-middle-right .war-call-tooltip {
    right: calc(100% + 10px) !important; top: 50% !important; transform: translateY(-50%) !important;
}

#war-call-root.war-call-pos-desk-middle-left {
    top: 50% !important;
    left: var(--war-offset) !important;
    transform: translateY(-50%) !important;
    bottom: auto !important; right: auto !important;
}
#war-call-root.war-call-pos-desk-middle-left .war-call-tooltip {
    left: calc(100% + 10px) !important; top: 50% !important; transform: translateY(-50%) !important;
}

/* Call Button Desktop Collision Stacking */
#war-call-root.war-call-pos-desk-bottom-right.war-stacked-desk,
#war-call-root.war-call-pos-desk-bottom-left.war-stacked-desk,
#war-call-root.war-call-pos-desk-bottom-center.war-stacked-desk {
    bottom: calc(var(--war-offset) + 68px) !important;
}
#war-call-root.war-call-pos-desk-top-right.war-stacked-desk,
#war-call-root.war-call-pos-desk-top-left.war-stacked-desk,
#war-call-root.war-call-pos-desk-top-center.war-stacked-desk {
    top: calc(var(--war-offset) + 68px) !important;
}
#war-call-root.war-call-pos-desk-middle-right.war-stacked-desk {
    top: calc(50% - 68px) !important;
}
#war-call-root.war-call-pos-desk-middle-left.war-stacked-desk {
    top: calc(50% - 68px) !important;
}


/* ── Floating Social Media Channel Bar Base ─────────────────────── */
#war-social-root {
    position: fixed !important;
    z-index: 99997 !important;
    pointer-events: auto !important;
    display: flex !important;
    transition: all .25s ease !important;
}

.war-social-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Floating Pill / Dock Style */
.war-social-style-floating_pill .war-social-bar {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 6px !important;
    border-radius: 28px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
}

.war-social-btn {
    position: relative !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: var(--channel-color, #1e293b) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    transition: all .22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    outline: none !important;
    flex-shrink: 0 !important;
}

.war-social-btn:hover,
.war-social-btn:focus {
    background: var(--channel-color, #2563eb) !important;
    color: #ffffff !important;
    transform: scale(1.08) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22) !important;
}

.war-social-btn:active {
    transform: scale(0.95) !important;
}

/* Official brand styling on hover */
.war-social-btn.war-social-instagram:hover,
.war-social-btn.war-social-instagram:focus {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
    color: #ffffff !important;
}
.war-social-btn.war-social-facebook:hover,
.war-social-btn.war-social-facebook:focus {
    background: #1877F2 !important;
    color: #ffffff !important;
}
.war-social-btn.war-social-twitter:hover,
.war-social-btn.war-social-twitter:focus {
    background: #000000 !important;
    color: #ffffff !important;
}
.war-social-btn.war-social-linkedin:hover,
.war-social-btn.war-social-linkedin:focus {
    background: #0A66C2 !important;
    color: #ffffff !important;
}
.war-social-btn.war-social-youtube:hover,
.war-social-btn.war-social-youtube:focus {
    background: #FF0000 !important;
    color: #ffffff !important;
}
.war-social-btn.war-social-telegram:hover,
.war-social-btn.war-social-telegram:focus {
    background: #229ED9 !important;
    color: #ffffff !important;
}
.war-social-btn.war-social-tiktok:hover,
.war-social-btn.war-social-tiktok:focus {
    background: #010101 !important;
    color: #ffffff !important;
}
.war-social-btn.war-social-email:hover,
.war-social-btn.war-social-email:focus {
    background: #EA4335 !important;
    color: #ffffff !important;
}

.war-social-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.war-social-icon svg {
    width: 24px !important;
    height: 24px !important;
}

/* ── Grouped Social Media Speed Dial (v7.2.0) ── */
.war-social-group-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.war-social-group-btn {
    position: relative !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    z-index: 2 !important;
}

.war-social-group-btn:hover {
    background: #0f172a !important;
    transform: scale(1.08) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.45) !important;
}

.war-social-group-btn:active {
    transform: scale(0.95) !important;
}

.war-social-group-icon {
    position: relative !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

.war-social-group-icon .war-icon-share {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: -11px !important;
    margin-left: -11px !important;
    width: 22px !important;
    height: 22px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) rotate(0deg) !important;
    transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1), opacity .2s ease, visibility .2s !important;
    display: block !important;
}

.war-social-group-icon .war-icon-close {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: -10px !important;
    margin-left: -10px !important;
    width: 20px !important;
    height: 20px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0.4) rotate(-90deg) !important;
    transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1), opacity .2s ease, visibility .2s !important;
    display: block !important;
    pointer-events: none !important;
}

.war-social-open .war-social-group-icon .war-icon-share,
.war-social-group-wrapper.war-hover-open .war-social-group-icon .war-icon-share,
.war-social-group-wrapper:hover .war-social-group-icon .war-icon-share,
.war-social-trigger-hover:hover .war-social-group-icon .war-icon-share {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0.4) rotate(90deg) !important;
}

.war-social-open .war-social-group-icon .war-icon-close,
.war-social-group-wrapper.war-hover-open .war-social-group-icon .war-icon-close,
.war-social-group-wrapper:hover .war-social-group-icon .war-icon-close,
.war-social-trigger-hover:hover .war-social-group-icon .war-icon-close {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) rotate(0deg) !important;
}

.war-social-group-btn:hover .war-social-tooltip {
    opacity: 1 !important;
}

.war-social-open .war-social-group-btn:hover .war-social-tooltip {
    opacity: 0 !important;
}

.war-social-group-items {
    position: absolute !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Direction: UPPER SIDE (upwards) */
.war-social-dir-up .war-social-group-items {
    bottom: 100% !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    flex-direction: column-reverse !important;
    padding-bottom: 12px !important;
    padding-top: 0 !important;
}

/* Direction: DOWN SIDE (downwards) */
.war-social-dir-down .war-social-group-items {
    top: 100% !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    flex-direction: column !important;
    padding-top: 12px !important;
    padding-bottom: 0 !important;
}

.war-social-group-items .war-social-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transform: scale(0.6) translateY(12px) !important;
    transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1), opacity .2s ease, visibility .2s, box-shadow .2s !important;
}

.war-social-dir-down .war-social-group-items .war-social-btn {
    transform: scale(0.6) translateY(-12px) !important;
}

.war-social-open .war-social-group-items,
.war-social-group-wrapper.war-hover-open .war-social-group-items,
.war-social-group-wrapper:hover .war-social-group-items,
.war-social-trigger-hover:hover .war-social-group-items {
    pointer-events: auto !important;
}

.war-social-open .war-social-group-items .war-social-btn,
.war-social-group-wrapper.war-hover-open .war-social-group-items .war-social-btn,
.war-social-group-wrapper:hover .war-social-group-items .war-social-btn,
.war-social-trigger-hover:hover .war-social-group-items .war-social-btn {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transform: scale(1) translateY(0) !important;
}

.war-social-open .war-social-group-items .war-social-btn:nth-child(1),
.war-social-trigger-hover:hover .war-social-group-items .war-social-btn:nth-child(1) { transition-delay: 0.03s !important; }
.war-social-open .war-social-group-items .war-social-btn:nth-child(2),
.war-social-trigger-hover:hover .war-social-group-items .war-social-btn:nth-child(2) { transition-delay: 0.06s !important; }
.war-social-open .war-social-group-items .war-social-btn:nth-child(3),
.war-social-trigger-hover:hover .war-social-group-items .war-social-btn:nth-child(3) { transition-delay: 0.09s !important; }
.war-social-open .war-social-group-items .war-social-btn:nth-child(4),
.war-social-trigger-hover:hover .war-social-group-items .war-social-btn:nth-child(4) { transition-delay: 0.12s !important; }
.war-social-open .war-social-group-items .war-social-btn:nth-child(5),
.war-social-trigger-hover:hover .war-social-group-items .war-social-btn:nth-child(5) { transition-delay: 0.15s !important; }
.war-social-open .war-social-group-items .war-social-btn:nth-child(6),
.war-social-trigger-hover:hover .war-social-group-items .war-social-btn:nth-child(6) { transition-delay: 0.18s !important; }
.war-social-open .war-social-group-items .war-social-btn:nth-child(7),
.war-social-trigger-hover:hover .war-social-group-items .war-social-btn:nth-child(7) { transition-delay: 0.21s !important; }
.war-social-open .war-social-group-items .war-social-btn:nth-child(8),
.war-social-trigger-hover:hover .war-social-group-items .war-social-btn:nth-child(8) { transition-delay: 0.24s !important; }

/* Social Tooltip */
.war-social-tooltip {
    position: absolute !important;
    background: #0f172a !important;
    color: #f8fafc !important;
    font-family: var(--war-font) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2) !important;
    opacity: 0 !important;
    transition: opacity .18s ease !important;
    z-index: 99999 !important;
}

.war-social-btn:hover .war-social-tooltip {
    opacity: 1 !important;
}

/* ── Social Media Desktop 8 Positions ───────────────────────────── */
#war-social-root.war-social-pos-desk-bottom-right {
    bottom: var(--war-offset) !important;
    right: var(--war-offset) !important;
    top: auto !important; left: auto !important;
}
#war-social-root.war-social-pos-desk-bottom-right .war-social-tooltip {
    right: calc(100% + 10px) !important; top: 50% !important; transform: translateY(-50%) !important;
}

#war-social-root.war-social-pos-desk-bottom-left {
    bottom: var(--war-offset) !important;
    left: var(--war-offset) !important;
    top: auto !important; right: auto !important;
}
#war-social-root.war-social-pos-desk-bottom-left .war-social-tooltip {
    left: calc(100% + 10px) !important; top: 50% !important; transform: translateY(-50%) !important;
}

#war-social-root.war-social-pos-desk-top-right {
    top: var(--war-offset) !important;
    right: var(--war-offset) !important;
    bottom: auto !important; left: auto !important;
}
#war-social-root.war-social-pos-desk-top-right .war-social-tooltip {
    right: calc(100% + 10px) !important; top: 50% !important; transform: translateY(-50%) !important;
}

#war-social-root.war-social-pos-desk-top-left {
    top: var(--war-offset) !important;
    left: var(--war-offset) !important;
    bottom: auto !important; right: auto !important;
}
#war-social-root.war-social-pos-desk-top-left .war-social-tooltip {
    left: calc(100% + 10px) !important; top: 50% !important; transform: translateY(-50%) !important;
}

#war-social-root.war-social-pos-desk-bottom-center {
    bottom: var(--war-offset) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: auto !important; right: auto !important;
}
#war-social-root.war-social-pos-desk-bottom-center .war-social-bar {
    flex-direction: row !important;
}
#war-social-root.war-social-pos-desk-bottom-center .war-social-tooltip {
    bottom: calc(100% + 10px) !important; left: 50% !important; transform: translateX(-50%) !important;
}

#war-social-root.war-social-pos-desk-top-center {
    top: var(--war-offset) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: auto !important; right: auto !important;
}
#war-social-root.war-social-pos-desk-top-center .war-social-bar {
    flex-direction: row !important;
}
#war-social-root.war-social-pos-desk-top-center .war-social-tooltip {
    top: calc(100% + 10px) !important; left: 50% !important; transform: translateX(-50%) !important;
}

#war-social-root.war-social-pos-desk-middle-right {
    top: 50% !important;
    right: var(--war-offset) !important;
    transform: translateY(-50%) !important;
    bottom: auto !important; left: auto !important;
}
#war-social-root.war-social-pos-desk-middle-right .war-social-tooltip {
    right: calc(100% + 10px) !important; top: 50% !important; transform: translateY(-50%) !important;
}

#war-social-root.war-social-pos-desk-middle-left {
    top: 50% !important;
    left: var(--war-offset) !important;
    transform: translateY(-50%) !important;
    bottom: auto !important; right: auto !important;
}
#war-social-root.war-social-pos-desk-middle-left .war-social-tooltip {
    left: calc(100% + 10px) !important; top: 50% !important; transform: translateY(-50%) !important;
}

/* Social Media Desktop Collision Stacking */
#war-social-root.war-social-pos-desk-bottom-right.war-stacked-desk,
#war-social-root.war-social-pos-desk-bottom-left.war-stacked-desk,
#war-social-root.war-social-pos-desk-bottom-center.war-stacked-desk {
    bottom: calc(var(--war-offset) + 68px) !important;
}
#war-social-root.war-social-pos-desk-bottom-right.war-stacked-desk-2,
#war-social-root.war-social-pos-desk-bottom-left.war-stacked-desk-2,
#war-social-root.war-social-pos-desk-bottom-center.war-stacked-desk-2 {
    bottom: calc(var(--war-offset) + 128px) !important;
}

#war-social-root.war-social-pos-desk-top-right.war-stacked-desk,
#war-social-root.war-social-pos-desk-top-left.war-stacked-desk,
#war-social-root.war-social-pos-desk-top-center.war-stacked-desk {
    top: calc(var(--war-offset) + 68px) !important;
}
#war-social-root.war-social-pos-desk-top-right.war-stacked-desk-2,
#war-social-root.war-social-pos-desk-top-left.war-stacked-desk-2,
#war-social-root.war-social-pos-desk-top-center.war-stacked-desk-2 {
    top: calc(var(--war-offset) + 128px) !important;
}

/* ── Mobile Responsive Styles ───────────────────────────────────── */
@media (max-width: 768px) {
    /* Call Button Mobile Positions */
    #war-call-root.war-call-pos-mob-bottom-right {
        bottom: var(--war-offset) !important;
        right: var(--war-offset) !important;
        top: auto !important; left: auto !important;
        transform: none !important;
    }
    #war-call-root.war-call-pos-mob-bottom-left {
        bottom: var(--war-offset) !important;
        left: var(--war-offset) !important;
        top: auto !important; right: auto !important;
        transform: none !important;
    }
    #war-call-root.war-call-pos-mob-bottom-center {
        bottom: var(--war-offset) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: auto !important; right: auto !important;
    }
    #war-call-root.war-call-pos-mob-top-right {
        top: var(--war-offset) !important;
        right: var(--war-offset) !important;
        bottom: auto !important; left: auto !important;
        transform: none !important;
    }
    #war-call-root.war-call-pos-mob-top-left {
        top: var(--war-offset) !important;
        left: var(--war-offset) !important;
        bottom: auto !important; right: auto !important;
        transform: none !important;
    }
    #war-call-root.war-call-pos-mob-top-center {
        top: var(--war-offset) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: auto !important; right: auto !important;
    }
    #war-call-root.war-call-pos-mob-middle-right {
        top: 50% !important;
        right: var(--war-offset) !important;
        transform: translateY(-50%) !important;
        bottom: auto !important; left: auto !important;
    }
    #war-call-root.war-call-pos-mob-middle-left {
        top: 50% !important;
        left: var(--war-offset) !important;
        transform: translateY(-50%) !important;
        bottom: auto !important; right: auto !important;
    }

    /* Call Mobile Stacking */
    #war-call-root.war-call-pos-mob-bottom-right.war-stacked-mob,
    #war-call-root.war-call-pos-mob-bottom-left.war-stacked-mob,
    #war-call-root.war-call-pos-mob-bottom-center.war-stacked-mob {
        bottom: calc(var(--war-offset) + 64px) !important;
    }
    #war-call-root.war-call-pos-mob-top-right.war-stacked-mob,
    #war-call-root.war-call-pos-mob-top-left.war-stacked-mob,
    #war-call-root.war-call-pos-mob-top-center.war-stacked-mob {
        top: calc(var(--war-offset) + 64px) !important;
    }

    /* Social Media Mobile Positions */
    #war-social-root.war-social-pos-mob-bottom-right {
        bottom: var(--war-offset) !important;
        right: var(--war-offset) !important;
        top: auto !important; left: auto !important;
        transform: none !important;
    }
    #war-social-root.war-social-pos-mob-bottom-left {
        bottom: var(--war-offset) !important;
        left: var(--war-offset) !important;
        top: auto !important; right: auto !important;
        transform: none !important;
    }
    #war-social-root.war-social-pos-mob-bottom-center {
        bottom: var(--war-offset) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: auto !important; right: auto !important;
    }
    #war-social-root.war-social-pos-mob-bottom-center .war-social-bar {
        flex-direction: row !important;
    }
    #war-social-root.war-social-pos-mob-top-right {
        top: var(--war-offset) !important;
        right: var(--war-offset) !important;
        bottom: auto !important; left: auto !important;
        transform: none !important;
    }
    #war-social-root.war-social-pos-mob-top-left {
        top: var(--war-offset) !important;
        left: var(--war-offset) !important;
        bottom: auto !important; right: auto !important;
        transform: none !important;
    }
    #war-social-root.war-social-pos-mob-top-center {
        top: var(--war-offset) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: auto !important; right: auto !important;
    }
    #war-social-root.war-social-pos-mob-top-center .war-social-bar {
        flex-direction: row !important;
    }
    #war-social-root.war-social-pos-mob-middle-right {
        top: 50% !important;
        right: var(--war-offset) !important;
        transform: translateY(-50%) !important;
        bottom: auto !important; left: auto !important;
    }
    #war-social-root.war-social-pos-mob-middle-left {
        top: 50% !important;
        left: var(--war-offset) !important;
        transform: translateY(-50%) !important;
        bottom: auto !important; right: auto !important;
    }

    /* Social Mobile Stacking */
    #war-social-root.war-social-pos-mob-bottom-right.war-stacked-mob,
    #war-social-root.war-social-pos-mob-bottom-left.war-stacked-mob,
    #war-social-root.war-social-pos-mob-bottom-center.war-stacked-mob {
        bottom: calc(var(--war-offset) + 64px) !important;
    }
    #war-social-root.war-social-pos-mob-bottom-right.war-stacked-mob-2,
    #war-social-root.war-social-pos-mob-bottom-left.war-stacked-mob-2,
    #war-social-root.war-social-pos-mob-bottom-center.war-stacked-mob-2 {
        bottom: calc(var(--war-offset) + 120px) !important;
    }

    #war-social-root.war-social-pos-mob-top-right.war-stacked-mob,
    #war-social-root.war-social-pos-mob-top-left.war-stacked-mob,
    #war-social-root.war-social-pos-mob-top-center.war-stacked-mob {
        top: calc(var(--war-offset) + 64px) !important;
    }
    #war-social-root.war-social-pos-mob-top-right.war-stacked-mob-2,
    #war-social-root.war-social-pos-mob-top-left.war-stacked-mob-2,
    #war-social-root.war-social-pos-mob-top-center.war-stacked-mob-2 {
        top: calc(var(--war-offset) + 120px) !important;
    }

    .war-fab,
    .war-call-fab,
    .war-social-btn,
    .war-social-group-btn {
        width: 48px !important;
        height: 48px !important;
    }
    .war-fab-icon > svg:first-child,
    .war-call-icon svg,
    .war-social-btn svg,
    .war-social-group-icon svg {
        width: 22px !important;
        height: 22px !important;
    }
}




/* ── Auto-Hide Call & Social Buttons when WhatsApp Popup is Open ── */
body.war-popup-open #war-call-root,
body.war-popup-open #war-social-root,
#war-float-root.war-open ~ #war-call-root,
#war-float-root.war-open ~ #war-social-root {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}