/* ============================================================================
   САЙТ БИЗНЕСА — надстройка над клиентским приложением.

   Сайт и мини-апп — одно приложение: тот же client_new.js и тот же
   client_new.css. Оформление, которое владелец выбрал в дашборде, меняет
   сразу оба, и второй палитры здесь нет намеренно.

   Этот файл добавляет ровно то, чего в Telegram не нужно: шапку с именем
   бизнеса (в чате её рисует сам мессенджер), подвал с правовой ссылкой и
   раскладку для больших экранов.
   ============================================================================ */

/* Приложение в чате всегда узкое; сайт открывают и с монитора. Ширину
   держим прежней на телефоне и даём воздух на десктопе, но не растягиваем
   колонку: длинную строку тяжело читать. */
.app{max-width:min(720px,100%);min-height:auto}
/* В Telegram приложение занимает весь экран, и высота в 100vh там верна.
   На сайте под карточками оставался пустой экран, за которым где-то внизу
   прятался подвал: страница выглядела недогруженной. Здесь высоту задаёт
   содержимое. */
body{min-height:100%}

/* ── Шапка ───────────────────────────────────────────────────────────── */
/* Стекло поверх меша, а не белая полоса: полоса разрезала бы фон, который
   и есть оформление бизнеса. */
.sitebar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:10px max(14px,calc(50% - 356px));min-height:56px;
  background:rgb(var(--glass) / .5);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--ink) 7%,transparent)}
.sitebar__brand{display:flex;align-items:center;gap:10px;border:none;background:none;
  cursor:pointer;font:inherit;color:var(--ink);padding:0;text-align:left}
.sitebar__mark{width:30px;height:30px;flex:none;border-radius:10px;display:grid;
  place-items:center;font-size:14px;font-weight:700;color:var(--cta-ink);
  background:linear-gradient(120deg,hsl(var(--cta2)),hsl(var(--cta)))}
.sitebar__name{font-size:15.5px;font-weight:600;letter-spacing:-.02em;
  max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* «В Telegram» — не реклама мессенджера: там напоминания о визите, которых
   на сайте прислать нечем. Поэтому кнопка тихая и стоит с краю. */
.sitebar__tg{margin-left:auto;font-size:13px;font-weight:500;text-decoration:none;
  color:var(--ink);padding:8px 14px;border-radius:99px;white-space:nowrap;
  background:rgb(var(--glass) / .65);
  box-shadow:inset 0 0 0 1px rgb(var(--glass) / .5)}
.sitebar__tg[hidden]{display:none}

/* ── Поля гостя ──────────────────────────────────────────────────────── */
/* Имя и телефон — единственное, чего не знает сайт и знает Telegram. Поля
   стоят в самой форме записи, а не отдельным шагом: экран между «выбрал
   время» и «записан» — то место, где люди уходят. */
.guest{gap:9px}
.gfld{display:flex;flex-direction:column;gap:4px;width:100%}
.gfld span{font-size:12px;color:var(--soft)}
.gfld input{width:100%;border:none;outline:none;font:inherit;font-size:16px;
  padding:12px 14px;border-radius:15px;color:var(--ink);
  background:rgb(var(--glass) / .8);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent)}
.gfld input:focus{box-shadow:inset 0 0 0 1.5px hsl(var(--cta))}
/* Ловушка для автоматов: не display:none — часть ботов такие поля
   пропускает, а человеку она всё равно не видна. */
.gtrap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ── Подвал ──────────────────────────────────────────────────────────── */
.sitefoot{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:14px;
  justify-content:center;padding:22px 16px calc(120px + env(safe-area-inset-bottom));
  font-size:12.5px;color:var(--soft)}
.sitefoot a{color:var(--soft)}
.sitefoot__nexo{opacity:.75}

/* ── Большой экран ───────────────────────────────────────────────────── */
@media (min-width:760px){
  /* Плавающая кнопка во всю ширину монитора читается как баннер: держим её
     колонкой контента. */
  .dock{left:50%;transform:translateX(-50%);width:min(720px,100%)}
  .sitefoot{padding-bottom:130px}
}