/* SLOTLY · СТЕКЛО — экраны клиента: приложение (client.html) и витрина записи (biz.html).
   Общие приёмы (пятна, табло, облачко, касание, заливка, плашка, появление) — в css/glass.css;
   здесь только то, что относится к экранам клиента. Палитра — токены Aura (--a-*), новых цветов нет.

   Селекторы идут с префиксом html[data-theme]: правила Aura (css/aura.css) написаны так же и
   с !important, а этот файл подключается после них — при равной силе выигрывает последний.

   Движение здесь только то, что отвечает человеку (касание, выбор, нажатие) плюс одно
   появление экрана. Ничего не мигает само. «Меньше движения» и html.sg-lite уважаются. */

/* =====================================================================
   0. ОБЩЕЕ
   ===================================================================== */

/* Смещение капли праздника (.sg-drop из glass.css) ставит glass.js прямо на элемент;
   запасное значение нужно сторожу токенов страницы (tests/test_В1_фронт_общее.py). */
:root { --dx: 0px; --dy: 0px; }

/* Одно появление экрана. Только прозрачность: transform/filter сделали бы экран
   «контейнером» для position:fixed внутри него (нижние панели, поле чата уехали бы). */
@keyframes sgc-screen-in { from { opacity: 0; } to { opacity: 1; } }
html[data-theme] .capp .screen.active { animation: sgc-screen-in .45s var(--sg-soft) both; }
/* В MAX смены экрана через размытие нет (SlotlyGlass.swap там выключен) — мягкое проявление. */
html.in-max .biz-screen.active { animation: sgc-screen-in .35s var(--sg-soft) both; }

/* Пружинящая карточка с заливкой: пока нажата — чуть сжимается. */
.sg-fill, .sg-tap { -webkit-tap-highlight-color: transparent; }

/* sg-pop держит финальное состояние анимацией (forwards) — оно перебило бы :active у
   .sg-press. Анимация нужна только на входе: после неё элемент возвращается к обычному. */
.time-slot.sg-pop, .spec-slot.sg-pop, .quick-slot.sg-pop, .wtime.sg-pop { opacity: 1; animation-fill-mode: backwards; }

/* Выбор по aria-checked (карточки услуг и мастеров витрины): заливка от точки касания. */
.sg-fill[aria-checked="true"]::after { clip-path: circle(150% at var(--sg-rx, 50%) var(--sg-ry, 50%)); }

/* Цвета направлений — из палитры Aura: оранжевый → персик, персик → сливочный, мятный → сливочный. */
.sg-cat-0 { --sg-c1: rgba(254, 66, 8, .30);   --sg-c2: rgba(255, 154, 92, .50);  --sg-o1: #fe4208; --sg-o2: #ff9a5c; }
.sg-cat-1 { --sg-c1: rgba(255, 179, 107, .50); --sg-c2: rgba(255, 227, 167, .78); --sg-o1: #ffb36b; --sg-o2: #ffe3a7; }
.sg-cat-2 { --sg-c1: rgba(67, 229, 146, .38);  --sg-c2: rgba(255, 227, 167, .72); --sg-o1: #43e592; --sg-o2: #ffe3a7; }

/* Облачко помощника внутри экранов клиента */
.sg-ai.biz-hint { margin: 12px 0 14px; text-align: left; }
.sg-ai .sg-ai__body, .sg-ai > .sg-ai__body { overflow-wrap: anywhere; }
.capp .success-note.sg-ai { text-align: left; margin: 14px 0 0; color: var(--a-ink); }

/* =====================================================================
   1. ВИТРИНА ОРГАНИЗАЦИИ (biz.html)
   ===================================================================== */

/* Шапка салона: огромный тонкий рейтинг */
.biz-rating-hero { display: flex; align-items: flex-end; gap: 14px; margin-top: 10px; min-width: 0; flex-wrap: wrap; }
.biz-rating-hero__num { font-size: 84px; }
.biz-rating-hero__side { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; min-width: 0; }
.biz-rating-hero__side .rating-stars { white-space: nowrap; }
.biz-rating-hero__count { font-size: 13px; color: var(--a-ink-3); }
html[data-theme] .biz-profile .biz-rating-hero__num { color: var(--a-ink); }

/* Услуги: стеклянные карточки, круг цвета направления, заливка при выборе */
html[data-theme] .svc-item {
  position: relative; border-radius: 24px !important; gap: 14px;
  transition: transform .35s var(--sg-spring), box-shadow .3s ease;
}
html[data-theme] .svc-item[aria-checked="true"] {
  border-color: var(--a-glass-line) !important; background: var(--a-glass) !important;
  box-shadow: 0 18px 36px -22px rgba(150, 62, 18, .5) !important;
}
.svc-item .sg-orb {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--sg-o1, #fe4208), var(--sg-o2, #ff9a5c));
  transition: transform .5s var(--sg-spring);
}
.svc-item[aria-checked="true"] .sg-orb { transform: scale(.82) rotate(-20deg); }
html[data-theme] .svc-item .svc-name { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
html[data-theme] .svc-item .svc-price { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Галочка выбора: тёмный кружок, выпрыгивает */
html[data-theme] .svc-checkbox { width: 26px; height: 26px; transition: background .25s, border-color .25s; }
html[data-theme] .svc-checkbox.checked { background: var(--a-ink) !important; border-color: var(--a-ink) !important; }
html[data-theme] .svc-checkbox.checked::after { color: var(--a-base) !important; }
.svc-checkbox.sg-pop-in { animation: sg-pop .45s var(--sg-spring) both; }

/* Нижняя панель шага: тёмная таблетка, справа оранжевая кнопка */
html[data-theme] .biz-sticky-bar {
  left: 12px !important; right: 12px !important; width: auto;
  bottom: calc(var(--cookie-h, 0px) + 12px + env(safe-area-inset-bottom)) !important;
  padding: 8px 8px 8px 22px !important; gap: 12px;
  border: 0 !important; border-radius: 999px !important;
  background: var(--a-ink) !important;
  box-shadow: 0 18px 40px -12px rgba(34, 34, 38, .45) !important;
}
html[data-theme] .biz-sticky-bar > div > div:first-child { color: var(--a-base) !important; }
html[data-theme] .biz-sticky-bar > div > div + div { color: var(--a-base) !important; opacity: .72; }
html[data-theme] .biz-sticky-bar .cbtn { flex: none; border-radius: 999px; }
html[data-theme] .biz-sticky-bar > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Мастера: карточка заливается при выборе */
html[data-theme] .spec-card { border-radius: 24px !important; transition: transform .35s var(--sg-spring), border-color .3s; }
html[data-theme] .spec-card:has(.spec-radio.checked) { border-color: var(--a-glass-line) !important; background: var(--a-glass) !important; }
.spec-card .spec-radio { transition: border-color .25s, transform .4s var(--sg-spring); }
.spec-card .spec-radio.checked { transform: scale(1.12); }
/* Ближайшие окна мастера и быстрый выбор времени — капсулы */
html[data-theme] .spec-slot, html[data-theme] .quick-slot { transition: transform .3s var(--sg-spring), background .25s, color .25s; }
html[data-theme] .quick-slots {
  border-radius: 28px !important; background: var(--a-glass) !important; border: 1px solid var(--a-glass-line) !important;
  box-shadow: var(--a-shadow) !important;
}
html[data-theme] .quick-slot { border-radius: 999px !important; background: var(--a-glass-strong) !important; border: 1px solid var(--a-glass-line) !important; }
html[data-theme] .quick-slots__other { border-radius: 999px !important; }

/* Календарь: выбранный день — тёмная капсула, чуть приподнятая */
html[data-theme] .cal-day {
  transition: transform .35s var(--sg-spring), background .3s, color .3s;
}
html[data-theme] .cal-day.selected {
  background: var(--a-ink) !important; color: var(--a-base) !important; border-color: transparent !important;
  box-shadow: 0 12px 22px -12px rgba(34, 34, 38, .55) !important; transform: translateY(-3px);
}
html[data-theme] .cal-day:not(.disabled):active { transform: scale(.94); }
html[data-theme] .cal-nav { border-radius: 999px !important; }
html[data-theme] .cal-month { font-variant-numeric: tabular-nums; }

/* Время: сетка капсул, выбранное — оранжевое (главное действие) */
html[data-theme] .time-slot { transition: transform .3s var(--sg-spring), background .25s, color .25s; font-variant-numeric: tabular-nums; }
html[data-theme] .time-group-header { border-radius: 22px !important; }

/* Подтверждение: выбранное время — огромная тонкая цифра */
.biz-time-hero {
  padding: 20px 22px 22px; margin-bottom: 14px; border-radius: 30px;
  background: var(--a-glass); border: 1px solid var(--a-glass-line); box-shadow: var(--a-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
}
html.in-max .biz-time-hero { -webkit-backdrop-filter: none; backdrop-filter: none; }
.biz-time-hero__time { font-size: 100px; margin: 6px 0 10px; max-width: 100%; }
html[data-theme] .confirm-summary { border-radius: 26px !important; }

/* «Вы записаны»: карточка цвета направления, время огромное */
.biz-success-hero {
  --sg-c1: #fe4208; --sg-c2: #ff9a5c;
  position: relative; text-align: left;
  margin: 8px auto 0; padding: 24px 22px 26px; max-width: 420px; border-radius: 36px;
  background: linear-gradient(135deg, var(--sg-c1), var(--sg-c2));
  color: #222226; box-shadow: 0 30px 60px -22px var(--sg-c1);
}
.biz-success-hero * { color: #222226 !important; -webkit-text-fill-color: #222226 !important; }
html[data-theme] .biz-success-hero .success-icon {
  width: 44px; height: 44px; margin: 0 0 14px; font-size: 20px; border-radius: 50%;
  background: var(--a-mint) !important; box-shadow: none !important;
}
html[data-theme] .biz-success-hero .success-icon i { color: #0b3b22 !important; -webkit-text-fill-color: #0b3b22 !important; }
html[data-theme] .biz-success-hero .success-title { font-size: 22px !important; font-family: var(--a-sans) !important; font-weight: 700 !important; margin: 0; }
.biz-success-hero__time { font-size: 104px; margin: 16px 0 8px; max-width: 100%; }
html[data-theme] .biz-success-hero .success-subtitle { font-size: 19px; font-weight: 500; }
#success-body .biz-hint { max-width: 420px; margin-left: auto; margin-right: auto; }

/* Нижнее окно витрины (заявка на абонемент): лист снизу, смахивается вниз */
@keyframes sgc-sheet-up { from { transform: translateY(110%); } to { transform: none; } }
html[data-theme] .bizmodal { align-items: flex-end; padding: 0 8px 8px; background: var(--a-overlay); }
html[data-theme] .bizmodal__card {
  max-width: 460px; border-radius: 34px !important; background: var(--a-modal) !important;
  border: 1px solid var(--a-glass-line); box-shadow: var(--a-shadow-lg);
  animation: sgc-sheet-up .55s var(--sg-spring) both;
}
html[data-theme] .bizmodal__head { background: transparent; border-bottom-color: var(--a-hair); }
.bizmodal__card > .sg-grip { margin-top: 8px; }

/* Листы ожидания и подсказки внутри экрана */
html[data-theme] .biz-screen-body .skeleton { border-radius: 14px; }

/* =====================================================================
   2. ПРИЛОЖЕНИЕ КЛИЕНТА (client.html)
   ===================================================================== */

/* Ближайшая запись: время огромное и тонкое */
.capp .cbk-bigtime { font-size: 56px; margin: 0 0 6px; max-width: 100%; }
.capp .cbk-bigtime--sm { font-size: 40px; }
.capp .cbk .sg-odo { vertical-align: top; }

/* Единое стекло для карточек приложения: крупное скругление, мягкая тень, размытие под ними.
   Размытие — не в MAX (там aura.css даёт плотное стекло без blur). */
html[data-theme] .capp .cbk,
html[data-theme] .capp .ccard,
html[data-theme] .capp .cmenu,
html[data-theme] .capp .csec__card { border-radius: 26px !important; }
html:not(.in-max)[data-theme] .capp .cbk,
html:not(.in-max)[data-theme] .capp .ccard,
html:not(.in-max)[data-theme] .capp .cmenu,
html:not(.in-max)[data-theme] .capp .csec__card {
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
}
html[data-theme] .capp .cbk { transition: transform .35s var(--sg-spring); }
html[data-theme] .capp .cbk:active { transform: scale(.985); }
html[data-theme] .capp .cbk__info, html[data-theme] .capp .cbk .booking-info { min-width: 0; }
html[data-theme] .capp .cbk__name, html[data-theme] .capp .cbk__svc {
  overflow: hidden; text-overflow: ellipsis;
}
html[data-theme] .capp .cbk__name { white-space: nowrap; }

/* Поиск и главная кнопка-ссылка — таблетки со стеклом */
html[data-theme] .capp .csearch { border-radius: 999px !important; }
html:not(.in-max)[data-theme] .capp .csearch { -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }

/* Вкладки «Предстоящие / История»: тёмная плашка переезжает (SlotlyGlass.glide) */
html[data-theme] .capp .ctabs.sg-glide-host { gap: 4px; padding: 6px; margin: 10px 14px 4px; border-radius: 999px;
  background: var(--a-glass) !important; border: 1px solid var(--a-glass-line) !important; box-shadow: var(--a-shadow); }
html[data-theme] .capp .ctabs.sg-glide-host .ctab {
  position: relative; background: transparent !important; border-color: transparent !important; box-shadow: none !important;
  border-radius: 999px; color: var(--a-ink-2) !important; transition: color .3s;
}
html[data-theme] .capp .ctabs.sg-glide-host .ctab.on,
html[data-theme] .capp .ctabs.sg-glide-host .ctab.active { color: var(--a-base) !important; }

/* Мастер записи в приложении: карточки выбора, время, дни */
html[data-theme] .capp .wopt { border-radius: 24px !important; transition: transform .35s var(--sg-spring); }
html[data-theme] .capp .wopt.on, html[data-theme] .capp .wopt.selected { border-color: var(--a-glass-line) !important; }
html[data-theme] .capp .wopt .wava { transition: transform .5s var(--sg-spring); }
html[data-theme] .capp .wopt.on .wava, html[data-theme] .capp .wopt.selected .wava { transform: scale(.88) rotate(-12deg); }
html[data-theme] .capp .wtime { border-radius: 16px !important; font-variant-numeric: tabular-nums; transition: transform .3s var(--sg-spring), background .25s, color .25s; }
html[data-theme] .capp .calendar-day { transition: transform .35s var(--sg-spring), background .3s, color .3s; }
html[data-theme] .capp .calendar-day.selected {
  background: var(--a-ink) !important; color: var(--a-base) !important;
  box-shadow: 0 12px 22px -12px rgba(34, 34, 38, .55) !important; transform: translateY(-3px);
}

/* Нижние окна: крупное скругление, держатель для смахивания вниз */
html[data-theme] .capp .csheet { border-radius: 34px 34px 0 0 !important; }
html[data-theme] .capp .modal-overlay > .csheet > .sg-grip,
.modal-overlay > .csheet > .sg-grip { margin-top: 6px; flex: none; }
/* У окна выбора города уже есть свой маленький держатель — рисуем один, смахиваемый. */
#location-modal .csheet:has(> .sg-grip) .lm-grab { display: none; }

/* Окно «Вы записаны» в приложении: подпись-облачко и мягкая карточка */
html[data-theme] .capp .wdone, html[data-theme] #success-modal .success-content { border-radius: 34px !important; }

/* Подписи крупных чисел (бонусы, счётчики) — тонкие, как на табло */
html[data-theme] .capp .cbk__time { font-variant-numeric: tabular-nums; }

/* Остальные экраны приложения: каталог, акции, абонементы, бонусы, профиль, «Ещё», чат —
   единое стекло: крупные скругления, мягкая тень, отклик на нажатие. Разметка у них своя,
   поэтому правила только по классам; логика экранов не затронута. */
html[data-theme] .capp .promo-card-client,
html[data-theme] .capp .sub-card-client,
html[data-theme] .capp .info-card,
html[data-theme] .capp .business-card,
html[data-theme] .capp .org-card { border-radius: 26px !important; }
html[data-theme] .capp .cmenu { overflow: hidden; }
html[data-theme] .capp .cmenu__row { transition: background .25s; }
html[data-theme] .capp .cmenu__row:active { background: var(--a-glass-strong); }
html[data-theme] .capp .cpill { transition: transform .3s var(--sg-spring), background .25s, color .25s; }
html[data-theme] .capp .cpill:active { transform: scale(.95); }
html[data-theme] .capp .cbig { transition: transform .3s var(--sg-spring), box-shadow .3s, background .25s; }
html[data-theme] .capp .cbig:active:not(:disabled) { transform: scale(.97); }
html[data-theme] .capp .cact { transition: transform .3s var(--sg-spring); }
html[data-theme] .capp .cact:active { transform: scale(.92); }
/* Чат: пузырь клиента — оранжевый (главное действие), собеседника — стекло */
html[data-theme] .capp .chat-bubble { border-radius: 22px 22px 22px 8px; max-width: 82%; overflow-wrap: anywhere; }
html[data-theme] .capp .chat-bubble.me { border-radius: 22px 22px 8px 22px; background: var(--a-accent) !important; color: #fff !important; }
html[data-theme] .capp .chat-bubble.them { background: var(--a-glass-strong) !important; color: var(--a-ink) !important; border: 1px solid var(--a-glass-line); }

/* =====================================================================
   3. УЗКИЙ ЭКРАН, «МЕНЬШЕ ДВИЖЕНИЯ»
   ===================================================================== */
@media (max-width: 380px) {
  .biz-rating-hero__num { font-size: 72px; }
  .biz-time-hero__time { font-size: 84px; }
  .biz-success-hero__time { font-size: 88px; }
  .capp .cbk-bigtime { font-size: 46px; }
  html[data-theme] .biz-sticky-bar { padding-left: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] .capp .screen.active, html.in-max .biz-screen.active { animation: none !important; }
  html[data-theme] .bizmodal__card { animation: none !important; }
  .svc-checkbox.sg-pop-in { animation: none !important; }
  .svc-item .sg-orb, html[data-theme] .cal-day, html[data-theme] .capp .calendar-day,
  html[data-theme] .capp .wopt, html[data-theme] .capp .cbk, html[data-theme] .svc-item, html[data-theme] .spec-card,
  html[data-theme] .capp .cpill, html[data-theme] .capp .cbig, html[data-theme] .capp .cact { transition: none !important; }
}
html.sg-lite .svc-checkbox.sg-pop-in { animation-duration: .2s; }