/*
 * Booking Kit styles. Brand-agnostic: every colour comes from a variable, so a
 * site overrides --bk-accent and friends and nothing else. Flat colours only,
 * no gradients anywhere.
 */
:root {
  --bk-accent: #E5A3AD;
  --bk-accent-hover: #D88A97;
  --bk-accent-soft: rgba(229, 163, 173, 0.14);
  --bk-on-accent: #1A0E11;
  --bk-surface: #131315;
  --bk-border: rgba(255, 255, 255, 0.10);
  --bk-text: #E6E6EA;
  --bk-text-dim: #8A8A93;
  --bk-text-bright: #ffffff;

  --bk-slot-h: 42px;
  --bk-gap: 8px;
}

/* min-width 0 matters: without it these grids refuse to shrink below their
   content and shove the whole card past a phone viewport. */
.bk-days,
.bk-times { min-width: 0; }

.bk-days {
  display: grid;
  grid-template-columns: repeat(var(--bk-day-count, 5), minmax(0, 1fr));
  gap: var(--bk-gap);
  margin-bottom: 12px;
}

.bk-day {
  padding: 10px 8px;
  background: var(--bk-surface);
  border: 1px solid var(--bk-border);
  border-radius: 10px;
  color: var(--bk-text-dim);
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.bk-day b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--bk-text-bright);
}
.bk-day:hover { border-color: var(--bk-accent); }
.bk-day[aria-selected="true"] {
  background: var(--bk-accent-soft);
  border-color: var(--bk-accent);
  color: var(--bk-text-bright);
}

.bk-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--bk-gap);
}

.bk-slot {
  height: var(--bk-slot-h);
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bk-surface);
  border: 1px solid var(--bk-border);
  border-radius: 10px;
  color: var(--bk-text);
  font: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.bk-slot:hover { border-color: var(--bk-accent); }
.bk-slot[aria-selected="true"] {
  background: var(--bk-accent);
  border-color: var(--bk-accent);
  color: var(--bk-on-accent);
  font-weight: 700;
}

.bk-none {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 0;
  color: var(--bk-text-dim);
  font-size: 14px;
}

.bk-tz {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--bk-text-dim);
}
.bk-tz b { color: var(--bk-text); font-weight: 600; }

/* Call now ------------------------------------------------------------- */

.bk-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 20px;
  background: transparent;
  border: 1px solid var(--bk-accent);
  border-radius: 12px;
  color: var(--bk-accent);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.bk-call:hover { background: var(--bk-accent); color: var(--bk-on-accent); }

.bk-call-hours {
  margin: 8px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--bk-text-dim);
}

.bk-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  color: var(--bk-text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.bk-or::before,
.bk-or::after { content: ''; flex: 1; height: 1px; background: var(--bk-border); }

.bk-pill {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 998;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 19px;
  background: var(--bk-accent);
  color: var(--bk-on-accent);
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.bk-pill.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.bk-pill:hover { background: var(--bk-accent-hover); color: var(--bk-on-accent); }

@media (max-width: 600px) {
  .bk-days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-day { padding: 9px 4px; font-size: 12px; }
  .bk-day b { font-size: 14px; }
  .bk-times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-pill { right: 14px; bottom: 14px; padding: 12px 17px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-day, .bk-slot, .bk-call, .bk-pill { transition: none; }
}