/* =========================================================
   ZB Digital · Booking calendar
   The final step of apply.html. Reads live availability from
   /api/slots and writes the appointment through /api/book, so
   nothing shown here is invented: every slot came back from the
   calendar itself moments earlier.

   If those functions are not deployed the widget stands down and
   apply.js mounts the original GoHighLevel iframe instead, so the
   booking flow never depends on this file existing.
   ========================================================= */

.bk {
  margin-top: 24px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    0 40px 80px -56px rgba(16, 24, 40, 0.18);
}

/* --- header ------------------------------------------------ */
.bk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding: clamp(18px, 2.2vw, 24px) clamp(18px, 2.4vw, 28px);
  border-bottom: 1px solid var(--line);
}
.bk-title { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.bk-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.bk-meta .i { font-size: 13px; color: var(--accent); }

/* --- two panes --------------------------------------------- */
.bk-grid { display: grid; }
@media (min-width: 760px) {
  .bk-grid { grid-template-columns: minmax(0, 1fr) minmax(248px, 0.72fr); align-items: stretch; }
  .bk-times { border-left: 1px solid var(--line); border-top: 0; min-height: 0; }
}

/* --- month ------------------------------------------------- */
.bk-cal { padding: clamp(16px, 2vw, 24px) clamp(18px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px); }
.bk-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.bk-month { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.bk-arrows { display: flex; gap: 4px; }
.bk-arrow {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, opacity 180ms ease;
}
.bk-arrow .i { font-size: 15px; }
.bk-arrow[data-dir="prev"] .i { transform: rotate(180deg); }
.bk-arrow:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .bk-arrow:not(:disabled):hover { background: rgba(11, 18, 32, 0.05); color: var(--text); }
}
.bk-arrow:not(:disabled):active { transform: scale(0.94); }

.bk-dow, .bk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bk-dow { margin-bottom: 6px; }
.bk-dow span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-3);
}
.bk-days { gap: 2px; }
.bk-day {
  position: relative;
  aspect-ratio: 1;
  min-height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 170ms ease, color 170ms ease, box-shadow 170ms ease;
}
.bk-day:disabled { color: var(--text-3); opacity: 0.35; cursor: default; }
.bk-day[data-open="1"] { color: var(--text); font-weight: 500; }
/* a day with availability carries a mark, so the month reads at a glance */
.bk-day[data-open="1"]::after {
  content: "";
  position: absolute;
  bottom: 7px;
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0.55;
  transition: opacity 170ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .bk-day[data-open="1"]:hover { background: var(--surface-3); }
}
.bk-day[aria-pressed="true"] {
  background: var(--accent-fill);
  color: var(--on-accent);
  font-weight: 500;
}
.bk-day[aria-pressed="true"]::after { background: currentColor; opacity: 0.7; }
.bk-day:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* --- times -------------------------------------------------- */
.bk-times {
  display: flex;
  flex-direction: column;
  min-height: 320px;
  border-top: 1px solid var(--line);
}
.bk-times-head {
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 22px) 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.bk-slots {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 0 clamp(18px, 2.2vw, 22px) clamp(18px, 2.2vw, 22px);
  scrollbar-width: thin;
  /* A day holds sixty slots. Without a cap the column simply grew to 3134px
     and took the card with it, so the height is fixed at seven rows and the
     bottom edge fades to say there is more rather than slicing a row. */
  max-height: 372px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent 100%);
}
@media (max-width: 759px) { .bk-slots { max-height: 340px; } }
.bk-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: 14.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  cursor: pointer;
  transition: box-shadow 170ms ease, background-color 170ms ease, grid-template-columns 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .bk-slot:hover { box-shadow: inset 0 0 0 1px var(--accent-line); background: var(--surface-2); }
}
.bk-slot:active { transform: scale(0.99); }
.bk-slot:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* the chosen time splits in two and offers the confirm in place,
   so the decision and the commitment happen in one spot */
.bk-slot.is-picked {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding-right: 6px;
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.bk-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--on-accent);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), background-color 180ms ease;
}
.bk-slot.is-picked .bk-go { opacity: 1; transform: none; }
.bk-go .i { font-size: 13px; }
@media (hover: hover) and (pointer: fine) { .bk-go:hover { background: var(--accent-fill-hover); } }
.bk-go:active { transform: scale(0.97); }
.bk-go[aria-busy="true"] { opacity: 0.75; cursor: progress; }

/* --- states -------------------------------------------------- */
.bk-state {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  flex: 1;
  padding: 32px 22px;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
}
.bk-state .i { font-size: 22px; color: var(--accent); opacity: 0.55; }
.bk-state strong { display: block; font-weight: 500; color: var(--text-2); }

/* loading: three bars that breathe rather than a spinner */
.bk-skel { display: grid; gap: 8px; width: 100%; padding: 0 clamp(18px, 2.2vw, 22px); }
.bk-skel span {
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%);
  background-size: 200% 100%;
  animation: bk-shimmer 1.4s linear infinite;
}
.bk-skel span:nth-child(2) { animation-delay: 0.12s; }
.bk-skel span:nth-child(3) { animation-delay: 0.24s; }
@keyframes bk-shimmer { to { background-position: -200% 0; } }

/* --- timezone ------------------------------------------------ */
.bk-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px clamp(18px, 2.4vw, 28px);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-3);
}
.bk-tz {
  flex: 1;
  min-width: 0;
  max-width: 260px;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 0;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.bk-tz:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* --- booked -------------------------------------------------- */
.bk-done {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(34px, 5vw, 56px) 24px;
  text-align: center;
}
.bk-done-seal {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--on-accent);
  font-size: 26px;
  box-shadow: 0 18px 36px -16px rgba(31, 95, 240, 0.55);
}
.bk-done h3 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; letter-spacing: -0.03em; }
.bk-done p { max-width: 42ch; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.bk-done .bk-when {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.bk-err { color: #D92D20; }

@media (prefers-reduced-motion: reduce) {
  .bk-slot, .bk-go, .bk-day, .bk-arrow { transition-duration: 1ms; }
  .bk-skel span { animation: none; }
  .bk-go { opacity: 1; transform: none; }
}

/* apply.css sizes .ap-book for a 620px iframe. When this calendar is the
   thing inside it, the host should be a plain wrapper and let the card
   below own its own surface. */
.ap-book:has(.bk) {
  min-height: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.ap-book:has(.bk) .ap-book-wait { display: none; }
.ap-book .bk { margin-top: 0; }

/* apply.js hides the manual confirm once this calendar is live, but .btn sets
   display: inline-flex and an author rule beats the user agent's
   [hidden] { display: none }. So the attribute was set and the button kept
   painting. Match it here at higher specificity instead. */
.ap-confirm[hidden] { display: none; }

/* Touch. The arrows and the zone select sat at 36px and 34px, under the
   44px guideline. Keyed to the pointer rather than the width, because a
   tablet in the hand needs this as much as a phone does. */
@media (pointer: coarse) {
  .bk-arrow { width: 44px; height: 44px; }
  .bk-tz { height: 44px; }
  .bk-foot { padding-block: 12px; }
}