/* book-widget.css — "Book Now" booking widget. Neutral/minimal, mobile-first.
   Prefixed bkw- to avoid collisions with site styles. Additive only. */
#bkw-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
  display: flex; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97); border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}
#bkw-bar a, #bkw-bar button {
  flex: 1; text-align: center; padding: 13px 8px; border-radius: 12px;
  font: 600 16px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  text-decoration: none; border: 0; cursor: pointer;
}
#bkw-call { background: #f3f4f6; color: #111827; }
#bkw-open { background: #16a34a; color: #fff; }
#bkw-trust {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9989;
  display: none;
}
#bkw-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 9990; display: none;
  padding: 14px 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: #16a34a; color: #fff;
  font: 600 16px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
@media (min-width: 768px) {
  #bkw-bar { display: none; }
  #bkw-fab { display: block; }
}
#bkw-overlay {
  position: fixed; inset: 0; z-index: 10000; display: none;
  background: rgba(0,0,0,.55); align-items: flex-end; justify-content: center;
}
#bkw-overlay.bkw-open { display: flex; }
@media (min-width: 768px) { #bkw-overlay { align-items: center; padding: 24px; } }
#bkw-modal {
  background: #fff; width: 100%; max-width: 430px; max-height: 92vh; overflow-y: auto;
  border-radius: 18px 18px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: #111827;
}
@media (min-width: 768px) { #bkw-modal { border-radius: 18px; } }
#bkw-modal h2 { font-size: 20px; margin: 0 0 4px; }
#bkw-modal .bkw-sub { font-size: 13px; color: #6b7280; margin: 0 0 14px; }
#bkw-close {
  float: right; border: 0; background: #f3f4f6; width: 34px; height: 34px;
  border-radius: 50%; font-size: 18px; cursor: pointer; color: #374151;
}
#bkw-steps { display: flex; gap: 6px; margin: 0 0 14px; }
#bkw-steps span { flex: 1; height: 4px; border-radius: 2px; background: #e5e7eb; }
#bkw-steps span.bkw-done { background: #16a34a; }
.bkw-opt {
  display: block; width: 100%; text-align: left; margin: 0 0 8px; padding: 13px 14px;
  border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; cursor: pointer;
  font-size: 15px; color: #111827;
}
.bkw-opt.bkw-sel { border-color: #16a34a; background: #f0fdf4; font-weight: 600; }
.bkw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.bkw-grid .bkw-opt { text-align: center; padding: 10px 4px; font-size: 13px; margin: 0; }
.bkw-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.bkw-times .bkw-opt { text-align: center; margin: 0; }
#bkw-modal label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; color: #374151; }
#bkw-modal input, #bkw-modal textarea {
  width: 100%; box-sizing: border-box; padding: 12px; font-size: 16px;
  border: 1px solid #d1d5db; border-radius: 10px;
}
#bkw-modal textarea { min-height: 64px; resize: vertical; }
#bkw-next, #bkw-back, #bkw-confirm {
  width: 100%; padding: 14px; margin-top: 14px; border: 0; border-radius: 12px;
  font-size: 16px; font-weight: 700; cursor: pointer;
}
#bkw-next, #bkw-confirm { background: #16a34a; color: #fff; }
#bkw-back { background: #f3f4f6; color: #374151; margin-top: 8px; }
#bkw-next:disabled, #bkw-confirm:disabled { background: #9ca3af; cursor: not-allowed; }
#bkw-err { color: #b91c1c; font-size: 13px; margin-top: 8px; min-height: 18px; }
#bkw-done-msg { text-align: center; padding: 18px 0; }
#bkw-done-msg .bkw-big { font-size: 46px; }
#bkw-hp { position: absolute; left: -9999px; top: -9999px; }
.bkw-trustline {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid #f3f4f6;
  font-size: 12.5px; color: #6b7280; text-align: center;
}
