/* ================================================================
   07-widget-whatsapp.css
   Tab pemicu, tombol utama, dan popup kontak WhatsApp
   ================================================================ */

/* ===== WhatsApp contact popup styles ===== */
  /* Tab kecil pemicu — selalu ada, dipakai untuk memunculkan/menyembunyikan tombol WA */
  #wa-fab-tab{
    position:fixed; right:14px; bottom:22px; z-index:99998;
    width:38px; height:38px; border-radius:50%;
    background:#25D366; display:flex; align-items:center; justify-content:center;
    box-shadow:0 3px 10px rgba(0,0,0,.25); cursor:pointer; border:2px solid #fff;
    opacity:.85; transition:opacity .15s ease, transform .15s ease;
  }
  #wa-fab-tab:hover{ opacity:1; transform:scale(1.06); }
  #wa-fab-tab svg{ width:19px; height:19px; }
  #wa-fab-tab.hidden-state{ display:none; }

  /* Tombol WA utama — default TERSEMBUNYI, dimunculkan lewat tab */
  #wa-fab-btn{
    position:fixed; right:22px; bottom:22px; z-index:99999;
    width:58px; height:58px; border-radius:50%;
    background:#25D366; align-items:center; justify-content:center;
    box-shadow:0 4px 16px rgba(0,0,0,.28); cursor:pointer; border:none;
    transition:transform .15s ease, box-shadow .15s ease;
    display:none; /* default hidden saat aplikasi dibuka */
  }
  #wa-fab-btn.show{ display:flex; }
  #wa-fab-btn:hover{ transform:scale(1.07); box-shadow:0 6px 20px rgba(0,0,0,.35); }
  #wa-fab-btn svg{ width:30px; height:30px; }
  #wa-fab-btn .wa-hide-x{
    position:absolute; top:-4px; right:-4px; width:20px; height:20px; border-radius:50%;
    background:#fff; color:#374151; border:1px solid var(--border,#D5DCE8);
    display:flex; align-items:center; justify-content:center; font-size:12px; line-height:1;
    box-shadow:0 2px 6px rgba(0,0,0,.2);
  }
  #wa-fab-btn .wa-hide-x:hover{ background:#F3F4F6; }

  #wa-fab-popup{
    position:fixed; right:22px; bottom:92px; z-index:99999;
    width:260px; background:var(--surface,#FFFFFF); color:var(--text,#111827);
    border-radius:14px; box-shadow:0 10px 32px rgba(0,0,0,.25);
    border:1px solid var(--border,#D5DCE8); overflow:hidden;
    opacity:0; transform:translateY(12px) scale(.97); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  #wa-fab-popup.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  #wa-fab-popup .wa-head{
    background:#25D366; color:#fff; padding:14px 16px; display:flex; align-items:center; gap:10px; font-weight:700;
  }
  #wa-fab-popup .wa-head svg{ width:22px; height:22px; flex-shrink:0; }
  #wa-fab-popup .wa-body{ padding:14px 16px; font-size:13px; line-height:1.5; color:var(--muted,#4B5563); }
  #wa-fab-popup .wa-link{
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin:0 16px 16px 16px; padding:10px 14px; border-radius:10px;
    background:#25D366; color:#fff !important; text-decoration:none; font-weight:700; font-size:13px;
  }
  #wa-fab-popup .wa-link:hover{ background:#1EBE5A; }
  #wa-fab-popup .wa-close{
    position:absolute; top:10px; right:12px; background:none; border:none; color:#fff;
    font-size:18px; line-height:1; cursor:pointer; opacity:.85;
  }
  #wa-fab-popup .wa-close:hover{ opacity:1; }