/* ── Постоянната лента долу: обаждане и въпрос ────────────────────
   Само за телефон и таблет, на двата сайта. Разметката ѝ се сглобява от
   assets/js/lenta.js, за да не се преписва трийсет пъти.

   ⛔ Лентата за бисквитките е на z-index 9000 и също е закована долу.
   Тази е под нея нарочно: докато човек не е избрал, съгласието е по-
   важното нещо на екрана и не бива да се дели с бутони. */

/* ⛔ ЛЕНТАТА Е ПЛЪТНА, ОТ РЪБ ДО РЪБ: ЗЛАТНА ПОЛОВИНА И БЯЛА ПОЛОВИНА.
   Така я иска Атанас: плътна, не като отделни бутони, едната златна, другата
   бяла.

   ⛔ .dd-lenta Е ПРОЗРАЧНА, А ЦВЕТОВЕТЕ СА В .dd-lenta-vatre С position:
   absolute. Не ги сливай в един елемент. Safari на iOS 26 търси фиксиран
   елемент с цвят до долния ръб и когато свие лентата си, удължава цветовете
   му до края на екрана. Две половини в злато и бяло излизаха като златен и
   бял правоъгълник без надпис. Прозрачен фиксиран елемент няма какво да
   даде, а вложените с absolute Safari не гледа. Под свитата му лента
   тогава се вижда страницата.

   Chrome на iPhone не мести фиксираните елементи заедно със своята лента,
   при нито един сайт: лентата ни слиза наведнъж, когато неговата се е
   прибрала. Скрипт, който крие или плъзга лентата, беше пробван и махнат.
   Скриването не се хареса, а плъзгането подскачаше.

   ⛔ ВИСОЧИНАТА Е ТОЧНО 56px, БЕЗ ЗОНАТА НА ЧЕРТИЧКАТА (safe-area-inset-bottom).
   Докато лентата на Chrome е отворена, зоната е нула и нашата стои над нея.
   Щом Chrome я прибере, зоната ставаше 34px и лентата ни не слизаше, а се
   удължаваше надолу: надписите оставаха горе, под тях празен блок. Атанас
   иска като бутона на primeaesthetic.bg: целият слиза до долния ръб, а
   чертичката на iPhone минава върху него. */
:root{ --dd-lenta-h: calc(1.5rem + 40px); }
.dd-lenta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  /* Височината е тук, а не от съдържанието, защото вложеното с absolute не
     разпъва родителя. Изравнена е с мобилната шапка: страничен отстъп
     0.9rem горе и долу + бургерът 48px + 1px кант = същата височина. */
  height: var(--dd-lenta-h);
  /* Под мобилното меню (95), не над него. Отвореното меню има свои два
     бутона, същите, и лентата отдолу би ги повторила. */
  z-index: 90;
  background: transparent;
}

.dd-lenta-vatre {
  position: absolute; inset: 0;
  display: flex;
  border-top: 1px solid rgba(184, 147, 79, 0.45);
  box-shadow: 0 -8px 24px rgba(59, 44, 33, 0.18);
}

.dd-lenta a {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0 0.6rem;
  font-family: inherit;
  font-size: 0.86rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: center; white-space: nowrap;
}

.dd-lenta svg { flex: none; width: 20px; height: 20px; }

/* На тесен екран „Имате въпрос?“ не се побираше на един ред. Разредката и
   размерът падат точно колкото надписът да седне на един ред при 360
   пиксела ширина, а под 21rem още малко. */
@media (max-width: 26rem) {
  .dd-lenta a { gap: 0.4rem; padding-left: 0.4rem; padding-right: 0.4rem; font-size: 0.74rem; letter-spacing: 0.05em; }
  .dd-lenta svg { width: 18px; height: 18px; }
}
@media (max-width: 21rem) {
  .dd-lenta a { gap: 0.3rem; font-size: 0.68rem; letter-spacing: 0.03em; }
  .dd-lenta svg { width: 16px; height: 16px; }
}

.dd-lenta .dd-zvani {
  background: linear-gradient(135deg, #E4C98F 0%, #B8934F 52%, #8A6B3F 100%);
  color: #241A12;
}
.dd-lenta .dd-vupros {
  background: #FFFFFF;
  color: #3B2C21;
}
/* Само докато пръстът е върху тях. Фон при :hover остава залепен на
   телефона след докосване. */
.dd-lenta .dd-zvani:active { filter: brightness(1.12); }
.dd-lenta .dd-vupros:active { background: #ECDFCC; }
.dd-lenta .dd-zvani:hover, .dd-lenta .dd-zvani:focus { color: #241A12; }
.dd-lenta .dd-vupros:hover, .dd-lenta .dd-vupros:focus { color: #3B2C21; }

/* Мястото под лентата: прозрачна долна граница на подвала, колкото е
   лентата.

   Не е отстъп на body, защото тялото е бежово, а подвалът бял: отстъпът се
   вижда като чужда ивица под подвала. Не е и вмъкнат празен елемент, защото
   част от страниците се пререндват от dc-runtime и вмъкнатото изчезва. */
footer {
  border-bottom: var(--dd-lenta-h) solid transparent;
}
/* „Контакти“ зарежда лентата само заради избора на салон, без самата лента. */
.dd-bez-lenta footer { border-bottom: 0; }

/* viewport-fit=cover пуска страницата и под изрезите отстрани, когато
   iPhone е легнал. Там съдържанието се отмества навътре; изправен телефон
   няма такива зони и стойността е нула. */
@media (orientation: landscape) {
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}

/* ⛔ На десктоп лентата я няма, по желание на Атанас: там номерът и бутонът
   за час стоят в шапката и са на един поглед разстояние. Скрита е тук, в
   стила, а не в скрипта, за да не мигне при зареждане. Заедно с нея пада и
   мястото, което пази в подвала. */
@media (min-width: 62rem) {
  .dd-lenta { display: none; }
  footer { border-bottom: 0; }
}

/* ── „Обадете се“: изборът на салон ────────────────────────────────
   Салоните са два и всеки има свой номер, затова всеки бутон „Обадете се“
   (лентата, мобилното меню, шапката) отваря този избор, а не звъни направо.
   Сглобява се в lenta.js. На телефон излиза отдолу като лист, на десктоп е
   карта в средата. Над мобилното меню (95) и над лентата за бисквитките. */
.dd-izbor-salon {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: flex-end; justify-content: center;
}
.dd-izbor-salon[hidden] { display: none; }
.dd-izbor-fon {
  position: absolute; inset: 0;
  background: rgba(38, 35, 32, 0.5);
  animation: dd-izbor-fon 0.3s ease both;
}
.dd-izbor-karta {
  position: relative; width: 100%; max-width: 32rem;
  padding: 1.6rem clamp(1.2rem, 5vw, 1.8rem) calc(1.4rem + env(safe-area-inset-bottom, 0px));
  background: #FFFFFF; color: #262320;
  border-top: 2px solid #B8934F; border-radius: 14px 14px 0 0;
  box-shadow: 0 -12px 40px rgba(59, 44, 33, 0.25);
  animation: dd-izbor-gore 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@media (min-width: 62rem) {
  .dd-izbor-salon { align-items: center; }
  .dd-izbor-karta { border-radius: 8px; padding-bottom: 1.8rem; }
}
.dd-izbor-kiker {
  margin: 0;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: #8A6B3F;
}
.dd-izbor-zaglavie {
  margin: 0.3rem 0 1.1rem;
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
  font-size: 1.9rem; line-height: 1.1; color: #262320;
}
.dd-izbor-zaglavie em { font-style: italic; color: #8A6B3F; }
.dd-izbor-red {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(184, 147, 79, 0.45); border-radius: 8px;
  color: #262320; text-decoration: none;
  transition: background 0.25s, border-color 0.25s;
}
.dd-izbor-red + .dd-izbor-red { margin-top: 0.75rem; }
.dd-izbor-red:hover, .dd-izbor-red:active, .dd-izbor-red:focus-visible {
  background: #F8F4ED; border-color: #B8934F; color: #262320;
}
.dd-izbor-tekst { display: grid; gap: 0.15rem; min-width: 0; }
.dd-izbor-ime {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem; font-weight: 500; line-height: 1.15;
}
.dd-izbor-adres { font-size: 0.86rem; color: rgba(38, 35, 32, 0.68); }
.dd-izbor-nomer {
  margin-top: 0.2rem;
  font-size: 1.05rem; font-weight: 700; letter-spacing: 0.03em;
  color: #8A6B3F; white-space: nowrap;
}
.dd-izbor-krag {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, #E4C98F 0%, #B8934F 52%, #8A6B3F 100%);
  color: #241A12;
}
.dd-izbor-krag svg { width: 20px; height: 20px; }
.dd-izbor-x {
  position: absolute; top: 0.9rem; right: 0.9rem;
  width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid rgba(184, 147, 79, 0.6); border-radius: 50%;
  background: transparent; color: #3B2C21;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
@keyframes dd-izbor-gore { from { transform: translateY(100%); } to { transform: none; } }
@keyframes dd-izbor-fon { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dd-izbor-karta, .dd-izbor-fon { animation: none; }
}