/* ============================================================
   RankOptim — whatsapp.css
   Floating chat widget + reusable WhatsApp buttons.
   Uses the site's navy/gold tokens from theme.css.
   ============================================================ */

:root{
  --wa:        #25D366;
  --wa-deep:   #128C7E;
  --wa-dark:   #075E54;
  --wa-glow:   rgba(37,211,102,.30);
  --wa-pale:   rgba(37,211,102,.12);
  --wa-line:   rgba(37,211,102,.32);
}

/* ── REUSABLE BUTTON ─────────────────────────────────────── */
.ro-wa-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 22px; border-radius:999px;
  font-family:var(--f-body,inherit); font-size:.92rem; font-weight:600;
  letter-spacing:.01em; line-height:1; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, background .22s, border-color .22s;
}
.ro-wa-btn svg{ flex:none; }
.ro-wa-btn:hover{ transform:translateY(-2px); }

.ro-wa-btn--solid{
  background:linear-gradient(135deg,var(--wa) 0%,var(--wa-deep) 100%);
  color:#04220F; box-shadow:0 8px 24px -8px var(--wa-glow);
}
.ro-wa-btn--solid:hover{ box-shadow:0 14px 34px -10px var(--wa-glow); color:#04220F; }

.ro-wa-btn--ghost{
  background:var(--wa-pale); color:#7CF0A8;
  border-color:var(--wa-line); backdrop-filter:blur(8px);
}
.ro-wa-btn--ghost:hover{ background:rgba(37,211,102,.2); border-color:var(--wa); color:#A8FFC8; }

.ro-wa-btn--inline{
  padding:0; background:none; border:none; color:var(--wa);
  font-weight:600; border-radius:0;
}
.ro-wa-btn--inline:hover{ color:#6EE79A; transform:none; text-decoration:underline; text-underline-offset:4px; }

.ro-wa-btn--block{ width:100%; }
.ro-wa-btn--sm{ padding:10px 16px; font-size:.83rem; }
.ro-wa-btn--lg{ padding:16px 30px; font-size:1rem; }

/* ── WIDGET SHELL ────────────────────────────────────────── */
.ro-wa{
  position:fixed; right:clamp(14px,3vw,26px); bottom:clamp(14px,3vw,26px);
  z-index:900; display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  font-family:var(--f-body,system-ui,sans-serif);
}

/* ── LAUNCHER ────────────────────────────────────────────── */
.ro-wa-launch{
  position:relative; width:58px; height:58px; border-radius:50%;
  border:none; cursor:pointer; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--wa) 0%,var(--wa-deep) 100%);
  color:#fff; box-shadow:0 10px 30px -8px var(--wa-glow), 0 2px 8px rgba(0,0,0,.4);
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s;
}
.ro-wa-launch::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--wa); opacity:.6;
  animation:ro-wa-ping 2.6s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ro-wa-ping{ 0%{transform:scale(1);opacity:.55} 70%,100%{transform:scale(1.55);opacity:0} }
.ro-wa-launch:hover{ transform:scale(1.07); box-shadow:0 16px 40px -10px var(--wa-glow); }
.ro-wa-launch:active{ transform:scale(.96); }

.ro-wa-launch-ico,.ro-wa-launch-x{
  position:absolute; inset:0; display:grid; place-items:center;
  transition:opacity .2s, transform .28s cubic-bezier(.2,.8,.3,1);
}
.ro-wa-launch-x{ opacity:0; transform:rotate(-70deg) scale(.5); font-size:19px; line-height:1; }
.ro-wa.is-active .ro-wa-launch-ico{ opacity:0; transform:rotate(70deg) scale(.5); }
.ro-wa.is-active .ro-wa-launch-x{ opacity:1; transform:rotate(0) scale(1); }
.ro-wa.is-active .ro-wa-launch::after{ animation:none; opacity:0; }

/* unread dot */
.ro-wa-dot{
  position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%;
  background:var(--gold,#D6B26E); color:#0A1430; border:2px solid var(--navy-950,#050A18);
  transition:opacity .2s, transform .2s;
}
.ro-wa-dot::after{
  content:'1'; position:absolute; inset:0; display:grid; place-items:center;
  font-size:8px; font-weight:800; color:#0A1430;
}
.ro-wa.is-active .ro-wa-dot,.ro-wa.is-seen .ro-wa-dot{ opacity:0; transform:scale(.4); }

/* ── TEASER ──────────────────────────────────────────────── */
.ro-wa-teaser{
  position:relative; max-width:270px; padding:14px 34px 14px 16px;
  border-radius:16px 16px 4px 16px;
  background:var(--glass,rgba(7,14,34,.92));
  border:1px solid var(--wa-line);
  backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 16px 44px -14px rgba(0,0,0,.7);
  animation:ro-wa-pop .42s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes ro-wa-pop{ from{opacity:0;transform:translateY(14px) scale(.94)} to{opacity:1;transform:none} }
.ro-wa-teaser p{
  margin:0; font-size:.82rem; line-height:1.55;
  color:var(--ink-2,rgba(226,235,255,.82));
}
.ro-wa-teaser strong{ color:var(--ink,#EEF3FF); font-weight:600; }
.ro-wa-teaser-x{
  position:absolute; top:7px; right:8px; width:22px; height:22px; border-radius:50%;
  border:none; background:rgba(255,255,255,.07); color:var(--ink-3,rgba(198,213,247,.6));
  font-size:10px; cursor:pointer; display:grid; place-items:center; transition:.2s;
}
.ro-wa-teaser-x:hover{ background:rgba(255,255,255,.16); color:#fff; }

/* ── PANEL ───────────────────────────────────────────────── */
.ro-wa-panel{
  width:min(348px, calc(100vw - 32px));
  border-radius:20px; overflow:hidden;
  background:var(--navy-900,#070E22);
  border:1px solid var(--line,rgba(140,175,255,.16));
  box-shadow:0 30px 80px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.03) inset;
  transform-origin:bottom right;
  animation:ro-wa-in .34s cubic-bezier(.2,.9,.3,1.05) both;
}
@keyframes ro-wa-in{ from{opacity:0;transform:translateY(18px) scale(.93)} to{opacity:1;transform:none} }
.ro-wa-panel[hidden]{ display:none; }

.ro-wa-head{
  display:flex; align-items:center; gap:12px; padding:15px 16px;
  background:linear-gradient(135deg,var(--wa-dark) 0%,var(--wa-deep) 100%);
  position:relative;
}
.ro-wa-avatar{ position:relative; flex:none; }
.ro-wa-avatar img{
  width:44px; height:44px; border-radius:50%; object-fit:contain;
  background:var(--navy-950,#050A18); padding:5px; border:1.5px solid rgba(255,255,255,.28);
}
.ro-wa-presence{
  position:absolute; right:0; bottom:0; width:12px; height:12px; border-radius:50%;
  background:#9AA6B2; border:2.5px solid var(--wa-dark);
}
.is-open-hours .ro-wa-presence{ background:#4AE07E; box-shadow:0 0 0 0 rgba(74,224,126,.7); animation:ro-wa-pulse 2.2s infinite; }
@keyframes ro-wa-pulse{ 70%{box-shadow:0 0 0 7px rgba(74,224,126,0)} 100%{box-shadow:0 0 0 0 rgba(74,224,126,0)} }

.ro-wa-who{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ro-wa-who strong{ font-size:.95rem; font-weight:700; color:#fff; letter-spacing:.01em; }
.ro-wa-who span{ font-size:.73rem; color:rgba(255,255,255,.72); }
.ro-wa-who em{ font-size:.68rem; font-style:normal; color:rgba(255,255,255,.62); }

.ro-wa-close{
  flex:none; width:28px; height:28px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; font-size:11px;
  display:grid; place-items:center; transition:.2s;
}
.ro-wa-close:hover{ background:rgba(255,255,255,.3); }

/* body — subtle WhatsApp-style texture over navy */
.ro-wa-body{
  padding:18px 16px 16px;
  background:
    radial-gradient(circle at 15% 12%, rgba(37,211,102,.06) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(214,178,110,.05) 0%, transparent 45%),
    var(--navy-900,#070E22);
  max-height:min(58vh,430px); overflow-y:auto; overscroll-behavior:contain;
}
.ro-wa-body::-webkit-scrollbar{ width:5px; }
.ro-wa-body::-webkit-scrollbar-thumb{ background:rgba(140,175,255,.2); border-radius:9px; }

.ro-wa-bubble{
  position:relative; padding:13px 15px 20px; border-radius:4px 14px 14px 14px;
  background:var(--surface-2,rgba(255,255,255,.06));
  border:1px solid var(--line,rgba(140,175,255,.14));
  font-size:.85rem; line-height:1.62; color:var(--ink-2,rgba(226,235,255,.85));
  animation:ro-wa-pop .38s .06s cubic-bezier(.2,.9,.3,1.2) both;
}
.ro-wa-time{
  position:absolute; right:11px; bottom:6px;
  font-size:.62rem; color:var(--ink-4,rgba(170,190,235,.45));
}

.ro-wa-hint{
  margin:16px 0 10px; font-size:.68rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-4,rgba(170,190,235,.5));
}

.ro-wa-quick{ display:flex; flex-direction:column; gap:8px; }
.ro-wa-chip{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border-radius:11px; text-decoration:none;
  background:var(--surface,rgba(255,255,255,.04));
  border:1px solid var(--line,rgba(140,175,255,.14));
  font-size:.84rem; font-weight:500; color:var(--ink-2,rgba(226,235,255,.82));
  transition:background .2s, border-color .2s, transform .2s, color .2s;
}
.ro-wa-chip svg{ width:15px; height:15px; flex:none; opacity:0; transform:translateX(-5px); transition:.24s; }
.ro-wa-chip:hover{
  background:var(--wa-pale); border-color:var(--wa-line);
  color:#B6FFD1; transform:translateX(3px);
}
.ro-wa-chip:hover svg{ opacity:1; transform:none; }

.ro-wa-compose{
  display:flex; gap:8px; align-items:center; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--line,rgba(140,175,255,.12));
}
.ro-wa-compose input{
  flex:1; min-width:0; padding:11px 14px; border-radius:999px;
  background:var(--surface,rgba(255,255,255,.045));
  border:1px solid var(--line,rgba(140,175,255,.16));
  color:var(--ink,#EEF3FF); font-family:inherit; font-size:.84rem;
  transition:border-color .2s, background .2s;
}
.ro-wa-compose input::placeholder{ color:var(--ink-4,rgba(170,190,235,.42)); }
.ro-wa-compose input:focus{
  outline:none; border-color:var(--wa-line); background:rgba(255,255,255,.07);
}
.ro-wa-compose button{
  flex:none; width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--wa) 0%,var(--wa-deep) 100%);
  color:#04220F; display:grid; place-items:center; transition:transform .2s, filter .2s;
}
.ro-wa-compose button svg{ width:17px; height:17px; }
.ro-wa-compose button:hover{ transform:scale(1.08); filter:brightness(1.1); }
.ro-wa-compose button:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

.ro-wa-foot{
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 14px; background:var(--navy-950,#050A18);
  border-top:1px solid var(--line,rgba(140,175,255,.12));
  font-size:.7rem; color:var(--ink-4,rgba(170,190,235,.5));
}
.ro-wa-foot svg{ color:var(--wa); }

/* ── FORM FALLBACK / ALT CTA ─────────────────────────────── */
.ro-wa-alt{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:16px; padding-top:16px;
  border-top:1px solid var(--line,rgba(140,175,255,.12));
  flex-wrap:wrap; text-align:center;
}
.ro-wa-alt span{ font-size:.82rem; color:var(--ink-3,rgba(198,213,247,.62)); }

/* ── HOISTED ABOVE BACK-TO-TOP BUTTON ────────────────────── */
#ro-top{ bottom:calc(clamp(14px,3vw,26px) + 70px); }

@media (max-width:520px){
  .ro-wa-launch{ width:54px; height:54px; }
  .ro-wa-teaser{ max-width:230px; }
  .ro-wa-body{ max-height:52vh; }
}
@media (prefers-reduced-motion:reduce){
  .ro-wa-launch::after,.ro-wa-presence{ animation:none; }
  .ro-wa-panel,.ro-wa-teaser,.ro-wa-bubble{ animation:none; }
}

/* ── SITE CHROME INTEGRATION ─────────────────────────────── */

/* Header icon button */
.hdr-wa{
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  color:var(--wa); background:var(--wa-pale); border:1px solid var(--wa-line);
  text-decoration:none; transition:background .22s, transform .22s, color .22s, border-color .22s;
}
.hdr-wa:hover{ background:rgba(37,211,102,.2); border-color:var(--wa); transform:translateY(-2px); color:#8CF5B4; }
@media (max-width:900px){ .hdr-wa{ display:none; } }

/* Mega-menu promo stack */
.mega-promo-actions{ display:flex; flex-direction:column; gap:9px; }

/* Footer social pill */
.soc--wa:hover{ color:var(--wa) !important; border-color:var(--wa-line) !important; }

/* Footer contact link */
.foot-ci a[data-wa-cta]{ color:var(--wa); text-decoration:none; }
.foot-ci a[data-wa-cta]:hover{ color:#8CF5B4; text-decoration:underline; text-underline-offset:3px; }

/* Article share pill */
.pill--wa{
  color:var(--wa); border-color:var(--wa-line) !important;
  background:var(--wa-pale) !important; text-decoration:none;
  transition:background .2s, color .2s;
}
.pill--wa:hover{ background:rgba(37,211,102,.2) !important; color:#A8FFC8; }

/* Contact page WhatsApp card */
.card--wa{ border-color:var(--wa-line) !important; }
.card--wa::before{ background:linear-gradient(135deg,var(--wa-pale),transparent) !important; }
.card-icon--wa{ color:var(--wa) !important; border-color:var(--wa-line) !important; background:var(--wa-pale) !important; }

/* Keep hero rows tidy when a third button joins */
.hero-cta,.cta-actions,.row{ flex-wrap:wrap; }