/* ===========================================================================
   Публичното календарче за резервации — 05.08.2026
   ===========================================================================
   Влиза в секция „График". Ползва цветовете на сайта от style.css, не свои.

   Правилата за достъпност от одита важат и тук:
     · цел за пръст поне 44px (О13)
     · контраст на текста поне 4.5:1 (О2–О5)
     · без подскачане при посочване (О16)
   =========================================================================== */

/* ---------------------------------------------------------------------------
   ПОДРЕДБА НА СЕКЦИЯТА — две колони на голям екран
   ---------------------------------------------------------------------------
   Първата версия беше една колона през целия екран. Календарът нямаше горна
   граница по ширина, а клетките са с `aspect-ratio: 1` — тоест на монитор от
   1900px всяка клетка ставаше около 250×250 пиксела и месецът се разпадаше на
   разпилени числа.

   Границата е тук, а не само в самата карта: `max-width` на картата би
   оставил празно поле отдясно. Двете колони запълват екрана със смисъл.
   --------------------------------------------------------------------------- */

/*
 * ⚠️ ТОВА ЧИСЛО НАРОЧНО НЕ Е `var(--shirina-max)` — 07.08.2026.
 *
 * Останалите секции в сайта пораснаха до 1600px. Тази не.
 *
 * Дясната колона е самият календар и е закована на 560px. Разтегли ли се
 * кутията до 1600px, целите 380px отиват в ЛЯВАТА колона — тоест текстът
 * става близо 1000px широк ред. Дълъг ред се чете зле, а тук той е точно
 * обяснението какво включва часът и как се запазва.
 *
 * Тесният вариант не е недоглеждане. Ако някой ден се реши да порасне, първо
 * трябва да се сложи таван на текстовата колона.
 */
.schedule-dve-koloni {
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: 20px;
}

.schedule-koloni-tekst {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

@media (min-width: 1000px) {
  .schedule-dve-koloni {
    display: grid;

    /* minmax(0, …) е задължително: без него дългата дума в текста разпъва
       колоната и календарът пак се смачква. Същият капан като при точка О18. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    gap: 56px;
    align-items: center;
  }

  .schedule-koloni-tekst {
    align-items: flex-start;
    text-align: left;
  }

  .schedule-koloni-tekst .about-text-main-container,
  .schedule-koloni-tekst .about-text,
  .schedule-koloni-tekst .section-title {
    text-align: left;
    align-items: flex-start;
  }

  .schedule-koloni-tekst .section-name {
    margin-inline: 0;
  }
}

/* ---------- Трите предимства ---------- */

.schedule-polzi {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 480px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.schedule-polza {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
}

.schedule-polza strong {
  display: block;
  margin-bottom: 2px;
  font-family: "Shantell Sans", cursive;
  font-size: 17px;
  font-weight: var(--semiBold);
}

.schedule-polza span:last-child {
  color: var(--neutral-14); /* 7.00:1 върху беж */
}

.schedule-polza-znak {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.schedule-polza-znak.lilav {
  background: #ece9fb;
}

.schedule-polza-znak.zelen {
  background: #eaf7ee;
}

.schedule-polza-znak.oranjev {
  background: #fdf0e4;
}

/* ---------- Самото календарче ---------- */

.bk {
  width: 100%;

  /* ⚠️ ТОВА Е ГРАНИЦАТА, БЕЗ КОЯТО КЛЕТКИТЕ СЕ РАЗДУВАТ.
     560px на 7 колони прави клетки от около 72px — четимо и на монитор,
     и на телефон. Махне ли се, се връща проблемът от 05.08.2026. */
  max-width: 560px;
  margin-inline: auto;
}

/* ---------- Когато графикът не може да се покаже ---------- */

/*
 * Това НЕ е „няма свободни часове". Това е „не знам".
 * Виж защо разликата е толкова важна в sections/booking-data.php.
 */
.bk-nedostupen {
  padding: 28px 24px;
  border: 1px dashed var(--border);
  border-radius: 18px;
  background: var(--background-beige-01);
  text-align: center;
}

.bk-nedostupen p {
  margin: 0 0 6px;
  color: var(--neutral-14);
}

.bk-nedostupen-glavno {
  font-weight: var(--semiBold);
  color: var(--text-01);
}

.bk-nedostupen-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 14px;
  padding: 10px 22px;
  border-radius: 12px;
  background: var(--accent-yellow);
  color: var(--text-02);
  font-family: "Shantell Sans", cursive;
  font-weight: var(--semiBold);
  font-size: 18px;
  text-decoration: none;
}

.bk-nedostupen-tel:is(:hover, :focus-visible) {
  background: var(--accent-yellow-hover);
}

/* ---------- Картата ---------- */

.bk-karta {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 8px 30px rgba(49, 47, 48, 0.06);
}

.bk-glava {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.bk-glava-ime {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Shantell Sans", cursive;
  font-size: 18px;
  font-weight: var(--semiBold);
}

.bk-mesec-navi {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bk-mesec-ime {
  min-width: 132px;
  text-align: center;
  font-weight: var(--semiBold);
  font-size: 16px;
}

.bk-strelka {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Цел за пръст — точка О13. */
  width: 44px;
  height: 44px;

  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  color: var(--text-01);
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.bk-strelka:is(:hover, :focus-visible) {
  background: var(--background-beige-01);
  border-color: var(--text-01);
}

.bk-strelka[hidden] {
  display: none;
}

/* ---------- Мрежата с дните ---------- */

.bk-dni-imena,
.bk-mreja {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.bk-dni-imena {
  margin-bottom: 8px;
}

.bk-dni-imena span {
  text-align: center;
  font-size: 12px;
  font-weight: var(--semiBold);
  letter-spacing: 0.04em;
  color: var(--neutral-14); /* 7.00:1 върху бяло */
}

.bk-den {
  display: flex;
  align-items: center;
  justify-content: center;

  /*
   * Квадратна клетка, но с таван.
   *
   * `aspect-ratio: 1` сам по себе си беше причината за раздуването: клетката
   * следва ширината на колоната, а колоната следваше екрана. Сега ширината е
   * ограничена от .bk отгоре, а тук стои и втора преграда — ако някой махне
   * онази, клетките пак няма да надминат 76px.
   */
  aspect-ratio: 1;
  min-height: 44px;
  max-height: 76px;

  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text-01);
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--medium);
  cursor: pointer;
}

.bk-den-prazen {
  cursor: default;
}

.bk-den:is(:hover, :focus-visible) {
  background: var(--background-beige-01);
  /* Рамка вместо уголемяване — точка О16: бутонът не бива да порасва. */
  border-color: var(--text-01);
}

.bk-den-pochiven {
  color: var(--accent-pink-text); /* 5.32:1 върху бяло */
}

/*
 * ══ ЦВЕТОВЕТЕ НА ДНИТЕ — 17.08.2026 ══════════════════════════════════════════
 *
 * Дотук свободният ден нямаше никакъв цвят, а зеленото беше запазено за
 * ИЗБРАНИЯ ден. По искане на клиента свободното вече е зелено, а ден с парти,
 * в който още има място, се разсича по диагонал.
 *
 * ⚠️ ЗАТОВА ИЗБРАНИЯТ ДЕН СМЕНИ ВИДА СИ. Оцвети ли се свободното в зелено, а
 * избраното остане зелена заливка, зеленото значи две различни неща и човек не
 * вижда кой ден е щракнал. Сега избраният се показва с рамка и получерно —
 * форма, не цвят. Двете се трупат без да си пречат.
 *
 * Тоновете са подложки, не сигнални цветове: същото семейство като #fdedf1 на
 * заетия ден отдолу. Решетка от 31 наситени квадратчета не се чете.
 */
/*
 * ⚠️ ТОНОВЕТЕ СА ПО-ПЛЪТНИ ОТ ПЪРВИЯ ВАРИАНТ — 17.08.2026.
 *
 * Първо бяха #eef7ee и #fdedf1. На екран излизаха почти бели и клиентът каза,
 * че не се различават. Сега са с около два пъти по-наситени, но пак са
 * подложки, не сигнални цветове.
 *
 * ⚠️ ПО-НАТАТЪК НЕ БИВА ДА СЕ ТЪМНЕЕ, И ТОВА Е ПРЕМЕРЕНО, НЕ НА ОКО:
 *
 *   розовата цифра на почивния ден (--accent-pink-text) върху #e3f4e4
 *   дава 4.64:1 — прагът е 4.5:1
 *
 *   зачертаната цифра #b32448 върху #fce3e9 дава 5.30:1
 *
 * Тоест зеленото е на един тон от това да падне под прага. Иска ли се
 * по-плътно, първо трябва да потъмнее розовата цифра.
 */
.bk-den-svoboden {
  background: #e3f4e4;
}

/*
 * Ден с резервация, в който още има свободни часове.
 *
 * ⚠️ ПРЕХОДЪТ Е РЯЗЪК (`0 50%` и `50% 100%`), не преливка. Мека граница между
 * два бледи тона на 60px квадратче се чете като мръсно петно, а не като „две
 * половини". Диагоналът трябва да личи, че е диагонал.
 *
 * 135deg дава наклон ↘ — горе-ляво свободно, долу-дясно заето.
 */
.bk-den-chastichno {
  background: linear-gradient(135deg, #e3f4e4 0 50%, #fce3e9 50% 100%);
}

/* Ден без нито един свободен час — и без прозорец за игра. Нищо не се предлага. */
.bk-den-zaet {
  background: #fce3e9;
  color: #b32448; /* 5.30:1 — беше 5.42:1, докато фонът беше по-блед */
  text-decoration: line-through;
}

/*
 * Ден без свободен час за ПАРТИ, но със свободна игра.
 *
 * ⚠️ БЕЗ ЗАЧЕРТАВАНЕ. Зачертаното значи „не става"; тук става — просто друго.
 * Същият жълт като лентата с часовете за игра долу, за да се четат като едно.
 *
 * Текстът е --accent-yellow-star, а не обикновеният жълт: онзи е 1.9:1 върху
 * бяло и не се чете.
 */
.bk-den-igra {
  background: #fdf6e3;
  color: var(--accent-yellow-star);
  font-weight: var(--semiBold);
}

/* Отминал ден — не е бутон и не се щрака. */
.bk-den-minal {
  color: var(--neutral-09);
  cursor: default;
}

/*
 * ⚠️ ИЗБРАНИЯТ ДЕН ВЕЧЕ НЕ СЕ ЗАЛИВА В ЗЕЛЕНО — 17.08.2026.
 *
 * Зеленото сега значи „свободен ден". Останеше ли и тук, едно и също петно
 * щеше да значи две неща и щракнатият ден се губеше сред свободните.
 *
 * Знакът е ФОРМА, не цвят: дебела рамка, пръстен около нея и получерна цифра.
 * Стои еднакво добре върху зелено, върху диагонал и върху червено — тоест не
 * скрива с какво е денят, докато е избран.
 *
 * `background` НЕ се пипа тук нарочно. Пипне ли се, диагоналът изчезва в мига,
 * в който човек щракне върху деня — точно когато гледа него.
 */
.bk-den-izbran,
.bk-den-izbran:hover {
  border: 2px solid var(--text-01);
  box-shadow: 0 0 0 3px rgba(49, 47, 48, 0.18);
  color: var(--text-01);
  font-weight: var(--bold);
}

/* ---------- Легенда под решетката ----------
   Диагоналът и зеленото са цвят. Който не различава цветове — и който просто
   го вижда за пръв път — трябва да прочете какво значат. */

.bk-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-02);
}

.bk-legenda-red {
  display: flex;
  align-items: center;
  gap: 7px;
}

.bk-legenda-kvadrat {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid #dcdada;
  flex-shrink: 0;
}

.bk-legenda-kvadrat.svoboden {
  background: #e3f4e4;
}

.bk-legenda-kvadrat.chastichno {
  background: linear-gradient(135deg, #e3f4e4 0 50%, #fce3e9 50% 100%);
}

.bk-legenda-kvadrat.zaet {
  background: #fce3e9;
}

/* ---------- Часовете на избрания ден ---------- */

.bk-chasove {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.bk-chasove[hidden] {
  display: none;
}

.bk-chasove-glava {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-family: "Shantell Sans", cursive;
  font-size: 16px;
  font-weight: var(--semiBold);
}

.bk-chipove {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bk-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid;
  border-radius: 12px;
  font-size: 15px;
  font-weight: var(--semiBold);
  text-decoration: none;
}

.bk-chip-svoboden {
  border-color: #bfe3cb;
  background: #eaf7ee;
  color: #1f7a3d; /* 4.86:1 */
  cursor: pointer;
}

.bk-chip-svoboden:is(:hover, :focus-visible) {
  background: #d9f0e1;
  border-color: #1f7a3d;
}

/* Избраният час. Не само цвят — и рамка, за да личи и при слаб екран. */
.bk-chip-izbran,
.bk-chip-izbran:hover {
  background: #1f7a3d;
  border-color: #1f7a3d;
  color: var(--white);
}

/* Фонът минава заедно с клетките в решетката (17.08.2026) — иначе часът и
   денят, които значат едно и също, излизат в два различни розови. */
.bk-chip-zaet {
  border-color: #f2c2ce;
  background: #fce3e9;
  color: #b32448; /* 5.30:1 — беше 5.42:1, докато фонът беше по-блед */
  text-decoration: line-through;
  cursor: not-allowed;
}

/* ---------- Колко да трае партито --------------------------------------
 *
 * ⚠️ СТОИ НАД ЧАСОВЕТЕ, защото ги МЕНИ. 15:00 може да е свободен за 2 часа и
 * зает за 4 — сложен отдолу, изборът би махал час, който човекът тъкмо е
 * натиснал.
 */

.bk-dulzhina {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.bk-dulzhina-etiket {
  display: block;
  margin-bottom: 10px;
  font-family: "Shantell Sans", cursive;
  font-size: 16px;
  font-weight: var(--semiBold);
}

.bk-dulzhina-kopcheta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bk-dulzhina-kopche {
  min-height: 44px; /* точка О16 — уцелва се с пръст */
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--text-01);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.bk-dulzhina-kopche:is(:hover, :focus-visible) {
  border-color: var(--text-01);
}

.bk-dulzhina-izbrana,
.bk-dulzhina-izbrana:hover {
  border-color: var(--text-01);
  background: var(--accent-green);
  font-weight: var(--semiBold);
}

/* ---------- Свободна игра ----------------------------------------------
 *
 * Часовете, в които залата е отворена и празна, но парти не се побира.
 *
 * ⚠️ НЕ ПРИЛИЧА НА ЧАСОВЕТЕ ГОРЕ, И ТОВА Е НАРОЧНО. Зелените и червените са
 * часове за ЗАПАЗВАНЕ и се щракат. Този ред е съобщение — щракне ли го някой и
 * не стане нищо, това е счупено обещание. Затова е лента, не бутонче.
 *
 * Цветът е жълт, тоест трето състояние до зеленото и червеното. Текстът е
 * --accent-yellow-star (5.35:1 върху бяло) — обикновеният жълт е 1.9:1 и не
 * става за четене.
 */

.bk-igra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid #ecd9a3;
  border-radius: 12px;
  background: #fdf6e3;
  font-size: 15px;
  color: var(--text-01);
}

.bk-igra[hidden] {
  display: none;
}

.bk-igra-etiket {
  font-family: "Shantell Sans", cursive;
  font-weight: var(--semiBold);
  color: var(--accent-yellow-star);
}

.bk-igra-cena {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid #ecd9a3;
  font-weight: var(--semiBold);
  white-space: nowrap;
}

@media (max-width: 480px) {
  /* На тесен екран цената пада на свой ред вместо да се сбива вдясно. */
  .bk-igra-cena {
    margin-left: 0;
  }
}

/* ---------- Долната лента: легенда и бутонът ---------- */

.bk-dolu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.bk-dolu .bk-legenda {
  margin-top: 0;
}

.bk-rezerviray {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 48px;
  padding: 12px 22px;
  border-radius: 14px;

  background: var(--accent-yellow);
  color: var(--text-02);
  font-family: "Shantell Sans", cursive;
  font-weight: var(--semiBold);
  font-size: 16px;
  text-decoration: none;
}

.bk-rezerviray:is(:hover, :focus-visible) {
  background: var(--accent-yellow-hover);
}

/*
 * Неактивен, докато не се избере час.
 *
 * `aria-disabled` вместо махане на бутона: така човек ВИЖДА, че има какво да
 * се натисне, и надписът му казва какво липсва. Изчезващ бутон оставя
 * усещането, че нещо се е счупило.
 *
 * `pointer-events: none` НЕ се ползва — тогава натискането не прави нищо и
 * няма как да се обясни защо. Скриптът прихваща щракването и го спира.
 */
.bk-rezerviray[aria-disabled="true"] {
  background: var(--neutral-03);
  color: var(--neutral-13); /* 5.74:1 върху #e5e5e5 */
  cursor: not-allowed;
}

.bk-rezerviray[aria-disabled="true"] img {
  opacity: 0.45;
}

@media (max-width: 560px) {
  .bk-dolu {
    flex-direction: column;
    align-items: stretch;
  }

  .bk-rezerviray {
    width: 100%;
  }
}

/* ---------- Легенда ---------- */

.bk-legenda {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 14px;
  color: var(--neutral-14);
}

.bk-legenda-tochka {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.bk-legenda-tochka.svobodno {
  background: #1f7a3d;
}

.bk-legenda-tochka.igra {
  background: var(--accent-yellow-star);
  margin-left: 12px;
}

.bk-legenda-tochka.zaeto {
  background: #b32448;
  margin-left: 12px;
}

/* ---------- Телефон ---------- */

@media (max-width: 520px) {
  .bk-karta {
    padding: 14px;
  }

  .bk-dni-imena,
  .bk-mreja {
    gap: 4px;
  }

  .bk-den {
    border-radius: 10px;
    font-size: 14px;
  }

  .bk-mesec-ime {
    min-width: 110px;
    font-size: 15px;
  }
}

/* ---------------------------------------------------------------------------
   КАЛЕНДАРЧЕТО ВЪТРЕ ВЪВ ФОРМАТА — 06.08.2026
   ---------------------------------------------------------------------------
   Полето „Желана дата и час" и бутонът „Календар" стоят на един ред, а самият
   календар се разгъва ПОД тях, в потока на страницата.

   ⚠️ ЗАЩО В ПОТОКА, А НЕ ПЛАВАЩ СЛОЙ
   На 05.08.2026 плаващият слой на маршрута спря всяко щракване в целия сайт:
   `.route-sheet` имаше `display: flex`, което бие атрибута `hidden`, и остана
   невидим, но отгоре. Панел без `position` и без `z-index` няма как да покрие
   бутона „Изпратете запитване". Тази беда просто не може да се повтори тук.
   --------------------------------------------------------------------------- */

.bk-pole {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;

  /* ⚠️ .contact-form-field е flex колона с `align-items: flex-start` — без
     тази ширина редът се свива до съдържанието си и полето става тясно. */
  width: 100%;
}

.bk-pole .contact-form-slot {
  flex: 1 1 220px;
  min-width: 0; /* иначе дългият placeholder не дава на полето да се свие */
}

.bk-pole-buton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;

  /* Цел за пръст — точка О13. 44px, а не повече: бутонът стои ВЪТРЕ в
     кутията на полето, която има само 8px отстъп отгоре и отдолу. */
  min-height: 44px;
  padding: 10px 16px;

  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--background-beige-01);
  color: var(--text-01);
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--semiBold);
  cursor: pointer;
}

.bk-pole-buton:is(:hover, :focus-visible) {
  background: var(--accent-yellow);
  border-color: var(--text-01);
}

/* Отворен панел — бутонът го показва, за да се вижда кое какво управлява. */
.bk-pole-buton[aria-expanded="true"] {
  background: var(--accent-yellow);
  border-color: var(--text-01);
}

/*
 * ⚠️ ТОЗИ РЕД НЕ СЕ МАХА.
 *
 * Бутонът се показва от booking.js. Дотогава `hidden` трябва да значи нещо —
 * а тук отгоре има `display: inline-flex`, който по правилата на CSS бие
 * `hidden`. Без реда долу бутонът стои видим и на страници без скрипт.
 */
.bk-pole-buton[hidden] {
  display: none;
}

/* ---------- Разгъващият се панел ---------- */

.bk-pop {
  /* Пак заради `align-items: flex-start` на .contact-inquiry-form. Разстоянието
     отгоре идва от `gap: 20px` на самата форма — тук няма нужда от margin. */
  width: 100%;

  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--background-beige-01);
}

/* Същото правило, същата причина. Виж бележката по-горе. */
.bk-pop[hidden] {
  display: none;
}

.bk-pop-vodach {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--neutral-14); /* 7.00:1 */
  text-align: center;
}

/* Вътре в панела картата няма нужда от втора рамка и втора сянка. */
.bk-pop .bk-karta {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.bk-pop .bk {
  max-width: 460px;
}

@media (max-width: 560px) {
  .bk-pole-buton {
    width: 100%;
  }

  .bk-pop {
    padding: 12px;
  }
}

/* ---------------------------------------------------------------------------
   ГЛАВАТА НА КАЛЕНДАРА НА ТЕЛЕФОН — 06.08.2026
   ---------------------------------------------------------------------------
   „Избери дата" и превключвателят на месеца стояха на един ред. На тесен екран
   двете се блъскаха: стрелките опираха до надписа, а името на месеца оставаше
   без място и се пренасяше накриво.

   Сега месецът винаги е ПОД заглавието, на свой ред, а стрелките са в двата
   края. Така палецът ги улучва, без да мери — и двете са далеч една от друга.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .bk-glava {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .bk-glava-ime {
    justify-content: center;
  }

  /* Стрелките се разтварят до краищата: между тях остава мястото за името. */
  .bk-mesec-navi {
    justify-content: space-between;
    width: 100%;
  }

  .bk-mesec-ime {
    flex: 1 1 auto;
  }

  /*
   * ⚠️ Скритата стрелка НЕ бива да свива реда.
   *
   * В първия месец „назад" е скрита. С `justify-content: space-between` и два
   * елемента вместо три името се лепва вляво, а „напред" отскача вдясно —
   * тоест лентата подскача при всяко превключване на месец.
   *
   * `visibility: hidden` държи мястото ѝ заето. Затова тук се бие правилото
   * `.bk-strelka[hidden] { display: none }` отгоре — то е за големия екран,
   * където редът е свободен.
   */
  .bk-strelka[hidden] {
    display: inline-flex;
    visibility: hidden;
    pointer-events: none;
  }
}

/* Уважава системната настройка „по-малко движение" — точка О20. */
@media (prefers-reduced-motion: reduce) {
  .bk-den,
  .bk-chip,
  .bk-strelka {
    transition: none;
  }
}

/* ---------- Слетите заети часове ----------------------------------------
 *
 * Едно парти = един блок, вместо девет зачертани чипа. Виж бележката в
 * assets/js/booking.js за групирането.
 *
 * ⚠️ ЗАЕМА ЦЯЛ РЕД (`flex-basis: 100%`). Контейнерът е flex-wrap и блокът
 * е по-широк от чиповете до него; сместен на същия ред, надписът с повода
 * се чупи на две и блокът престава да се чете като едно нещо.
 *
 * Цветовете са същите като на .bk-chip-zaet — това е същото състояние,
 * казано по-едро, а не ново.
 */
.bk-zaet-blok {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 12px 16px;
  border: 1px solid #f2c2ce;
  border-radius: 14px;
  background: #fce3e9;
  color: #b32448; /* 5.30:1 върху фона горе */
}

.bk-zaet-blok-chasove {
  font-weight: 600;
  /* ⚠️ БЕЗ line-through. Зачертаването има смисъл върху единичен час; върху
     диапазон с надпис прави текста нечетим. */
  font-variant-numeric: tabular-nums;
}

.bk-zaet-blok-povod {
  font-size: 14px;
  opacity: 0.85;
}

/* Разделителят се рисува, а не се пише в текста — четец на екран няма за
   какво да го произнася, а копираният текст остава чист. */
.bk-zaet-blok-povod::before {
  content: "·";
  margin-right: 8px;
  opacity: 0.6;
}