/* Раздел «Сервис» (/service): преднастроенные услуги отеля с тумблером и ценой. */
/* ⚠ Отступ сверху задаёт ОБЩЕЕ правило (css/common.css: body.site-light .page):
   у раздела своего быть не должно, иначе страницы расходятся по вертикали. */
.svc { padding-bottom: 60px; }
.svc .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--page-pad, 24px); width: 100%; }
/* ⚠ У РЕДАКТОРА УСЛУГ КОЛОНКА УЖЕ ОКНА. Строка услуги тянулась во всю ширину, и на
   широком мониторе тумблер оказывался в полутора тысячах точек от названия - глазу
   приходилось ехать через пустое место, чтобы понять, что именно выключаешь.
   Правило перебивает общее body.site-light .container { max-width: none }, поэтому
   специфичность выше. Публичную страницу услуг (.svc-pub) НЕ трогает - там плитки. */
body.site-light .page.svc .container { max-width: var(--svc-editor-width); margin-left: auto; margin-right: auto; }

/* Шапка раздела и карточки услуг - в стиле приложения гостя и первой страницы сайта
   (перенос 25.09.2026 по просьбе заказчика). Золото #A2783E, карточка белая, фото сверху,
   иконка на стыке фото и текста - ровно как в плитке приложения (.asvc-tile). */
/* ⚠ Цвета и фон берём ИЗ ОБЩЕГО ФИРСТИЛЯ сайта (--st-*), как на главной. Раньше у раздела
   были свои золото и фон #F9F8F6 - при переходе с главной фон заметно менялся, а кнопка и
   заголовок прыгали. Своих значений тут быть не должно. */
.svc-pub { --svc-gold: var(--st-gold, #B27A31); --svc-gold-soft: var(--st-gold-soft, #F4EBDE);
    --svc-ink: var(--st-ink, #14161c); --svc-line: var(--st-line, #ece5da); }
.svc-top { margin-bottom: 26px; }
/* строка заголовка - ОДИН в один с главной (.bkp-headrow): та же высота, тот же отступ снизу */
.svc-headrow { display: flex; align-items: center; justify-content: space-between; gap: 18px;
    margin-bottom: 6px; }
.svc-manage { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px;
    background: var(--svc-gold-soft); color: var(--svc-gold); text-decoration: none;
    border-radius: 14px; padding: 13px 20px; font-size: 15px; font-weight: 700; transition: background .15s, transform .12s; }
.svc-manage:hover { background: #efe5d6; }
.svc-manage:active { transform: scale(.985); }

.svc-head { margin-bottom: 0; }
/* отступ под заголовком держит строка, у самого h1 ноль - иначе флекс центрирует коробку
   вместе с отступом и кнопка уезжает вверх (тот же случай, что на главной) */
.svc-head h1 { font-size: 34px; letter-spacing: -.025em; margin: 0; color: var(--svc-ink); }
.svc-sub { color: var(--muted); font-size: 15px; max-width: 640px; }

.svc-cat { margin-bottom: 30px; }
.svc-cat__title { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; margin: 0 0 12px; }

.svc-list { display: grid; gap: 10px; }

.svc-row {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border-light);
    border-radius: 14px; padding: 12px 16px;
    transition: opacity .15s, border-color .15s;
}
.svc-row__main { display: flex; align-items: center; gap: 14px; }
.svc-row.is-off { opacity: .55; }

.svc-ico {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ea-1, rgba(178,122,49,.1)); color: var(--ea, var(--st-gold, #B27A31)); font-size: 17px;
}
.svc-row.is-off .svc-ico { background: rgba(17,24,39,.06); color: var(--muted); }

.svc-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 15px; }
.svc-tag { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--muted); background: rgba(17,24,39,.05); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.svc-tag i { font-size: 10px; }

/* цена / бесплатно */
.svc-price { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.svc-price__cur { font-size: 12px; color: var(--muted); font-weight: 600; }
.svc-price__in {
    width: 92px; text-align: right; border: 1px solid var(--border-light); border-radius: 9px;
    padding: 7px 10px; font-size: 14px; background: #fff; color: var(--text);
}
.svc-price__in::placeholder { color: #16a34a; font-weight: 600; opacity: 1; }   /* «Free» зелёным */
.svc-price__in:focus { outline: none; border-color: var(--ea, var(--st-gold, #B27A31)); box-shadow: 0 0 0 2px var(--ea-2, rgba(178,122,49,.2)); }
/* убираем стрелки-спиннеры у number-инпута */
.svc-price__in::-webkit-outer-spin-button,
.svc-price__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.svc-price__in { -moz-appearance: textfield; appearance: textfield; }

/* тумблер вкл/выкл */
.svc-switch { flex: 0 0 auto; position: relative; display: inline-block; width: 44px; height: 26px; cursor: pointer; }
.svc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.svc-switch__slider { position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; transition: background .15s; }
.svc-switch__slider::before { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
.svc-switch input:checked + .svc-switch__slider { background: var(--ea, var(--st-gold, #B27A31)); }
.svc-switch input:checked + .svc-switch__slider::before { transform: translateX(18px); }

@media (max-width: 560px) {
    .svc-row { flex-wrap: wrap; gap: 10px; }
    .svc-name { flex: 1 1 100%; order: -1; }
    .svc-ico { width: 36px; height: 36px; }
    .svc-price__in { width: 80px; }
}

/* ══════════ ПУБЛИЧНЫЙ ВИД: плитки-виджеты услуг ══════════ */
.svc-pub { padding-bottom: 60px; }
.svc-pub .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--page-pad, 24px); width: 100%; }

.food-adminbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: rgba(17,24,39,.04); border-radius: 12px; padding: 10px 14px; margin-bottom: 22px; font-size: 13px; color: var(--muted); }

.svcp-cat { margin-bottom: 30px; }
/* Раздел по макету 25.09.2026: название крупнее, под ним подпись, карточки шире - четыре в
   ряд на широком экране вместо шести. Числа сняты с макета: карточка 442px при контейнере
   1803px (24.5%), зазор 26px. */
.svcp-cat__title { font-size: 23px; font-weight: 800; letter-spacing: -.015em; color: var(--svc-ink); margin: 0 0 4px; }
.svcp-cat__sub { font-size: 15px; line-height: 1.45; color: #6b7280; margin: 0 0 16px; }

.svcp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 26px; }

.svcp-tile {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 0; border-radius: 20px;
    box-shadow: 0 2px 10px rgba(60,50,40,.05); transition: transform .12s ease, box-shadow .15s;
}
.svcp-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(60,50,40,.09); }
/* ⚠ Пропорции сняты с ЭТАЛОНА - плитки в приложении гостя (.asvc-tile--photo, 193x170):
   фото там 88px, то есть 52% высоты карточки и соотношение сторон 2.2:1; от нижнего края
   фото до названия 24px, снизу 12px. Пока фото стояло фиксированными 150px, на широкой
   карточке сайта оно занимало 69% - карточка читалась иначе, чем в приложении. */
.svcp-tile__photo { width: 100%; aspect-ratio: 2.08 / 1; background: #f0ece6 center/cover no-repeat; }
.svcp-tile__photo.is-blank { background: linear-gradient(135deg, #f3ece1, #ece2d2); }
/* тело карточки: значок сидит на его верхней границе, поэтому всегда ровно на стыке с фото,
   какой бы высоты фото ни вышло на этой ширине экрана */
/* место справа - под стрелку, она стоит по центру тела */
.svcp-tile__body { position: relative; flex: 1 1 auto; padding: 32px 52px 20px 22px; }
/* кружок значка сидит на стыке с фото; размер с макета - 56px при карточке 442 */
.svcp-tile__ico { position: absolute; top: 0; left: 22px; transform: translateY(-50%);
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    background: #fdf8f2; color: var(--svc-gold); box-shadow: 0 2px 10px rgba(60,45,25,.14); }
.svcp-tile__name { font-weight: 800; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; color: var(--svc-ink); }
/* подпись и пометка времени - одной строкой, переносятся вместе, если не влезли */
.svcp-tile__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 4px; }
.svcp-tile__sub { font-size: 14px; line-height: 1.35; color: #6b7280; }
.svcp-tile__sched { font-size: 13px; color: #6b7280; display: inline-flex; align-items: center; gap: 6px; }
.svcp-tile__sched i { color: #9aa0ab; font-size: 12px; }
/* стрелка: по центру ТЕЛА карточки, как на макете */
.svcp-tile__chev { position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
    color: var(--svc-gold); font-size: 17px; }
.svcp-tile__price { margin-top: 10px; font-weight: 700; font-size: 14.5px; color: var(--svc-ink); }
.svcp-tile__price.is-free { color: #16a34a; }

.food-empty { text-align: center; color: var(--muted); padding: 60px 20px; }
.food-empty__ico { font-size: 48px; opacity: .5; margin-bottom: 10px; }
.food-empty p { margin-bottom: 14px; }

/* ── рабочие часы сервисов (админ) ── */
.svc-hours { background: var(--surface); border: 1px solid var(--border-light); border-radius: 14px; padding: 16px 18px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.svc-hours__label { font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.svc-hours__label i { color: var(--ea, var(--st-gold, #B27A31)); }
.svc-hours__range { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.svc-hours__inp { border: 1px solid var(--border-light); border-radius: 10px; padding: 8px 12px; font-size: 15px; background: #fff; color: var(--text); }
.svc-hours__inp:focus { outline: none; border-color: var(--ea, var(--st-gold, #B27A31)); box-shadow: 0 0 0 2px var(--ea-2, rgba(178,122,49,.2)); }
.svc-hours__dash { color: var(--muted); }
.svc-hours__saved { color: #16a34a; font-size: 13px; font-weight: 600; }
.svc-hours__hint { color: var(--muted); font-size: 12.5px; margin-top: 8px; }

/* ── рабочие часы сервисов (публичная) ── */
.svcp-hours { display: inline-flex; align-items: center; gap: 9px; background: var(--svc-gold-soft);
    border: 0; border-radius: 999px; padding: 11px 18px; font-size: 14px; color: #6b5a3f; margin-bottom: 26px; }
.svcp-hours i { color: var(--svc-gold); }
.svcp-hours b { font-weight: 700; color: var(--svc-ink); }

/* поля времени приёма/выполнения (timed-услуги) — внутри карточки услуги */
.svc-times { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 12px; padding-top: 12px;
    border-top: 1px dashed var(--border-light); }
.svc-time { display: flex; flex-direction: column; gap: 7px; }
.svc-time__lbl { font-size: 12.5px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.svc-time__ctl { display: inline-flex; align-items: center; gap: 8px; }
.svc-time__num { width: 74px; padding: 8px 10px; border: 1px solid var(--border-light); border-radius: 9px; font-size: 15px; font-family: inherit; }
.svc-time__unit { padding: 8px 10px; border: 1px solid var(--border-light); border-radius: 9px; font-size: 14px; background: #fff; font-family: inherit; }
.svc-time__time { padding: 8px 10px; border: 1px solid var(--border-light); border-radius: 9px; font-size: 15px; font-family: inherit; }
.svc-time__dash { color: var(--muted); }

/* телефон: карточки в два столбца, фото и отступы мельче - как в приложении */
@media (max-width: 560px) {
    .svc-headrow { flex-direction: column; align-items: stretch; gap: 12px; }
    .svc-manage { justify-content: center; }
    .svc-head h1 { font-size: 28px; }
    .svcp-cat__title { font-size: 20px; }
    .svcp-cat__sub { font-size: 13.5px; margin-bottom: 12px; }
    .svcp-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .svcp-tile__ico { left: 12px; width: 34px; height: 34px; font-size: 15px; }
    /* ⚠ На телефоне стрелки нет. Селектор ДВУХклассовый нарочно: у Font Awesome есть своё
       правило `.fa-solid { display: var(--fa-display, inline-block) }`, его таблица подключается
       позже нашей, и одноклассовое `display: none` она перебивала - стрелка оставалась и
       налезала на текст (поймано рендером на 390px). */
    .svcp-tile .svcp-tile__chev { display: none; }
    .svcp-tile__body { padding: 21px 12px 12px; }
    .svcp-tile__name { font-size: 14px; }
    .svcp-tile__meta { gap: 4px 10px; }
    .svcp-tile__sub { font-size: 11.5px; }
    .svcp-tile__sched { font-size: 11px; }
}

/* ═══════════ ПОЯВЛЕНИЕ: ЧАСТЬ ЭТОЙ СТРАНИЦЫ ═══════════
   Кадры, держатель и шаг задержек - общие, в css/common.css. Здесь только фото внутри карточки:
   оно лежит отдельным слоем (.svcp-tile__photo), поэтому двигаем его напрямую - как в
   приложении, где фото плитки тоже отдельный слой. */
@media (prefers-reduced-motion: no-preference) {
body.site-in .svcp-grid.is-real > * .svcp-tile__photo {
    animation: qapPhoto var(--qap-dur) var(--qap-ease) both;
    animation-delay: calc(var(--qap-d0) + min(var(--i, 0), 4) * var(--qap-step)); }
/* у карточки overflow: hidden - фото при наезде не вылезет за скругление */
}