/* ============================================================
   FEF WhatsApp Widget
   Floating launcher + members panel. All colours are driven by
   Elementor Style-tab selectors; this file owns layout, the six
   placements, animations and mobile behaviour.
   ============================================================ */

.fef-wa{
    position:fixed;
    z-index:var(--fef-wa-z,9990);
    display:flex;
    align-items:center;
    font-family:inherit;
}

/* ---- Six placements ---- */
.fef-wa-bottom-right{ right:var(--fef-wa-x,24px); bottom:var(--fef-wa-y,24px); flex-direction:row-reverse; }
.fef-wa-bottom-left { left:var(--fef-wa-x,24px);  bottom:var(--fef-wa-y,24px); flex-direction:row; }
.fef-wa-top-right   { right:var(--fef-wa-x,24px); top:var(--fef-wa-y,24px);    flex-direction:row-reverse; }
.fef-wa-top-left    { left:var(--fef-wa-x,24px);  top:var(--fef-wa-y,24px);    flex-direction:row; }
.fef-wa-right       { right:var(--fef-wa-x,24px); top:50%; transform:translateY(-50%); flex-direction:row-reverse; }
.fef-wa-left        { left:var(--fef-wa-x,24px);  top:50%; transform:translateY(-50%); flex-direction:row; }

/* ---- Launcher button ---- */
.fef-wa-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:60px; height:60px;
    border-radius:50%;
    background:#25D366;
    color:#fff;
    text-decoration:none;
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease;
    flex:0 0 auto;
}
.fef-wa-shadow .fef-wa-btn{ box-shadow:0 6px 18px rgba(0,0,0,.28); }
.fef-wa-btn:hover{ transform:scale(1.06); }
.fef-wa-btn:focus-visible{ outline:3px solid rgba(37,211,102,.4); outline-offset:2px; }
.fef-wa-icon{ display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.fef-wa-btn i{ font-size:30px; }
.fef-wa-btn svg{ width:30px; height:30px; fill:currentColor; }
.fef-wa-svg{ fill:currentColor; }
.fef-wa-icon img{ width:60%; height:60%; object-fit:contain; border-radius:50%; }

/* Label pill — sits beside the button (never inside the circle). Spacing is via
   margin (not container gap) so it can collapse to zero width when hidden and
   leave no empty gap next to the button. */
.fef-wa-label{
    background:#fff; color:#111;
    margin:0 10px;
    padding:8px 14px;
    border-radius:24px;
    font-size:14px; font-weight:600; white-space:nowrap;
    box-shadow:0 4px 14px rgba(0,0,0,.16);
    max-width:240px; opacity:1; overflow:hidden;
    transition:max-width .2s ease, opacity .2s ease, margin .2s ease, padding .2s ease;
}
/* Hover mode: collapse entirely until the widget is hovered. */
.fef-wa-label-hover .fef-wa-label{
    max-width:0; margin:0; padding-top:8px; padding-bottom:8px;
    padding-left:0; padding-right:0;
    opacity:0; pointer-events:none; box-shadow:none;
}
.fef-wa-label-hover:hover .fef-wa-label{
    max-width:240px; margin:0 10px; padding:8px 14px;
    opacity:1; box-shadow:0 4px 14px rgba(0,0,0,.16);
}

/* Notification dot */
.fef-wa-dot{
    position:absolute; top:6px; right:6px;
    width:12px; height:12px; border-radius:50%;
    background:#ff3b30; border:2px solid #fff;
}

/* ---- Attention animations ---- */
@keyframes fefWaPulse{ 0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)} 100%{box-shadow:0 0 0 18px rgba(37,211,102,0)} }
@keyframes fefWaBounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes fefWaShake{ 0%,100%{transform:rotate(0)} 20%{transform:rotate(-12deg)} 40%{transform:rotate(12deg)} 60%{transform:rotate(-8deg)} 80%{transform:rotate(8deg)} }
@keyframes fefWaBeat{ 0%,100%{transform:scale(1)} 30%{transform:scale(1.12)} 60%{transform:scale(.96)} }

.fef-wa-anim-pulse  .fef-wa-btn::after{
    content:""; position:absolute; inset:0; border-radius:50%;
    animation:fefWaPulse 2s ease-out infinite;
}
.fef-wa-anim-bounce .fef-wa-btn{ animation:fefWaBounce 2.4s ease-in-out infinite; }
.fef-wa-anim-shake  .fef-wa-btn{ animation:fefWaShake 3s ease-in-out infinite; }
.fef-wa-anim-beat   .fef-wa-btn{ animation:fefWaBeat 1.6s ease-in-out infinite; }
.fef-wa-btn:hover{ animation:none; }

/* ============================================================
   Members panel
   ============================================================ */
.fef-wa-panel{
    position:absolute;
    width:320px;
    max-width:calc(100vw - 32px);
    border-radius:16px;
    overflow:hidden;
    background:#E5DDD5;
    box-shadow:0 12px 40px rgba(0,0,0,.28);
    opacity:0; transform:translateY(12px) scale(.98);
    transition:opacity .22s ease, transform .22s ease;
    pointer-events:none;
}
.fef-wa-panel[hidden]{ display:none; }
.fef-wa.is-open .fef-wa-panel{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

/* Anchor the panel above/below the button based on placement */
.fef-wa-bottom-right .fef-wa-panel,
.fef-wa-bottom-left  .fef-wa-panel{ bottom:74px; }
.fef-wa-top-right    .fef-wa-panel,
.fef-wa-top-left     .fef-wa-panel{ top:74px; }
.fef-wa-right        .fef-wa-panel{ bottom:0; right:74px; }
.fef-wa-left         .fef-wa-panel{ bottom:0; left:74px; }
.fef-wa-bottom-right .fef-wa-panel,
.fef-wa-top-right    .fef-wa-panel{ right:0; }
.fef-wa-bottom-left  .fef-wa-panel,
.fef-wa-top-left     .fef-wa-panel{ left:0; }

.fef-wa-panel-head{
    display:flex; align-items:center; gap:12px;
    padding:16px; background:#075E54; color:#fff;
}
.fef-wa-panel-logo{ width:40px; height:40px; border-radius:50%; object-fit:cover; background:#fff; }
.fef-wa-panel-titles{ display:flex; flex-direction:column; line-height:1.3; flex:1; }
.fef-wa-panel-titles strong{ font-size:15px; }
.fef-wa-panel-titles span{ font-size:12px; opacity:.85; }
.fef-wa-close{
    background:none; border:none; color:inherit; font-size:24px;
    line-height:1; cursor:pointer; opacity:.8; padding:0 2px;
}
.fef-wa-close:hover{ opacity:1; }

.fef-wa-panel-body{
    padding:14px; max-height:340px; overflow-y:auto;
    background:#E5DDD5;
    background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-opacity='0.03'%3E%3Cpath d='M0 20h40M20 0v40'/%3E%3C/g%3E%3C/svg%3E");
    display:flex; flex-direction:column; gap:10px;
}
.fef-wa-member{
    display:flex; align-items:center; gap:12px;
    padding:10px 12px; border-radius:12px;
    background:#fff; text-decoration:none;
    box-shadow:0 1px 3px rgba(0,0,0,.08);
    transition:transform .15s ease, box-shadow .15s ease;
}
.fef-wa-member:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.14); }
.fef-wa-m-avatar{
    position:relative; flex:0 0 auto;
    width:44px; height:44px; border-radius:50%;
    background:#25D366; color:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    overflow:hidden; font-size:18px;
}
.fef-wa-m-avatar img{ width:100%; height:100%; object-fit:cover; }
.fef-wa-m-avatar svg{ width:22px; height:22px; fill:currentColor; }
.fef-wa-m-avatar.is-online::after{
    content:""; position:absolute; right:0; bottom:0;
    width:12px; height:12px; border-radius:50%;
    background:#4caf50; border:2px solid #fff;
}
.fef-wa-m-info{ display:flex; flex-direction:column; flex:1; line-height:1.35; min-width:0; }
.fef-wa-m-name{ font-size:14px; font-weight:600; color:#111; }
.fef-wa-m-role{ font-size:12px; color:#667781; }
.fef-wa-m-status{ font-size:11px; color:#4caf50; }
.fef-wa-m-go{ flex:0 0 auto; color:#25D366; font-size:22px; }
.fef-wa-m-go svg{ width:22px; height:22px; fill:currentColor; }
.fef-wa-panel-foot{
    text-align:center; font-size:11px; color:#667781;
    padding:8px; background:#f7f7f7;
}
.fef-wa-panel-foot .fab{ color:#25D366; }
.fef-wa-panel-foot svg{ width:13px; height:13px; fill:#25D366; vertical-align:-2px; }

/* ============================================================
   Device gating (works with the Elementor 'Visible On' control)
   ============================================================ */
@media(max-width:767px){
    .fef-wa-show-desktop{ display:none !important; }
    /* Slightly tighter defaults on phones */
    .fef-wa-btn{ width:54px; height:54px; }
    .fef-wa-btn i{ font-size:26px; }
    .fef-wa-btn svg{ width:26px; height:26px; }
    .fef-wa-label{ display:none; }           /* keep it icon-only on phones */
    .fef-wa-panel{ width:min(340px, calc(100vw - 24px)); }
    /* Never let a mid-edge panel run off-screen on small devices */
    .fef-wa-right .fef-wa-panel,
    .fef-wa-left  .fef-wa-panel{ position:fixed; left:12px; right:12px; bottom:80px; top:auto; width:auto; max-width:none; }
}
@media(min-width:768px){
    .fef-wa-show-mobile{ display:none !important; }
}

/* Respect reduced-motion preferences */
@media(prefers-reduced-motion:reduce){
    .fef-wa-btn, .fef-wa-btn::after{ animation:none !important; }
    .fef-wa-panel{ transition:none; }
}