/* ============================================================
   BOOKING CALENDAR + CHECKOUT (booking-widget.js)
   Used on /ear-piercing, /booking, /manage-booking and the
   bookings admin page. Builds on the .booking-form look in
   lucky-pages.css.
   ============================================================ */
.bk-picker { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(14px, 2.4vw, 22px); align-items: start; }
@media (max-width: 760px) { .bk-picker { grid-template-columns: 1fr; } }
.bk-cal, .bk-slots { border: 2px solid var(--lc-line); background: #000; padding: clamp(10px, 2vw, 16px); }
.bk-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bk-cal-title { margin: 0; color: var(--lc-cream); font-size: 10px; letter-spacing: 1.5px; text-shadow: 2px 2px 0 var(--lc-pink-hot); }
.bk-cal-nav {
  min-width: 40px; min-height: 40px; border: 2px solid var(--lc-pink-hot); background: transparent;
  color: var(--lc-pink-soft); font-family: var(--lc-font); font-size: 9px; cursor: pointer;
}
.bk-cal-nav:hover, .bk-cal-nav:focus-visible { background: var(--lc-pink-hot); color: var(--lc-ink); outline: none; }
.bk-cal-week, .bk-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bk-cal-week span { color: var(--lc-acid); font-size: 7px; text-align: center; padding-bottom: 6px; }
.bk-day {
  display: grid; place-items: center; align-content: center; gap: 3px; min-height: 46px; padding: 2px;
  border: 2px solid transparent; font-family: var(--lc-font); font-size: 8px; color: #55556a; text-align: center;
}
.bk-day.empty { visibility: hidden; }
.bk-day.open { border-color: var(--lc-pink-hot); background: var(--lc-panel); color: var(--lc-cream); cursor: pointer; }
.bk-day.open:hover, .bk-day.open:focus-visible { background: var(--lc-pink-hot); color: var(--lc-ink); outline: none; }
.bk-day.open.picked { background: var(--lc-acid); border-color: var(--lc-acid); color: var(--lc-ink); }
.bk-day.booked { border-color: rgba(255, 60, 141, .35); background: repeating-linear-gradient(135deg, #12030a 0 6px, #000 6px 12px); color: var(--lc-pink-soft); }
.bk-day.booked b { font-weight: 400; text-decoration: line-through; text-decoration-color: var(--lc-pink-hot); }
.bk-day.booked small { font-size: 5px; letter-spacing: .5px; color: var(--lc-pink-hot); }
.bk-slots-title { margin: 0 0 12px; color: var(--lc-acid); font-size: 8px; line-height: 1.9; }
.bk-slot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.bk-slot {
  display: grid; gap: 4px; min-height: 48px; padding: 8px 6px; border: 2px solid var(--lc-line); background: var(--lc-panel);
  color: var(--lc-cream); font-family: var(--lc-font); font-size: 9px; cursor: pointer;
}
.bk-slot small { color: var(--lc-pink-soft); font-size: 6px; }
.bk-slot:hover, .bk-slot:focus-visible { border-color: var(--lc-pink-hot); outline: none; }
.bk-slot.picked { background: var(--lc-acid); border-color: var(--lc-acid); color: var(--lc-ink); }
.bk-slot.picked small { color: var(--lc-ink); }
.bk-slot-empty { margin: 0; color: var(--lc-pink-soft); font-size: 8px; line-height: 2.1; }
.bk-picker-note { grid-column: 1 / -1; margin: 0; min-height: 14px; color: var(--lc-pink-soft); font-size: 8px; line-height: 2; text-align: center; }

.bk-banner {
  max-width: 900px; margin: 0 auto 22px; padding: 14px 16px; border: 2px dashed var(--lc-pink-hot); background: #12030a;
  color: var(--lc-cream); font-size: 8px; line-height: 2.2; text-align: center;
}
.bk-banner b { color: var(--lc-acid); font-weight: 400; }

/* the toggle buttons (service / location) */
.bk-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.bk-choices legend { margin-bottom: 10px; padding: 0; color: var(--lc-acid); font-size: 8px; line-height: 1.9; }
.bk-choice { position: relative; display: block; }
.bk-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bk-choice span {
  display: grid; gap: 6px; height: 100%; padding: 14px; border: 2px solid var(--lc-line); background: #000;
  color: var(--lc-cream); font-size: 8px; line-height: 1.9;
}
.bk-choice span b { color: var(--lc-pink-soft); font-weight: 400; font-size: 9px; }
.bk-choice span i { color: var(--lc-acid); font-style: normal; }
.bk-choice input:checked + span { border-color: var(--lc-acid); box-shadow: 0 0 0 2px var(--lc-acid) inset; }
.bk-choice input:focus-visible + span { outline: 2px solid var(--lc-pink-hot); outline-offset: 2px; }

.bk-summary {
  display: grid; gap: 8px; margin: 0; padding: 16px; border: 2px solid var(--lc-pink-hot); background: var(--lc-panel);
  color: var(--lc-cream); font-size: 8px; line-height: 2;
}
.bk-summary p { margin: 0; }
.bk-summary b { color: var(--lc-acid); font-weight: 400; }
.bk-total { font-size: 12px !important; color: var(--lc-acid); }
.bk-pay { display: grid; gap: 10px; max-width: 420px; width: 100%; margin: 0 auto; }
.bk-pay-buttons { min-height: 10px; }
.bk-pay-fine { margin: 0; color: #9a9aae; font-size: 7px; line-height: 2; text-align: center; }
.bk-done { display: grid; gap: 12px; padding: 20px; border: 2px solid var(--lc-acid); background: #000; color: var(--lc-cream); font-size: 8px; line-height: 2.2; text-align: center; }
.bk-done h3 { margin: 0; color: var(--lc-acid); font-size: 12px; line-height: 1.6; }
.bk-done a { color: var(--lc-pink-soft); word-break: break-all; }
.bk-or { margin: 6px 0; color: var(--lc-pink-soft); font-size: 8px; text-align: center; }
[hidden] { display: none !important; }