/* =========================================================
   VERSI 12 - FLOATING WHATSAPP HELP KECIL & RAPI
   - Ukuran dibuat lebih kecil/standar
   - Bubble dan logo diberi jarak
   - Tulisan "Chat Kami" dibuat bold
   - Posisi di pojok kanan bawah agar tidak mengganggu konten
   ========================================================= */

.floating-wa-help{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:99990;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  text-decoration:none !important;
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  filter:drop-shadow(0 12px 24px rgba(15,39,71,.16));
  -webkit-tap-highlight-color:transparent;
}

.wa-help-bubble{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:142px;
  min-height:50px;
  padding:10px 13px;
  border-radius:9px;
  background:#ffffff;
  color:#333842;
  box-shadow:0 10px 24px rgba(15,39,71,.16);
  border:1px solid rgba(15,39,71,.08);
  transform:none;
  transition:box-shadow .22s ease, transform .22s ease;
}

.wa-help-bubble span{
  display:block;
  font-size:13px;
  line-height:1.25;
  font-weight:500;
  color:#333842;
  white-space:nowrap;
}

.wa-help-bubble b{
  display:block;
  margin-top:1px;
  font-size:14px;
  line-height:1.25;
  font-weight:800;
  color:#333842;
  white-space:nowrap;
}

.wa-help-circle{
  position:relative;
  width:58px;
  height:58px;
  flex:0 0 58px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  background:#25D366;
  box-shadow:0 12px 28px rgba(37,211,102,.28);
  border:0;
  transition:transform .22s ease, box-shadow .22s ease;
}

.wa-help-circle svg{
  width:35px;
  height:35px;
  display:block;
}

.floating-wa-help:hover .wa-help-circle{
  transform:scale(1.04);
  box-shadow:0 15px 34px rgba(37,211,102,.36);
}

.floating-wa-help:hover .wa-help-bubble{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(15,39,71,.20);
}

@media (max-width:900px){
  .floating-wa-help{
    right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    gap:8px;
  }

  .wa-help-bubble{
    min-width:126px;
    min-height:44px;
    padding:8px 11px;
    border-radius:8px;
  }

  .wa-help-bubble span{
    font-size:12px;
  }

  .wa-help-bubble b{
    font-size:13px;
  }

  .wa-help-circle{
    width:52px;
    height:52px;
    flex-basis:52px;
  }

  .wa-help-circle svg{
    width:31px;
    height:31px;
  }
}

@media (max-width:380px){
  .floating-wa-help{
    right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    gap:7px;
  }

  .wa-help-bubble{
    min-width:118px;
    min-height:42px;
    padding:7px 10px;
  }

  .wa-help-bubble span{
    font-size:11.5px;
  }

  .wa-help-bubble b{
    font-size:12.5px;
  }

  .wa-help-circle{
    width:48px;
    height:48px;
    flex-basis:48px;
  }

  .wa-help-circle svg{
    width:29px;
    height:29px;
  }
}