/**
 * Location: /assets/css/stm-whatsapp-floating.css
 * Purpose:
 * - Site-wide floating WhatsApp button (bottom-left).
 * - UI: LARGE WhatsApp icon + white pill label (NO green circle).
 * - Safe-area friendly + lightweight (performance-first).
 *
 * Related PHP:
 * - /inc/features/whatsapp/whatsapp-module.php
 *
 * Linkage/Loader:
 * - Enqueued only when WhatsApp Module + floating enabled.
 */

/* Root button */
.stm-wa-float{
  position: fixed;
  left: 14px;
  bottom: 14px;

  /* iOS safe area support */
  left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));

  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  background: transparent;
  border: 0;
  padding: 0;

  text-decoration: none !important;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Focus */
.stm-wa-float:focus{ outline: none; }
.stm-wa-float:focus-visible{
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 3px;
  border-radius: 999px;
}

/* Icon wrapper — NO background, NO circle */
.stm-wa-float__iconwrap{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* BIG WhatsApp icon */
.stm-wa-float__icon{
  width: 44px;        /* ⬅ increased size */
  height: 44px;
  display: block;
  object-fit: contain;
}

/* White pill label */
.stm-wa-float__label{
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;

  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);

  font-size: 14px;
  font-weight: 700;
  color: #111;
  white-space: nowrap;
}

/* Hover polish (desktop only) */
@media (hover:hover) and (pointer:fine){
  .stm-wa-float:hover .stm-wa-float__icon,
  .stm-wa-float:hover .stm-wa-float__label{
    transform: translateY(-1px);
  }
  .stm-wa-float:active .stm-wa-float__icon,
  .stm-wa-float:active .stm-wa-float__label{
    transform: translateY(0);
  }
}

/* Small screens */
@media (max-width: 420px){
  .stm-wa-float__icon{
    width: 40px;
    height: 40px;
  }
  .stm-wa-float__label{
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
  }
}

/* Prevent horizontal scroll edge cases */
body{
  overflow-x: hidden;
}