/* Live group call booking widget (js/group-call.js).
   Layers on gi-landing.css tokens and buttons. Namespaced gc- so it sits on the
   safari page, its thank-you page and /direct-booking-system without collisions.
   The widget is a white card, so it reads the same on light and navy sections.
   No em or en dashes anywhere in this file. */

.gc {
  position: relative; min-width: 0;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(1.15rem, 3.5vw, 1.6rem);
  box-shadow: 0 24px 60px rgba(22, 20, 31, 0.12);
  /* the script scrolls a booking result into view below the sticky header */
  scroll-margin-top: calc(var(--nav-h, 66px) + 1rem);
}
.gc [hidden] { display: none !important; }
.gc__view { min-width: 0; }
.gc__title { font-size: 1.2rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.gc__title:focus, .gc__done:focus, .gc__msg p:focus { outline: none; }

/* the "open soon" fallback (static HTML, also the no-JS state) */
.gc__soon-k { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet); }
.gc__soon-h { font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin-top: 0.35rem; }
.gc__soon-p { color: var(--muted); margin-top: 0.5rem; font-size: 0.97rem; }
.gc .btn { margin-top: 0; }
.gc__soon .btn { margin-top: 1rem; width: 100%; white-space: normal; text-align: center; }

.gc__notice {
  margin-bottom: 0.9rem; padding: 0.7rem 0.9rem; border-radius: 12px; font-size: 0.92rem; font-weight: 500;
  color: #7a3b00; background: #fff4e0; border: 1px solid #f2c57c;
}
.gc__msg p { color: var(--ink); font-size: 0.98rem; }
/* the loading line takes the title's line box, so the slot list replaces it in place */
.gc__loading { display: flex; align-items: center; gap: 0.6rem; color: var(--muted); }
.gc__loading::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid rgba(108, 43, 242, 0.2); border-top-color: var(--violet);
  animation: gc-spin 0.8s linear infinite;
}
@keyframes gc-spin { to { transform: rotate(360deg); } }
.gc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 1rem; }
.gc__retry, .gc__change {
  min-height: 44px; padding: 0 0.2rem; font-weight: 600; font-size: 0.9rem; color: var(--violet-deep);
  text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer;
}

/* ---------- slot list ---------- */
.gc__zone { color: var(--muted); font-size: 0.84rem; margin-top: 0.3rem; }
.gc__slots { list-style: none; display: grid; gap: 0.5rem; margin: 0.9rem 0 0; padding: 0; }
.gc__slot, .gc__skelrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.8rem; row-gap: 0.1rem;
  width: 100%; min-height: 56px; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  padding: 0.7rem 0.9rem; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--line);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.gc__slot:hover:not(:disabled) { border-color: var(--violet); background: var(--violet-soft); }
.gc__slot:focus-visible { outline: 3px solid #8f6bff; outline-offset: 2px; }
.gc__when { grid-column: 1; font-weight: 600; font-size: 0.95rem; line-height: 1.3; overflow-wrap: anywhere; }
.gc__eat, .gc__stitle { grid-column: 1; color: var(--muted); font-size: 0.84rem; line-height: 1.35; overflow-wrap: anywhere; }
/* every pill is at least as wide as "20 seats left", so a Full row wraps its
   time like the rows around it and the placeholder rows match them all */
.gc__seats {
  grid-column: 2; grid-row: 1 / span 3; align-self: center; white-space: nowrap;
  min-width: 5.8rem; text-align: center;
  font-size: 0.8rem; font-weight: 600; color: var(--wa-deep);
  background: rgba(31, 179, 85, 0.1); border-radius: 999px; padding: 0.25rem 0.6rem;
}
.gc__seats.is-few { color: #8a4b00; background: #fff1d6; }
.gc__seats.is-full { color: var(--muted); background: rgba(22, 20, 31, 0.07); }
.gc__slot:disabled { cursor: not-allowed; opacity: 0.62; background: #fff; }
.gc__slot:disabled .gc__when { text-decoration: line-through; text-decoration-thickness: 1px; }

/* placeholder rows while slots load: a real row's box (the shared rule above) and
   text styles, with the sample call time hidden behind bars. The bars are sized in
   the background, never on the text box, so the hidden text wraps like a real row. */
.gc__skel { animation: gc-pulse 1.6s ease-in-out infinite; }
@keyframes gc-pulse { 50% { opacity: 0.55; } }
.gc__skelrow { cursor: default; -webkit-user-select: none; user-select: none; }
.gc__skelrow .gc__when, .gc__skelrow .gc__eat {
  color: transparent;
  background: linear-gradient(rgba(22, 20, 31, 0.08), rgba(22, 20, 31, 0.08)) no-repeat left center / 72% 0.72em;
}
.gc__skelrow .gc__eat { background-size: 44% 0.72em; }
.gc__skelrow .gc__seats { color: transparent; background: rgba(22, 20, 31, 0.06); }

/* ---------- booking form ---------- */
.gc__chosen {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap;
  margin-top: 0.8rem; padding: 0.6rem 0.85rem; border-radius: 12px;
  background: var(--violet-soft); border: 1px solid rgba(108, 43, 242, 0.25);
}
.gc__chosen > div { min-width: 0; }
.gc__chosen-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet-deep); }
.gc__chosen-when { font-weight: 600; font-size: 0.93rem; overflow-wrap: anywhere; }
.gc__field { margin-top: 0.85rem; min-width: 0; }
.gc__label { display: block; font-weight: 600; font-size: 0.88rem; line-height: 1.35; margin-bottom: 0.4rem; color: var(--ink); }
.gc__label small { font-weight: 400; font-size: 0.8rem; color: var(--muted); }
.gc input[type="text"], .gc input[type="email"], .gc input[type="tel"], .gc select {
  width: 100%; min-width: 0; min-height: 48px; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 0.65rem 0.8rem; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gc input:focus, .gc select:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(108, 43, 242, 0.18); }
.gc .intl-phone { display: flex; gap: 0.4rem; min-width: 0; }
.gc .intl-phone select { flex: none; width: 7.2rem; padding-left: 0.55rem; padding-right: 0.3rem; }
.gc .intl-phone input { flex: 1; min-width: 0; }
.gc__help { display: block; color: var(--muted); font-size: 0.8rem; line-height: 1.45; margin-top: 0.3rem; }
.gc__err { color: #b3261e; font-size: 0.83rem; font-weight: 500; margin-top: 0.3rem; }
.gc__err:empty { display: none; }
.gc__field.is-bad input, .gc__field.is-bad select { border-color: #c0392b; }
.gc__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gc__submit { display: flex; width: 100%; margin-top: 1.1rem !important; padding: 0.95rem 1.1rem; font-size: 1rem; white-space: normal; text-align: center; }
.gc__submit:disabled { opacity: 0.7; cursor: progress; }
.gc__status { color: #a5301f; font-size: 0.88rem; font-weight: 500; margin-top: 0.7rem; }
.gc__status:empty { margin: 0; }
.gc__wa-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--wa-deep); text-decoration: underline; text-underline-offset: 3px; }
.gc__fine { color: var(--muted); font-size: 0.8rem; text-align: center; margin-top: 0.6rem; }

/* ---------- booked ---------- */
.gc__done { text-align: left; }
.gc__tick {
  width: 48px; height: 48px; border-radius: 50%; margin-bottom: 0.7rem;
  background: rgba(31, 179, 85, 0.14); border: 1px solid rgba(31, 179, 85, 0.45); position: relative;
}
.gc__tick::after {
  content: ""; position: absolute; left: 17px; top: 11px; width: 11px; height: 20px;
  border: solid var(--wa-deep); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.gc__done p { color: var(--muted); margin-top: 0.45rem; font-size: 0.96rem; overflow-wrap: anywhere; }
.gc__done .gc__done-when { color: var(--ink); font-weight: 600; }
.gc__done .gc__done-line { color: var(--ink); font-size: 1.05rem; font-weight: 600; }
.gc__meet a { color: var(--violet-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Phones: the seats pill goes under the time lines. Beside them it leaves the
   time a column that some dates fill and others do not, so rows (and the
   placeholder rows before them) would differ in height with the date text. */
@media (max-width: 520px) {
  .gc__slot, .gc__skelrow { grid-template-columns: minmax(0, 1fr); }
  .gc__seats { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 0.3rem; }
}
@media (max-width: 400px) {
  .gc .intl-phone select { width: 6.4rem; }
  .gc__slot, .gc__skelrow { padding: 0.65rem 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gc__loading::before { animation-duration: 2.4s; }
  .gc__skel { animation: none; }
  .gc__slot { transition: none; }
}