/* ============================================================
   Резервации — визитен интерфейс (календар, часове, формуляр,
   потвърждение и управление). Всички класове с префикс bk-.
   Ползва дизайн-променливите от main.css; не пре-стилизира чужди класове.
   ============================================================ */

.bk-app { font-family: var(--font-sans); color: var(--ink); padding: 6px 14px 4px; }

/* Известие над съдържанието (напр. „часът е зает") */
.bk-notice {
  margin: 0 0 14px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: #f7e7e1;
  border: 1px solid #b0654c;
  color: #8a4630;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---------- Формат (кабинет / онлайн) ---------- */

.bk-loc { margin-bottom: 20px; }
.bk-loc__head {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tan-600);
  margin-bottom: 10px;
}
.bk-seg {
  display: inline-flex;
  gap: 4px;
  background: var(--cream-200);
  border: 1px solid var(--sand-300);
  border-radius: 999px;
  padding: 4px;
}
.bk-seg__btn {
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 9px 20px;
  min-height: 40px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.bk-seg__btn:hover { color: var(--green-900); }
.bk-seg__btn.is-active { background: var(--green-900); color: var(--cream-100); }
.bk-loc__single {
  display: inline-block;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--green-900);
  background: var(--green-100);
  border-radius: 999px;
  padding: 8px 18px;
}
.bk-loc__note { margin: 10px 0 0; font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- Календар ---------- */

.bk-cal { margin-bottom: 22px; }
.bk-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.bk-cal__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  text-transform: capitalize;
  text-align: center;
  flex: 1;
}
.bk-cal__nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--sand-300);
  background: var(--white);
  color: var(--green-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.bk-cal__nav:hover:not(:disabled) { background: var(--green-900); border-color: var(--green-900); color: var(--cream-100); }
.bk-cal__nav:disabled { opacity: 0.35; cursor: default; }
.bk-cal__nav .ms { font-size: 1.35rem; }

.bk-cal__dow,
.bk-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.bk-cal__dow {
  margin-bottom: 8px;
}
.bk-cal__dow span {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.75;
}

.bk-day {
  aspect-ratio: 1 / 1;
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.bk-day--blank { background: transparent; border: 0; cursor: default; }
.bk-day.is-free { background: var(--cream-200); border-color: rgba(200, 178, 157, 0.5); color: var(--green-900); }
.bk-day.is-free:hover { background: var(--green-100); border-color: var(--green-700); transform: translateY(-1px); }
.bk-day.is-muted { color: var(--sand-400); background: transparent; cursor: default; opacity: 0.75; }
.bk-day.is-today { box-shadow: inset 0 0 0 1.5px var(--green-700); }
.bk-day.is-selected,
.bk-day.is-selected:hover {
  background: var(--green-900);
  border-color: var(--green-900);
  color: var(--cream-100);
  box-shadow: var(--shadow-soft);
}

.bk-cal__none { margin: 14px 0 0; text-align: center; font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- Часове ---------- */

.bk-times { margin-bottom: 6px; }
.bk-times__title {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 12px;
}
/* само първата буква главна — запазва „септември" и „г." малки */
.bk-times__title::first-letter { text-transform: uppercase; }
.bk-times__hint,
.bk-times__empty { font-size: 0.9rem; color: var(--ink-soft); margin: 4px 0; }
.bk-times__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.bk-slot {
  min-height: 44px;
  padding: 11px 8px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--sand-300);
  background: var(--white);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--green-900);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.bk-slot:hover { border-color: var(--green-700); transform: translateY(-1px); }
.bk-slot.is-selected { background: var(--green-900); border-color: var(--green-900); color: var(--cream-100); }

/* ---------- Състояния (зареждане / грешка) ---------- */

.bk-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 16px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-align: center;
}
.bk-state--err { color: #8a4630; flex-wrap: wrap; }
.bk-retry {
  border: 1.5px solid var(--green-700);
  background: transparent;
  color: var(--green-900);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.bk-retry:hover { background: var(--green-900); color: var(--cream-100); border-color: var(--green-900); }
.bk-spin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--green-100);
  border-top-color: var(--green-700);
  display: inline-block;
  animation: bkSpin 0.8s linear infinite;
}
@keyframes bkSpin { to { transform: rotate(360deg); } }

/* ---------- Формуляр ---------- */

.bk-details { margin-top: 22px; border-top: 1px solid rgba(200, 178, 157, 0.35); padding-top: 22px; }
.bk-form { display: grid; gap: 16px; }
.bk-summary {
  background: var(--green-100);
  color: var(--green-900);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.5;
}
.bk-form .form-field { margin: 0; }
.bk-form label { display: block; font-size: 0.82rem; font-weight: 700; margin-bottom: 8px; }
.bk-invalid { border-color: #b0654c !important; background: #fdf4f1 !important; }
.bk-field-err { color: #8a4630; font-size: 0.8rem; font-weight: 600; margin-top: 6px; }
.bk-form__err {
  background: #f7e7e1;
  border: 1px solid #b0654c;
  color: #8a4630;
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: 0.9rem;
  font-weight: 600;
}
.bk-submit { margin-top: 4px; }
.bk-submit:disabled { opacity: 0.7; cursor: default; }

/* Скрит honeypot — далеч от екрана, недостъпен за клавиатура */
.bk-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Потвърждение ---------- */

.bk-confirm { text-align: center; margin-top: 8px; }
.bk-confirm__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cream-200), var(--green-100));
  border: 1px solid rgba(113, 129, 106, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bk-confirm__icon .ms { font-size: 2rem; color: var(--green-800); }
.bk-confirm__title { margin-bottom: 10px; }
.bk-confirm__pending {
  display: inline-block;
  background: var(--sand-300);
  color: var(--tan-600);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0 0 14px;
}
.bk-confirm__svc { font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.bk-confirm__when {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--green-900);
  margin: 0 0 12px;
}
.bk-confirm__loc { font-size: 0.95rem; color: var(--ink-soft); margin: 0 0 18px; }
.bk-confirm__loc .ms-in { color: var(--green-700); }
.bk-confirm__note { font-size: 0.88rem; margin: 0 auto 22px; max-width: 440px; }
.bk-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 16px;
}
.bk-confirm__manage { margin: 0; font-size: 0.9rem; }
.bk-confirm__manage a { text-decoration: underline; }

/* ---------- Управление на резервация (manage.php) ---------- */

.bk-manage-card { max-width: 640px; margin: 0 auto; }
.bk-manage-card--center { text-align: center; }
.bk-manage-loading { text-align: center; padding: 40px 0; }
.bk-manage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.bk-manage-head .eyebrow { margin-bottom: 0; }
.bk-status {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
}
.bk-status--confirmed { background: var(--green-100); color: var(--green-900); }
.bk-status--pending { background: var(--sand-300); color: var(--tan-600); }
.bk-status--cancelled { background: #f7e7e1; color: #8a4630; }
.bk-manage-svc { margin: 0 0 6px; }
.bk-manage-when {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--green-900);
  margin: 0 0 8px;
}
.bk-manage-loc { font-size: 0.95rem; color: var(--ink-soft); margin: 0 0 4px; }
.bk-manage-loc .ms-in { color: var(--green-700); }
.bk-manage-who { font-size: 0.9rem; margin: 0; }
.bk-manage-moved {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--green-100);
  color: var(--green-900);
  border-radius: var(--radius-sm);
  padding: 11px 16px;
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 0 18px;
}
.bk-manage-moved .ms-in { color: var(--green-700); }
.bk-manage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.bk-manage-actions--done {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8a4630;
  font-weight: 700;
  font-size: 0.92rem;
}
.bk-manage-confirm { margin-top: 24px; }
.bk-manage-confirm > p { font-weight: 700; }
.bk-manage-policy { margin-top: 22px; }
.bk-manage-sub { margin: 24px 0 16px; font-size: 1.2rem; }
.bk-danger { background: #a8503a; box-shadow: 0 10px 22px rgba(168, 80, 58, 0.22); }
.bk-danger:hover { background: #8a4630; color: var(--white); }
.bk-manage-err {
  background: #f7e7e1;
  border: 1px solid #b0654c;
  color: #8a4630;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  margin: 14px 0;
}
.bk-move-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--green-100);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 16px 0;
}
.bk-move-bar__txt { font-weight: 700; color: var(--green-900); font-size: 0.9rem; }
.bk-move-back { margin-top: 4px; }

/* ---------- Мобилно: календар на цяла ширина, часове 3 колони ---------- */

@media (max-width: 720px) {
  .bk-app { padding: 6px 4px 4px; }
  .bk-cal__dow, .bk-cal__grid { gap: 4px; }
  .bk-day { font-size: 1rem; }
  .bk-times__grid { grid-template-columns: repeat(3, 1fr); }
  .bk-confirm__actions .btn { width: 100%; }
  .bk-manage-actions .btn { flex: 1 1 auto; }
}

/* ---------- Уважение към „по-малко движение" ---------- */

@media (prefers-reduced-motion: reduce) {
  .bk-day.is-free:hover,
  .bk-slot:hover { transform: none; }
  .bk-spin { animation-duration: 1.6s; }
}