/* SUNDUQ v310 — шаг «Место и даты».
 *
 * Календарь помещается в ширину карточки на любом экране: сетка семи
 * колонок построена на minmax(0,1fr), поэтому ячейки сжимаются, а не
 * выталкивают страницу вбок. Горизонтальной прокрутки всей страницы на
 * телефоне быть не должно — это требование, а не пожелание.
 */

/* ── Выбор места ───────────────────────────────────────────── */

.bkPlaces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}

.bkPlace {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 88px;
  padding: 12px 14px;
  border: 1px solid #29485d;
  border-radius: 14px;
  background: #10293d;
  color: #eef7ff;
  text-align: left;
  cursor: pointer;
}
.bkPlace:hover:not(:disabled) { border-color: #3d7fa0; }
.bkPlace.is-active { border-color: #4fb0e0; background: #12405c; }
.bkPlace:disabled { opacity: .5; cursor: default; }
.bkPlace b { font-size: 15px; }
.bkPlace small { color: #8fb2c8; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }

.bkPlaceTags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.bkTag {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(79, 176, 224, .16);
  color: #9ad8f5;
  white-space: nowrap;
}
.bkTag--excl { background: rgba(255, 207, 141, .16); color: #ffcf8d; }
.bkTag--off  { background: rgba(255, 141, 156, .16); color: #ff8d9c; }

/* ── Шапка календаря ───────────────────────────────────────── */

.bkCalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
.bkCalHead b { font-size: 15px; }

.bkLegend { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 12px; font-size: 12px; color: #8fb2c8; }
.bkKey { display: inline-flex; align-items: center; gap: 6px; }
.bkKey::before {
  content: '';
  width: 12px; height: 12px;
  border-radius: 4px;
  border: 1px solid #29485d;
  background: #10293d;
}
.bkKey--free::before { background: #123a2a; border-color: #2f6b4a; }
.bkKey--held::before { background: #2e2410; border-color: #7a5a1f; }
.bkKey--busy::before { background: #2a1218; border-color: #5d2833; }
.bkKey--mine::before { background: #12405c; border-color: #4fb0e0; }

/* ── Сетка дней ────────────────────────────────────────────── */

.bkCal {
  display: grid;
  /* minmax(0,1fr) — ключевое: без нуля в минимуме ячейка не сжимается
     ниже своего содержимого и на узком экране растягивает страницу. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.bkDow {
  text-align: center;
  font-size: 11px;
  color: #6f96ad;
  padding: 2px 0 4px;
}
.bkGap { visibility: hidden; }

.bkDay {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;               /* палец, а не курсор */
  padding: 2px;
  border: 1px solid #29485d;
  border-radius: 10px;
  background: #10293d;
  color: #eef7ff;
  font-size: 14px;
  cursor: pointer;
}
.bkDay b { font-weight: 700; font-variant-numeric: tabular-nums; }
.bkDay i {
  position: absolute;
  right: 3px; bottom: 2px;
  font-style: normal;
  font-size: 10px;
  color: #7fd6a8;
}

.bkDay--free { background: #123a2a; border-color: #2f6b4a; }
.bkDay--held { background: #2e2410; border-color: #7a5a1f; }
.bkDay--busy { background: #2a1218; border-color: #5d2833; }
.bkDay--mine { background: #12405c; border-color: #4fb0e0; }

.bkDay:disabled { cursor: default; opacity: .75; }
.bkDay:hover:not(:disabled) { border-color: #4fb0e0; }
.bkDay.is-picked { outline: 2px solid #4fb0e0; outline-offset: -2px; }
.bkDay:focus-visible { outline: 2px solid #eef7ff; outline-offset: 1px; }

/* ── Мои брони ─────────────────────────────────────────────── */

.bkMine { margin-top: 20px; }
.bkMineHead { margin: 0 0 10px; font-size: 15px; }

.bkBooking {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid #22415a;
  border-radius: 12px;
  background: #10293d;
}
.bkBooking b { display: block; font-size: 14px; }
.bkBooking small { color: #8fb2c8; font-size: 13px; }
.bkBookingSide { display: flex; align-items: center; gap: 10px; }

.bkTimer {
  font-size: 13px;
  font-weight: 800;
  color: #ffcf8d;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bkTimer.bkExpired { color: #ff8d9c; }

@media (max-width: 640px) {
  .bkCal { gap: 3px; }
  .bkDay { min-height: 40px; font-size: 13px; border-radius: 8px; }
  .bkDay i { display: none; }          /* остаток мест не помещается — не тесним число */
  .bkLegend { gap: 8px; font-size: 11px; }
  .bkPlaces { grid-template-columns: 1fr; }
  .bkBookingSide { width: 100%; justify-content: space-between; }
}

/* ── Стоимость и оплата ────────────────────────────────────── */

.bkPay {
  margin: 18px 0 0;
  padding: 16px;
  border: 1px solid #2f6b4a;
  border-radius: 14px;
  background: #10301f;
}
.bkPay h3 { margin: 0 0 12px; font-size: 16px; }

.bkPayList {
  display: grid;
  grid-template-columns: minmax(90px, max-content) 1fr;
  gap: 6px 16px;
  margin: 0 0 12px;
  font-size: 14px;
}
.bkPayList dt { color: #8fb2c8; }
.bkPayList dd { margin: 0; color: #eef7ff; overflow-wrap: anywhere; }

.bkPayTotal {
  font-size: 18px;
  font-weight: 850;
  color: #7fd6a8;
  font-variant-numeric: tabular-nums;
}

.bkPayHold  { margin: 0 0 10px; color: #ffcf8d; font-size: 13px; }
.bkPayShort { margin: 0 0 10px; color: #ff8d9c; font-size: 13px; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .bkPayList { grid-template-columns: 1fr; gap: 2px 0; }
  .bkPayList dt { margin-top: 8px; }
}
/* v313A.6: links to immutable order / execution document. */
.bkDocs{display:block;margin-top:5px;font-size:12px;white-space:nowrap}
.bkDocs a{text-decoration:underline}