/* ─────────────────────────────────────────────────────────────────────────────
   AYLAR — общий бренд-кит публичных страниц (Ф4 · дизайн-язык A «Спокойный простор»).
   Палитра/типографика/кнопки/шапка/подвал/состояния — единый язык для unit.html,
   cabinet.html, selection.html, agent.html, catalog.html. Каждая страница добавляет
   свои блоки в собственном <style>. Mobile-first, премиум, скруглённые формы.

   Шрифт бренда — Plus Jakarta Sans (выбор пользователя 2026-06-06): грузится здесь
   через @import Google Fonts и наследуется всеми публичными страницами. На публичном
   слое полная свобода веб-шрифтов (это НЕ Remote DOM).

   Правила дизайн-языка A, соблюдаемые здесь:
   • НОЛЬ кривых переносов: подписи/метки/чипы/кнопки — nowrap; значение и подпись
     никогда не слипаются в одну строку (подпись — отдельной строкой ниже).
   • tabular-nums на деньгах/датах/числах (.tnum / автоматически в .money/.price).
   • Явный цвет у каждого текста (≥AA, не наследуем светлый-на-светлом).
   ───────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --bg:#f4efe8; --card:#fbf8f3; --ink:#171412;
  --camel:#ceaa88; --camelD:#bd9468; --camelsoft:#f1e6d8;
  --sec:#ede4d9; --muted:#efe7dd; --mutfg:#7a6b5b;
  --bd:rgba(23,20,18,.10); --bd2:rgba(23,20,18,.16);
  --ok:#3a8f63; --oksoft:#e6f0e8;
  --warn:#c47d12; --warnsoft:#f7ecd9;
  --red:#dc2626; --redsoft:#f9e3e3;
  --review:#5b6cc4; --reviewsoft:#e7e9f6;
  /* Тени 2026 (luxury): мягкая покоящаяся (контакт+ambient) + глубокая «премиальная». Тёплая тонировка. */
  --shadow-soft:0 2px 8px -4px rgba(38,25,11,.10), 0 14px 40px -30px rgba(38,25,11,.18);
  --shadow-luxury:0 22px 70px -48px rgba(38,25,11,.22);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background-color:var(--bg); color:var(--ink);
  /* Фирменный camel-glow (референс aylar.kg): тёплое свечение вверху-справа + светлый
     блик слева + мягкий вертикальный градиент. Под всем контентом. */
  background-image:
    radial-gradient(circle at top right, rgba(206,170,136,.26), transparent 28%),
    radial-gradient(circle at left center, rgba(255,255,255,.65), transparent 22%),
    linear-gradient(180deg, #f8f4ee 0%, #f2ece4 100%);
  background-attachment:scroll;
  font:16px/1.62 var(--font);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 22px; }

/* ── Чистая типографика (дизайн-язык A) ──────────────────────────────────────
   Числа/деньги/даты — табличные цифры (ровные колонки, без «прыжков»). */
.tnum,.money,.price,.amount{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
/* Короткие подписи/значения, которые НЕ должны переноситься. */
.nowrap{ white-space:nowrap; }
/* Длинное значение в одну строку: вместо переноса — многоточие. */
.ellip{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Шапка ───────────────────────────────────────────────────────────────── */
header{ position:sticky; top:0; z-index:30; background:rgba(244,239,232,.82); backdrop-filter:saturate(1.3) blur(12px); -webkit-backdrop-filter:saturate(1.3) blur(12px); border-bottom:1px solid var(--bd); }
.hbar{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:12px; }
.logo{ height:16px; width:auto; fill:var(--ink); display:block; }
.logo-link{ display:inline-flex; align-items:center; }
.hr{ display:flex; gap:9px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }

/* ── Кнопки ──────────────────────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; cursor:pointer; border:none; border-radius:999px; transition:transform .12s, background .2s, box-shadow .2s, border-color .2s, color .2s; font-family:inherit; white-space:nowrap; }
.btn:active{ transform:translateY(1px); }
.btn svg{ width:17px; height:17px; }
.btn.sm{ height:40px; padding:0 17px; font-size:14px; }
.btn.md{ height:46px; padding:0 20px; font-size:15px; }
.btn.lg{ height:52px; padding:0 24px; font-size:16px; border-radius:14px; }
.btn.camel{ background:var(--camel); color:var(--ink); }
.btn.camel:hover{ background:var(--camelD); }
.btn.ink{ background:var(--ink); color:var(--bg); }
.btn.ink:hover{ box-shadow:0 8px 22px rgba(23,20,18,.22); }
.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--bd2); }
.btn.ghost:hover{ background:var(--sec); }
.btn:disabled{ opacity:.55; cursor:default; transform:none; }

/* ── Типографика секций ──────────────────────────────────────────────────── */
section{ margin-top:42px; }
.eyebrow{ font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--camelD); font-weight:800; white-space:nowrap; }
.h2{ font-size:clamp(20px,2.6vw,28px); font-weight:800; letter-spacing:-.02em; margin:6px 0 16px; }
.card{ background:var(--card); border:1px solid var(--bd); border-radius:18px; padding:22px; box-shadow:var(--shadow-soft); }

/* ── Чипы ────────────────────────────────────────────────────────────────── */
.chip{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:999px; white-space:nowrap; }

/* ── Состояния (загрузка/ошибка/пусто) ───────────────────────────────────── */
.state{ text-align:center; color:var(--mutfg); padding:80px 22px; font-size:16px; }
.state .ttl{ font-size:20px; font-weight:800; color:var(--ink); margin-bottom:8px; }
.state .retry{ margin-top:16px; }
.spinner{ width:34px; height:34px; border-radius:50%; border:3px solid var(--bd2); border-top-color:var(--camelD); margin:0 auto 16px; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
/* Skeleton-каркас (2026): мгновенный shimmer вместо спиннера. Применяют страницы
   (portal/catalog/partner) для сеток-заглушек. Reduced-motion → статичная подложка. */
.skeleton{ background:linear-gradient(100deg, var(--muted) 28%, var(--camelsoft) 50%, var(--muted) 72%); background-size:200% 100%; animation:ay-shimmer 1.4s linear infinite; border-radius:12px; }
.sk-line{ height:12px; margin:8px 0; }
@keyframes ay-shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce){ .skeleton{ animation:none; background:var(--muted); } }

/* ── Подвал ──────────────────────────────────────────────────────────────── */
footer{ margin-top:54px; padding:34px 0; border-top:1px solid var(--bd); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.flogo{ height:34px; width:auto; fill:var(--ink); opacity:.55; }
.fcap{ font-size:13px; color:var(--mutfg); }

/* ── Скролл-проявление + ховер-подъём ────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity:1; transform:none; }
.lift{ transition:transform .25s, box-shadow .25s; }
.lift:hover{ transform:translateY(-3px); box-shadow:0 28px 60px -36px rgba(38,25,11,.34); }

/* ── Мобайл sticky-CTA (тренд 2026): нижняя закреплённая панель действий ──────
   На десктопе скрыта (действия в шапке/контенте); на телефоне — стеклянная панель
   «Позвонить / Записаться», тач-цели ≥48px, safe-area под «домашнюю полоску».
   Страница добавляет body.has-sticky-cta → нижний отступ, чтобы контент не прятался. */
.ay-sticky-cta{ display:none; }
@media (max-width:720px){
  .ay-sticky-cta{
    display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:70;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(244,239,232,.93); backdrop-filter:saturate(1.3) blur(12px); -webkit-backdrop-filter:saturate(1.3) blur(12px);
    border-top:1px solid var(--bd);
  }
  .ay-sticky-cta .btn{ flex:1; min-height:48px; height:48px; }
  body.has-sticky-cta{ padding-bottom:76px; }
}

/* ── Тост ────────────────────────────────────────────────────────────────── */
.toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(18px); z-index:80; background:var(--ink); color:var(--bg); font-weight:700; font-size:14px; padding:13px 20px; border-radius:999px; box-shadow:0 16px 34px -14px rgba(23,20,18,.5); display:inline-flex; align-items:center; gap:9px; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; max-width:90vw; }
.toast svg{ width:18px; height:18px; }
.toast.show{ opacity:1; transform:translateX(-50%); }

/* ── Уважение к prefers-reduced-motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  /* Декоративные hover/zoom-трансформы (подъём карточек, зум фото/QR, пульс «сердца»)
     под reduced-motion НЕ применяем даже мгновенно — пользователь просит минимум движения.
     Тень/цвет hover-состояний остаются (визуальный отклик без перемещения). */
  .lift:hover, .ucard.lift:hover .photo img, .hero:hover img, .favb:hover,
  .payqr:hover, .sim:hover, .cph.js-cph:hover img{ transform:none !important; }
}

/* ── Бенто-герой 2026 (R10+; переиспользуется unit/agent/complex) ─────────────
   Карта-обложка: фон-фото + текст. Mobile — 1 колонка (фото-полоса сверху,
   текст под); desktop — 2 колонки (текст слева | фото справа, через order). */
.bento{ display:grid; grid-template-columns:1fr; background:var(--card); border:1px solid var(--bd); border-radius:24px; box-shadow:var(--shadow-luxury); overflow:hidden; }
.bento-media{ position:relative; aspect-ratio:16/10; background:var(--muted); overflow:hidden; }
.bento-media>img{ width:100%; height:100%; object-fit:cover; display:block; }
.bento-media::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(23,20,18,0) 38%, rgba(23,20,18,.46) 100%); }
.bento-body{ padding:24px; display:flex; flex-direction:column; justify-content:center; gap:12px; }
@media (min-width:720px){
  .bento{ grid-template-columns:1.04fr .96fr; align-items:stretch; }
  .bento-body{ order:1; padding:38px 42px; }
  .bento-media{ order:2; aspect-ratio:auto; min-height:320px; }
}

/* ── Bottom-sheet (R10 мобильные фильтры; переиспользуется R17) ───────────────
   Снизу-выезжающий лист: grabber + прокручиваемое тело + липкий низ. Только
   мобайл (≤720px) — на десктопе скрыт. Анимация уважает reduced-motion (глоб.). */
.sheet-scrim{ position:fixed; inset:0; z-index:70; background:rgba(23,20,18,.42); opacity:0; pointer-events:none; transition:opacity .25s; }
.sheet-scrim.open{ opacity:1; pointer-events:auto; }
.sheet{ position:fixed; left:0; right:0; bottom:0; z-index:71; display:flex; flex-direction:column; max-height:80dvh; background:var(--card); border-radius:22px 22px 0 0; box-shadow:0 -20px 60px -28px rgba(38,25,11,.42); transform:translateY(100%); transition:transform .28s cubic-bezier(.2,.8,.2,1); box-sizing:border-box; }
.sheet.open{ transform:translateY(0); }
.sheet-grab{ flex:none; width:42px; height:5px; border-radius:999px; background:var(--bd2); margin:9px auto 2px; }
.sheet-head{ flex:none; padding:2px 18px 12px; border-bottom:1px solid var(--bd); }
.sheet-body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 18px; }
.sheet-foot{ flex:none; padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--bd); background:var(--card); }
@media (min-width:720px){ .sheet, .sheet-scrim{ display:none !important; } }