/* ==========================================================================
   WHATSAPP CHAT WIDGET + ONE-TIME "CONFUSED?" POP-UP
   ========================================================================== */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ---- launcher ---- */
.wa-launcher{ position:relative; display:flex; align-items:center; gap:10px; }
.float-btn--wa{ position:relative; border:0; cursor:pointer; }
.float-btn--wa svg{ width:30px; height:30px; }
.float-btn--wa::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:#25D366; opacity:.55; z-index:-1;
  animation:waRing 2.4s ease-out infinite;
}
@keyframes waRing{ 0%{ transform:scale(1); opacity:.55; } 80%,100%{ transform:scale(1.55); opacity:0; } }
.wa-launcher__dot{
  position:absolute; top:-2px; right:-2px; min-width:19px; height:19px; padding:0 5px;
  border-radius:10px; background:#FF3B30; color:#fff; font:700 11px/19px var(--font-sans, Arial, sans-serif);
  box-shadow:0 0 0 2px #fff;
}
.wa-launcher.is-seen .wa-launcher__dot{ display:none; }
.wa-launcher__hint{
  background:#fff; color:#0E1B33; font-size:13px; font-weight:600; white-space:nowrap;
  padding:8px 14px; border-radius:18px; box-shadow:0 8px 24px rgba(0,0,0,.18);
  opacity:0; transform:translateX(8px); transition:opacity .3s, transform .3s; pointer-events:none;
}
.wa-launcher.show-hint .wa-launcher__hint{ opacity:1; transform:none; }
@media(max-width:900px){ .wa-launcher__hint{ display:none; } }

/* ---- chat card ---- */
.wa-card{
  position:fixed; right:22px; bottom:96px; z-index:170;
  width:340px; max-width:calc(100vw - 24px); max-height:min(560px, calc(100vh - 120px));
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border-radius:14px; box-shadow:0 22px 60px rgba(10,20,40,.35);
  font-family:var(--font-sans, Arial, sans-serif);
  opacity:0; transform:translateY(14px) scale(.97); transform-origin:bottom right;
  transition:opacity .25s ease, transform .25s ease;
}
.wa-card[hidden]{ display:none; }
.wa-card.is-open{ opacity:1; transform:none; }

.wa-card__head{ display:flex; align-items:center; gap:12px; padding:14px 16px; background:#075E54; color:#fff; }
.wa-avatar{
  position:relative; flex:0 0 42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:#075E54; font-weight:800; font-size:14px; letter-spacing:.02em;
}
.wa-avatar__online{ position:absolute; right:1px; bottom:1px; width:11px; height:11px; border-radius:50%; background:#25D366; box-shadow:0 0 0 2px #075E54; }
.wa-card__who{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.wa-card__who b{ font-size:15px; }
.wa-card__who small{ font-size:12px; opacity:.85; }
.wa-card__close{ margin-left:auto; background:none; border:0; color:#fff; font-size:26px; line-height:1; cursor:pointer; padding:2px 4px; opacity:.85; }
.wa-card__close:hover{ opacity:1; }

.wa-card__body{
  flex:1; overflow-y:auto; padding:18px 14px 14px;
  background-color:#E5DDD5;
  background-image:radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px);
  background-size:14px 14px;
}
.wa-bubble{
  position:relative; background:#fff; color:#111; font-size:14px; line-height:1.45;
  padding:8px 12px 20px; border-radius:0 8px 8px 8px; max-width:88%;
  box-shadow:0 1px 1px rgba(0,0,0,.12);
  animation:waBubble .35s ease both .15s;
}
.wa-bubble::before{ content:""; position:absolute; left:-8px; top:0; border-width:0 8px 8px 0; border-style:solid; border-color:transparent #fff transparent transparent; }
.wa-bubble__name{ display:block; font-size:12px; font-weight:700; color:#075E54; margin-bottom:2px; }
.wa-bubble__time{ position:absolute; right:10px; bottom:4px; font-size:10.5px; color:#8696A0; }
@keyframes waBubble{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.wa-quick{ display:flex; flex-direction:column; gap:7px; margin-top:16px; }
.wa-quick__label{ font-size:11.5px; color:#54656F; text-align:center; margin-bottom:2px; }
.wa-quick__btn{
  display:flex; align-items:center; gap:9px;
  background:#fff; color:#075E54; font-size:13.5px; font-weight:600; text-decoration:none;
  padding:10px 12px; border-radius:8px; border:1px solid rgba(7,94,84,.18);
  transition:background .15s, transform .15s, border-color .15s;
}
.wa-quick__btn:hover, .wa-quick__btn:focus-visible{ background:#DCF8C6; border-color:#25D366; transform:translateX(2px); }
.wa-quick__btn span{ font-size:16px; line-height:1; }

.wa-card__compose{ display:flex; gap:8px; padding:10px 12px; background:#F0F2F5; }
.wa-card__compose input{
  flex:1; min-width:0; border:0; border-radius:20px; padding:10px 14px; font-size:14px; background:#fff; color:#111;
}
.wa-card__compose input:focus{ outline:2px solid #25D366; outline-offset:0; }
.wa-card__compose button{
  flex:0 0 42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
}
.wa-card__compose button svg{ width:18px; height:18px; }
.wa-card__foot{ text-align:center; font-size:11px; color:#54656F; background:#F0F2F5; padding:0 0 9px; }

@media(max-width:900px){
  .wa-card{ right:12px; left:12px; width:auto; bottom:146px; }
  body.has-promo-sticky .wa-card{ bottom:206px; }
}

/* ---- one-time pop-up ---- */
.wa-modal{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:18px; }
.wa-modal[hidden]{ display:none; }
.wa-modal__backdrop{ position:absolute; inset:0; background:rgba(6,14,30,.62); opacity:0; transition:opacity .3s; }
.wa-modal__box{
  position:relative; width:100%; max-width:420px; max-height:calc(100vh - 36px); overflow-y:auto;
  background:#fff; color:#0E1B33; border-radius:16px; padding:30px 24px 20px; text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  opacity:0; transform:translateY(20px) scale(.96); transition:opacity .3s ease, transform .3s ease;
  font-family:var(--font-sans, Arial, sans-serif);
}
.wa-modal.is-open .wa-modal__backdrop{ opacity:1; }
.wa-modal.is-open .wa-modal__box{ opacity:1; transform:none; }
.wa-modal__box:focus{ outline:none; }
.wa-modal__x{ position:absolute; top:10px; right:12px; background:none; border:0; font-size:26px; line-height:1; color:#8696A0; cursor:pointer; padding:4px; }
.wa-modal__icon{
  width:62px; height:62px; margin:0 auto 14px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 8px rgba(37,211,102,.15);
}
.wa-modal__icon svg{ width:34px; height:34px; }
.wa-modal__box h3{ font-family:var(--font-serif, Georgia, serif); font-size:1.45rem; line-height:1.25; margin:0 0 8px; color:#0E1B33; }
.wa-modal__box p{ font-size:14.5px; color:#4C5C77; margin:0 0 18px; line-height:1.5; }
.wa-modal__options{ display:flex; flex-direction:column; gap:8px; text-align:left; }
.wa-modal__options .wa-quick__btn{ background:#F4FBF6; }
.wa-modal__cta{
  margin-top:16px; display:flex; align-items:center; justify-content:center; gap:10px;
  background:#25D366; color:#fff; font-weight:700; font-size:15px; text-decoration:none;
  padding:14px 18px; border-radius:10px; transition:background .15s, transform .15s;
}
.wa-modal__cta:hover{ background:#1EBE5A; transform:translateY(-1px); }
.wa-modal__cta svg{ width:22px; height:22px; }
.wa-modal__skip{ margin-top:10px; background:none; border:0; color:#8696A0; font-size:13px; cursor:pointer; text-decoration:underline; padding:6px; }
html.wa-modal-open{ overflow:hidden; }

@media(prefers-reduced-motion:reduce){
  .float-btn--wa::before, .wa-bubble{ animation:none; }
  .wa-card, .wa-modal__box, .wa-modal__backdrop{ transition:none; }
}