/* ============================================================
   Floating contact layer + seasonal modal.
   Network layout law: direct-text channels bottom-LEFT, live chat
   bottom-RIGHT, never stacked together. Popup is a CENTRE modal.
   ============================================================ */

/* ---------- left: direct-text channels ---------- */

.dock-left {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 70;
  display: grid; gap: .6rem;
}
.dock-left button {
  display: flex; align-items: center; gap: .6rem;
  min-height: 48px; padding: .6rem .95rem .6rem .6rem;
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--text); font-size: .92rem; font-weight: 600; color: #fff;
  box-shadow: 0 2px 6px rgba(19,28,58,.2), 0 12px 24px -12px rgba(19,28,58,.45);
  transition: transform .16s ease;
}
.dock-left button:hover { transform: translateY(-2px); }
.dock-left button i { width: 30px; height: 30px; border-radius: 999px; background: rgba(255,255,255,.2); display: grid; place-items: center; flex: none; }
.dock-left svg { width: 17px; height: 17px; display: block; }
.wa-btn { background: #1EA855; }
.wa-btn:hover { background: #17914A; }
.sms-btn { background: var(--navy); }
.sms-btn:hover { background: var(--navy-deep); }
@media (max-width: 560px) { .dock-left button span { display: none; } .dock-left button { padding: .6rem; } }

/* ---------- right: live chat ---------- */

.chat-fab {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 70;
  width: 62px; height: 62px; padding: 0; border: 0; cursor: pointer;
  background: none; border-radius: 20px; overflow: visible;
  filter: drop-shadow(0 3px 8px rgba(19,28,58,.28)) drop-shadow(0 14px 26px rgba(19,28,58,.32));
  transition: transform .18s ease;
}
.chat-fab:hover { transform: translateY(-2px) scale(1.03); }
.chat-fab svg { width: 62px; height: 62px; display: block; border-radius: 20px; }
.chat-fab .pip { position: absolute; right: -2px; top: -2px; width: 15px; height: 15px; border-radius: 999px; background: #1EA855; border: 2.5px solid var(--linen); }

.chat-panel {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 80;
  width: min(23rem, calc(100vw - 2rem));
  height: clamp(460px, 72vh, 580px);
  background: var(--card); border-radius: 16px; overflow: hidden;
  display: none; grid-template-rows: auto 1fr auto;
  box-shadow: 0 4px 12px rgba(19,28,58,.14), 0 30px 60px -24px rgba(19,28,58,.45);
}
.chat-panel[data-open="1"] { display: grid; }

.chat-head { background: var(--navy); color: var(--linen); padding: .9rem 1rem; display: flex; align-items: center; gap: .75rem; }
.chat-head svg { width: 42px; height: 42px; border-radius: 13px; flex: none; }
.chat-head b { display: block; font-family: var(--disp); font-weight: 700; font-size: .99rem; letter-spacing: -.02em; }
.chat-head span { display: block; font-size: .79rem; color: rgba(250,245,236,.72); }
.chat-head .who { flex: 1; min-width: 0; }
.chat-head .live { font-size: .72rem; color: #7FE0A5; display: flex; align-items: center; gap: .3rem; }
.chat-head .live::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #4ED483; }
.chat-close { background: none; border: 0; color: var(--linen); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: .25rem .35rem; min-height: 44px; min-width: 44px; }

.chat-log { padding: 1rem; overflow-y: auto; display: grid; gap: .7rem; align-content: start; background: var(--linen); }
.msg { max-width: 85%; padding: .7rem .9rem; border-radius: 13px; font-size: .93rem; line-height: 1.5; }
.msg.them { background: var(--card); border: 1px solid var(--hair); color: var(--char); justify-self: start; border-bottom-left-radius: 4px; }
.msg.me { background: var(--navy); color: var(--linen); justify-self: end; border-bottom-right-radius: 4px; }
.msg.note { background: var(--glacier-mist); border: 1px solid var(--glacier-pale); color: var(--navy); font-size: .87rem; justify-self: stretch; max-width: 100%; }
.msg.note a { color: var(--glacier-deep); font-weight: 600; }

.chat-compose { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--hair); background: var(--card); }
.chat-compose input { flex: 1; min-width: 0; font-family: var(--text); font-size: 16px; color: var(--char); background: var(--linen); border: 1px solid var(--hair-2); border-radius: 999px; padding: .7rem .95rem; }
.chat-compose button { flex: none; background: var(--glacier-deep); color: #fff; border: 0; border-radius: 999px; min-width: 46px; min-height: 46px; cursor: pointer; font-size: 1.05rem; }
.chat-compose button:hover { background: #17537F; }

@media (max-width: 560px) {
  .chat-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; }
  body[data-chat="open"] .dock-left, body[data-chat="open"] .chat-fab { display: none; }
}

/* ---------- centre modal ---------- */

.veil { position: fixed; inset: 0; z-index: 90; background: rgba(19,28,58,.55); display: none; place-items: center; padding: 1rem; }
.veil[data-open="1"] { display: grid; }
.offer {
  background: var(--linen); border-radius: 6px; width: min(34rem, 100%);
  max-height: calc(100dvh - 2rem); overflow-y: auto;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.5);
}
.offer-top { background: var(--navy); color: var(--linen); padding: 1.5rem 1.75rem; position: relative; }
.offer-top p { font-size: .88rem; color: var(--glacier-pale); font-weight: 600; }
.offer-top h2 { margin-top: .45rem; font-family: var(--disp); font-weight: 700; font-size: clamp(1.35rem, 3.4vw, 1.75rem); letter-spacing: -.03em; color: var(--linen); }
.offer-x { position: absolute; top: .6rem; right: .6rem; background: none; border: 0; color: rgba(250,245,236,.75); font-size: 1.5rem; line-height: 1; cursor: pointer; min-width: 44px; min-height: 44px; }
.offer-x:hover { color: #fff; }
.offer-body { padding: 1.5rem 1.75rem 1.75rem; display: grid; gap: .85rem; }
.offer-body > p { font-size: .98rem; color: var(--slate); line-height: 1.6; }
.offer-body label { font-size: .88rem; font-weight: 500; color: var(--slate); display: block; margin-bottom: .3rem; }
.offer-body input, .offer-body select { font-family: var(--text); font-size: 16px; color: var(--char); background: var(--card); border: 1px solid var(--hair-2); border-radius: 3px; padding: .8rem .9rem; width: 100%; }
.offer-body button[type="submit"] { width: 100%; }
.offer-body small { font-size: .82rem; color: var(--dim); line-height: 1.5; }
.offer-done { padding: 2rem 1.75rem; text-align: center; }
.offer-done b { display: block; font-family: var(--disp); font-weight: 700; font-size: 1.2rem; }
.offer-done p { margin-top: .6rem; font-size: .95rem; color: var(--slate); }

.hidden-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) { .chat-fab, .dock-left button { transition: none !important; } }