/* =====================================================
   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:            99999;
}

/* ── Root ────────────────────────────────────────── */
#war-float-root {
    position: fixed !important;
    bottom: var(--war-offset) !important;
    z-index: var(--war-z) !important;
    display: flex !important;
    flex-direction: column !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;
}
#war-float-root.war-pos-right { right: var(--war-offset) !important; align-items: flex-end !important; }
#war-float-root.war-pos-left  { left:  var(--war-offset) !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%) translateX(6px) !important;
    line-height: 1.4 !important;
}
.war-pos-right .war-fab-tooltip { right: calc(100% + 10px) !important; }
.war-pos-left  .war-fab-tooltip { left:  calc(100% + 10px) !important; transform: translateY(-50%) translateX(-6px) !important; }
.war-fab:hover .war-fab-tooltip { opacity: 1 !important; transform: translateY(-50%) translateX(0) !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); }
}

/* ── Popup ───────────────────────────────────────── */
.war-popup {
    width: 248px !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-left .war-popup { transform-origin: bottom left !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 */
@media (max-width: 360px) {
    .war-popup { width: calc(100vw - 28px) !important; }
    #war-float-root.war-pos-right { right: 12px !important; }
    #war-float-root.war-pos-left  { left:  12px !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); }
}