/* Direct-booking widget. Sites can set --bk-accent, --bk-text, --bk-muted,
   --bk-border, --bk-soft and --bk-radius; defaults follow the host page's
   --primary-color etc. when present. Selectors are scoped under .bk so the
   host page's global button/input styles don't leak in. */

.bk {
  --bk-accent: var(--primary-color, #222);
  --bk-text: var(--text-color, #222);
  --bk-muted: var(--medium-gray, #717171);
  --bk-border: var(--border-color, #ddd);
  --bk-soft: var(--light-gray, #f7f7f7);
  --bk-radius: 8px;
  color: var(--bk-text);
  font-size: 14px;
}

.bk button {
  font: inherit;
  color: inherit;
  width: auto;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: none;
}
.bk button:hover { background: none; }
.bk button:disabled { background: none; cursor: default; }
.bk button:focus-visible { outline: 2px solid var(--bk-accent); outline-offset: 2px; }

.bk-notice {
  padding: 12px 14px;
  border-radius: var(--bk-radius);
  background: var(--bk-soft);
  border: 1px solid var(--bk-border);
  margin-bottom: 16px;
  line-height: 1.45;
}
.bk-notice-ok { background: #ecfdf3; border-color: #a6f4c5; color: #05603a; }

.bk-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius);
  overflow: hidden;
}
.bk .bk-field {
  display: block;
  text-align: left;
  padding: 10px 12px;
  font-size: 14px;
  min-height: 56px;
}
.bk .bk-field + .bk-field { border-left: 1px solid var(--bk-border); }
.bk .bk-field span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.bk .bk-field.bk-active { box-shadow: inset 0 0 0 2px var(--bk-text); border-radius: var(--bk-radius); }

.bk-hint { margin: 12px 0 8px; color: var(--bk-muted); min-height: 1.4em; }
.bk-hint.bk-hint-warn { color: #b54708; }

.bk-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.bk-cal-title { font-weight: 600; font-size: 15px; }
.bk .bk-nav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
}
.bk .bk-nav:hover:not(:disabled) { background: var(--bk-soft); }
.bk .bk-nav:disabled { opacity: 0.25; }

.bk-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 2px;
  text-align: center;
}
.bk-wd { font-size: 11px; font-weight: 600; color: var(--bk-muted); padding: 4px 0; }
.bk .bk-day {
  aspect-ratio: 1;
  min-height: 36px;
  border-radius: 50%;
  font-size: 14px;
  position: relative;
}
.bk .bk-day:hover:not(.bk-off) { box-shadow: inset 0 0 0 1px var(--bk-text); }
.bk .bk-day.bk-off { color: var(--bk-muted); opacity: 0.45; cursor: default; }
.bk .bk-day.bk-booked { text-decoration: line-through; }
.bk .bk-day.bk-today { font-weight: 700; }
.bk .bk-day.bk-in { background: var(--bk-soft); border-radius: 0; color: var(--bk-text); opacity: 1; }
.bk .bk-day.bk-start,
.bk .bk-day.bk-end { background: var(--bk-text); color: #fff; opacity: 1; }

.bk-summary { margin-top: 16px; }
.bk-rows { border-top: 1px solid var(--bk-border); padding-top: 12px; }
.bk-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; color: var(--bk-muted); }
.bk-row.bk-due { color: var(--bk-text); font-weight: 600; }
.bk-row.bk-total {
  border-top: 1px solid var(--bk-border);
  margin-top: 8px;
  padding-top: 10px;
  color: var(--bk-text);
  font-weight: 600;
}
.bk-muted { color: var(--bk-muted); margin: 0; }

.bk .bk-book {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  border-radius: var(--bk-radius);
  background: var(--bk-accent);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
.bk .bk-book:hover:not(:disabled) { filter: brightness(0.95); background: var(--bk-accent); }
.bk .bk-book:disabled { background: var(--bk-border); color: var(--bk-muted); }

.bk-error { color: #b42318; margin: 10px 0 0; }
.bk-fine { color: var(--bk-muted); font-size: 12px; margin: 12px 0 0; line-height: 1.45; }