/* ============================================================
   Luxshine — WhatsApp chat: a fixed button, bottom right, that opens
   a small chat box (native popover: light dismiss, Esc, top layer).
   The box offers ready-made opening messages by product group; its
   form sends the text to WhatsApp (GET to wa.me). Tokens only.
   Markup: see hair-extensions.html · Script: js/main.js (waChat).
   ============================================================ */

/* ---------- The button ---------- */
.wa-fab {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 80;
  display: grid; place-items: center; width: 56px; height: 56px;
  border: 0; background: var(--color-black); color: var(--color-white);
  box-shadow: var(--shadow-lg); cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.wa-fab:active { transform: scale(.96); }
@media (hover: hover) { .wa-fab:hover { background: var(--color-primary); color: var(--color-black); } }
.wa-chat__ico { flex: none; width: 24px; height: 24px; background: currentColor; -webkit-mask: url("../assets/icons/whatsapp.svg") no-repeat center / contain; mask: url("../assets/icons/whatsapp.svg") no-repeat center / contain; }
.wa-fab .wa-chat__ico { width: 28px; height: 28px; }

/* ---------- The chat box ---------- */
.wa-chat {
  position: fixed; inset: auto var(--space-6) var(--space-24) auto;
  width: 360px; max-width: calc(100vw - var(--space-8)); max-height: calc(100dvh - 128px);
  margin: 0; padding: 0; overflow: auto;
  border: 1px solid var(--color-black); background: var(--color-white); color: var(--color-black);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, display .2s allow-discrete, overlay .2s allow-discrete;
}
.wa-chat:popover-open { opacity: 1; transform: none; }
@starting-style { .wa-chat:popover-open { opacity: 0; transform: translateY(8px); } }

.wa-chat__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); background: var(--color-black); color: var(--color-white); }
/* An h2 for the dialog's name: the site's heading colour, case and face are reset here. */
.wa-chat__title { margin-right: auto; font-family: var(--font-body); font-weight: 600; font-size: var(--body-size); line-height: var(--body-lh); text-transform: none; color: var(--color-white); }
.wa-chat__close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.wa-chat__x { width: 16px; height: 16px; background: currentColor; -webkit-mask: url("../assets/icons/x.svg") no-repeat center / contain; mask: url("../assets/icons/x.svg") no-repeat center / contain; }
.wa-chat__head :focus-visible { outline-color: var(--color-white); }

.wa-chat__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); }
.wa-chat__needs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.wa-chat__q { width: 100%; padding: 0 0 var(--space-2); font-weight: 600; font-size: var(--body-size); line-height: var(--body-lh); }
/* A need is a native radio; its label is the chip. */
.wa-chat__need { position: relative; display: inline-flex; }
.wa-chat__need input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wa-chat__need span { display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-black); font-size: var(--body-size); line-height: var(--body-lh); transition: background-color .2s ease; }
.wa-chat__need input:checked + span { background: var(--color-primary); font-weight: 600; }
.wa-chat__need input:focus-visible + span { outline: 2px solid var(--color-black); outline-offset: 2px; }
@media (hover: hover) { .wa-chat__need input:not(:checked):hover + span { background: var(--surface-beige); } }

.wa-chat__form { display: flex; flex-direction: column; gap: var(--space-2); }
.wa-chat__label { font-size: var(--caption-size); line-height: var(--caption-lh); font-weight: 600; }
.wa-chat__msg { width: 100%; min-height: 96px; padding: var(--space-3); border: 1px solid var(--color-black); background: var(--color-white); color: var(--color-black); font-family: var(--font-body); font-size: var(--body-size); line-height: var(--body-lh); resize: vertical; }
.wa-chat__send { min-height: 48px; margin-top: var(--space-2); padding: var(--space-3) var(--space-6); }

@media (max-width: 640px) {
  .wa-fab { right: var(--space-4); bottom: var(--space-4); }
  .wa-chat { inset: auto var(--space-4) var(--space-24) var(--space-4); width: auto; max-width: none; }
}
@media print { .wa-fab, .wa-chat { display: none; } }