/*
   Витрина записи — Material 3, та же тональная система, что у клиента Elchat
   (Client.Shared/wwwroot/material-theme.css): роли выведены из знака через HCT, глубина
   задаётся тоном подложки, а не тенью и размытием. Витрина — отдельный процесс и своей
   ссылки на статику клиента не имеет, поэтому роли перечислены здесь ещё раз; значения те же,
   и расходиться им незачем — меняются они вместе со знаком.

   Тёмная тема — по системной настройке (prefers-color-scheme): у витрины нет своего
   переключателя, а MudBlazor следует той же настройке через MudThemeProvider.
*/

:root {
    color-scheme: light;

    --m3-primary: #5654a8;
    --m3-on-primary: #ffffff;
    --m3-primary-container: #e2dfff;
    --m3-on-primary-container: #100563;
    --m3-secondary: #9c4142;
    --m3-on-secondary: #ffffff;
    --m3-secondary-container: #ffdad8;
    --m3-on-secondary-container: #410007;
    --m3-tertiary: #795900;
    --m3-on-tertiary: #ffffff;
    --m3-tertiary-container: #ffdf9f;
    --m3-on-tertiary-container: #261a00;
    --m3-error: #ba1a1a;
    --m3-on-error: #ffffff;
    --m3-error-container: #ffdad6;
    --m3-on-error-container: #410002;
    --m3-success: #146d29;
    --m3-on-success: #ffffff;
    --m3-success-container: #a0f7a2;
    --m3-on-success-container: #002106;
    --m3-surface: #fcf8ff;
    --m3-on-surface: #1b1b21;
    --m3-surface-variant: #e4e0f2;
    --m3-on-surface-variant: #464554;
    --m3-surface-container-lowest: #ffffff;
    --m3-surface-container-low: #f6f2fa;
    --m3-surface-container: #f0ecf4;
    --m3-surface-container-high: #eae7ef;
    --m3-surface-container-highest: #e5e1e9;
    --m3-outline: #777585;
    --m3-outline-variant: #c7c4d6;
    --m3-inverse-surface: #303036;
    --m3-inverse-on-surface: #f3eff7;
    --m3-shadow: 0, 0, 0;

    --m3-shape-xs: 4px;
    --m3-shape-sm: 8px;
    --m3-shape-md: 12px;
    --m3-shape-lg: 16px;
    --m3-shape-xl: 28px;
    --m3-shape-full: 999px;

    --m3-elevation-1: 0 1px 2px 0 rgba(var(--m3-shadow), .30), 0 1px 3px 1px rgba(var(--m3-shadow), .15);
    --m3-elevation-2: 0 1px 2px 0 rgba(var(--m3-shadow), .30), 0 2px 6px 2px rgba(var(--m3-shadow), .15);
    --m3-elevation-3: 0 1px 3px 0 rgba(var(--m3-shadow), .30), 0 4px 8px 3px rgba(var(--m3-shadow), .15);

    --m3-state-hover: .08;
    --m3-state-press: .10;
    --m3-easing-standard: cubic-bezier(.2, 0, 0, 1);
    --m3-easing-emphasized-decelerate: cubic-bezier(.05, .7, .1, 1);
    --m3-duration-short: 200ms;
    --m3-duration-medium: 300ms;

    --font: Inter, Roboto, "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --m3-primary: #c3c0ff;
        --m3-on-primary: #272377;
        --m3-primary-container: #3e3c8f;
        --m3-on-primary-container: #e2dfff;
        --m3-secondary: #ffb3b0;
        --m3-on-secondary: #5f1318;
        --m3-secondary-container: #7e2a2c;
        --m3-on-secondary-container: #ffdad8;
        --m3-tertiary: #f8bd26;
        --m3-on-tertiary: #402d00;
        --m3-tertiary-container: #5c4300;
        --m3-on-tertiary-container: #ffdf9f;
        --m3-error: #ffb4ab;
        --m3-on-error: #690005;
        --m3-error-container: #93000a;
        --m3-on-error-container: #ffdad6;
        --m3-success: #84da88;
        --m3-on-success: #00390f;
        --m3-success-container: #00531a;
        --m3-on-success-container: #a0f7a2;
        --m3-surface: #131318;
        --m3-on-surface: #e5e1e9;
        --m3-surface-variant: #464554;
        --m3-on-surface-variant: #c7c4d6;
        --m3-surface-container-lowest: #0e0e13;
        --m3-surface-container-low: #1b1b21;
        --m3-surface-container: #201f25;
        --m3-surface-container-high: #2a292f;
        --m3-surface-container-highest: #35343a;
        --m3-outline: #918f9f;
        --m3-outline-variant: #464554;
        --m3-inverse-surface: #e5e1e9;
        --m3-inverse-on-surface: #303036;
    }
}

/* ── База и шкала шрифта ─────────────────────────────────────────────────────────────
   Размеры — шкала M3 (display / headline / title / body / label). Прежняя вёрстка
   опускалась до 0.55rem: на телефоне это нечитаемо, а витрину открывают именно с него. */
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--m3-on-surface);
    background: var(--m3-surface);
    -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; }
a { color: var(--m3-primary); }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: 0; }

.display { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.12; font-weight: 500; letter-spacing: -.02em; }
.headline-lg { font-size: 2rem; line-height: 2.5rem; font-weight: 500; }
.headline-md { font-size: 1.75rem; line-height: 2.25rem; font-weight: 500; }
.headline-sm { font-size: 1.5rem; line-height: 2rem; font-weight: 500; }
.title-lg { font-size: 1.375rem; line-height: 1.75rem; font-weight: 500; }
.title-md { font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.body-lg { font-size: 1rem; line-height: 1.5rem; }
.body-md { font-size: .875rem; line-height: 1.25rem; }
.label-lg { font-size: .875rem; line-height: 1.25rem; font-weight: 500; }
.label-md { font-size: .75rem; line-height: 1rem; font-weight: 500; letter-spacing: .03em; }
.muted { color: var(--m3-on-surface-variant); }

/* ── MudBlazor под M3 ──────────────────────────────────────────────────────────────────
   Палитру задаёт MudThemeProvider (MainLayout.razor.cs); здесь — форма: кнопка-«таблетка»
   без капитализации, поле с малым скруглением, чип 8, оповещение 12. */
.mud-button-root { border-radius: var(--m3-shape-full) !important; text-transform: none !important; letter-spacing: .01em; font-weight: 500; }
.mud-button-filled, .mud-button-outlined, .mud-button-text { min-height: 40px; padding-inline: 24px; }
.mud-button-filled.mud-button-filled-size-large { min-height: 48px; }
.mud-button-filled:not(.mud-button-disabled) { box-shadow: none; }
.mud-button-filled:not(.mud-button-disabled):hover { box-shadow: var(--m3-elevation-1); }
.mud-input-outlined .mud-input-outlined-border { border-radius: var(--m3-shape-xs) !important; }
.mud-input-control-helper-container { color: var(--m3-on-surface-variant); }
.mud-alert { border-radius: var(--m3-shape-md) !important; }
.mud-chip { border-radius: var(--m3-shape-sm) !important; font-weight: 500; }
/* Статус записи — тональный чип, а не залитый: залитый зелёный на светлой странице кричит
   громче заголовка, а статус — справка, не действие. */
.mud-chip.mud-chip-filled.mud-chip-color-success { color: var(--m3-on-success-container); background: var(--m3-success-container); }
.mud-chip.mud-chip-filled.mud-chip-color-warning { color: var(--m3-on-tertiary-container); background: var(--m3-tertiary-container); }
.mud-chip.mud-chip-filled.mud-chip-color-error { color: var(--m3-on-error-container); background: var(--m3-error-container); }
.mud-chip.mud-chip-filled.mud-chip-color-default { color: var(--m3-on-surface); background: var(--m3-surface-container-high); }
.mud-chip.mud-chip-filled.mud-chip-color-info, .mud-chip.mud-chip-filled.mud-chip-color-primary { color: var(--m3-on-primary-container); background: var(--m3-primary-container); }
.mud-icon-button { border-radius: var(--m3-shape-full); }
.mud-picker-popover, .mud-popover { border-radius: var(--m3-shape-lg); }

/* ── Оболочка ──────────────────────────────────────────────────────────────────────── */
.public-shell { width: min(1180px, 100% - 48px); min-height: 100vh; margin: auto; display: flex; flex-direction: column; }
.public-header { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.public-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--m3-on-surface); text-decoration: none; }
.public-logo-mark { width: 36px; height: 36px; display: block; }
.public-logo-word { height: 22px; display: block; }
/* Подпись отделена от надписи тонкой чертой: слово «Elchat» — имя продукта, а «Онлайн-запись»
   — какой его экран открыт. */
.public-logo em { padding-left: 12px; border-left: 1px solid var(--m3-outline-variant); color: var(--m3-on-surface-variant); font-size: .9375rem; font-style: normal; font-weight: 500; }
@media (prefers-color-scheme: dark) {
    .public-logo-mark { content: url("images/logo-white.svg"); }
    .public-logo-word { content: url("images/logo-wordmark-white.svg"); }
}
.public-header-note { color: var(--m3-on-surface-variant); font-size: .875rem; }
.public-shell main { flex: 1; }
.public-shell footer { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; border-top: 1px solid var(--m3-outline-variant); color: var(--m3-on-surface-variant); font-size: .75rem; }

.eyebrow { display: block; margin-bottom: 10px; color: var(--m3-primary); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ── Главная ───────────────────────────────────────────────────────────────────────── */
/* Отступы героя и размер заголовка — от экрана, а не константы: на ноутбуке с масштабом
   125 % (1093×614) 56px сверху и 5vw у заголовка выталкивали ссылку на демо за нижний край,
   а подложка иллюстрации обрезалась — страница выглядела разъехавшейся. */
.home-hero { min-height: calc(100vh - 160px); display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 48px; padding: clamp(24px, 5vh, 56px) 0; }
.home-copy h1 { max-width: 620px; font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.12; font-weight: 500; letter-spacing: -.02em; }
.home-copy > p { max-width: 520px; margin: 20px 0 28px; color: var(--m3-on-surface-variant); font-size: 1.0625rem; line-height: 1.6; }
.company-search { max-width: 560px; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px; }
/* MudBlazor оставляет полю с плавающей подписью 8px сверху под неё; кнопке — столько же,
   иначе она стоит выше поля на эти 8px. */
.company-search .mud-button-root { height: 56px; margin-top: 8px; padding-inline: 24px; }
.demo-link { display: inline-flex; flex-direction: column; margin-top: 20px; padding: 10px 0; border: 0; color: var(--m3-on-surface-variant); background: transparent; cursor: pointer; text-align: left; }
.demo-link span { font-size: .8125rem; }
.demo-link strong { color: var(--m3-primary); font-size: .9375rem; font-weight: 600; }
.recent-companies { margin-top: 20px; }
.recent-companies > span { display: block; margin-bottom: 8px; color: var(--m3-on-surface-variant); font-size: .75rem; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.recent-companies > div { display: flex; gap: 8px; flex-wrap: wrap; }
.recent-companies button { min-height: 32px; padding: 0 14px; border: 1px solid var(--m3-outline); border-radius: var(--m3-shape-sm); color: var(--m3-on-surface); background: transparent; cursor: pointer; font-size: .875rem; font-weight: 500; }
.recent-companies button:hover { background: color-mix(in srgb, var(--m3-on-surface) 8%, transparent); }

/* Иллюстрация — набор поверхностей M3, а не орбита: карточка записи и подсказки на
   тональной подложке. Чисто декоративна (aria-hidden), текст в ней не переводится. */
/* Подложка обнимает содержимое, а не тянется до заданной высоты: с min-height 460px карточка
   тонула в пустом сером поле, а на ноутбуке 614px высоты подложка ещё и не влезала в экран. */
.home-preview { display: grid; place-items: center; padding: 40px 32px; border-radius: var(--m3-shape-xl); background: var(--m3-surface-container); }
.preview-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; width: min(340px, 100%); }
.preview-card { width: 100%; padding: 20px; border-radius: var(--m3-shape-lg); background: var(--m3-surface-container-lowest); box-shadow: var(--m3-elevation-2); }
.preview-card header { display: flex; align-items: center; gap: 12px; }
.preview-card header i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--m3-shape-full); color: var(--m3-on-tertiary-container); background: var(--m3-tertiary-container); font-style: normal; font-weight: 600; }
.preview-card header strong { display: block; font-size: 1rem; font-weight: 600; }
.preview-card header small { color: var(--m3-on-surface-variant); font-size: .8125rem; }
.preview-row { display: grid; grid-template-columns: 24px 1fr; gap: 10px; margin-top: 16px; color: var(--m3-on-surface-variant); font-size: .875rem; }
.preview-row .mud-icon-root { color: var(--m3-primary); font-size: 1.25rem; }
.preview-row b { display: block; color: var(--m3-on-surface); font-weight: 500; }
.preview-slots { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.preview-slots span { min-height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--m3-outline); border-radius: var(--m3-shape-sm); font-size: .875rem; font-weight: 500; }
.preview-slots span.on { border-color: transparent; color: var(--m3-on-primary); background: var(--m3-primary); }
/* Плашка «подтверждена» — под карточкой у её правого края, как подтверждение, пришедшее следом.
   Два других места уже пробовали: в углу подложки, в восьмидесяти пикселях от карточки, она
   читалась чужим элементом, а поверх угла карточки наезжала на ряд свободных окон. */
.preview-note { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--m3-shape-md); color: var(--m3-on-primary-container); background: var(--m3-primary-container); box-shadow: var(--m3-elevation-1); font-size: .875rem; font-weight: 500; }
.preview-note .mud-icon-root { font-size: 1.125rem; }

/* ── Запись: шапка и шаги ──────────────────────────────────────────────────────────── */
.booking-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 32px 0 24px; }
.booking-head h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.15; font-weight: 500; letter-spacing: -.02em; }
.booking-head p { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--m3-on-surface-variant); font-size: .9375rem; }
.booking-steps { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.booking-steps li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 6px; border: 1px solid var(--m3-outline-variant); border-radius: var(--m3-shape-full); color: var(--m3-on-surface-variant); font-size: .875rem; font-weight: 500; white-space: nowrap; }
.booking-steps i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--m3-shape-full); color: var(--m3-on-surface-variant); background: var(--m3-surface-container-high); font-size: .75rem; font-style: normal; font-weight: 700; }
.booking-steps i .mud-icon-root { font-size: 1rem; }
.booking-steps li.active { border-color: transparent; color: var(--m3-on-primary-container); background: var(--m3-primary-container); }
.booking-steps li.active i { color: var(--m3-on-primary); background: var(--m3-primary); }
.booking-steps li.done { border-color: transparent; color: var(--m3-on-surface); background: var(--m3-surface-container); }
.booking-steps li.done i { color: var(--m3-on-success-container); background: var(--m3-success-container); }
.booking-alert { margin-bottom: 16px; }

/* ── Запись: карточки шагов ────────────────────────────────────────────────────────── */
.booking-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 24px; padding-bottom: 48px; }
.booking-flow { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.booking-section { min-width: 0; padding: 24px; border-radius: var(--m3-shape-lg); background: var(--m3-surface-container-low); }
.section-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.section-heading > span { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; border-radius: var(--m3-shape-full); color: var(--m3-on-primary-container); background: var(--m3-primary-container); font-size: .8125rem; font-weight: 700; }
.section-heading h2 { font-size: 1.375rem; line-height: 1.75rem; font-weight: 500; }
.section-heading p { margin: 2px 0 0; color: var(--m3-on-surface-variant); font-size: .875rem; }
.branch-select { margin-bottom: 14px; }
.single-branch { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 14px; border-radius: var(--m3-shape-md); background: var(--m3-surface-container); }
.single-branch .mud-icon-root { color: var(--m3-primary); }
.single-branch span { display: flex; flex-direction: column; }
.single-branch strong { font-size: .9375rem; font-weight: 600; }
.single-branch small { color: var(--m3-on-surface-variant); font-size: .8125rem; }

/* Услуга — карточка с ролью переключателя: рамка outline, выбранная — контейнер primary с
   галочкой. Не secondary, как у фильтров M3: наш secondary — коралл, и в тёмной теме его
   контейнер почти красный — выбранное выглядело ошибкой. Один цвет выбора на всю витрину. */
.service-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.service-choice { position: relative; min-height: 84px; display: grid; grid-template-columns: 44px 1fr 24px; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--m3-outline-variant); border-radius: var(--m3-shape-md); color: var(--m3-on-surface); background: var(--m3-surface-container-lowest); cursor: pointer; text-align: left; transition: background-color var(--m3-duration-short) var(--m3-easing-standard), border-color var(--m3-duration-short) var(--m3-easing-standard); }
.service-choice:hover { background: color-mix(in srgb, var(--m3-on-surface) 8%, var(--m3-surface-container-lowest)); }
.service-choice.selected { border-color: transparent; color: var(--m3-on-primary-container); background: var(--m3-primary-container); }
.service-choice > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.service-choice strong { font-size: .9375rem; font-weight: 600; }
.service-choice small { margin-top: 3px; color: var(--m3-on-surface-variant); font-size: .8125rem; }
.service-choice.selected small { color: var(--m3-on-primary-container); opacity: .8; }
.service-choice > i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--m3-shape-full); color: var(--m3-on-primary); background: var(--m3-primary); opacity: 0; transform: scale(.6); transition: opacity var(--m3-duration-short) var(--m3-easing-emphasized-decelerate), transform var(--m3-duration-short) var(--m3-easing-emphasized-decelerate); }
.service-choice.selected > i { opacity: 1; transform: scale(1); }
.service-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--m3-shape-md); color: var(--m3-on-primary-container); background: var(--m3-primary-container); }
.service-choice.selected .service-icon { color: var(--m3-on-primary); background: var(--m3-primary); }

/* Специалист — чип с аватаром, полоса листается пальцем. */
.staff-list { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.staff-choice { flex: 0 0 auto; min-width: 112px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 10px; border: 1px solid var(--m3-outline-variant); border-radius: var(--m3-shape-md); color: var(--m3-on-surface); background: var(--m3-surface-container-lowest); cursor: pointer; transition: background-color var(--m3-duration-short) var(--m3-easing-standard); }
.staff-choice:hover { background: color-mix(in srgb, var(--m3-on-surface) 8%, var(--m3-surface-container-lowest)); }
.staff-choice.selected { border-color: transparent; color: var(--m3-on-primary-container); background: var(--m3-primary-container); }
.staff-choice strong { font-size: .8125rem; font-weight: 600; line-height: 1.25; text-align: center; }
.staff-avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--m3-shape-full); color: var(--m3-on-tertiary-container); background: var(--m3-tertiary-container); font-size: 1rem; font-weight: 600; }
.staff-avatar.any { color: var(--m3-on-primary-container); background: var(--m3-primary-container); }
.staff-choice.selected .staff-avatar { color: var(--m3-on-primary); background: var(--m3-primary); }

/* Полоса дат: число — title, счётчик окон — бейдж; выбранный день залит primary, как в
   календаре M3. */
.day-strip-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.day-strip-title strong { display: block; font-size: 1.125rem; font-weight: 600; }
.day-strip-title small { color: var(--m3-on-surface-variant); font-size: .8125rem; }
.day-strip-nav { display: flex; align-items: center; gap: 4px; }
.day-jump { width: 168px; }
.day-strip { display: flex; gap: 8px; margin-top: 14px; padding: 2px 2px 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.day-choice { flex: 0 0 auto; min-width: 66px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px 8px; border: 1px solid var(--m3-outline-variant); border-radius: var(--m3-shape-md); color: var(--m3-on-surface); background: var(--m3-surface-container-lowest); cursor: pointer; scroll-snap-align: start; transition: background-color var(--m3-duration-short) var(--m3-easing-standard); }
.day-choice small { color: var(--m3-on-surface-variant); font-size: .75rem; font-weight: 500; }
.day-choice strong { font-size: 1.375rem; font-weight: 500; line-height: 1.75rem; }
.day-choice i { min-width: 22px; margin-top: 2px; padding: 1px 6px; border-radius: var(--m3-shape-full); color: var(--m3-on-tertiary-container); background: var(--m3-tertiary-container); font-size: .6875rem; font-style: normal; font-weight: 700; }
.day-choice:hover:not(:disabled) { background: color-mix(in srgb, var(--m3-on-surface) 8%, var(--m3-surface-container-lowest)); }
.day-choice.selected, .day-choice.selected:hover { border-color: transparent; color: var(--m3-on-primary); background: var(--m3-primary); }
.day-choice.selected small { color: var(--m3-on-primary); opacity: .85; }
.day-choice.selected i { color: var(--m3-on-primary-container); background: var(--m3-primary-container); }
.day-choice.empty { color: var(--m3-on-surface-variant); border-style: dashed; background: transparent; cursor: not-allowed; opacity: .7; }
.day-choice.empty i { color: var(--m3-on-surface-variant); background: var(--m3-surface-container-high); }
.nearest-hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; min-height: 36px; padding: 0 14px 0 10px; border: 0; border-radius: var(--m3-shape-full); color: var(--m3-on-tertiary-container); background: var(--m3-tertiary-container); cursor: pointer; font-size: .875rem; }
.nearest-hint .mud-icon-root { font-size: 1.125rem; }

/* Окна — чипы-фильтры: рамка, выбранный залит primary, как выбранный день. */
.slot-groups { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.slot-group-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--m3-on-surface-variant); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.slot-group-title i { padding: 1px 7px; border-radius: var(--m3-shape-full); background: var(--m3-surface-container-high); font-size: .6875rem; font-style: normal; }
.slot-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.slot-choice { min-height: 40px; border: 1px solid var(--m3-outline); border-radius: var(--m3-shape-sm); color: var(--m3-on-surface); background: transparent; cursor: pointer; font-size: .9375rem; font-weight: 500; transition: background-color var(--m3-duration-short) var(--m3-easing-standard); }
.slot-choice:hover { background: color-mix(in srgb, var(--m3-on-surface) 8%, transparent); }
.slot-choice.selected, .slot-choice.selected:hover { border-color: transparent; color: var(--m3-on-primary); background: var(--m3-primary); }
.slots-empty, .slots-loading { margin-top: 16px; padding: 20px; border-radius: var(--m3-shape-md); color: var(--m3-on-surface-variant); background: var(--m3-surface-container); font-size: .9375rem; text-align: center; }
.slots-loading { display: flex; align-items: center; justify-content: center; gap: 10px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Итог — тональная карточка primary-container с залитой кнопкой: заметнее любой другой
   поверхности на странице, но тем же оттенком. */
.booking-summary { position: sticky; top: 20px; padding: 24px; border-radius: var(--m3-shape-xl); color: var(--m3-on-primary-container); background: var(--m3-primary-container); }
.summary-label { color: var(--m3-on-primary-container); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.booking-summary h2 { min-height: 56px; margin: 10px 0 2px; font-size: 1.5rem; line-height: 1.75rem; font-weight: 500; }
.summary-price { font-size: 1.0625rem; font-weight: 700; }
.summary-lines { display: flex; flex-direction: column; gap: 14px; margin: 20px 0; padding: 18px 0; border-top: 1px solid color-mix(in srgb, var(--m3-on-primary-container) 18%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--m3-on-primary-container) 18%, transparent); }
.summary-lines > div { display: grid; grid-template-columns: 24px 1fr; gap: 10px; }
.summary-lines .mud-icon-root { font-size: 1.25rem; opacity: .85; }
.summary-lines span { display: flex; flex-direction: column; }
.summary-lines small { font-size: .75rem; opacity: .75; }
.summary-lines strong { margin-top: 2px; font-size: .9375rem; font-weight: 600; }
.summary-deposit strong { color: var(--m3-on-primary-container); }
.booking-summary .mud-button-root { height: 48px; }
.summary-blocker { margin: 12px 0 0; font-size: .8125rem; text-align: center; opacity: .85; }
.summary-consent { margin: 12px 0 0; font-size: .75rem; line-height: 1.45; text-align: center; opacity: .75; }

/* ── Подтверждение и состояния ────────────────────────────────────────────────────── */
.confirmation-wrap { min-height: calc(100vh - 160px); display: grid; place-items: center; padding: 40px 0; }
.confirmation-card { width: min(640px, 100%); padding: 40px; border-radius: var(--m3-shape-xl); background: var(--m3-surface-container-low); text-align: center; }
.confirmation-mark { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 20px; border-radius: var(--m3-shape-full); color: var(--m3-on-primary-container); background: var(--m3-primary-container); }
.confirmation-mark .mud-icon-root { font-size: 2rem; }
.confirmation-card h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.15; font-weight: 500; letter-spacing: -.02em; }
.confirmation-details { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 28px 0 20px; text-align: left; }
.confirmation-details div { min-height: 76px; display: flex; flex-direction: column; justify-content: center; padding: 14px 16px; border-radius: var(--m3-shape-md); background: var(--m3-surface-container-lowest); }
.confirmation-details small { color: var(--m3-on-surface-variant); font-size: .75rem; }
.confirmation-details strong { margin-top: 4px; font-size: .9375rem; font-weight: 600; }
.confirmation-details .wide { grid-column: 1 / -1; }
.confirmation-card > p { max-width: 460px; margin: 0 auto 20px; color: var(--m3-on-surface-variant); font-size: .9375rem; line-height: 1.5; }
.confirmation-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.confirmation-again { display: inline-flex; margin: 20px auto 0; text-align: center; }
.manage-link { margin-top: 16px; }
.manage-link input { width: 100%; padding: 12px 14px; border: 1px dashed var(--m3-outline); border-radius: var(--m3-shape-sm); color: var(--m3-on-surface-variant); background: var(--m3-surface-container-lowest); font-size: .8125rem; text-align: center; text-overflow: ellipsis; }
.reminder-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; color: var(--m3-on-surface-variant); font-size: .8125rem; }
.reminder-note .mud-icon-root { color: var(--m3-primary); font-size: 1.125rem; }
.public-state { min-height: calc(100vh - 160px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.public-state > span { color: var(--m3-primary); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.public-state h1 { max-width: 640px; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.15; font-weight: 500; }
.public-state p { color: var(--m3-on-surface-variant); }
.state-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* ── Управление записью ───────────────────────────────────────────────────────────── */
.manage-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 32px 0 24px; }
.manage-head h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.15; font-weight: 500; letter-spacing: -.02em; }
.manage-head p { margin: 8px 0 0; color: var(--m3-on-surface-variant); font-size: .9375rem; }
.manage-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; padding-bottom: 48px; }
.manage-card { min-width: 0; padding: 24px; border-radius: var(--m3-shape-lg); background: var(--m3-surface-container-low); }
.appointment-card { grid-row: span 2; align-self: start; color: var(--m3-on-primary-container); background: var(--m3-primary-container); border-radius: var(--m3-shape-xl); }
.appointment-card h2 { margin: 10px 0 2px; font-size: 1.5rem; line-height: 1.75rem; font-weight: 500; }
.manage-price { font-size: 1.0625rem; font-weight: 700; }
.manage-details { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--m3-on-primary-container) 18%, transparent); }
.manage-details > div { display: grid; grid-template-columns: 24px 1fr; gap: 10px; }
.manage-details .mud-icon-root { font-size: 1.25rem; opacity: .85; }
.manage-details span { display: flex; flex-direction: column; }
.manage-details small { font-size: .75rem; opacity: .75; }
.manage-details strong { margin-top: 2px; font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.manage-card-actions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--m3-on-primary-container) 18%, transparent); }
.manage-card-actions .mud-button-root { color: var(--m3-on-primary-container) !important; }
.staff-list.compact .staff-choice { min-width: 104px; }
.manage-date { width: 100%; margin-top: 18px; }
.manage-action { margin-top: 18px; }
.cancel-card { grid-column: 2; }
.manage-finished { display: flex; align-items: center; gap: 18px; min-height: 150px; }
.manage-finished > .mud-icon-root { color: var(--m3-primary); font-size: 3rem; }
.manage-finished h2 { font-size: 1.5rem; font-weight: 500; }
.manage-finished p { margin: 6px 0 0; color: var(--m3-on-surface-variant); font-size: .9375rem; }
.payment-callout { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; padding: 22px 24px; border-radius: var(--m3-shape-lg); color: var(--m3-on-tertiary-container); background: var(--m3-tertiary-container); }
.payment-callout .eyebrow { margin-bottom: 6px; color: var(--m3-on-tertiary-container); }
.payment-callout h2 { font-size: 1.375rem; line-height: 1.75rem; font-weight: 500; }
.payment-callout p { margin: 4px 0 0; font-size: .9375rem; }
.payment-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hold-urgent { color: var(--m3-error); }
.refund-note { margin: 14px 0 0; color: var(--m3-on-surface-variant); font-size: .875rem; line-height: 1.5; }
.cancel-confirm { margin-top: 16px; padding: 16px; border-radius: var(--m3-shape-md); color: var(--m3-on-error-container); background: var(--m3-error-container); font-size: .9375rem; }
.cancel-confirm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ── Мобильная кнопка и скелет ────────────────────────────────────────────────────── */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
button:focus-visible, a:focus-visible, .mud-button-root:focus-visible { outline: 3px solid color-mix(in srgb, var(--m3-primary) 45%, transparent); outline-offset: 2px; }
.mobile-cta { display: none; }
.booking-skeleton { padding: 32px 0 48px; }
.skeleton-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.skeleton-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 24px; }
.skeleton-flow { display: flex; flex-direction: column; gap: 16px; }
.sk-card { padding: 24px; border-radius: var(--m3-shape-lg); background: var(--m3-surface-container-low); }
.sk-aside { min-height: 380px; border-radius: var(--m3-shape-xl); }
.sk-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.sk { display: block; border-radius: var(--m3-shape-sm); background: linear-gradient(90deg, var(--m3-surface-container-high), var(--m3-surface-container-highest), var(--m3-surface-container-high)); background-size: 200% 100%; animation: sk-shimmer 1.4s ease-in-out infinite; }
.sk-title { width: min(420px, 70%); height: 40px; }
.sk-line { width: min(280px, 50%); height: 16px; }
.sk-tile { width: calc(50% - 5px); height: 84px; }
.sk-chip { width: 74px; height: 40px; }
@keyframes sk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    .sk { animation: none; }
    .service-choice, .day-choice, .staff-choice, .slot-choice, .service-choice > i { transition: none; }
}

@media (max-width: 960px) {
    .skeleton-grid { grid-template-columns: 1fr; }
    .sk-aside { display: none; }
    /* Кнопка подтверждения на телефоне уезжает за три экрана вниз: итог и действие
       остаются на виду нижней панелью, иначе человек доходит до контактов и теряет её. */
    .mobile-cta { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--m3-surface-container); box-shadow: var(--m3-elevation-2); }
    .mobile-cta-copy { display: flex; flex-direction: column; min-width: 0; }
    .mobile-cta-copy small { color: var(--m3-on-surface-variant); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-cta-copy strong { font-size: .9375rem; font-weight: 600; }
    .mobile-cta .mud-button-root { flex: 0 0 auto; height: 44px; }
    .booking-summary .mud-button-root { display: none; }
    .summary-blocker { display: none; }
    .home-hero { grid-template-columns: 1fr; padding-top: 32px; }
    /* minmax(0, …), а не 1fr: полосы дат и специалистов не сжимаются (flex: 0 0 auto), и
       1fr = minmax(auto, 1fr) растянул бы колонку до их полной ширины — страница уезжала вбок. */
    .booking-grid { grid-template-columns: minmax(0, 1fr); }
    .booking-summary { position: static; }
    .slot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .manage-grid { grid-template-columns: minmax(0, 1fr); }
    .appointment-card { grid-row: auto; }
    .cancel-card { grid-column: auto; }
    .payment-callout { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 640px) {
    .public-shell { width: min(100% - 32px, 1180px); }
    .public-header { height: 56px; }
    .public-header-note, .public-shell footer span:last-child, .public-logo em { display: none; }
    .home-hero { min-height: auto; padding: 24px 0 40px; }
    .home-copy h1 { font-size: 2.125rem; }
    .company-search { grid-template-columns: 1fr; }
    .company-search .mud-button-root { margin-top: 0; }
    .home-preview { padding: 24px 20px; }
    .booking-head { align-items: flex-start; flex-direction: column; gap: 14px; padding-top: 20px; }
    .booking-head h1 { font-size: 1.75rem; }
    .booking-steps { gap: 6px; }
    .booking-steps li { padding: 0 10px 0 6px; font-size: .8125rem; }
    .day-strip-head { align-items: flex-start; flex-direction: column; gap: 10px; }
    .day-strip-nav { align-self: stretch; justify-content: space-between; }
    .day-jump { flex: 1; width: auto; max-width: 200px; }
    .booking-section, .manage-card { padding: 18px; }
    .service-list, .contact-grid { grid-template-columns: 1fr; }
    .slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .confirmation-card { padding: 28px 18px; }
    .confirmation-details { grid-template-columns: 1fr; }
    .manage-head { align-items: flex-start; flex-direction: column; gap: 12px; }
}