/* KwickBlocks booking widget — self-contained, themeable.
   Override any --bk-* variable from the host site (e.g. map them to your theme.css tokens). */
.bk {
  --bk-accent: var(--brand-accent, #4f46e5);
  --bk-accent-contrast: #ffffff;
  --bk-bg: var(--surface, #ffffff);
  --bk-panel: var(--surface-2, #f8fafc);
  --bk-border: var(--border, #e2e8f0);
  --bk-text: var(--text, #0f172a);
  --bk-muted: var(--text-muted, #64748b);
  --bk-radius: 14px;
  --bk-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);

  box-sizing: border-box;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  color: var(--bk-text);
  background: var(--bk-bg);
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius);
  box-shadow: var(--bk-shadow);
  overflow: hidden;
  /* Inherit the host site's typeface. Override with --bk-font if you want a specific face. */
  font-family: var(--bk-font, inherit);
}
.bk *,
.bk *::before,
.bk *::after { box-sizing: border-box; }

.bk__head {
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--bk-accent), color-mix(in srgb, var(--bk-accent) 65%, #000 15%));
  color: var(--bk-accent-contrast);
}
.bk__logo { height: 30px; width: auto; display: block; margin: 0 0 12px; }
.bk__brand {
  font-family: var(--bk-brand-font, inherit);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-align: center;
  margin: 0 0 14px;
}
.bk__title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.bk__subtitle { margin: 4px 0 0; font-size: 13px; opacity: 0.95; }

.bk__body { padding: 20px 24px 24px; }

.bk__status {
  padding: 28px 12px;
  text-align: center;
  color: var(--bk-muted);
  font-size: 14px;
}
.bk__spinner {
  width: 26px; height: 26px; margin: 0 auto 12px;
  border: 3px solid var(--bk-border);
  border-top-color: var(--bk-accent);
  border-radius: 50%;
  animation: bk-spin 0.8s linear infinite;
}
@keyframes bk-spin { to { transform: rotate(360deg); } }

/* Day chips */
.bk__days {
  display: flex; gap: 8px; overflow-x: auto;
  padding-bottom: 8px; margin-bottom: 4px;
  scrollbar-width: thin;
}
.bk__day {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--bk-border);
  background: var(--bk-panel);
  color: var(--bk-text);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}
.bk__day:hover { transform: translateY(-1px); }
.bk__day.is-active {
  background: var(--bk-accent);
  color: var(--bk-accent-contrast);
  border-color: var(--bk-accent);
}

/* Slot grid */
.bk__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.bk__slot {
  padding: 11px 8px;
  border-radius: 10px;
  border: 1px solid var(--bk-border);
  background: var(--bk-bg);
  color: var(--bk-text);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.bk__slot:hover {
  transform: translateY(-1px);
  border-color: var(--bk-accent);
  background: color-mix(in srgb, var(--bk-accent) 8%, var(--bk-bg));
}
.bk__slot.is-selected {
  background: var(--bk-accent);
  color: var(--bk-accent-contrast);
  border-color: var(--bk-accent);
}
.bk__empty { color: var(--bk-muted); font-size: 14px; padding: 18px 4px; }

/* Form */
.bk__form { margin-top: 18px; display: grid; gap: 12px; }
.bk__selected {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bk-panel);
  border: 1px solid var(--bk-border);
  font-size: 14px; font-weight: 600;
}
.bk__field { display: grid; gap: 6px; }
.bk__label { font-size: 12px; font-weight: 600; color: var(--bk-muted); }
.bk__input, .bk__textarea {
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--bk-border);
  background: var(--bk-bg);
  color: var(--bk-text);
  font-size: 14px;
  font-family: inherit;
}
.bk__input:focus, .bk__textarea:focus {
  outline: none;
  border-color: var(--bk-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bk-accent) 22%, transparent);
}
.bk__textarea { resize: vertical; min-height: 72px; }
.bk__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bk__captcha { margin-top: 2px; }

.bk__actions { display: flex; gap: 10px; margin-top: 4px; }
.bk__btn {
  appearance: none;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--bk-accent);
  background: var(--bk-accent);
  color: var(--bk-accent-contrast);
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.12s ease;
}
.bk__btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.bk__btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.bk__btn--ghost {
  background: transparent;
  color: var(--bk-text);
  border-color: var(--bk-border);
}
.bk__error { color: #b91c1c; font-size: 13px; margin-top: 4px; }

/* Confirmation */
.bk__done { text-align: center; padding: 12px 8px 6px; }
.bk__check {
  width: 54px; height: 54px; margin: 0 auto 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bk-accent) 15%, var(--bk-bg));
  color: var(--bk-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800;
}
.bk__done h3 { margin: 0 0 6px; font-size: 18px; }
.bk__done p { margin: 0 0 14px; color: var(--bk-muted); font-size: 14px; }

@media (prefers-color-scheme: dark) {
  .bk {
    --bk-bg: var(--surface, #0f172a);
    --bk-panel: var(--surface-2, #1e293b);
    --bk-border: var(--border, #334155);
    --bk-text: var(--text, #e2e8f0);
    --bk-muted: var(--text-muted, #94a3b8);
  }
}