/* ==========================================================================
   GBM Studies — Prototype 01 — "Chat on WhatsApp" button + opt-in tick box
   (js/whatsapp.js). Uses tokens.css colours.
   ========================================================================== */

/* ---------- Floating button ---------- */
.gbm-wa {
  position: fixed; right: 20px; bottom: calc(20px + var(--wa-lift, 0px)); z-index: 40;
  display: inline-flex; align-items: center; gap: 0; height: 56px; padding: 0 6px; border-radius: 999px;
  color: var(--ivory-50, #fbf9f4); background: var(--emerald-900, #061c14);
  box-shadow: 0 18px 40px -18px rgba(3, 17, 11, .7), inset 0 0 0 1px rgba(230, 211, 166, .22);
  opacity: 0; transform: translate3d(0, 12px, 0);
  transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1), bottom .35s cubic-bezier(.16, 1, .3, 1), gap .35s, padding .35s, box-shadow .3s;
}
.gbm-wa.is-on { opacity: 1; transform: none; }
.gbm-wa__icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.45rem; color: #fff; background: #1f9d55; }
.gbm-wa__text { max-width: 0; overflow: hidden; white-space: nowrap; font-family: var(--font-sans, system-ui), sans-serif; font-size: .9rem; font-weight: 500; transition: max-width .45s cubic-bezier(.16, 1, .3, 1), padding .35s; }
.gbm-wa:hover, .gbm-wa:focus-visible { box-shadow: 0 20px 44px -18px rgba(3, 17, 11, .8), inset 0 0 0 1px rgba(230, 211, 166, .5); }
.gbm-wa:hover .gbm-wa__text, .gbm-wa:focus-visible .gbm-wa__text { max-width: 170px; padding: 0 .9rem 0 .7rem; }
.gbm-wa:focus-visible { outline: 2px solid var(--gold-500, #c5a15a); outline-offset: 3px; }
@media (hover: none) { .gbm-wa:hover .gbm-wa__text { max-width: 0; padding: 0; } }
@media (max-width: 560px) { .gbm-wa { right: 14px; bottom: calc(14px + var(--wa-lift, 0px)); height: 52px; } .gbm-wa__icon { width: 40px; height: 40px; font-size: 1.3rem; } }
@media print { .gbm-wa { display: none; } }

/* ---------- Opt-in tick box ---------- */
.wa-optin { display: flex; align-items: flex-start; gap: .65rem; margin: .4rem 0 1rem; padding: .8rem .95rem; border-radius: 14px; font-size: .88rem; line-height: 1.45; color: var(--ink-700, #2b3631); background: #fff; box-shadow: inset 0 0 0 1px var(--line-light, rgba(12,21,17,.12)); cursor: pointer; transition: box-shadow .25s; }
.wa-optin:hover { box-shadow: inset 0 0 0 1px var(--ink-300, #9aa39e); }
.wa-optin:has(input:checked) { box-shadow: inset 0 0 0 1.5px #1f9d55; }
.wa-optin input { flex: none; width: 18px; height: 18px; margin: .1rem 0 0; accent-color: #1f9d55; cursor: pointer; }
.wa-optin i { color: #1f9d55; }
.wa-optin small { display: block; margin-top: .15rem; font-size: .76rem; color: var(--ink-500, #5b6660); }
.wa-optin:focus-within { outline: 2px solid var(--gold-500, #c5a15a); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .gbm-wa, .gbm-wa__text { transition: none; }
  .gbm-wa { transform: none; }
}