/* Cancro — floating WhatsApp button.
   WhatsApp green for instant recognition; the Cancro feel comes from the
   details — wine-tinted shadow, Gilroy label, restrained motion.
   Label states deepen to a darker WhatsApp teal so white text holds 4.5:1.
   Rendered by includes/whatsapp-float.php, driven by whatsapp-float.js. */

.cancro-wa{
  --wa-size:56px;
  --wa-gap:16px;
  --wa-bg:#25d366;                         /* WhatsApp green */
  --wa-bg-hover:#108070;                   /* deep WhatsApp teal — white text 4.8:1 */
  --wa-line:rgba(255,255,255,.22);
  --wa-ink:#fff;
  position:fixed;
  right:calc(var(--wa-gap) + env(safe-area-inset-right,0px));
  bottom:calc(var(--wa-gap) + env(safe-area-inset-bottom,0px));
  z-index:9990;                            /* under nav (9999) and its overlays */
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  font-family:var(--font-body,'Gilroy',system-ui,sans-serif);
  -webkit-tap-highlight-color:transparent;
  pointer-events:none;                     /* only the children take clicks */
  /* Hidden until the script decides it's time (past the hero / idle). */
  opacity:0;transform:translateY(16px) scale(.96);
  transition:opacity var(--dur-slow,400ms) var(--ease-out,cubic-bezier(.16,1,.3,1)),
             transform var(--dur-slow,400ms) var(--ease-out,cubic-bezier(.16,1,.3,1));
}

.cancro-wa.is-visible{opacity:1;transform:none;}
.cancro-wa.is-visible > *{pointer-events:auto;}
/* Tucked away while scrolling down on touch, or while an overlay is open. */
.cancro-wa.is-tucked,.cancro-wa.is-suppressed{opacity:0;transform:translateY(calc(100% + var(--wa-gap)));}
.cancro-wa.is-tucked > *,.cancro-wa.is-suppressed > *{pointer-events:none;}

/* ---------- The button ---------- */
.cancro-wa .cancro-wa__button{
  position:relative;
  display:inline-flex;align-items:center;
  height:var(--wa-size);min-width:var(--wa-size);
  padding:0;border-radius:var(--radius-pill,100px);
  color:var(--wa-ink);text-decoration:none;
  background:var(--wa-bg);
  border:1px solid var(--wa-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),
             0 10px 28px rgba(63,14,36,.24),
             0 2px 6px rgba(63,14,36,.16);
  transition:background var(--dur-base,250ms) var(--ease-standard,ease),
             box-shadow var(--dur-base,250ms) var(--ease-standard,ease),
             transform var(--dur-base,250ms) var(--ease-out,ease);
}
.cancro-wa .cancro-wa__button:hover,
.cancro-wa .cancro-wa__button:focus-visible{
  color:var(--wa-ink);background:var(--wa-bg-hover);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),
             0 14px 34px rgba(63,14,36,.3),
             0 2px 6px rgba(63,14,36,.18);
}
.cancro-wa .cancro-wa__button:active{transform:scale(.96);}
.cancro-wa .cancro-wa__button:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px #fff,0 0 0 4px var(--wine-600,#c41e4a),0 14px 36px rgba(63,14,36,.34);
}

.cancro-wa__icon{
  position:relative;flex:none;
  display:grid;place-items:center;
  width:calc(var(--wa-size) - 2px);height:calc(var(--wa-size) - 2px);
}
.cancro-wa__glyph{width:24px;height:24px;display:block;}


/* Label: collapsed to zero width; opens on hover (fine pointers only). */
.cancro-wa__label{
  display:block;overflow:hidden;white-space:nowrap;
  max-width:0;opacity:0;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  transition:max-width var(--dur-slow,400ms) var(--ease-out,cubic-bezier(.16,1,.3,1)),
             opacity var(--dur-base,250ms) var(--ease-standard,ease),
             padding var(--dur-slow,400ms) var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.cancro-wa--rtl .cancro-wa__label{letter-spacing:0;text-transform:none;font-size:14px;font-weight:600;}

@media (hover:hover) and (pointer:fine){
  .cancro-wa .cancro-wa__button:hover .cancro-wa__label,
  .cancro-wa .cancro-wa__button:focus-visible .cancro-wa__label{
    max-width:180px;opacity:1;padding-inline-end:24px;
  }
}

/* ---------- One-time intro card ---------- */
.cancro-wa__intro{
  position:relative;
  width:min(300px,calc(100vw - 2 * var(--wa-gap)));
  padding:22px 22px 20px;
  background:var(--white,#fff);
  border:1px solid var(--blush-200,#fcd5df);
  border-radius:var(--radius-md,16px);
  box-shadow:0 24px 60px rgba(63,14,36,.18),0 4px 14px rgba(63,14,36,.08);
  color:var(--text-primary,#1a0a10);
  transform-origin:bottom right;
  animation:cancro-wa-in var(--dur-slow,400ms) var(--ease-out,cubic-bezier(.16,1,.3,1)) both;
}
.cancro-wa__intro[hidden]{display:none;}
.cancro-wa__intro.is-leaving{animation:cancro-wa-out var(--dur-base,250ms) var(--ease-standard,ease) both;}
/* Small tail pointing at the button. */
.cancro-wa__intro::after{
  content:"";position:absolute;bottom:-7px;right:22px;
  width:12px;height:12px;background:inherit;
  border-right:1px solid var(--blush-200,#fcd5df);border-bottom:1px solid var(--blush-200,#fcd5df);
  transform:rotate(45deg);
}

.cancro-wa .cancro-wa__kicker{
  margin:0 0 10px;
  font-family:var(--font-mono,'IBM Plex Mono',monospace);
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wine-600,#c41e4a);
}
.cancro-wa--rtl .cancro-wa__kicker{font-family:var(--font-body,system-ui,sans-serif);font-size:13px;font-weight:700;letter-spacing:0;}
.cancro-wa .cancro-wa__title{
  margin:0 0 6px;
  font-size:20px;font-weight:800;line-height:1.15;letter-spacing:-.01em;
  color:var(--wine-900,#3f0e24);
}
.cancro-wa .cancro-wa__body{
  margin:0 0 18px;
  font-size:14px;font-weight:500;line-height:1.5;
  color:var(--text-secondary,#5a3d47);
}
.cancro-wa .cancro-wa__cta{
  display:inline-flex;align-items:center;gap:8px;
  height:40px;padding:0 18px;border-radius:var(--radius-pill,100px);
  background:var(--wa-bg-hover);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  transition:background var(--dur-base,250ms) var(--ease-standard,ease);
}
.cancro-wa--rtl .cancro-wa__cta{letter-spacing:0;text-transform:none;font-size:14px;font-weight:600;}
.cancro-wa .cancro-wa__cta:hover,.cancro-wa .cancro-wa__cta:focus-visible{background:#0b6457;color:#fff;}
.cancro-wa__cta svg{width:16px;height:16px;transition:transform var(--dur-base,250ms) var(--ease-out,ease);}
.cancro-wa__cta:hover svg{transform:translateX(3px);}
.cancro-wa--rtl .cancro-wa__cta svg{transform:scaleX(-1);}
.cancro-wa--rtl .cancro-wa__cta:hover svg{transform:scaleX(-1) translateX(3px);}

.cancro-wa .cancro-wa__close{
  position:absolute;top:10px;right:10px;
  width:32px;height:32px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;
  background:transparent;color:var(--text-muted,#77606a);cursor:pointer;
  transition:background var(--dur-fast,150ms) ease,color var(--dur-fast,150ms) ease;
}
.cancro-wa--rtl .cancro-wa__close{right:auto;left:10px;}
.cancro-wa .cancro-wa__close:hover{background:var(--blush-50,#fef4f6);color:var(--wine-900,#3f0e24);}
.cancro-wa__close svg{width:16px;height:16px;}

@keyframes cancro-wa-in{from{opacity:0;transform:translateY(8px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes cancro-wa-out{to{opacity:0;transform:translateY(6px) scale(.98);}}

/* Admin-only preview (no number configured yet): a dashed ring so nobody
   mistakes it for the live button. */
.cancro-wa--preview .cancro-wa__button::after{
  content:"";position:absolute;inset:-5px;border-radius:inherit;
  border:1px dashed rgba(196,30,74,.55);pointer-events:none;
}

/* ---------- Breakpoints ---------- */
@media (min-width:768px){ .cancro-wa{--wa-gap:24px;} }
@media (min-width:1200px){ .cancro-wa{--wa-size:60px;--wa-gap:32px;} .cancro-wa__glyph{width:26px;height:26px;} }

@media print{ .cancro-wa{display:none !important;} }

@media (prefers-reduced-motion:reduce){
  .cancro-wa,.cancro-wa *{transition-duration:.001ms !important;animation-duration:.001ms !important;}
}