/* ============================================================
   WhatsApp Chatbot Widget v2 — All styles driven by CSS vars
   set dynamically from admin options via wa-chatbot.js
   ============================================================ */

#wa-chatbot-root {
    /* ── Defaults (overridden at runtime by JS) ───────────── */
    --wa-btn-bg:          #25D366;
    --wa-btn-icon-color:  #ffffff;
    --wa-btn-size:        62px;
    --wa-btn-radius:      50px;

    --wa-header-bg:       #25D366;
    --wa-header-color:    #ffffff;

    --wa-popup-bg:        #ffffff;
    --wa-popup-color:     #111111;
    --wa-popup-radius:    18px;
    --wa-popup-font-size: 14px;
    --wa-label-color:     #374151;

    --wa-input-bg:        #fafafa;
    --wa-input-border:    #d1d5db;
    --wa-input-radius:    10px;

    --wa-submit-bg:        #25D366;
    --wa-submit-color:     #ffffff;
    --wa-submit-radius:    12px;
    --wa-submit-font-size: 15px;

    --wa-intro-bg:        #dcfce7;
    --wa-intro-color:     #166534;

    --wa-ping-color:      #25D366;

    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: var(--wa-popup-font-size);
}

/* ── Floating Bubble ─────────────────────────────────────── */

.wa-bubble-btn {
    position: fixed;
    bottom: 28px;
    width:  var(--wa-btn-size);
    height: var(--wa-btn-size);
    border-radius: var(--wa-btn-radius);
    background: var(--wa-btn-bg);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 24px rgba(0,0,0,0.22);
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
    outline: none;
}
.wa-bubble-btn:hover  { transform: scale(1.1); box-shadow: 0 6px 30px rgba(0,0,0,0.28); }
.wa-bubble-btn:focus-visible { outline: 3px solid var(--wa-btn-bg); outline-offset: 3px; }

.wa-bubble-btn[data-position="right"] { right: 28px; }
.wa-bubble-btn[data-position="left"]  { left:  28px; }

/* Icon toggle */
.wa-bubble-icon { position: absolute; transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.wa-icon-close  {
    font-size: 22px;
    color: var(--wa-btn-icon-color);
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}
.wa-bubble-btn.is-open .wa-icon-whatsapp { opacity: 0; transform: scale(0.5); }
.wa-bubble-btn.is-open .wa-icon-close    { opacity: 1; transform: rotate(0deg) scale(1); }

/* SVG icon colour via CSS fill */
#wa-chatbot-root .wa-icon-whatsapp svg { fill: var(--wa-btn-icon-color); }

/* Pulse ring */
.wa-bubble-ping {
    position: absolute;
    inset: -4px;
    border-radius: var(--wa-btn-radius);
    border: 3px solid var(--wa-ping-color);
    animation: waPing 2.2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes waPing {
    0%  { opacity: .6; transform: scale(1);   }
    80% { opacity: 0;  transform: scale(1.6); }
    100%{ opacity: 0;  transform: scale(1.6); }
}

/* Tooltip */
.wa-bubble-tooltip {
    position: absolute;
    white-space: nowrap;
    background: #1a1a1a;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 11px;
    border-radius: 20px;
    bottom: calc(100% + 10px);
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s, transform .2s;
}
.wa-bubble-tooltip::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a1a1a;
}
.wa-bubble-btn[data-position="right"] .wa-bubble-tooltip { right: 0; }
.wa-bubble-btn[data-position="left"]  .wa-bubble-tooltip { left:  0; }
.wa-bubble-btn:hover .wa-bubble-tooltip { opacity: 1; transform: translateY(0); }

/* ── Popup ───────────────────────────────────────────────── */

.wa-popup {
    position: fixed;
    bottom: 104px;
    z-index: 99999;
    width: 360px;
    max-width: calc(100vw - 32px);
    border-radius: var(--wa-popup-radius);
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    background: var(--wa-popup-bg);
    color: var(--wa-popup-color);
    font-size: var(--wa-popup-font-size);
    overflow: hidden;
    animation: waPopIn .35s cubic-bezier(.34,1.56,.64,1) both;
}
.wa-popup[data-position="right"] { right: 20px; }
.wa-popup[data-position="left"]  { left:  20px; }
.wa-popup[hidden] { display: none !important; }

@keyframes waPopIn {
    from { opacity: 0; transform: scale(.85) translateY(20px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);    }
}

/* Header */
.wa-popup-header {
    background: var(--wa-header-bg);
    color: var(--wa-header-color);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.wa-popup-avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.wa-popup-header-text { flex: 1; min-width: 0; }
.wa-popup-title    { display: block; font-weight: 700; font-size: 1.08em; color: var(--wa-header-color); }
.wa-popup-subtitle { display: block; font-size: .87em; opacity: .85; margin-top: 1px; color: var(--wa-header-color); }
.wa-popup-close {
    background: rgba(255,255,255,.18);
    border: none; cursor: pointer;
    width: 30px; height: 30px;
    border-radius: 50%;
    color: var(--wa-header-color);
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
    line-height: 1;
}
.wa-popup-close:hover { background: rgba(255,255,255,.32); }

/* Body */
.wa-popup-body { padding: 20px 18px 22px; background: var(--wa-popup-bg); }

.wa-popup-intro {
    font-size: .97em;
    color: var(--wa-intro-color);
    background: var(--wa-intro-bg);
    padding: 10px 14px;
    border-radius: 10px;
    margin: 0 0 18px;
    line-height: 1.5;
}

/* Fields */
.wa-field { margin-bottom: 13px; }
.wa-field label {
    display: block;
    font-size: .87em;
    font-weight: 600;
    color: var(--wa-label-color);
    margin-bottom: 5px;
}
.wa-field label span { color: #ef4444; }
.wa-field input {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid var(--wa-input-border);
    border-radius: var(--wa-input-radius);
    font-size: var(--wa-popup-font-size);
    color: var(--wa-popup-color);
    background: var(--wa-input-bg);
    box-sizing: border-box;
    transition: border-color .18s, box-shadow .18s;
    outline: none;
    font-family: inherit;
}
.wa-field input:focus {
    border-color: var(--wa-btn-bg);
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wa-btn-bg) 20%, transparent);
}
.wa-field input.wa-input-error { border-color: #ef4444; }
.wa-error { display: block; font-size: .82em; color: #ef4444; margin-top: 4px; min-height: 15px; }

/* Submit */
.wa-submit-btn {
    width: 100%;
    margin-top: 6px;
    padding: 13px;
    background: var(--wa-submit-bg);
    color: var(--wa-submit-color);
    border: none;
    border-radius: var(--wa-submit-radius);
    font-size: var(--wa-submit-font-size);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: filter .18s, transform .15s;
    font-family: inherit;
}
.wa-submit-btn:hover  { filter: brightness(0.9); }
.wa-submit-btn:active { transform: scale(.98); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 420px) {
    .wa-popup { width: calc(100vw - 24px); bottom: 96px; }
    .wa-bubble-btn[data-position="right"] { right: 16px; }
    .wa-bubble-btn[data-position="left"]  { left:  16px; }
}