/* ============================================================================
   booking-widget.css — embedded slot picker for /contact + /book-manage.
   Scoped under .rrf-bk-* to avoid clashing with site styles. Uses the site's
   design tokens (variables.css) so it blends with the light warm theme.
   ============================================================================ */

.rrf-bk {
  --rrf-bk-radius: var(--radius-lg, 12px);
  margin-top: var(--space-12, 48px);
  border-top: 1px solid var(--color-border, rgba(15, 23, 42, 0.08));
  padding-top: var(--space-10, 40px);
}

.rrf-bk__head {
  margin-bottom: var(--space-6, 24px);
}

.rrf-bk__eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-caption, 0.75rem);
  letter-spacing: var(--ls-caps, 0.08em);
  text-transform: uppercase;
  color: var(--color-ink-56, rgba(15, 23, 42, 0.56));
  margin: 0 0 var(--space-2, 8px);
}

.rrf-bk__title {
  font-family: var(--font-display, sans-serif);
  font-size: var(--fs-h3, 1.5rem);
  font-weight: var(--fw-bold, 700);
  color: var(--color-ink, #0f172a);
  margin: 0 0 var(--space-2, 8px);
}

.rrf-bk__lede {
  font-size: var(--fs-body-sm, 0.875rem);
  color: var(--color-ink-72, rgba(15, 23, 42, 0.72));
  margin: 0;
}

.rrf-bk__status {
  font-size: var(--fs-body-sm, 0.875rem);
  color: var(--color-ink-56, rgba(15, 23, 42, 0.56));
  padding: var(--space-6, 24px) 0;
}

.rrf-bk__tz {
  font-size: var(--fs-caption, 0.75rem);
  color: var(--color-ink-40, rgba(15, 23, 42, 0.40));
  margin: 0 0 var(--space-4, 16px);
}

/* ── Day + slot grid ──────────────────────────────────────────────────────── */

.rrf-bk__days {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 20px);
}

.rrf-bk__day {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-4, 16px);
  align-items: start;
}

@media (max-width: 640px) {
  .rrf-bk__day { grid-template-columns: 1fr; gap: var(--space-2, 8px); }
}

.rrf-bk__day-label {
  font-size: var(--fs-body-sm, 0.875rem);
  font-weight: var(--fw-medium, 500);
  color: var(--color-ink-72, rgba(15, 23, 42, 0.72));
  padding-top: 6px;
}

.rrf-bk__slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

.rrf-bk__slot {
  appearance: none;
  border: 1px solid var(--color-border-strong, rgba(15, 23, 42, 0.16));
  background: var(--color-bg, #f5f0e6);
  color: var(--color-ink, #0f172a);
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-body-sm, 0.875rem);
  border-radius: var(--radius-md, 8px);
  padding: 8px 14px;
  cursor: pointer;
  transition: var(--transition-color, all 0.2s);
  min-height: 40px;
}

.rrf-bk__slot:hover {
  border-color: var(--color-accent, #1e3a5f);
  background: var(--color-accent-soft, rgba(30, 58, 95, 0.08));
}

.rrf-bk__slot[aria-pressed="true"] {
  background: var(--color-accent, #1e3a5f);
  border-color: var(--color-accent, #1e3a5f);
  color: #fff;
}

.rrf-bk__slot:focus-visible {
  outline: 2px solid var(--color-accent, #1e3a5f);
  outline-offset: 2px;
}

/* ── Inline confirm form ──────────────────────────────────────────────────── */

.rrf-bk__form {
  margin-top: var(--space-6, 24px);
  border: 1px solid var(--color-border, rgba(15, 23, 42, 0.08));
  border-radius: var(--rrf-bk-radius);
  background: var(--color-surface, #efe9dc);
  padding: var(--space-6, 24px);
}

.rrf-bk__form[hidden] { display: none; }

.rrf-bk__chosen {
  font-size: var(--fs-body-sm, 0.875rem);
  font-weight: var(--fw-medium, 500);
  color: var(--color-ink, #0f172a);
  margin: 0 0 var(--space-5, 20px);
}

.rrf-bk__chosen b { color: var(--color-accent, #1e3a5f); }

.rrf-bk__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-4, 16px);
}

.rrf-bk__field label {
  font-size: var(--fs-body-sm, 0.875rem);
  font-weight: var(--fw-medium, 500);
  color: var(--color-ink-72, rgba(15, 23, 42, 0.72));
}

.rrf-bk__field input,
.rrf-bk__field textarea {
  font-family: var(--font-body, sans-serif);
  font-size: var(--fs-body, 1rem);
  color: var(--color-ink, #0f172a);
  background: var(--color-bg, #f5f0e6);
  border: 1px solid var(--color-border-strong, rgba(15, 23, 42, 0.16));
  border-radius: var(--radius-md, 8px);
  padding: 10px 12px;
  min-height: 44px;
}

.rrf-bk__field textarea { min-height: 80px; resize: vertical; }

.rrf-bk__field input:focus,
.rrf-bk__field textarea:focus {
  outline: none;
  border-color: var(--color-accent, #1e3a5f);
  box-shadow: 0 0 0 3px var(--color-accent-soft, rgba(30, 58, 95, 0.08));
}

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

.rrf-bk__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4, 16px);
  margin-top: var(--space-5, 20px);
}

.rrf-bk__btn {
  appearance: none;
  border: none;
  background: var(--color-accent, #1e3a5f);
  color: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: var(--fs-body-sm, 0.875rem);
  font-weight: var(--fw-medium, 500);
  border-radius: var(--radius-md, 8px);
  padding: 11px 22px;
  cursor: pointer;
  min-height: 44px;
  transition: var(--transition-base, all 0.2s);
}

.rrf-bk__btn:hover { background: var(--color-accent-hover, #14306b); }
.rrf-bk__btn:disabled { opacity: 0.55; cursor: not-allowed; }

.rrf-bk__btn--ghost {
  background: transparent;
  color: var(--color-ink-72, rgba(15, 23, 42, 0.72));
  border: 1px solid var(--color-border-strong, rgba(15, 23, 42, 0.16));
}
.rrf-bk__btn--ghost:hover { background: var(--color-accent-soft, rgba(30, 58, 95, 0.08)); }

.rrf-bk__btn--danger { background: var(--color-error, #dc2626); }
.rrf-bk__btn--danger:hover { background: #b91c1c; }

.rrf-bk__error {
  font-size: var(--fs-body-sm, 0.875rem);
  color: var(--color-error, #dc2626);
  margin: var(--space-4, 16px) 0 0;
}

.rrf-bk__done {
  text-align: center;
  padding: var(--space-10, 40px) var(--space-4, 16px);
}

.rrf-bk__done h3 {
  font-size: var(--fs-h4, 1.25rem);
  margin: 0 0 var(--space-3, 12px);
  color: var(--color-ink, #0f172a);
}

.rrf-bk__done p {
  font-size: var(--fs-body-sm, 0.875rem);
  color: var(--color-ink-72, rgba(15, 23, 42, 0.72));
  margin: 0 auto;
  max-width: 42ch;
}