/* buyelfbar UX v1.1.0 - overrides for the elephant-whatsapp widget (file not edited) + floating cart. ASCII only. */

/* 1. WhatsApp panel header (text comes from content: in mu-plugins/elephant-whatsapp/widget.css) */
#wa.wa__widget_container .wa__popup_heading::before { content: "ELFBAR MALAYSIA \00B7  SUPPORT"; }

/* 4. Larger "Need help? Chat with us" pill (replaces the 60px round icon; same element, so it still opens the same widget) */
#wa.wa__widget_container .wa__btn_popup .wa__btn_popup_icon,
#wa.wa__widget_container .wa__btn_popup .wa__btn_popup_txt { display: none !important; }
#wa.wa__widget_container .wa__btn_popup { right: 20px !important; }
#wa .buyelfbar-wa-pill {
  display: flex; align-items: center; gap: 12px; box-sizing: border-box;
  min-height: 62px; padding: 8px 22px 8px 8px; border-radius: 999px;
  background: #1faa53; color: #fff; border: 3px solid #fff;
  box-shadow: 0 6px 24px rgba(16, 60, 34, .35); font-family: inherit; line-height: 1.2;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
#wa .wa__btn_popup:hover .buyelfbar-wa-pill { background: #178f45; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(16, 60, 34, .4); }
#wa .buyelfbar-wa-ico {
  flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: #1faa53;
}
#wa .buyelfbar-wa-ico svg { width: 26px; height: 26px; display: block; }
#wa .buyelfbar-wa-ico .buyelfbar-wa-x { display: none; font: 700 26px/1 Arial, sans-serif; color: #1f2b22; }
#wa .wa__btn_popup.wa__active .buyelfbar-wa-ico svg { display: none; }
#wa .wa__btn_popup.wa__active .buyelfbar-wa-ico .buyelfbar-wa-x { display: block; }
#wa .buyelfbar-wa-lines { display: flex; flex-direction: column; text-align: left; white-space: nowrap; }
#wa .buyelfbar-wa-main { font-size: 16px; font-weight: 700; letter-spacing: .01em; color: #fff; }
#wa .buyelfbar-wa-sub { font-size: 12px; font-weight: 500; opacity: .92; margin-top: 3px; color: #fff; }
/* the open panel sits above the taller pill */
#wa.wa__widget_container .wa__popup_chat_box { bottom: calc(var(--elephant-chat-base, 20px) + 80px) !important; right: 20px !important; }
@media (max-width: 600px) {
  #wa.wa__widget_container .wa__btn_popup { right: 14px !important; }
  #wa.wa__widget_container .wa__popup_chat_box { right: 14px !important; }
}
@media (max-width: 479px) {
  #wa .buyelfbar-wa-pill { min-height: 52px; gap: 9px; padding: 5px 16px 5px 5px; border-width: 2px; }
  #wa .buyelfbar-wa-ico { width: 38px; height: 38px; }
  #wa .buyelfbar-wa-ico svg { width: 22px; height: 22px; }
  #wa .buyelfbar-wa-main { font-size: 14px; }
  #wa .buyelfbar-wa-sub { font-size: 11px; margin-top: 2px; }
  #wa.wa__widget_container .wa__popup_chat_box { bottom: calc(var(--elephant-chat-base, 20px) + 68px) !important; max-height: calc(100dvh - var(--elephant-chat-base, 20px) - 120px); }
}

/* 5. Floating cart: right edge, vertical middle (the WhatsApp pill stays at the bottom) */
.buyelfbar-fc {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9990;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 64px; height: 70px; box-sizing: border-box; padding: 6px 4px 6px 6px;
  background: #1f2b22; color: #fff !important; text-decoration: none !important;
  border-radius: 16px 0 0 16px; box-shadow: -4px 6px 22px rgba(0, 0, 0, .28);
  font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.1; transition: background-color .2s ease, width .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.buyelfbar-fc:hover, .buyelfbar-fc:focus-visible { background: #16834f; width: 70px; }
.buyelfbar-fc:focus-visible { outline: 3px solid #16834f; outline-offset: 3px; }
.buyelfbar-fc-icon { display: block; width: 28px; height: 28px; }
.buyelfbar-fc-text { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #fff; }
.buyelfbar-fc-count {
  position: absolute; top: -8px; left: -8px; min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box;
  display: grid; place-items: center; border-radius: 12px; border: 2px solid #fff;
  background: #e5322d; color: #fff; font: 700 12px/1 Arial, sans-serif;
}
.buyelfbar-fc-count.is-empty { background: #8a948c; }
.buyelfbar-fc.is-bounce { animation: buyelfbar-fc-bounce .7s cubic-bezier(.28, .84, .42, 1); }
.buyelfbar-fc.is-bounce .buyelfbar-fc-count { animation: buyelfbar-fc-pop .7s ease; }
@keyframes buyelfbar-fc-bounce {
  0% { transform: translateY(-50%) scale(1); }
  25% { transform: translateY(-50%) translateX(-10px) scale(1.12); }
  50% { transform: translateY(-50%) scale(.96); }
  75% { transform: translateY(-50%) translateX(-4px) scale(1.04); }
  100% { transform: translateY(-50%) scale(1); }
}
@keyframes buyelfbar-fc-pop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.45); } }
.buyelfbar-fc-toast {
  position: fixed; right: 78px; top: 50%; transform: translate(12px, -50%); z-index: 9991;
  padding: 11px 16px; border-radius: 12px; background: #16834f; color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; box-shadow: 0 8px 26px rgba(0, 0, 0, .25); white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.buyelfbar-fc-toast.is-visible { opacity: 1; visibility: visible; transform: translate(0, -50%); }
@media (max-width: 479px) {
  .buyelfbar-fc { width: 52px; height: 58px; border-radius: 14px 0 0 14px; }
  .buyelfbar-fc:hover, .buyelfbar-fc:focus-visible { width: 52px; }
  .buyelfbar-fc-icon { width: 24px; height: 24px; }
  .buyelfbar-fc-text { font-size: 11px; }
  .buyelfbar-fc-toast { right: 62px; font-size: 13px; padding: 9px 13px; }
}
@media (max-height: 520px) { .buyelfbar-fc, .buyelfbar-fc-toast { top: 38%; } }
@media (prefers-reduced-motion: reduce) {
  .buyelfbar-fc.is-bounce, .buyelfbar-fc.is-bounce .buyelfbar-fc-count { animation: none; }
  #wa .buyelfbar-wa-pill, .buyelfbar-fc, .buyelfbar-fc-toast { transition: none; }
}
@media print { .buyelfbar-fc, .buyelfbar-fc-toast { display: none !important; } }

/* classic checkout phone error (block checkout uses its own validation style) */
.buyelfbar-phone-error{margin:6px 0 0;font-size:.875em;line-height:1.4;color:#cc1818}