/* ═══════════════════════════════════════════════════════════════════════════
   ШРИФТОВЕТЕ ЖИВЕЯТ ПРИ НАС — 10.08.2026
   ═══════════════════════════════════════════════════════════════════════════

   Дотук се теглеха от fonts.googleapis.com с един <link>. Три неща не бяха
   наред и всичките три се плащат при всяко посещение:

   1. ЧУЖД БЛОКИРАЩ СТИЛ. <link rel=stylesheet> спира рисуването, докато не се
      свали. Този стоеше на друг сървър, тоест преди първата буква на екрана
      трябваше нова DNS справка, ново TLS ръкостискане и чак тогава заявката.
      На бавен 4G това е няколко десети от секундата преди каквото и да било.

   2. MONTSERRAT СЕ ЗАЯВЯВАШЕ, А НЕ СЕ ПОЛЗВАШЕ. Нула попадения в целия CSS.

   3. ЗАЯВЯВАХА СЕ И КУРСИВИТЕ. Нула наклонени стила в целия CSS.

   Сега @font-face стои в началото на този файл — същия, който и без това се
   сваля пръв. Нула допълнителни заявки, нула чужди сървъри.

   ⚠️ ПРОМЕНЛИВИ ШРИФТОВЕ, НЕ ОТДЕЛНИ ТЕЖЕСТИ. Мерено на 10.08.2026: същите
   шрифтове, поискани като отделни тежести (400, 600, 700, 800), излизат
   408 kB срещу 209 kB като променливи. Shantell Sans дори връща ЕДИН И СЪЩ
   файл за всяка поискана тежест. Не се пипа.

   ⚠️ unicode-range РАЗДЕЛЯ ПО АЗБУКИ. Български текст сваля кирилицата и
   латиницата; гръцкото и виетнамското не се свалят никога. Затова блоковете
   са осем, а по мрежата минават четири.

   ⚠️ ФАЙЛОВЕТЕ СА В assets/fonts/ И СЕ КАЧВАТ. Не стигнат ли до сървъра,
   сайтът излиза със системен шрифт и никой не разбира защо.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Nunito Sans · cyrillic-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/nunito-sans-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Nunito Sans · cyrillic */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/nunito-sans-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Nunito Sans · latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/nunito-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Nunito Sans · latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/nunito-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Shantell Sans · cyrillic-ext */
@font-face {
  font-family: 'Shantell Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/shantell-sans-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Shantell Sans · cyrillic */
@font-face {
  font-family: 'Shantell Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/shantell-sans-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Shantell Sans · latin-ext */
@font-face {
  font-family: 'Shantell Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/shantell-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Shantell Sans · latin */
@font-face {
  font-family: 'Shantell Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/shantell-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* BRAND COLORS */
  --accent-blue: #4cbae5;
  --accent-green: #a2e863;
  --accent-orange: #e58f4c;
  --accent-pink: #e963af;
  --accent-yellow: #e5bb4c;

  --background-beige-01: #f5f0ea;
  --background-beige-02: #f2ebe3;
  --background-pink: #fdedf3;
  --border: #cdcbcc;

  --text-01: #312f30;
  --text-02: #1a1a1a;
  --text-03: #343233;

  --accent-yellow-hover: #dfaa20;

  /* ЧЕТИМИ ВАРИАНТИ НА АКЦЕНТИТЕ — само за текст (точки О2, О4, О5)
     ------------------------------------------------------------------
     Акцентните цветове горе са направени за фонове. Върху бяло като цвят
     на текст падат далеч под изискваното съотношение 4.5:1:

       #e58f4c върху бяло   2.51 : 1
       #4cbae5 върху бяло   2.22 : 1
       #e5bb4c върху бяло   1.82 : 1

     Затова за текст и за смислови икони се ползват тези по-тъмни варианти
     от същия оттенък. Фоновете и украсите остават с оригиналните. */
  --accent-orange-text: #a55618; /* 5.32 върху бяло, 4.50 върху беж-02 */
  --accent-blue-text: #12667f; /* 6.50 върху бяло, 5.50 върху беж-02 */

  /*
   * Тъмно синьо — само за подписа „Web-Fabrika" в колонтитула.
   * Мерено: 11.28 върху бяло, 9.73 върху беж-02. Не е от палитрата на
   * Бърборанчета нарочно: подписът е на друга фирма и не бива да се чете
   * като елемент от марката.
   */
  --web-fabrika-sinio: #1a3a6b;
  --accent-yellow-star: #866613; /* 5.35 върху бяло, 4.53 върху беж-02 */
  --accent-pink-text: #c91c7e; /* 5.32 върху бяло, 4.50 върху беж-02 */
  --accent-green-text: #427812; /* 5.35 върху бяло, 4.72 върху беж-01 */

  /* ═══ ЦВЕТОВЕТЕ НА ЛОГОТО — 10.08.2026 ═══════════════════════════════════
   *
   * Взети едно към едно от assets/images/Logo/logo.svg. Буквите на BEBELAND
   * са осем в седем цвята; тъмнокафявото #382A02 там е надписът „детски парти
   * център" отгоре, не контур на буквите.
   *
   * ⚠️ ТЕЗИ НЕ СА ЧЕТИМИ САМИ ПО СЕБЕ СИ. Върху беж-02 (#f2ebe3):
   *
   *   зелено   1.44 : 1        червено  3.32 : 1
   *   жълто    1.79 : 1        розово   3.76 : 1
   *   синьо    2.28 : 1        лилаво   4.16 : 1
   *   оранжево 2.67 : 1
   *
   * Прагът за текст е 4.5:1. Нито един не го стига. В логото минават, защото
   * там буквите са едри и дебели, а не защото цветовете са четими.
   *
   * ⚠️ ЗАТОВА ВЪРВЯТ С КОНТУР. Ползват се само в .navi-bukva, където всяка
   * буква има очертание в кафявото на логото — виж бележката там. Сложи ли се
   * някой от тези седем на гол текст, текстът става нечетим.
   */
  --logo-cherveno: #e84634;
  --logo-oranzhevo: #df7420;
  --logo-zhalto: #dfaa20;
  --logo-zeleno: #7bde21;
  --logo-sinjo: #20a9df;
  --logo-lilavo: #8a4de5;
  --logo-rozovo: #df208d;

  /* Кафявото на логото — надписът „детски парти център" и контурът на буквите. */
  --logo-kafyavo: #382a02;

  /* BEIGE COLORS */
  --beige-01: #f9f8f6;
  --beige-02: #f0eee9;
  --beige-03: #eae8e1;
  --beige-04: #dfdcd2;
  --beige-05: #d5d1c3;
  --beige-06: #cac5b4;
  --beige-07: #c0baa5;
  --beige-08: #b5ae96;

  /* NEUTRAL COLORS */
  --white: #ffffff;
  --neutral-01: #fafafa;
  --neutral-02: #f2f2f2;
  --neutral-03: #e5e5e5;
  --neutral-04: #d9d9d9;
  --neutral-05: #cccccc;
  --neutral-06: #bfbfbf;
  --neutral-07: #b3b3b3;
  --neutral-08: #a5a5a5;
  --neutral-09: #999999;
  --neutral-10: #8d8d8d;
  --neutral-11: #808080;
  --neutral-12: #737373;
  --neutral-13: #666666;
  --neutral-14: #595959;
  --neutral-15: #4d4d4d;
  --neutral-16: #404040;
  --neutral-17: #343434;
  --neutral-18: #272727;
  --neutral-19: #1a1a1a;
  --neutral-20: #0d0d0d;
  --black: #000000;

  /* FONT WEIGHT */
  --light: 300;
  --regular: 400;
  --medium: 500;
  --semiBold: 600;
  --bold: 700;
  --extraBold: 800;

  /* FILTERS */

  --filter-black: brightness(0) saturate(100%);
  --filter-accent-orange: brightness(0) saturate(100%) invert(83%) sepia(17%)
    saturate(5972%) hue-rotate(324deg) brightness(94%) contrast(91%);
  --filter-accent-pink: brightness(0) saturate(100%) invert(73%) sepia(54%)
    saturate(4649%) hue-rotate(291deg) brightness(94%) contrast(94%);
  --filter-accent-yellow: brightness(0) saturate(100%) invert(97%) sepia(33%)
    saturate(4034%) hue-rotate(317deg) brightness(93%) contrast(93%);
  --filter-accent-green: brightness(0) saturate(100%) invert(97%) sepia(11%)
    saturate(2222%) hue-rotate(31deg) brightness(92%) contrast(97%);
  --filter-background-pink: brightness(0) saturate(100%) invert(100%) sepia(19%)
    saturate(1538%) hue-rotate(284deg) brightness(95%) contrast(112%);

  /* ═══ ШИРИНАТА НА СЪДЪРЖАНИЕТО — 07.08.2026 ═══════════════════════════════
   *
   * Дотук всяка секция си пишеше ширината наум: 1160, 1180, 1200, 1220, 1280 —
   * четиринайсет числа в десет файла, плюс стълба от медия заявки на 1450 /
   * 1380 / 1320 / 1150 / 1120, различна във всеки файл. Затова прегледът в
   * браузъра показваше отзивите широки 1200px точно там, където съседната
   * секция вече беше слязла на 1000px.
   *
   * Сега стои ЕДНО число.
   *
   * --shirina-max  — докъде расте съдържанието. Спира на 1600px нарочно:
   *                  вътрешните текстови блокове са с таван 790-800px, тоест
   *                  над 1600 се печели празно място, а не съдържание.
   * --pole         — въздухът отстрани, докато екранът е по-тесен от тавана.
   * --shirina      — за старите секции, които слагат `width` направо. Новите
   *                  (.pk-sredishte и роднините ѝ) са `width: 100%` вътре в
   *                  секция с padding и им трябва само таванът.
   *
   * ⚠️ НЕ СЕ СЛАГА на .calendar-view в schedule.css. Календарът е НАРОЧНО
   * по-широк от екрана и се скролва настрани; таван там го смачква.
   *
   * ⚠️ НЕ СЕ СЛАГА и на .terms-container (1000px) и .blog-article-container
   * (760px). Те не са тесни по недоглеждане, а защото дълъг ред се чете
   * трудно. Виж бележката при самите тях.
   */
  --shirina-max: 1600px;

  /*
   * 80px, а не 40. Две причини, и двете намерени с мерене в браузъра:
   *
   * 1. Слончето и зайчето в секцията „За нас" висят НАВЪН от кутията
   *    (`left: -50px`, `right: -72px`). При поле от 40px зайчето излизаше
   *    32px извън прозореца — а `overflow-x: clip` на body го отрязваше
   *    мълчаливо, без лента за скрол и без следа, че нещо липсва.
   * 2. Лентата с навигацията е с `padding: 16px 80px`. При същите 80px
   *    логото горе и съдържанието долу тръгват от една и съща линия.
   */
  --pole: 80px;
  --shirina: min(100% - 2 * var(--pole), var(--shirina-max));

  /*
   * ═══ СЪЩАТА ШИРИНА, НО ЗА СЕКЦИЯ, КОЯТО ВЕЧЕ ИМА 20px ОТСТРАНИ ═══════════
   *
   * По-новите страници (.pk-sredishte, .rd-sredishte, .kr-sredishte,
   * .pg-sredishte, .bi-sredishte, .reviews-container) не слагат ширина
   * направо. Те са `width: 100%` вътре в секция с `padding: … 20px`.
   *
   * Затова за тях `100%` НЕ Е прозорецът, а прозорецът минус 40px. Ползват ли
   * същия таван като старите, излизат по 60px по-широки от подвала и от
   * лентата с навигацията — премерено: на 1440px лентата с отзивите беше
   * 1400, а подвалът под нея 1280.
   *
   * 120 + двата пъти по 20 на секцията = 160. Точно колкото е и полето на
   * старите секции. Двете подредби съвпадат до пиксел.
   */
  --shirina-v-sekciya: min(100% - 120px, var(--shirina-max));

  /*
   * ═══ ЛЕКОТО ПОЛЮШВАНЕ НА КАРТИТЕ — 07.08.2026 ════════════════════════════
   *
   * Същото движение, което картите на началната страница вече правят
   * (`site-card-bob` в animation.css). Числата са преписани оттам едно към
   * едно — същите четири стъпки, същите 7.2s.
   *
   * ⚠️ ЗАЩО НЕ Е ПРОСТО ПОВИКАН ОНЗИ: animation.css се зарежда САМО на
   * началната страница. Той носи и целия първи екран — облаци, искри,
   * подскачаща лента. Да се сложи навсякъде значи всяка страница да мъкне
   * анимации за неща, които ги няма.
   *
   * ⚠️ ЗАЩО НЕ Е ПО `transform`, както е на началната: картите тук имат
   * повдигане при посочване (`transform: translateY(-4px)`). Анимация бие
   * обикновено правило за същото свойство — тоест полюшването щеше да ИЗЯДЕ
   * повдигането и посочването щеше да спре да личи.
   *
   * `translate` и `rotate` са отделни свойства и се събират с `transform`,
   * вместо да се бият с него. Така и повдигането при посочване, и
   * появяването при скрол (`.pk-anim` и роднините ѝ, които ползват
   * `transform`) си остават непокътнати.
   */
  --plavane: bebeland-plavane 7.2s ease-in-out infinite;
}

@keyframes bebeland-plavane {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }

  20% {
    translate: 0 -6px;
    rotate: -0.7deg;
  }

  50% {
    translate: 0 2px;
    rotate: 0.55deg;
  }

  75% {
    translate: 0 -3px;
    rotate: -0.35deg;
  }
}

/*
 * ⚠️ ТОЧКА О20 — СПИРАНЕТО СТАВА ТУК И САМО ТУК.
 *
 * Всяка страница пише `animation: var(--plavane)` върху своите карти.
 * Празен ли е изразът, спира навсякъде наведнъж — не се търсят шест блока
 * из шест файла, за да се допише по един `prefers-reduced-motion`.
 *
 * Редовете за забавяне и продължителност по страниците остават, но без име
 * на анимация не правят нищо.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --plavane: none;
  }
}

/*
 * Под 1120px секциите така или иначе минават на пълна ширина в собствения си
 * padding. Полето от 120px там само би стеснило текста без причина.
 * Границата е същата, на която подвалът минава на `width: 100%`.
 */
@media (max-width: 1120px) {
  :root {
    --shirina-v-sekciya: 100%;
  }
}

/*-----------------------------------*\
  #DESIGN
\*-----------------------------------*/
/*
 * ТОЧКА О22 — основният размер слиза от `*` на `body`.
 *
 * Тук стоеше `font-size: 14px` върху универсалния селектор. Това не е „базов
 * размер", а нещо доста по-лошо: `*` пипа ВСЕКИ елемент поотделно и с това
 * **изключва наследяването**. Нищо не наследяваше 14px — всичко му беше
 * зададено. Затова всеки компонент е трябвало да си пише размера наново, а
 * текст, вложен в по-едър текст, се смаляваше обратно до 14px.
 *
 * Сега размерът е на `body` и се наследява нормално. 16px, защото това е
 * препоръката за течащ текст на телефон.
 *
 * ПРОВЕРЕНО ПРЕДИ ПРОМЯНАТА, за да не скочи нещо неочаквано:
 *   - 23-те заглавни класа в разметката ВСИЧКИ носят собствен font-size
 *   - единствените заглавия без клас са в текста на имейлите, не в сайта
 *   - `.about-text`, главният текст, е 18px / 16px в медия заявките
 *
 * Тоест мени се само това, което досега е било 14px по подразбиране.
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--text-01);

  font-family: "Nunito Sans", sans-serif;
  font-weight: var(--medium);
  font-optical-sizing: auto;
  font-style: normal;
}

/*
 * Полетата и бутоните НЕ наследяват шрифт по подразбиране — браузърът им дава
 * свой. Досега `*` ги хващаше; сега трябва да им се каже изрично, иначе биха
 * паднали на около 13px.
 */
button,
input,
select,
textarea {
  font-size: inherit;
}

html {
  scroll-behavior: smooth;
}

/*
 * Точка О20: който е казал на системата си „по-малко движение“, не иска и
 * дългия плавен скрол. Тази страница е близо 2000 реда — точно тук е
 * проблемният случай за хора, на които движението причинява световъртеж.
 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.Shantell {
  font-family: "Shantell Sans", cursive;
  font-optical-sizing: auto;
  font-weight: var(--medium);
  font-style: normal;
  font-variation-settings:
    "BNCE" 0,
    "INFM" 0,
    "SPAC" 0;
}

/*
 * ⚠️ ШРИФТЪТ СЛИЗА И ВЪВ ВЛОЖЕНИТЕ ЕЛЕМЕНТИ — 06.09.2026.
 *
 * ПРОБЛЕМЪТ: горе стои `*, *::before, *::after { font-family: "Nunito Sans" }`.
 * Универсалният селектор пипа ВСЕКИ елемент поотделно, тоест <span> вътре в
 * .Shantell заглавие не наследява от родителя си — получава свое правило и
 * излиза с Nunito.
 *
 * Резултатът се виждаше на всяко заглавие, разделено на два реда:
 *
 *     Изберете пакет,                        ← Shantell
 *     създаден за вашия специален ден        ← Nunito, друг шрифт
 *
 * Мерено в браузър на 06.09.2026: .pk-h1 връщаше „Shantell Sans", а
 * .pk-akcent вътре в него — „Nunito Sans".
 *
 * ⚠️ ЗАЩО ТУК, А НЕ ПРИ ВСЕКИ ОТДЕЛЕН КЛАС. Заглавията с вложен акцент са
 * из целия сайт: пакети, празненства, лендинги, блог. Поправка при всеки
 * поотделно значи дванайсет места, които трябва да помнят едно и също — и
 * тринайсетото, което ще се забрави.
 *
 * `inherit` е нарочно, а не повторение на семейството: така важи и ако
 * .Shantell някога получи друг шрифт.
 */
.Shantell :where(span, strong, em, b, i, a, small) {
  font-family: inherit;
  font-variation-settings: inherit;
}

body {
  background-color: var(--white);

  /* Точка О22 — базовият размер живее тук, за да се наследява. Виж бележката
     при универсалния селектор по-горе защо не е на `*`. */
  font-size: 16px;

  /*
   * Точка О21 — частично, и с уговорка.
   *
   * `clip` реже настрани същото като `hidden`, но не създава контейнер за
   * скрол. Това е по-безопасното от двете при `position: sticky` вътре — а
   * точно такава е главата на рекламните страници (.landing-top).
   *
   * УГОВОРКАТА: не съм проверил на живо дали `hidden` тук изобщо е чупело
   * нещо. По правилото за пренасяне на overflow, докато `html` е `visible`,
   * стойността на body се пренася върху прозореца и самият body остава
   * `visible` — тоест вероятно никога не е бил контейнер за скрол и sticky
   * никога не е бил счупен. Смяната е безвредна и в двата случая, но да не се
   * приема на доверие обяснението защо.
   *
   * Редът с `hidden` остава отгоре като резервен за по-стари браузъри, които
   * не разбират `clip` — те просто го подминават.
   *
   * Това НЕ поправя самото преливане, а само начина, по който се крие. Кое
   * точно прелива настрани не може да се намери без браузър.
   */
  overflow-x: hidden;
  overflow-x: clip;
}

/*
 * ПРЕДПАЗИТЕЛ КЪМ ТОЧКА О18
 *
 * О18 накара bebeland_picture() да задава width и height на снимките, за да
 * не подскача съдържанието при зареждане. Това обаче има странична последица:
 * снимката вече обявява истинския си размер (напр. 1282px) от първия миг, а
 * досега — докато не се зареди — беше 0.
 *
 * В гъвкава подредба (display: flex) елементите по подразбиране не се свиват
 * под съдържанието си. Тоест снимка от 1282px започва да дърпа контейнера си
 * и изблъсква съседа — точно това стана в секцията с пакетите, в раздела
 * „Почасова игра": картата с текста беше избутана и отрязана.
 *
 * Двата реда долу казват: атрибутите служат САМО за съотношението, никога за
 * ширината. Селекторът хваща само снимките, минали през bebeland_picture() —
 * украсите нямат такива атрибути и не се пипат.
 */
img[width][height] {
  max-width: 100%;
}

.pricing-package-cards > *,
.pricing-play-image-container {
  min-width: 0;
}

a {
  text-decoration: none;
}

button {
  cursor: pointer;
}

.icon12 {
  width: 12px;
  height: 12px;
}

.icon16 {
  width: 16px;
  height: 16px;
}

.icon18 {
  width: 18px;
  height: 18px;
}

.icon20 {
  width: 20px;
  height: 20px;
}

.icon24 {
  width: 24px;
  height: 24px;
}

.icon28 {
  width: 28px;
  height: 28px;
}

.icon32 {
  width: 32px;
  height: 32px;
}

.icon40 {
  width: 40px;
  height: 40px;
}

.main-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: var(--semiBold);
  color: var(--text-02);
  background-color: var(--accent-yellow);
  border-radius: 12px;
}

.main-button:is(:hover, :focus-visible, :focus-within) {
  background-color: var(--accent-yellow-hover);
  cursor: pointer;
}

/*
 * Точка О16 — бутонът да не порасва при посочване.
 *
 * Досега тук се добавяше `border: solid 2px`, а базовият бутон няма рамка:
 * при посочване порастваше с 4px и буташе съседите си.
 *
 * Първо го поправих с прозрачна рамка в покой, но това правеше ВСЕКИ бутон на
 * сайта 4px по-голям, отколкото е бил — тоест сменях подскачане срещу видима
 * промяна на размера навсякъде. Затова е `outline`: той се рисува върху
 * елемента и НЕ влиза в размера му. `outline-offset: -2px` го слага точно там,
 * където стоеше рамката, тоест изглежда както преди.
 *
 * Вариантите .location / .contact / .gallery се изключват: те вече имат своя
 * 2px рамка в покой и при посочване само ѝ сменят цвета — там никога не е
 * имало подскачане.
 */
.main-button:not(.location):not(.contact):not(.gallery):is(
    :hover,
    :focus-visible,
    :focus-within
  ) {
  outline: 2px solid var(--text-01);
  outline-offset: -2px;
}

.main-button.location {
  color: var(--text-02);
  background-color: var(--white);
  border: solid 2px var(--text-01);
  margin-top: 16px;
}

.main-button.location:is(:hover, :focus-visible, :focus-within) {
  color: var(--text-02);
  background-color: var(--accent-blue);
  border: solid 2px var(--accent-blue);
}

.main-button.contact {
  color: var(--text-02);
  background-color: var(--white);
  border: solid 2px var(--text-01);
}

.main-button.contact:is(:hover, :focus-visible, :focus-within) {
  color: var(--text-02);
  background-color: var(--accent-orange);
  border: solid 2px var(--accent-orange);
}

.main-button.gallery {
  color: var(--text-02);
  background-color: var(--white);
  border: solid 2px var(--text-01);
}

.main-button.gallery:is(:hover, :focus-visible, :focus-within) {
  color: var(--text-02);
  background-color: var(--accent-yellow);
  border: solid 2px var(--accent-yellow);
}

.main-button.gallery.pink:is(:hover, :focus-visible, :focus-within) {
  color: var(--text-02);
  background-color: var(--accent-pink);
  border: solid 2px var(--accent-pink);
}

/*-----------------------------------*\
  #NAVBAR
\*-----------------------------------*/

.NAVBAR {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  height: 80px;
  padding: 16px 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--background-beige-02);
  transform: translateY(0);
  transition: transform 0.35s ease;
  will-change: transform;
}

/* ADD: class used to hide on scroll down */
.nav-hidden {
  transform: translateY(-100%);
}

.navbar-main-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  /* Същият таван като на съдържанието. Без него на широк монитор логото
     стоеше на 480px вляво от първата секция под него — лентата растеше без
     край, а страницата спираше на 1600px. */
  max-width: var(--shirina-max);
}

.logo-navbar {
  width: 200px;
  height: auto;
}

.navbar-links-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 32px;
}

.navbar-link {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  color: var(--text-01);
  font-weight: var(--semiBold);
  font-size: 16px;
  text-decoration: none;
  transition: color 0.3s ease;
  padding-bottom: 4px;
}

.underline-icon-nav {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  pointer-events: none;
}

.navbar-link:is(:hover, :focus-visible, :focus-within) {
  /* О29: оранжевото даваше 2.51 върху беж-02 на лентата. */
  color: var(--accent-orange-text);
}

.navbar-link:is(:hover, :focus-visible, :focus-within) .underline-icon-nav {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
  bottom: -4px;
}

/*
 * ═══ ТЕКУЩИЯТ РАЗДЕЛ — 08.08.2026 ═══════════════════════════════════════
 *
 * Слага се от partials/navbar.php по адреса на страницата. Същинското е
 * `aria-current="page"` в разметката — то казва на екранния четец кой е
 * текущият раздел. Тези редове са само за окото.
 *
 * ⚠️ НЕ Е САМО ЦВЯТ. Разлика само по цвят не се вижда от човек с цветна
 * слепота (WCAG 1.4.1). Затова има и постоянна черта отдолу.
 *
 * Чертата е `::after`, а не картинката `.underline-icon-nav` — онази е
 * запазена за посочване и се появява с движение. Постоянно състояние не
 * бива да се рисува с нещо, което мига при всяко минаване с мишката.
 */
.navbar-link[data-navi-tuk] {
  color: var(--accent-orange-text);
}

.navbar-link[data-navi-tuk]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--accent-orange);
}

/*
 * ═══ „ПАКЕТИ И ЦЕНИ" ПУЛСИРА — 18.09.2026 ═══════════════════════════════
 *
 * Искане на клиента: това е връзката, която трябва да се набива на очи.
 *
 * ⚠️ КОЯ ТОЧКА ПУЛСИРА СЕ РЕШАВА В data/navigation.php, с ключа 'pulsira'.
 * Тук нарочно няма нито един адрес: закачи ли се правилото за
 * `[href="/paketi-i-ceni"]`, преименуването на страницата оставя мъртво
 * правило, което не хваща нищо и мълчи.
 *
 * ⚠️ ДВИЖАТ СЕ САМО `transform` И ЦВЕТЪТ — нито padding, нито border, нито
 * font-size. Те влизат в подредбата и биха бутали съседните връзки по
 * лентата на всеки кадър. Това е същата грешка, описана при .main-button
 * (точка О16): там бутонът порастваше с 4px при посочване и буташе съседите
 * си. `transform` не мести нищо около себе си.
 *
 * ⚠️ ПО-ЧЕСТО И ПО-ЯРКО — 22.09.2026, по искане на клиента. Първият вариант
 * трепваше веднъж на 2.6 секунди, едва забележимо (до 1.09). Клиентът поиска
 * около 1.5 секунди и по-ярко. Сега: пулс на 1.5 с, уголемяване до 1.14 и
 * топъл ореол около буквите в пика. Движението е първата половина от цикъла,
 * втората е покой — без него пулсът се слива в постоянно трептене.
 *
 * ⚠️ ЯРКОСТТА Е ОТ ОРЕОЛА, НЕ ОТ ЦВЕТА НА БУКВИТЕ. Самите букви в пика остават
 * `--accent-orange-text`. Чистото `--accent-orange` е точно цветът, отхвърлен
 * по-горе в точка О29 (2.51 върху беж — нечетимо). Ореолът е `text-shadow`:
 * свети около буквите, без да ги прави по-бледи, и не мести нищо.
 */
@keyframes navi-pulsira {
  0%,
  50%,
  100% {
    transform: scale(1);
    color: var(--text-01);
    text-shadow: none;
  }

  20% {
    transform: scale(1.14);
    color: var(--accent-orange-text);
    text-shadow:
      0 0 10px rgba(229, 143, 76, 0.85),
      0 0 22px rgba(245, 201, 88, 0.75);
  }
}

.navbar-link-pulsira {
  animation: navi-pulsira 1.5s ease-in-out infinite;
}

/* В чекмеджето редът е широк колкото екрана. От средата си той би се разпъвал
   и на двете страни, тоест би излизал под ръба — затова расте от началото си. */
.navbar-link-pulsira.mobile-link {
  transform-origin: left center;
}

/*
 * ⚠️ НА САМАТА СТРАНИЦА ПУЛСЪТ СПИРА. Мигащо „тук се намираш" е шум; освен
 * това анимацията сменя цвета и би се била с оранжевото на текущия раздел.
 *
 * Спира и при посочване и фокус: там връзката си има свой цвят и подчертаване,
 * а анимацията е по-силна от тях и би ги надвила.
 */
.navbar-link-pulsira[data-navi-tuk],
.navbar-link-pulsira:is(:hover, :focus-visible, :focus-within) {
  animation: none;
}

/* Поискал ли е човекът по-малко движение, не мига нищо. Същото както на
   останалите тридесетина места в стиловете. */
@media (prefers-reduced-motion: reduce) {
  .navbar-link-pulsira {
    animation: none;
  }
}

/*
 * В чекмеджето връзките са центрирани и заемат цялата ширина. Черта от край
 * до край там не се чете като „тук си", а като разделител между два реда.
 *
 * ⚠️ И ОТСТРАНИ НЕ СТАВА — пробвано и премахнато на 08.08.2026. Чертата
 * увисваше на левия ръб на панела, на пръст разстояние от центрирания
 * надпис, и се бъркаше с жълтата черта на групата „Празненства".
 *
 * Затова е къса и точно под текста.
 *
 * ⚠️ И БУТОНЪТ „ПРАЗНЕНСТВА" Е ТУК — добавен на 10.08.2026.
 *
 * Той нарочно НЯМА класа `mobile-link` (скриптът затваря чекмеджето по него,
 * а бутонът не води до страница — виж бележката в partials/navbar.php).
 * Заради това правилото не го хващаше и на трите страници под групата
 * чертата му излизаше 350px, от край до край на реда — премерено в браузъра.
 *
 * Дотогава не си личеше: надписът ставаше и оранжев, тоест цветът носеше
 * значението. Откакто буквите са разноцветни, оранжевото до тях не стига и
 * чертата остава единственият знак — значи трябва да е правилната.
 */
.mobile-link[data-navi-tuk]::after,
.mobile-grupa-btn[data-navi-tuk]::after {
  left: 50%;
  right: auto;
  bottom: 4px;
  width: 40px;
  transform: translateX(-50%);
}

/* Връзките в падащия панел не са `.navbar-link` и си имат свой вид. */
.navbar-grupa-link[data-navi-tuk] {
  background-color: var(--background-beige-01);
  color: var(--accent-orange-text);
}

/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/
.footer-section {
  width: 100%;
  height: auto;
  padding: 0 0 64px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

.footer-wave-bottom {
  transform: rotate(180deg);
  width: 100%;
  height: auto;
  z-index: -10;
  margin-top: -80px;
  margin-bottom: 64px;
}

.footer-main-container {
  width: var(--shirina);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 48px;
}

.footer-logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

.footer-logo-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.footer-logo-img {
  width: 480px;
  height: auto;
}

/*
 * ⚠️ `flex-wrap` Е ЗАДЪЛЖИТЕЛЕН ОТ 11.08.2026.
 *
 * Дотук редът беше 6-7 връзки и при 1440px заемаше 681px в кутия от 681px —
 * точно на ръба. Откакто подвалът показва същото като лентата горе, връзките
 * станаха десет: трите страници за празненства влязоха при останалите.
 *
 * Без преливане десетте излизат извън кутията си. `row-gap` е по-малък от
 * `gap` нарочно: 32px между два реда чете като два отделни списъка.
 */
.footer-links-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px;
  row-gap: 12px;
}

.footer-link {
  position: relative;
  font-size: 16px;
  font-weight: var(--semiBold);
  color: var(--text-01);
  transition: 0.5s;
}

/*
 * ═══ „ТУК СИ" И В ПОДВАЛА — 11.08.2026 ═════════════════════════════════════
 *
 * Същото, което прави лентата горе, със същите цветове. Дотук подвалът не
 * отбелязваше нищо и човек, който гледа долния списък, нямаше как да разбере
 * къде се намира.
 *
 * ⚠️ НЕ Е САМО ЦВЯТ. Разлика само по цвят не се вижда от човек с цветна
 * слепота (WCAG 1.4.1) — затова има и черта. Тук тя е под самия надпис, не от
 * край до край: връзките в подвала стоят една до друга и дълга черта би се
 * прочела като разделител.
 *
 * ⚠️ Оранжевото, а не розовото на посочването. Иначе текущата страница
 * изглежда като връзка, върху която в момента стои мишка.
 */
/*
 * ⚠️ ТАВАН НА ШИРИНАТА — ПОПРАВКА НА ИЗМЕРЕН СБЛЪСЪК · 11.08.2026.
 *
 * Откакто подвалът показва същите десет страници като лентата, редът им е
 * 1270 пиксела. При 1440 той тръгва от x=85 и първата връзка („График")
 * влиза в пандата, която стои залепена вляво и е 160 пиксела широка.
 * Преди, със седем връзки, редът беше 681px и започваше далеч навътре.
 *
 * Таванът го кара да се пречупи на два реда и да остане в средата. 900px е
 * избрано така, че при 1440 списъкът да заема 270-1170 — пандата свършва на
 * 160, подаръкът започва на 1332.
 *
 * ⚠️ САМО ЗА СПИСЪКА СЪС СТРАНИЦИ. Долната лента с общите условия ползва
 * същия клас и не бива да се стеснява — затова селекторът е с два класа.
 */
.footer-logo-container .footer-links-container {
  max-width: 900px;

  /*
   * ⚠️ `center`, А НЕ `space-between`. По-надолу има второ правило за същия
   * клас, което задава `space-between` — то важи и за долната лента, където
   * е правилното (два блока, единият вляво, другият вдясно).
   *
   * За този списък не е: докато редът беше един и пълен, разликата не се
   * виждаше. Откакто се пречупва на два, вторият ред се разпъваше от край до
   * край и три връзки стояха разхвърляни на 900 пиксела.
   */
  justify-content: center;
}

.footer-link[data-navi-tuk] {
  color: var(--accent-orange-text);
}

.footer-link[data-navi-tuk]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--accent-orange);
}

.footer-link:is(:hover, :focus-visible, :focus-within) {
  font-size: 16px;
  font-weight: var(--semiBold);
  /* О29: розовото даваше 3.06 върху бяло. */
  color: var(--accent-pink-text);
  cursor: pointer;
}

.footer-contact-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.footer-location {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
}

.footer-location-name {
  font-size: 16px;
  line-height: 18px;
  font-weight: var(--bold);
  /* О29: жълтото даваше 1.82 върху бяло — най-слабото на целия сайт. */
  color: var(--accent-yellow-star);
}

.footer-location-name.orange {
  font-size: 16px;
  line-height: 18px;
  font-weight: var(--bold);
  /* О29: оранжевото даваше 2.51 върху бяло. */
  color: var(--accent-orange-text);
}

.footer-location-name.green {
  font-size: 16px;
  line-height: 18px;
  font-weight: var(--bold);
  /* О29: зеленото даваше 1.42 върху бяло. */
  color: var(--accent-green-text);
}

.footer-location-separator {
  height: 52px;
  width: 1px;
  background-color: #e6e6e6;
}

.footer-location-phone-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  color: var(--text-02);
  font-weight: var(--semiBold);
  transition: color 0.5s;
}

/*
 * Работното време под телефона в подвала — 11.08.2026.
 *
 * По-дребно от номера и без иконка: то е справка, не действие. Изравнено е с
 * него отляво, за да не увисне само в колоната.
 *
 * Редът е дълъг („Делник 15:00 – 21:00, събота и неделя 09:00 – 21:00") и на
 * тесен екран се пренася — затова `line-height`, а не единичен ред.
 */
.footer-working-time {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-02);
  opacity: 0.85;
}

.phone-icon-footer {
  width: 24px;
  height: 24px;
  transform: rotate(15deg);
}

.phone-icon-footer.left {
  width: 24px;
  height: 24px;
  transform: rotate(-15deg);
}

.footer-links-container {
  width: fit-content;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  gap: 32px;
}

.social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.social-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-links-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}

/*
 * ⚠️ ВТОРО правило за същия селектор. По-горе има още едно, което задава
 * розово — това тук идва след него и печели, тоест ефектът е синьо. Оставено
 * както си беше: сливането им е промяна на дизайна, не на контраста.
 */
.footer-link:is(:hover, :focus-visible, :focus-within) {
  /* О29: синьото даваше 2.22 върху бяло. */
  color: var(--accent-blue-text);
  cursor: pointer;
}

.created-by-main-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.created-separator {
  height: 14px;
  width: 1px;
  background-color: #cccccc;
}

.created-by {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  /* Два надписа на един ред — на тесен екран трябва да могат да се пренесат. */
  flex-wrap: wrap;
}

.created-slash {
  color: #cccccc;
}

/*
 * ⚠️ ПОДПИСЪТ НА WEB-FABRIKA — 06.09.2026.
 *
 * Ползва Shantell Sans, същия шрифт на сайта. Той е с ПРОМЕНЛИВО тегло
 * (400–800 в @font-face горе), тоест 700 не тегли нов файл — идва от вече
 * свалените четири woff2.
 *
 * ⚠️ ЗАТОВА И НЕ СЕ ТЕГЛИ НОВ ШРИФТ. Отделно семейство заради две думи в
 * колонтитула значи още едно свързване към чужд сървър и още един файл на
 * всяка страница — за надпис, който почти никой не поглежда.
 *
 * Разредката е леко разтворена: Shantell е ръкописен и при едро тегло
 * буквите се долепват.
 */
.web-fabrika {
  font-family: 'Shantell Sans', 'Nunito Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: 0.02em;
  color: var(--web-fabrika-sinio);
  text-decoration: none;
  transition: color 0.3s;
}

.web-fabrika:is(:hover, :focus-visible) {
  /*
   * При посочване синьото просветлява, вместо да смени цвета си.
   * --accent-blue-text е 6.50 върху бяло — по-светло от тъмното синьо в
   * покой (11.28), но още далеч над прага. Тоест разликата се вижда, без
   * надписът да става блед.
   */
  color: var(--accent-blue-text);
  cursor: pointer;
}

.codemode-logo {
  filter: var(--filter-black);
  width: 80px;
  height: auto;
}

.phone-icon-footer {
  transition: 0.5s;
}

.footer-location-phone-container:is(:hover, :focus-visible, :focus-within) {
  /* О29: 1.82 върху бяло. */
  color: var(--accent-yellow-star);
}

.footer-location-phone-container:is(:hover, :focus-visible, :focus-within)
  .phone-icon-footer {
  filter: var(--filter-accent-yellow);
}

.footer-location-phone-container.orange:is(
    :hover,
    :focus-visible,
    :focus-within
  ) {
  /* О29: 2.51 върху бяло. */
  color: var(--accent-orange-text);
}

.footer-location-phone-container.pink:is(:hover, :focus-visible, :focus-within)
  .phone-icon-footer {
  filter: var(--filter-accent-orange);
}

.footer-location-phone-container.green:is(
    :hover,
    :focus-visible,
    :focus-within
  ) {
  /* О29: 1.42 върху бяло. */
  color: var(--accent-green-text);
}

.footer-location-phone-container.green:is(:hover, :focus-visible, :focus-within)
  .phone-icon-footer {
  filter: var(--filter-accent-green);
}

.footer-gift {
  width: 108px;
  height: auto;
  position: absolute;
  top: 164px;
  right: 0px;
  transform: rotate(-15deg);
}

.footer-panda {
  width: 160px;
  height: auto;
  position: absolute;
  top: 64px;
  left: 0px;
}

/*
 * ⚠️ ЕДНО ЛОГО, НЕ ДВЕ — 10.08.2026.
 *
 * Дотук стояха `.footer-logo-img-desktop` и `.footer-logo-img-mobile`: двете
 * <img> в разметката, а тези правила скриваха едното. Само че скрит с CSS
 * образ пак се сваля — виж бележката в partials/footer.php.
 *
 * Сега е един `<picture>` с `media` в `<source>`. Тук остава само големината;
 * коя рисунка се показва решава разметката, преди заявката.
 *
 * ⚠️ 1120px Е СЪЩАТА ГРАНИЦА, на която се сменяха двете. Тя се повтаря и в
 * `<source media>` в partials/footer.php — сменя се на двете места заедно.
 *
 * ⚠️ ГОЛЕМИНАТА Е НА `<picture>`, НЕ НА `<img>`. Правилото
 * `img[width][height] { max-width: 100% }` по-горе е със селектор от два
 * атрибута, тоест е по-специфично от всеки клас и побеждава граница, сложена
 * върху самата снимка. `<picture>` не се хваща от него. Виж и бележката в
 * partials/footer.php.
 */
.footer-logo-lik {
  display: block;
  width: 379px;
  max-width: 100%;
}

.footer-logo-lik img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * ТУК СТОЕШЕ СТЪПАЛОТО НА ПОДВАЛА: `@media (max-width: 1320px)` го сваляше от
 * 1200px на 1000px. Махнато е заедно с фиксираната ширина горе.
 *
 * Защо не може да остане: `var(--shirina)` вече мени ширината плавно с
 * прозореца. Стъпалото би го засякло на 1319px и подвалът щеше да скача от
 * 1239px на 1000px при един пиксел разлика — тоест точно обратното на
 * „разтяга се с браузъра".
 *
 * Долната граница си остава: на 1120px секцията взима padding отстрани и
 * подвалът минава на `width: 100%` вътре в него.
 */
@media (max-width: 1120px) {
  /*-----------------------------------*\
  #NAVBAR
\*-----------------------------------*/

  .NAVBAR {
    padding: 16px 32px;
  }

  .logo-navbar {
    width: 160px;
  }

  /*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/
  .footer-section {
    width: 100%;
    height: auto;
    padding: 0 48px 64px 48px;
  }

  .footer-wave-bottom {
    transform: rotate(180deg);
    width: calc(100% + 2 * 48px);
  }

  .footer-main-container {
    width: 100%;
  }

  .footer-panda {
    width: 140px;
    top: 24px;
  }

  .footer-gift {
    width: 96px;
  }

  .footer-logo-links {
    flex-direction: column;
    gap: 40px;
  }

  /* Под 1120px логото е другото и е по-тясно. Кое се сваля решава
     `<source media>` в partials/footer.php — тук е само големината. */
  .footer-logo-lik {
    width: 358px;
  }
}

@media (max-width: 970px) {
  /*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/
  .footer-section {
    width: 100%;
    height: auto;
    padding: 0 32px 64px 32px;
  }

  .footer-wave-bottom {
    width: calc(100% + 2 * 32px);
    margin-top: -20px;
  }

  .footer-main-container {
    width: 100%;
  }

  .footer-contact-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-direction: column;
  }

  .footer-location-separator {
    display: none;
  }

  .footer-location {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 560px;
    height: auto;
    border: solid 1px #f5f0ea;
    border-radius: 12px;
    padding: 16px;
  }

  .footer-location-name {
    text-align: center;
  }

  .footer-links-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 32px;
  }

  /*
   * ═══ СПИСЪКЪТ В ПОДВАЛА НА ТЕЛЕФОН — ЕДИН ПОД ДРУГ · 11.08.2026 ══════════
   *
   * Същата подредба като в чекмеджето на хамбургера: един ред, една връзка.
   *
   * ⚠️ ПРОБВАНО И ОТХВЪРЛЕНО: две колони. Идеята беше да се спести височина,
   * след като връзките станаха десет. Само че „Погачи и прощапулници" е
   * най-дългият надпис на сайта и в две колони се пречупва на два реда —
   * една връзка, разкъсана на две, чете се като две различни.
   *
   * Височината е цената и тя е приемлива: подвалът е място, където човек
   * търси списък, а не където бърза.
   *
   * ⚠️ САМО СПИСЪКЪТ, НЕ И ДОЛНАТА ЛЕНТА. Правилото отгоре важи за ДВА
   * различни блока — този и долната лента с общите условия и авторството.
   * Затова селекторът е с два класа: хваща само този и бие и правилото при
   * 600px, без да се разчита на реда във файла.
   */
  .footer-logo-container .footer-links-container {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;

    /*
     * ⚠️ ТУК НЯМА ОТСТЪП ОТСТРАНИ — И ТОВА Е НАРОЧНО.
     *
     * Първо сложих 68 пиксела, за да пази от пандата вляво и подаръка вдясно.
     * Излишно е: в колона кутията е `width: fit-content`, тоест широка точно
     * колкото най-дългия надпис (210px), и стои в средата. Премерено — на
     * 390px тя заема 90-300, а рисунките свършват на 72 и започват на 333.
     *
     * А отстъпът вредеше: на 360px оставяха 192 пиксела за надпис, който иска
     * 210, и „Погачи и прощапулници" се пречупваше на два реда.
     *
     * `z-index` остава — опашката на пандата стърчи по-навътре от кутията ѝ.
     */
    position: relative;
    z-index: 1;
  }

  /* Рисунките слизат под текста. Виж бележката горе защо и двете. */
  .footer-panda,
  .footer-gift {
    z-index: 0;
  }

  /*
   * Смалени още малко на 11.08.2026: подвалът вече носи десет връзки вместо
   * шест и на телефон те са на две колони. Всеки пиксел, който рисунките
   * отстъпват, е пиксел за текста между тях.
   */
  .footer-panda {
    width: 76px;
  }

  .footer-gift {
    width: 60px;
  }
}

@media (max-width: 600px) {
  .footer-links-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
  }

  .footer-logo-img {
    min-width: 280px;
    width: 100%;
    height: auto;
    max-width: 400px;
  }

  /*
   * ⚠️ ЧЕТВЪРТОТО ПРАВИЛО ЗА СЪЩИТЕ ДВЕ РИСУНКИ. Идва последно и печели над
   * трите по-горе — при всяка промяна се гледа ТОВА.
   *
   * Смалени на 11.08.2026 заедно с останалите: подвалът вече носи десет
   * връзки на две колони и всеки пиксел, който рисунките отстъпват, е пиксел
   * за текста между тях. Виж бележката при отстъпа на списъка по-горе.
   */
  .footer-panda {
    width: 72px;
    top: 300px;
  }

  .footer-gift {
    width: 56px;
    top: 180px;
  }
}

@media (max-width: 550px) {
  .footer-section {
    width: 100%;
    height: auto;
    padding: 0 16px 64px 16px;
  }

  .footer-wave-bottom {
    width: calc(100% + 2 * 16px);
    margin-top: -20px;
  }

  .footer-logo-container {
    width: 100%;
  }

  .created-by-main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 12px;
  }

  .created-separator {
    display: none;
  }

  /* Контейнерът е в колона — редът с изработчиците се центрира заедно с него. */
  .created-by {
    justify-content: center;
    text-align: center;
  }

  .footer-logo-text {
    font-size: 14px;
    text-align: center;
  }
}

/* Utility flags for visibility */
.desktop-only {
  display: flex;
}

.mobile-only {
  display: none;
}

/* Right cluster on mobile: contact + hamburger */

/* Hamburger button */
.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: 44px;
  background: transparent;
  /* transparent background */
  border: none;
  /* no border */
  border-radius: 0;
  /* no rounding */
  padding: 0;
}

.hamburger-line {
  width: 20px;
  height: 2px;
  background: var(--text-01);
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

/* X state */
.hamburger.is-open .hamburger-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.hamburger.is-open .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger.is-open .hamburger-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  top: 80px;
  /* height of NAVBAR */
  left: 0;
  right: 0;
  height: 0;
  overflow: visible;
  z-index: 999;
  /* below navbar which is 1000 */
}

/*
 * ═══ ЧЕКМЕДЖЕТО НА ТЕЛЕФОН — ПРЕМЕРЕНО И ПОПРАВЕНО НА 08.08.2026 ═════════
 *
 * ⚠️ ТРИ ВРЪЗКИ БЯХА НЕДОСТИЖИМИ. Премерено в Chrome на 390×844: панелът
 * излизаше 1219px висок в прозорец от 853px. „Галерия", „Меню" и „Блог"
 * висяха под екрана — а тялото е заключено (`.body-lock`), панелът нямаше
 * нито таван на височината, нито скрол. Тоест нямаше НИКАКЪВ начин да се
 * стигне до тях с отворено меню.
 *
 * Причината е в две числа тук: `gap: 56px` при шрифт 28px. Десет реда с по
 * 118px стъпка не се побират в телефон, а сега редовете станаха тринайсет.
 *
 * Поправката е от три части и всяка е нужна:
 *
 *   1. ТАВАН + СКРОЛ — панелът не може да е по-висок от екрана под лентата.
 *      Това е предпазителят: побере ли се, скрол не се вижда; не се ли
 *      побере (нисък телефон, едър системен шрифт), се появява и всичко
 *      остава достижимо.
 *
 *   2. ПО-ПЛЪТНА СТЪПКА — 56px става 6px, а размерът на буквите слиза от
 *      28px на 22px. Видът остава същият: беж, едри букви Shantell,
 *      центрирани. Просто се побират.
 *
 *   3. ОТСТЪП ОТСТРАНИ — дотук беше `padding: 48px 0`, тоест нула отляво.
 *      Затова надписът „ПРАЗНЕНСТВА" започваше от пиксел нула и изглеждаше
 *      отрязан.
 *
 * `100dvh` мери екрана БЕЗ лентите на браузъра — с `100vh` на телефон
 * панелът щеше да смята, че има повече място, отколкото се вижда. Редът с
 * `100vh` отгоре е за стари браузъри, които не разбират `dvh`.
 *
 * `overscroll-behavior: contain` спира скрола да „избяга" на страницата
 * отзад, когато човек стигне края на списъка.
 */
.mobile-drawer-inner {
  position: relative;
  background: var(--background-beige-02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  padding: 20px 20px calc(24px + env(safe-area-inset-bottom));
  display: grid;
  gap: 6px;
  align-content: start;

  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  overscroll-behavior: contain;

  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

/* Backdrop */
.mobile-backdrop {
  position: fixed;
  inset: 0;
  top: 80px;
  /* under the navbar */
  background: rgba(49, 47, 48, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Open state (controlled by [data-open]) */
.mobile-drawer[data-open="true"] .mobile-drawer-inner {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.mobile-drawer[data-open="true"] .mobile-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile link sizing */
.mobile-link {
  display: flex;
  padding: 10px;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  font-weight: 700;

  /* 28px беше. Виж бележката при .mobile-drawer-inner защо слезе. */
  font-size: 22px;

  /* Точка О7 — целта за пръст е поне 44px. При 22px шрифт и 10px отстъп
     редът излиза ~44px, но това зависи от шрифта; числото го заковава. */
  min-height: 44px;
}

/* Prevent body scroll when menu open */
.body-lock {
  overflow: hidden;
}

/* ─────────── Responsive rules ─────────── */
@media (max-width: 900px) {
  .NAVBAR {
    padding: 16px 16px;
  }

  .logo-navbar {
    width: 160px;
  }

  .navbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: flex;
  }

  .main-button {
    padding: 12px 20px;
    font-size: 14px;
  }

  .main-button-icon {
    display: none;
  }
}

/* ============================================================
   БЪРЗА ВРЪЗКА — плаващи бутони за Viber и обаждане (етап 5)
   ============================================================
   Долу вдясно на всяка страница. На мобилен ще бъдат заменени от
   постоянната лента в етап 6 — дотогава се показват навсякъде.
*/

/*
 * Вдясно, на средата на височината — по решение от 04.08.2026. Долният ъгъл
 * се подминава с поглед; средата попада точно там, където стои окото при четене.
 *
 * ⚠️ `transform` тук прави от .quick-contact контейнер за всеки `position: fixed`
 * ВЪТРЕ в нея. Панелът за маршрут затова НЕ живее тук, а в sticky-cta.php —
 * сложи ли се вътре, ще се закачи за кръгчетата вместо за екрана. Същото важи
 * за всяко бъдещо изскачащо нещо.
 */
.quick-contact {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900; /* под чекмеджето на менюто, над съдържанието */
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

.quick-contact-button {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 52px;
  padding: 0;
  border-radius: 26px;
  text-decoration: none;
  color: var(--white);
  font-family: "Shantell Sans", cursive;
  font-weight: var(--medium);
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  transition: gap 0.25s ease, padding 0.25s ease, transform 0.15s ease;
}

.quick-contact-viber {
  background-color: #5b4bd6; /* цветът на Viber, малко потъмнен заради белия надпис (О3) */
}

/*
 * WhatsApp — 11.08.2026.
 *
 * ⚠️ НЕ Е МАРКОВОТО #25D366. То с бял надпис отгоре дава 1.98:1 — почти
 * нечетимо и три пъти под прага. Тъмното на самия WhatsApp (#128C7E) също не
 * стига: 4.14:1. #0E7C6C дава 5.10:1 и остава разпознаваемо тяхното зелено —
 * същият ход като при лилавото на Viber до него, което е 6.14:1. Точка О3.
 */
.quick-contact-whatsapp {
  background-color: #0e7c6c;
}

/* Оранжевото кръгче носи тъмен надпис, не бял (точка О3). */
.quick-contact-phone {
  background-color: var(--accent-orange);
  color: var(--text-01);
}

/*
 * „Маршрут" — същото зелено като в лентата долу, за да е един и същ бутон на
 * телефон и на монитор. Тъмен надпис: бял върху това зелено не се чете (О3).
 *
 * <button> е, не <a> — трябва да му се свали рамката на браузъра. Шрифтът и
 * размерът НЕ се задават тук: идват от .quick-contact-button, за да не се
 * разминат двата бутона, ако някой ги смени там.
 */
.quick-contact-route {
  background-color: var(--accent-green);
  color: var(--text-01);
  border: none;
  cursor: pointer;
}

.quick-contact-route .quick-contact-icon img {
  filter: brightness(0); /* черна, за да върви с тъмния надпис */
}

.quick-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
}

.quick-contact-phone .quick-contact-icon img {
  filter: brightness(0); /* тъмна, за да върви с тъмния надпис (О3) */
}

/* Надписът стои скрит и се разгъва при посочване с мишка.
   Свит е с max-width, а не с display:none, за да остане четим
   за екранни четци и за да има какво да се анимира. */
.quick-contact-label {
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: max-width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
}

.quick-contact-button:hover,
.quick-contact-button:focus-visible {
  transform: translateY(-2px);
}

.quick-contact-button:hover .quick-contact-label,
.quick-contact-button:focus-visible .quick-contact-label,
.quick-contact-fallback .quick-contact-label {
  max-width: 180px;
  opacity: 1;
  padding-left: 18px;
}

/* Показва се, когато Viber не се е отворил на настолен компютър. */
.quick-contact-fallback {
  background-color: var(--accent-orange);
}

/* Устройства без мишка — надписът не се разгъва, остават само кръгчетата. */
@media (hover: none) {
  .quick-contact-button:hover .quick-contact-label {
    max-width: 0;
    opacity: 0;
    padding-left: 0;
  }
}

@media (max-width: 970px) {
  .quick-contact {
    right: 14px;
    gap: 10px;
  }
}

/* Уважава системната настройка „по-малко движение". */
@media (prefers-reduced-motion: reduce) {
  .quick-contact-button,
  .quick-contact-label {
    transition: none;
  }
}

/* ============================================================
   ПОСТОЯННА ЛЕНТА ДОЛУ — само на телефон (етап 6)
   ============================================================
   Три равни бутона: обаждане, Viber, запитване. Появява се след
   300px скрол и се крие, когато формата за запитване е на екрана.
*/

.sticky-cta {
  display: none; /* включва се само в медия заявката долу */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950; /* над плаващите бутони, под чекмеджето на менюто */
  background-color: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);

  /* Отстъпът пази бутоните от лентата на браузъра в iPhone Safari. */
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  gap: 8px;

  /* Скрита е чрез изместване надолу, а не с display, за да има какво
     да се плъзне. Показва се със .sticky-cta-visible. */
  transform: translateY(110%);
  transition: transform 0.25s ease;
}

.sticky-cta-visible {
  transform: translateY(0);
}

.sticky-cta-button {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px; /* достатъчно голяма цел за пръст */
  padding: 0 6px;
  border-radius: 23px;
  text-decoration: none;
  color: var(--white);
  font-family: "Shantell Sans", cursive;
  font-weight: var(--medium);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

/* Точка О3: текстът е тъмен, не бял. Бяло върху това оранжево дава 2.51:1,
   тъмното — 5.29:1. Цветът на марката остава непроменен. */
.sticky-cta-call {
  background-color: var(--accent-orange);
  color: var(--text-01);
}

/* Лилавото на Viber с бяло отгоре дава 4.48:1 — на косъм под прага.
   Малко по-тъмно лилаво го вдига на 6.14:1, без да престане да е Viber. */
.sticky-cta-viber {
  background-color: #5b4bd6;
}

/* Същото зелено като на плаващото кръгче — виж защо не е марковото там. */
.sticky-cta-whatsapp {
  background-color: #0e7c6c;
}

/* Третият бутон вече е „Маршрут" (01.08.2026). Класът .sticky-cta-form остава
   за съвместимост, ако някой го върне. */
.sticky-cta-route,
.sticky-cta-form {
  background-color: var(--accent-green);
  color: var(--black);
}

.sticky-cta-icon {
  flex: 0 0 auto;
}

.sticky-cta-call .sticky-cta-icon {
  filter: brightness(0); /* тъмна, за да върви с тъмния надпис (О3) */
}

.sticky-cta-route .sticky-cta-icon,
.sticky-cta-form .sticky-cta-icon {
  filter: brightness(0); /* черно — върху зеленото се чете по-добре */
}

/* Бутон, а не връзка — трябва да изглежда еднакво със съседите си. */
.sticky-cta-route {
  border: none;
  font-family: "Shantell Sans", cursive;
  font-weight: var(--medium);
  font-size: 14px;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   ЧЕТИРИ БУТОНА В ЛЕНТАТА — 11.08.2026
   ---------------------------------------------------------------------------
   Лентата беше стъкмена за три (обади се, маршрут, Viber). WhatsApp е четвърти
   и мястото свършва: при 360px ширина остават по 80px на бутон, а „WhatsApp"
   с икона иска към 96px. Надписът се пренася на втори ред и лентата порасва
   на два етажа.

   Затова под 430px шрифтът, разредките и отстъпите се стягат. Проверено при
   360, 390 и 430px — виж бележката в partials/sticky-cta.php.

   ⚠️ ТЕЗИ ЧИСЛА СА ЗА ЧЕТИРИ БУТОНА. Стане ли пети, няма да стигнат: тогава
   или надписите на Viber и WhatsApp отпадат (иконите им се познават и без
   тях), или лентата минава на два реда нарочно.
   --------------------------------------------------------------------------- */

@media (max-width: 430px) {
  .sticky-cta {
    padding-left: 6px;
    padding-right: 6px;
    gap: 5px;
  }

  .sticky-cta-button,
  .sticky-cta-route {
    font-size: 12px;
    gap: 4px;
    padding: 0 3px;
  }

  /* Иконите слизат заедно с надписа — иначе изяждат мястото, което той
     освободи, и нищо не се печели. */
  .sticky-cta-icon {
    width: 18px;
    height: 18px;
  }
}

/* ============================================================
   ИЗБОР НА ПРИЛОЖЕНИЕ ЗА МАРШРУТ (01.08.2026)
   ============================================================
   Панел, който изплува отдолу, когато се натисне „Маршрут".
   Един адрес, три приложения — без гадаене кое ползва човекът.
*/

.route-sheet {
  position: fixed;
  inset: 0;
  z-index: 1100; /* над лентата (950) и над чекмеджето на менюто (999) */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/*
 * ⚠️ БЕЗ ТОЗИ РЕД ЦЕЛИЯТ САЙТ СПИРА ДА РЕАГИРА НА НАТИСКАНЕ.
 *
 * `hidden` в HTML работи, защото стиловете на браузъра му дават `display: none`.
 * Но стил на автора бие стил на браузъра независимо от специфичността — тоест
 * `display: flex` горе го отменя и панелът НИКОГА не се скрива.
 *
 * Отвън не личи: фонът е с `opacity: 0`, а панелът е избутан под екрана. Само
 * че прозрачно не значи непроходимо — слоят стои прострян по целия екран
 * (`inset: 0`, z-index 1100) и поглъща всяко натискане, където и да е.
 *
 * Партиалът се включва на ВСЯКА страница, значи чупи всичко навсякъде.
 * Точно това се случи между 01.08 и 04.08.2026.
 */
.route-sheet[hidden] {
  display: none;
}

.route-sheet-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(49, 47, 48, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;

  /*
   * Прозрачно не значи непроходимо. При затваряне има 200ms, докато панелът се
   * плъзга надолу, преди JS да сложи `hidden` — през тях фонът вече е невидим,
   * но още хваща натисканията. Същият похват като при чекмеджето на менюто
   * (виж .mobile-backdrop по-горе).
   */
  pointer-events: none;
}

.route-sheet-open .route-sheet-backdrop {
  pointer-events: auto;
}

.route-sheet-panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  background-color: var(--white);
  border-radius: 20px 20px 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.18);

  /* Плъзва се отдолу. Скрито състояние = изместено под екрана. */
  transform: translateY(100%);
  transition: transform 0.22s ease;
}

.route-sheet-open .route-sheet-backdrop {
  opacity: 1;
}

.route-sheet-open .route-sheet-panel {
  transform: translateY(0);
}

.route-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.route-sheet-title {
  font-family: "Shantell Sans", cursive;
  font-size: 18px;
  line-height: 24px;
  font-weight: var(--semiBold);
}

.route-sheet-close {
  flex: 0 0 auto;

  /* Цел за пръст (О13-О15). */
  width: 44px;
  height: 44px;
  margin: -10px -10px 0 0;

  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: var(--neutral-02);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.route-sheet-close:focus-visible {
  outline: 2px solid var(--text-01);
  outline-offset: 2px;
}

.route-sheet-address {
  margin: 6px 0 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--neutral-14); /* 7.00:1 върху бяло */
}

/*
 * Името на центъра стои на свой ред над адреса. `display: block` върши работата
 * на <br>, за да няма празен ред, ако името някога стане по-дълго и се пренесе.
 */
.route-sheet-place {
  display: block;
  color: var(--text-01);
  font-weight: var(--semiBold);
}

.route-sheet-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  margin-bottom: 10px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 16px;
  font-weight: var(--semiBold);
  text-decoration: none;
  color: var(--text-01);
  background-color: var(--white);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.route-sheet-option:last-child {
  margin-bottom: 0;
}

/*
 * Иконата на приложението — истинската, квадратната, същата като на телефона.
 *
 * `flex: 0 0 auto` — иначе гъвкавата подредба би я свила, ако надписът стане
 * по-дълъг (точка О18: елемент в flex се смалява под съдържанието си).
 *
 * Заоблянето го прави браузърът, не файлът: App Store отдава иконите с прави
 * ъгли, а маската я слага операционната система. 7px на 28px дава същата
 * извивка, която се вижда на екрана на телефона.
 *
 * Тънката рамка е заради Google — неговата икона е на бял фон и без нея се
 * слива с белия бутон. `box-sizing: border-box`, за да не надуе рамката
 * елемента с два пиксела (същата грешка като при О16).
 */
.route-sheet-option-icon {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 7px;
}

.route-sheet-option:hover,
.route-sheet-option:focus-visible {
  background-color: var(--background-beige-01);
  border-color: var(--text-01);
}

.route-sheet-option:focus-visible {
  outline: 2px solid var(--text-01);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .route-sheet-panel,
  .route-sheet-backdrop {
    transition: none;
  }
}

@media (max-width: 767px) {
  .sticky-cta {
    display: flex;
  }

  /* Плаващите кръгчета отстъпват — двете заедно се препокриват. */
  .quick-contact {
    display: none;
  }

  /* Лентата не бива да закрива края на колонтитула.
     Отстъпът е на .footer-section, а не на body: колонтитулът няма собствен
     фон, тоест отстъп на body би бил бяла ивица ПОД него. Така мястото се
     отваря вътре в колонтитула, където вече има 64px отстъп долу. */
  .footer-section {
    padding-bottom: 126px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta {
    transition: none;
  }
}

/* Капанът за ботове (етап 4). Не се ползва display:none — част от ботовете
   нарочно прескачат скритите така полета. Изнесен е извън екрана. */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* „(по желание)" до надписа на имейла — по-леко от самия надпис. */
.contact-form-optional {
  font-weight: var(--regular);
  opacity: 0.7;
  font-size: 0.9em;
}

/* ============================================================
   БУТОНИ ЗА ДЕЙСТВИЕ — главен + по-лека алтернатива (етап 7)
   ============================================================
   Правилото е един тежък бутон на екран. Вторият е контурен и
   по-малък: дава избор, без да се състезава с главния.
*/

.cta-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  /* Точка О13: целта за пръст е поне 44px. Досега беше около 33px. */
  min-height: 44px;
  padding: 8px 18px;
  /*
   * Рамката остава в наситеното оранжево — за нетекстов елемент прагът е 3:1
   * и 2.51 е близо, но надписът вътре е текст и иска 4.5:1. Затова двете са
   * различни цветове нарочно, а не по недоглеждане.
   */
  border: 1.5px solid var(--accent-orange);
  border-radius: 22px;
  color: var(--accent-orange-text);
  background: transparent;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.secondary-button:hover,
.secondary-button:focus-visible {
  background-color: var(--accent-orange);
  color: var(--white);
}

@media (max-width: 767px) {
  .secondary-button {
    font-size: 13px;
    padding: 7px 14px;
    /* min-height: 44px идва от правилото горе и НЕ се презаписва тук —
       точно на телефон целта трябва да е най-голяма. */
  }
}

/* Обвивка за бутоните, добавени в края на секция (етап 7). */
/*
 * Обвивка за бутоните в края на секция.
 *
 * Слага се ВЪТРЕ в контейнера на секцията, който е колона — не като пряк
 * наследник на самата секция. Секциите (.pricing-section, .gallery-section) са
 * хоризонтални подредби и там блокът заставаше вдясно от съдържанието.
 *
 * Разстоянието отдолу идва от отстъпа на секцията, а отгоре — от gap-а на
 * контейнера. Затова тук няма собствени отстъпи нагоре и надолу.
 */
.section-cta {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 20px;
  position: relative;
  z-index: 2; /* над декоративните илюстрации в секцията */
}

/* Двойката в първия екран стои по-стегнато — там мястото е малко. */
.hero-cta {
  gap: 8px;
}

/* ---------------------------------------------------------------------------
   ИКОНИТЕ НА VIBER И WHATSAPP — квадратни, като на телефон (06.08.2026)
   ---------------------------------------------------------------------------
   Дотук беше едноцветен силует, който взимаше цвета на бутона. Сега е самата
   икона на приложението — човек я познава, преди да е прочел надписа.

   ⚠️ БЯЛАТА ПОДЛОЖКА НЕ Е УКРАСА. Бутонът е лилав (#5b4bd6) и иконата е
   лилава (#7360F2). Без нея квадратчето потъва в бутона и се вижда само белият
   знак вътре — тоест обратното на това, което искахме.

   ⚠️ СЪЩОТО ВАЖИ И ЗА WHATSAPP (11.08.2026): бутонът е зелен (#0e7c6c) и
   иконата е зелена (#25D366). Без подложката остава да се вижда само белият
   телефон вътре, без квадратчето — тоест пак обратното на целта.

   Подложката е с 2px повече от иконата от всяка страна и със същото
   закръгление, за да изглежда като плочка на екран, а не като кръпка.
   --------------------------------------------------------------------------- */

.quick-contact-viber-app,
.quick-contact-whatsapp-app,
.sticky-cta-viber-app,
.sticky-cta-whatsapp-app {
  border-radius: 7px;
  background-color: var(--white);
  box-shadow: 0 0 0 2px var(--white);

  /* Съотношението е 1:1 и трябва да си остане такова. Иконата е квадратна;
     разтеглена, тя престава да е иконата на приложението. */
  aspect-ratio: 1;
  object-fit: contain;
}

.sticky-cta-viber-app,
.sticky-cta-whatsapp-app {
  border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   ПАДАЩОТО МЕНЮ „ПРАЗНЕНСТВА" — 06.08.2026
   ---------------------------------------------------------------------------
   Три страници под един надпис в лентата: рождени дни, кръщене, погачи.
   --------------------------------------------------------------------------- */

.navbar-grupa {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Бутонът изглежда като останалите линкове — .navbar-link го рисува,
   тук само се маха каквото браузърът добавя на <button>.

   ⚠️ ТУК НЕ СЕ ПИШЕ `font-family`. Дотук стоеше `font-family: inherit` и
   заради него надписът „Празненства" излизаше с Nunito Sans, докато всичките
   му съседи бяха с Shantell Sans.

   Защо: универсалният селектор най-горе слага Nunito Sans на ВСЕКИ елемент,
   включително на обвивката `.navbar-grupa`. Значи `inherit` тук наследява
   точно Nunito Sans. А тежестта на `.navbar-grupa-btn` е същата като на
   `.Shantell`, но идва по-надолу във файла — тоест побеждаваше класа, който
   бутонът си носи в разметката.

   `font-family: inherit` беше сложено срещу шрифта, който браузърът дава на
   <button> по подразбиране. Не е нужно: авторско правило бие браузърското,
   а `.Shantell` е авторско. */
.navbar-grupa-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 4px;
  border: none;
  background: transparent;
  cursor: pointer;
}

/*
 * ═══ ЦВЕТНИТЕ БУКВИ НА „ПРАЗНЕНСТВА" — 10.08.2026 ═════════════════════════
 *
 * Разметката е в partials/navbar.php, при $naviCvetno. Там е и защо изобщо ги
 * има и защо цветовете НЕ са тези от логото.
 *
 * ⚠️ `font-family` И `font-weight` СА ЗАДЪЛЖИТЕЛНИ ТУК. Универсалният селектор
 * най-горе слага на ВСЕКИ елемент „Nunito Sans" и тегло 500 — включително на
 * тези <span>-ове, които са вътре в бутон с Shantell Sans и тегло 600. Без
 * двата реда думата излиза с друг шрифт и по-тънка от съседите си в лентата.
 * Същият капан вече изяде един ден при .navbar-grupa-btn — виж бележката там.
 *
 * ⚠️ ЦВЕТЪТ НА БУКВИТЕ ПОБЕЖДАВА ПОСОЧВАНЕТО. `.navbar-link:hover` боядисва
 * бутона в оранжево, но не стига до буквите — те си имат свой цвят. Затова
 * обратната връзка при посочване идва от драскулката отдолу
 * (.underline-icon-nav), а „тук си" — от оранжевата чертичка на
 * `[data-navi-tuk]::after`. И двете са на бутона, не на буквите, и работят.
 *
 * ⚠️ СТРЕЛКАТА ОСТАВА ЕДНОЦВЕТНА. Тя е `currentColor`, тоест цветът на бутона.
 * Вкара ли се и тя в дъгата, знакът за „има още отдолу" се губи в шарения.
 */
.navi-cvetno {
  font-family: inherit;
  font-weight: inherit;
}

/*
 * ⚠️ КОНТУРЪТ НЕ Е УКРАСА. НЕ СЕ МАХА.
 *
 * Цветовете са суровите от логото — по изрично решение от 10.08.2026, след
 * като бяха пробвани свалените текстови варианти и бяха отхвърлени: искаше се
 * логото, не нещо близко до него.
 *
 * Само че върху беж-02 зеленото на логото мери 1.44:1, а жълтото 1.79:1 при
 * праг 4.5. Голи, тези две букви просто не се четат. В самото лого минават,
 * защото там са едри и дебели — не защото цветът е четим.
 *
 * Контурът е това, което ги прави четими: тънко очертание в кафявото на
 * логото (#382A02, 15.3:1 върху беж-02) обикаля всяка буква и окото хваща
 * формата ѝ от него, а цветът остава вътре. Същият похват, с който се пишат
 * надписи върху снимка.
 *
 * `paint-order: stroke fill` е задължителен — без него очертанието се рисува
 * ОТГОРЕ на буквата и изяжда половината от цвета ѝ отвътре. С него минава
 * отдолу и навън се вижда само външната половина.
 *
 * Дебелината е в `em`, не в пиксели: 16px в лентата и 22px в чекмеджето, а
 * контур с постоянна дебелина при 16px замазва буквата.
 */
.navi-bukva {
  font-family: inherit;
  font-weight: inherit;

  -webkit-text-stroke: 0.035em var(--logo-kafyavo);
  paint-order: stroke fill;
}

/*
 * ⚠️ СЕДЕМ ЦВЯТА — толкова са в логото.
 *
 * Червеното е първо, защото така поиска и защото буквата, с която започва
 * думата, е най-видяната. Останалите вървят в реда на дъгата.
 *
 * Броенето в partials/navbar.php е `% 7` и върви В КОМПЛЕКТ с този списък.
 * Махне ли се цвят оттук, числото там трябва да слезе заедно с него — иначе
 * буквата остава без правило и универсалният селектор ѝ дава сивото на текста.
 */
.navi-bukva[data-navi-cvyat="0"] {
  color: var(--logo-cherveno);
}

.navi-bukva[data-navi-cvyat="1"] {
  color: var(--logo-oranzhevo);
}

.navi-bukva[data-navi-cvyat="2"] {
  color: var(--logo-zhalto);
}

.navi-bukva[data-navi-cvyat="3"] {
  color: var(--logo-zeleno);
}

.navi-bukva[data-navi-cvyat="4"] {
  color: var(--logo-sinjo);
}

.navi-bukva[data-navi-cvyat="5"] {
  color: var(--logo-lilavo);
}

.navi-bukva[data-navi-cvyat="6"] {
  color: var(--logo-rozovo);
}

/* Стрелката надолу — рисувана, не знак от шрифта: „▾" излиза различно
   голяма в различните браузъри и подскача спрямо надписа. */
.navbar-grupa-strelka {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.navbar-grupa-btn[aria-expanded="true"] .navbar-grupa-strelka {
  transform: translateY(1px) rotate(-135deg);
}

/* ---------- Панелът ---------- */

.navbar-grupa-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;

  min-width: 240px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background-color: var(--white);
  box-shadow: 0 12px 32px rgba(49, 47, 48, 0.14);
}

/*
 * ⚠️⚠️ ТОЗИ РЕД ДЪРЖИ ЦЕЛИЯ САЙТ. НЕ СЕ МАХА.
 *
 * Отгоре стои `position: absolute`, а панелът виси в лента с `position: fixed`
 * и `z-index: 1000` — тоест над ВСЯКА страница на сайта. Сложи ли се някога
 * `display` на реда горе без този пазач, панелът бие атрибута `hidden`, остава
 * невидим, но отгоре, и спира всяко щракване навсякъде.
 *
 * Точно това се случи на 05.08.2026 със слоя на маршрута. Оттам нататък нито
 * един бутон в сайта не реагираше и не личеше защо.
 */
.navbar-grupa-panel[hidden] {
  display: none;
}

/* Мостът към панела: без него мишката минава през празното между бутона и
   панела и излиза от групата, преди да е стигнала. */
.navbar-grupa-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.navbar-grupa-link {
  display: block;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--text-01);
  font-size: 15px;
  font-weight: var(--semiBold);
  text-decoration: none;
  white-space: nowrap;
}

.navbar-grupa-link:is(:hover, :focus-visible) {
  background-color: var(--background-beige-01);
}

/* ---------- Същите три в чекмеджето на телефон ---------- */

/*
 * ⚠️ ЖЪЛТАТА ЧЕРТА Е НА ПАНЕЛА, НЕ НА ГРУПАТА — 10.08.2026.
 *
 * Дотук чертата и отстъпът стояха на обвивката и обхващаха и надписа.
 * Откакто надписът е ред като всички останали, това вече пречи по два
 * начина: чертата виси до един-единствен ред, докато групата е сгъната, а
 * отстъпът избутва центрирания текст с 14px спрямо съседите му и „Празненства"
 * не стои под „За нас".
 *
 * Сега обвивката е гола, а чертата тръгва от панела — тоест се появява точно
 * когато има какво да огражда.
 */
.mobile-grupa {
  display: grid;
  gap: 6px;
}

/*
 * Редът „Празненства" изглежда като „График" и „Блог": същият шрифт, размер,
 * тежест и цвят. Разликата е само стрелката вдясно.
 *
 * Стойностите са преписани от `.mobile-link`, а не наследени — бутонът
 * нарочно НЕ носи този клас, защото скриптът затваря чекмеджето по него.
 * Виж бележката в partials/navbar.php.
 *
 * ⚠️ ТУК НЕ СЕ ПИШЕ `font-family` — важи същото като при .navbar-grupa-btn:
 * `inherit` би издърпал Nunito Sans от универсалния селектор и надписът щеше
 * да излезе с друг шрифт от съседите си.
 */
.mobile-grupa-btn {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border: none;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;

  color: var(--text-01);
  font-size: 22px;
  font-weight: 700;

  /* Точка О7 — целта за пръст е поне 44px. */
  min-height: 44px;
}

/*
 * Стрелката е рисувана, не знак от шрифта: „▾" излиза различно голяма в
 * различните браузъри и подскача спрямо надписа.
 *
 * Стои с `position: absolute`, за да не мести надписа от центъра — при
 * `margin-left: auto` текстът щеше да се изтегли вляво и редът нямаше да
 * стои под съседите си.
 */
.mobile-grupa-strelka {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}

.mobile-grupa-btn[aria-expanded="true"] .mobile-grupa-strelka {
  transform: translateY(-25%) rotate(-135deg);
}

.mobile-grupa-panel {
  padding-left: 14px;
  border-left: 3px solid var(--accent-yellow);
  display: grid;
  gap: 2px;
}

/*
 * ⚠️ ПАЗАЧЪТ. Отгоре стои `display: grid` — без този ред той бие атрибута
 * `hidden` и панелът стои отворен винаги. Същото, което е описано подробно
 * при .navbar-grupa-panel[hidden].
 */
.mobile-grupa-panel[hidden] {
  display: none;
}

/*
 * Трите под надписа са с малко по-дребен шрифт от главните раздели. Така
 * личи, че са подредба под „Празненства", а не равни с „График" и „Блог".
 */
.mobile-grupa-link {
  font-size: 19px;
}

/* ── общите условия и политиката, най-долу ────────────────── */

.mobile-dolno {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.mobile-dolno-link {
  display: inline-flex;
  align-items: center;

  /* Точка О7 отново: дребен шрифт, но целта за пръст остава 44px. */
  min-height: 44px;
  padding: 0 6px;

  font-size: 14px;
  color: var(--neutral-14); /* 7.00:1 върху беж-02 */
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mobile-dolno-tochka {
  color: var(--neutral-11);
}

/* ---------- Малко по-тясно между линковете, защото станаха повече ---------- */

@media (max-width: 1200px) {
  .navbar-links-container {
    gap: 22px;
  }
}

/* ===========================================================================
   ЛЕНТА ЗА ВАКАНЦИЯ — 15.08.2026
   ===========================================================================
   Показва се най-горе на всяка страница, когато `vakanciya.obhvat` е 'lenta'.
   Сайтът работи целият; лентата само казва, че точно сега е затворено.

   ⚠️ НЕ Е `position: fixed`. Прочита се веднъж и трябва да се разкара при
   скролване — залепена лента заема място от екрана през цялото посещение, а
   долу вече стои лентата с бутоните.

   Тъмнозелено с бял текст: 6.2:1 — мерено. Червеното беше отхвърлено, защото
   се чете като грешка на сайта, а не като съобщение от центъра.
   =========================================================================== */

.vak-lenta {
  padding: 10px 20px;
  background-color: #1f5c36;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}

.vak-lenta strong {
  font-weight: 700;

  /* ⚠️ `color: inherit` Е ЗАДЪЛЖИТЕЛНО, НЕ УКРАСА. Някъде в общия стил `strong`
     получава тъмния цвят на текста (#312f30) и той се налага и тук — тъмносиво
     върху тъмнозелено, контраст 1.3:1. Мерено: точно най-важната част от
     съобщението („Затворени сме до …") оставаше нечетима. */
  color: inherit;
}

@media (max-width: 520px) {
  .vak-lenta {
    padding: 9px 14px;
    font-size: 14px;
  }
}

/* ---------------------------------------------------------------------------
   ЛЕНТАТА СТОИ НАД МЕНЮТО, А МЕНЮТО СЛИЗА ПОД НЕЯ
   ---------------------------------------------------------------------------
   ⚠️ БЕЗ ТОВА ЛЕНТАТА НЕ СЕ ВИЖДА ИЗОБЩО. `.NAVBAR` е `position: fixed; top: 0;
   z-index: 1000` и лежи точно върху нея. Проверено с elementFromPoint: на
   мястото на лентата браузърът връща `nav.NAVBAR`.

   `sticky`, а не `fixed`: така лентата и заема място (съдържанието слиза с
   нейната височина, вместо да мине отдолу), и остава на екрана при скролване.
   Съобщение, което изчезва след първото превъртане, не върши работа — точно
   заради него човек е тук.

   Височината идва от четирите реда JavaScript в partials/head.php. Тя не е
   постоянна: 47px на монитор, 85px на телефон. Стойността по подразбиране е 0,
   тоест при изключен JavaScript менюто си остава на мястото и нищо не се чупи.
   --------------------------------------------------------------------------- */

.vak-lenta {
  position: sticky;
  top: 0;
  z-index: 1001; /* над .NAVBAR (1000) */
}

body.s-vak-lenta .NAVBAR {
  top: var(--vak-lenta-h, 0px);
}

/* ===========================================================================
   КОПЧЕТО ЗА ФОНОВАТА МУЗИКА — 27.08.2026
   ===========================================================================
   Защо музиката не тръгва сама и какво се пипа: lib/muzika.php.

   ⚠️ ТУК, А НЕ В ОТДЕЛЕН ФАЙЛ. Копчето стои на всяка страница завинаги, а
   style.css и без това се зарежда навсякъде. Отделен файл значеше още една
   заявка на всяко отваряне заради шейсет реда.

   ⚠️ ДОЛУ ВЛЯВО, НЕ ВДЯСНО. Вдясно е зает: на компютър там стоят плаващите
   кръгчета за Viber и WhatsApp (.quick-contact, z-index 900, вдясно по
   средата), а на телефон долу лежи лентата с действията (.sticky-cta, 950).
   Лявата долна четвърт е единственото място, свободно и на двете ширини.

   z-index 940 — над съдържанието и над плаващите кръгчета, ПОД лентата с
   действията и под чекмеджето на менюто. Копче за музика не бива да застава
   пред „Обади се". */
.muzika-buton {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 940;

  display: flex;
  align-items: center;
  justify-content: center;

  /* 44×44 е долната граница за нещо, което се натиска с пръст. */
  width: 44px;
  height: 44px;

  border: 1px solid var(--border);
  border-radius: 50%;
  background-color: var(--white);
  color: var(--text-01);
  box-shadow: 0 4px 14px rgba(26, 26, 26, 0.16);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.muzika-buton:hover,
.muzika-buton:focus-visible {
  background-color: var(--accent-yellow);
  transform: translateY(-2px);
}

.muzika-buton:focus-visible {
  outline: 2px solid var(--text-01);
  outline-offset: 3px;
}

/* ⚠️ ДВЕТЕ РИСУНКИ СА В КОДА, СМЕНЯ ГИ CSS според `aria-pressed`. Скриптът
   мени само атрибута. Рисуване от JavaScript би значело бутон без иконка,
   ако скриптът не се зареди. */
.muzika-ikona {
  display: none;
  line-height: 0;
}

.muzika-buton[aria-pressed="false"] .muzika-ikona-pusni,
.muzika-buton[aria-pressed="true"] .muzika-ikona-spri {
  display: block;
}

/* Триъгълникът изглежда изместен наляво, когато е центриран математически —
   оптичното средище на триъгълник не съвпада с геометричното. */
.muzika-ikona-pusni {
  margin-left: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .muzika-buton {
    transition: none;
  }

  .muzika-buton:hover,
  .muzika-buton:focus-visible {
    transform: none;
  }
}

/* ⚠️ НАД ЛЕНТАТА С ДЕЙСТВИЯТА. Под 768px .sticky-cta заема долния ръб на
   екрана — копче на `bottom: 20px` би легнало под нея. Отстъпът е висотата ѝ
   плюс въздух, а env() пази от лентата на браузъра в iPhone Safari. */
@media (max-width: 767px) {
  .muzika-buton {
    left: 12px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
}