/* ═══════════════════════════════════════════════════════════════════════════
   PetMarket — Mini App Styles
   ═══════════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary: #635CFB;
  --btn-bg: #EEEDFF;
  --btn-bg-hover: #DBD9FF;
  --text-dark: #1A1A2E;
  --text-secondary: #8E8EA0;
  --text-btn: #635CFB;
  --radius-btn: 14px;
  --font: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
  /* v47 */
}

/* Мигающая каретка во всех полях ввода — фирменный фиолетовый.
   (.sms-digit сохраняет свой caret-color: transparent — класс специфичнее) */
input,
textarea,
[contenteditable] {
  caret-color: var(--primary);
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: var(--font);
  background: #FFFFFF;
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.screen {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.screen.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 10;
}
/* ═══════════════════════════════════════════════════════════════════════════
   SPLASH SCREEN — Animated
   ═══════════════════════════════════════════════════════════════════════════ */
#screen-splash {
  background: #635CFB;
  overflow: hidden;
}

/* SVG анимируется при появлении */
.splash-svg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  animation: svgReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes svgReveal {
  from {
    opacity: 0;
    transform: scale(1.08) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Текст PetMarket поверх SVG */
.splash-title-overlay {
  position: absolute;
  z-index: 10;
  bottom: 42%;
  left: 0;
  right: 0;
  text-align: center;
  animation: titleRise 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}

.splash-title-overlay h1 {
  font-size: 42px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -1px;
  text-shadow: 0 4px 24px rgba(0,0,0,0.18);
}

@keyframes titleRise {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Пульсирующий лого-dot */
.splash-dot {
  position: absolute;
  z-index: 10;
  bottom: 38%;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  animation: dotPulse 1.5s ease-in-out 1s infinite;
}

@keyframes dotPulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.7; }
  50% { transform: translateX(-50%) scale(1.6); opacity: 1; }
}

/* Fade out всего splash при переходе */
#screen-splash.fade-out {
  animation: splashOut 0.6s ease forwards;
}

@keyframes splashOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}



@keyframes splashIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANGUAGE SCREEN
   ═══════════════════════════════════════════════════════════════════════════ */
#screen-language {
  background: #FFFFFF;
  align-items: stretch;
  justify-content: flex-start;
}

.lang-page {
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 40px;
  overflow: hidden;
}

/* Картинка флагов — занимает свободное место */
.lang-image-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding-top: 24px;
}

.lang-image {
  max-width: 287px;
  max-height: 312px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Заголовок */
.lang-text-block {
  text-align: center;
  padding: 20px 8px 24px;
  
}

.lang-title {
  font-size: 17px;
  font-weight: 700;
  color: #1C1C1E;
  line-height: 1.4;
  margin-bottom: 6px;
}

.lang-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: #8E8E93;
}

/* Кнопки — всегда видны внизу */
.lang-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  
}

.lang-btn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 14px;
  background: #EEEDFF;
  color: #635CFB;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.lang-btn:active { transform: scale(0.97); background: #DBD9FF; }
.lang-btn.selected {
  background: #635CFB;
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(99, 92, 251, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN SCREEN — по скринам Figma
   ═══════════════════════════════════════════════════════════════════════════ */
#screen-main {
  background: #F3F4F6;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}

/* Header */
.m-header {
  background: #FFFFFF;
  padding: 16px 12px 12px;
  padding-top: 12px;
  border-radius: 0 0 8px 8px;
}
body.platform-ios .m-header,
body.platform-android .m-header {
  padding-top: max(
    calc(env(safe-area-inset-top, 0px) * 1.4 + 24px),
    calc(var(--tg-content-safe-area-inset-top, 0px) * 1.4 + 24px)
  );
}
/* Избранное: safe-area padding только в полном экране */
body.platform-ios.tg-fullscreen .fav-header,
body.platform-android.tg-expanded .fav-header {
  padding-top: max(
    calc(env(safe-area-inset-top, 0px) * 1.4 + 24px),
    calc(var(--tg-content-safe-area-inset-top, 0px) * 1.4 + 24px)
  );
}
/* Избранное: в неполном экране — без отрицательного margin, фиксированная высота */
body.tg-active.platform-ios:not(.tg-fullscreen) .fav-header,
body.tg-active.platform-android:not(.tg-expanded) .fav-header {
  padding-top: 0;
}
body.tg-active.platform-ios:not(.tg-fullscreen) .fav-header-inner,
body.tg-active.platform-android:not(.tg-expanded) .fav-header-inner {
  margin-top: 0;
  height: 44px;
}
.m-header-inner {
  display: flex;
  align-items: center;
  gap: 4px;
}
.m-search-wrap {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  background: #F2F2F7; border-radius: 12px;
  padding: 0 14px; height: 40px;
}
.m-search {
  border: none; background: transparent;
  font-family: var(--font); font-size: 15px; color: #000000;
  width: 100%; outline: none;
}
.m-search::placeholder { color: #AEAEB2; }
.m-notification-btn {
  width: 40px; height: 40px;
  background: #F2F2F7;
  border-radius: 12px;
  border: none;
  display: flex; align-items: center; justify-content: center;
  
  cursor: pointer;
  padding: 0;
}
.m-notification-btn svg { display: block; }

/* Scroll */
.m-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; padding-top: 4px; background: #F3F4F6; }
.m-scroll::-webkit-scrollbar, .screen::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

.m-block {
  background: #FFFFFF;
  border-radius: 8px;
  margin-bottom: 4px;
  padding-bottom: 12px;
}

/* Section title */
.m-section-title {
  font-size: 14px; font-weight: 700; color: #000000;
  padding: 12px;
}

/* ── Категории ────────────────────────────────────────────────────────────── */
.m-cats { padding: 0 12px; display: flex; flex-direction: column; gap: 8px; }

.m-cats-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cat-big {
  background: #F2F2F7; border-radius: 12px;
  height: 84px; position: relative; overflow: hidden;
  padding: 14px 12px;
  cursor: pointer; transition: transform .15s;
}
.cat-big:active { transform: scale(.97); }
.cat-big span { font-size: 12px; font-weight: 600; color: #000000; position: relative; z-index: 1; display: block; }
/* Кошки — увеличенная, сдвинута правее и ниже */
.m-cats-row2 .cat-big:nth-child(1) img { position: absolute; right: -20px; bottom: -22px; width: 115px; height: 120px; object-fit: contain; }
/* Собаки — from SVG: card w=171 h=84, img offset left=86 top=-10 w=103 h=100 */
.m-cats-row2 .cat-big:nth-child(2) img { position: absolute; left: 50.3%; top: -13.9%; width: 103px; height: 100px; object-fit: contain; }

.m-cats-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cat-small {
  background: #F2F2F7; border-radius: 12px;
  height: 84px; position: relative; overflow: hidden;
  padding: 14px 10px;
  cursor: pointer; transition: transform .15s;
}
.cat-small:active { transform: scale(.95); }
.cat-small span { font-size: 12px; font-weight: 600; color: #000000; position: relative; z-index: 1; display: block; line-height: 1.2; }
/* Вязка — image2: rect x=15 y=172 w=106 h=46, card x=12 y=134 w=112 h=84 → centered, bottom:0 */
.cat-small:nth-child(1) img { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 112px; height: 50px; object-fit: contain; }
/* Приюты — image3: rect x=182 y=156 w=62 h=62, card x=132 y=134 w=112 h=84 → right:0 bottom:0 */
.cat-small:nth-child(2) img { position: absolute; right: -7px; bottom: -10px; width: 99px; height: 89px; object-fit: contain; }
/* Потерянные — image4: rect x=301 y=157 w=60 h=62, card x=252 y=134 w=112 h=84 → right:3 bottom:-1 */
.cat-small:nth-child(3) img { position: absolute; right: 3px; bottom: -1px; width: 60px; height: 62px; object-fit: contain; }


/* ── Популярные питомцы ───────────────────────────────────────────────────── */
.m-ads-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px 16px; }
.m-ad {
  background: #FFFFFF; border-radius: 16px;
  overflow: visible; cursor: pointer; transition: transform .15s;
}
.m-ad:active { transform: scale(.97); }
.m-ad-img { 
  width: 100%; 
  height: 135px; 
  border-radius: 16px;
  object-fit: cover; 
}
/* ТОП-плашка на продвинутых объявлениях (Figma 3934-133): угловая лента,
   верхний-левый радиус совпадает с углом картинки, нижний-правый — 12px */
.m-ad-topline {
  position: absolute; top: 0; left: 0; z-index: 3;
  display: flex; align-items: center; gap: 6px;
  pointer-events: none;
}
.m-ad-top {
  display: flex; align-items: center; justify-content: center;
  padding: 5px 10px;
  background: #635CFB; color: #FFFFFF;
  font-family: var(--font); font-size: 14px; font-weight: 500; line-height: 18px;
  border-radius: 16px 0 12px 0;
}
/* плашка «Вязка»: внутри ТОП-линии — в ряд, соло — в углу картинки */
.m-ad-mating {
  display: flex; align-items: center; justify-content: center;
  padding: 4px 8px; border-radius: 99px;
  background: #FF383C; color: #FFFFFF;
  font-family: var(--font, sans-serif); font-size: 12px; font-weight: 500;
}
.m-ad-mating-solo { position: absolute; top: 8px; left: 8px; z-index: 2; }
.m-ad-body { padding: 8px 12px 12px; }
.m-ad-price { font-size: 16px; font-weight: 700; color: #000000; margin-bottom: 2px; }
.m-ad-name { font-size: 14px; color: #000000; margin-bottom: 6px; }
.ad-city { font-size: 12px; color: #8E8E93; }
.ad-time-today, .ad-time-yesterday, .ad-time-other { font-size: 12px; color: #8E8E93; }

/* ── Сервисы ──────────────────────────────────────────────────────────────── */
.m-services-row {
  display: flex; gap: 8px; padding: 0 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.m-services-row::-webkit-scrollbar { display: none; }
.svc-tab {
   flex-shrink: 0; width: 164px; height: 93px;
  border-radius: 12px; position: relative; overflow: hidden;
  padding: 10px 12px; cursor: pointer; transition: transform .15s;
}
.svc-tab:active { transform: scale(.97); }
.svc-tab span {
  font-size: 12px;
  font-weight: 600;
  position: relative;
  z-index: 1;
  display: block;
  white-space: nowrap;
  font-family: 'Onest', sans-serif;
  font-style: normal;
  line-height: normal;
  font-feature-settings: 'liga' off, 'clig' off;
}
.svc-img { position: absolute; object-fit: contain; }

/* 1. Ветклиники */
.svc-tab:nth-child(1) { background: #635CFB; }
.svc-tab:nth-child(1) span { color: #FFFFFF; }
.svc-tab:nth-child(1) img { right: 0; bottom: 0; width: 138px; height: 70px; }

/* 2. Груминг */
.svc-tab:nth-child(2) { background: #E0DEFE; }
.svc-tab:nth-child(2) span { color: #000000; }
.svc-tab:nth-child(2) img { right: -5px; bottom: -16px; width: 159px; height: 95px; }

/* 3. Гостиницы / Зоомагазины */
.svc-tab:nth-child(3) { background: #F5F4FE; border-radius: 8px; }
.svc-tab:nth-child(3) span { color: #000000; }
.svc-tab:nth-child(3) img { right: 0; bottom: 0; width: 122px; height: 74px; }

/* ── Add button ───────────────────────────────────────────────────────────── */
.m-add-btn {
  display: block; width: calc(100% - 32px); margin: 16px 16px 0;
  padding: 15px; background: #635CFB; color: #FFF;
  border: none; border-radius: 14px;
  font-family: var(--font); font-size: 16px; font-weight: 600;
  cursor: pointer; box-shadow: 0 4px 16px rgba(99,92,251,.3); transition: transform .15s;
}
.m-add-btn:active { transform: scale(.97); }

/* ── Bottom Nav ───────────────────────────────────────────────────────────── */
.m-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 76px; background: #FFFFFF;
  border-top: none;
  display: flex; align-items: stretch; justify-content: space-around;
  padding-bottom: 0; z-index: 100;
}
.m-nav-btn {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  background: none; border: none; color: #0F172A;
  font-family: var(--font); font-size: 10px; font-weight: 500;
  cursor: pointer; padding: 0; transition: color .15s;
}
.m-nav-btn.active { color: #635CFB; }
.m-nav-btn span { font-size: 12px; }
.m-nav-plus {
  width: 44px; height: 44px; background: #635CFB;
  border-radius: 50%; flex: none;
  box-shadow: none;
  margin-bottom: 8px; padding: 0; color: #FFF;
}

/* ── Profile panel — Figma Profile/Заполненный ───────────────────────────── */
.profile-panel {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: #F3F4F6;
  flex-direction: column;
  z-index: 50;
}
.prof-scroll {
  flex: 1;
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: 4px 0 88px; /* 4px под шапкой, 88px под таб-бар */
  gap: 8px;
}
.prof-scroll::-webkit-scrollbar { display: none; }

/* Карточка пользователя + статистика */
.prof-card {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 12px;
  flex-shrink: 0;
}
.prof-user {
  display: flex; align-items: center; gap: 8px;
}
.profile-avatar {
  width: 56px; height: 56px; flex: none;
  background: #EEEDFF;
  border: 1px solid #F3F4F6;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  overflow: hidden;
}
.profile-avatar img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.prof-user-details {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.profile-name {
  font-family: var(--font);
  font-size: 16px; font-weight: 500; color: #000000;
  line-height: 19px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prof-phone {
  font-family: var(--font);
  font-size: 12px; font-weight: 500; color: #9CA3AF;
  line-height: 14px;
}
/* Статистика 2×2 */
.prof-stats {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.prof-stat {
  background: #F3F4F6;
  border-radius: 12px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.prof-stat-count {
  font-family: var(--font);
  font-size: 16px; font-weight: 700; color: #000000;
  line-height: 20px;
}
.prof-stat-label {
  font-family: var(--font);
  font-size: 14px; font-weight: 400; color: #000000;
  line-height: 18px;
}

/* Меню */
.prof-menu {
  background: #FFFFFF;
  border-radius: 8px;
  flex-shrink: 0;
}
.prof-item {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 12px;
  cursor: pointer; transition: background .15s;
}
.prof-item:first-child { border-radius: 8px 8px 0 0; }
.prof-item:last-child { border-radius: 0 0 8px 8px; }
.prof-item:active { background: #F5F5F5; }
.prof-item-icon { width: 20px; height: 20px; flex: none; }
.prof-item-label {
  font-family: var(--font);
  font-size: 14px; font-weight: 400; color: #000000;
  line-height: 18px;
}
.prof-item-value {
  margin-left: auto;
  font-family: var(--font);
  font-size: 14px; font-weight: 400; color: #8E8E93;
  line-height: 18px;
}

/* Панели «Новости» и «Мои объявления»: шапка неподвижна, скроллится только контент */
#news-panel,
#my-ads-panel {
  overflow-y: hidden;
  overflow-x: hidden;
}
/* Пока над панелью открыта шторка «Продвинуть» (тариф/оплата), прячем её
   содержимое — чтобы сквозь затемнение не просвечивали карточки и чипы, а был
   ровный фон, как в потоке создания объявления (там .modal-open скрывает экран) */
#my-ads-panel.behind-modal > .fav-header,
#my-ads-panel.behind-modal > .fav-content-wrap {
  opacity: 0;
}
#my-ads-panel .fav-content-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Обязательно: при overflow-y:auto вычисленный overflow-x тоже становится auto,
     и translateX анимации въезда даёт горизонтальную прокрутку — свайп между
     вкладками уводил контент вбок и он там залипал */
  overflow-x: hidden;
  /* none, а не contain: contain лишь запрещает прокрутку «протекать» наружу,
     но резиновый отскок внутри самого списка оставляет. На iOS палец уводил
     scrollTop далеко за предел (замер на устройстве: 134 при максимуме 15),
     и возврат этого отскока WebKit доигрывал уже на новой вкладке — экран
     дёргался. none отключает и отскок */
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}
#my-ads-panel .fav-content-wrap::-webkit-scrollbar { display: none; }
#news-panel .news-content-wrap {
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#news-panel .news-content-wrap::-webkit-scrollbar { display: none; }

/* Плавное появление новых карточек при смене фильтров/поиска */
@keyframes adCardIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.m-ad-enter { animation: adCardIn .25s ease-out; }

/* Плавное появление панелей «Новости», «Мои объявления» и FAQ */
@keyframes panelFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
#news-panel.panel-appear,
#my-ads-panel.panel-appear,
#faq-panel.panel-appear {
  animation: panelFadeIn .2s ease-out;
}

/* FAQ (дизайн Figma «Часто задаваемые вопросы») */
#faq-panel { overflow-y: hidden; }
/* Заголовок длинный — не поднимаем его в ряд кнопок Telegram: держим сразу
   под кнопкой «Назад» (−19px в fullscreen, 0 — в обычном режиме) */
#faq-panel .fav-header-inner { margin-top: calc(var(--app-title-margin, 0px) * 19 / 44); }
.faq-content-wrap {
  flex: 1;
  min-height: 0;
  padding: 16px 12px 88px;
  background: #FFFFFF;
  border-radius: 8px 8px 0 0;
  margin-top: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.faq-content-wrap::-webkit-scrollbar { display: none; }
.faq-item {
  border-bottom: 1px solid #E5E5EA;
  padding: 12px 0;
}
.faq-item:first-child { padding-top: 0; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}
.faq-q-text {
  font-family: var(--font);
  font-size: 14px; font-weight: 500; color: #000000;
  line-height: 18px;
}
.faq-icon {
  width: 24px; height: 24px; flex: none;
  background: #F3F4F6;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s ease;
}
.faq-item.open .faq-icon { transform: rotate(180deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  font-family: var(--font);
  font-size: 13px; font-weight: 400; color: #6B7280;
  line-height: 18px;
}
.faq-a-inner { padding: 8px 36px 0 0; }

/* Скелетоны новостей */
@keyframes newsPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
.news-skel { animation: newsPulse 1.2s ease-in-out infinite; }
.news-skel-img {
  width: 100%; aspect-ratio: 351 / 164;
  background: #EFEFF1; border-radius: 16px;
}
.news-skel-line {
  height: 14px; border-radius: 6px;
  background: #EFEFF1; margin-top: 8px;
}

/* Новости (дизайн Figma «Новости») */
.news-content-wrap {
  flex: 1;
  padding: 12px 12px 88px; /* 88px под таб-бар */
  background: #FFFFFF;
  border-radius: 8px 8px 0 0;
  margin-top: 4px;
  overflow-y: auto;
}
.news-list {
  display: flex; flex-direction: column; gap: 16px;
}
.news-card { cursor: pointer; }
.news-img {
  width: 100%; aspect-ratio: 351 / 164;
  background: #E8E8E8;
  border-radius: 16px;
  overflow: hidden;
  display: block;
}
.news-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.news-info { padding-top: 8px; }
.news-tag {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 4px;
  font-family: var(--font);
  font-size: 12px; font-weight: 400;
  line-height: 15px;
}
.news-card-title {
  margin-top: 8px;
  font-family: var(--font);
  font-size: 14px; font-weight: 600; color: #000000;
  line-height: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-date {
  margin-top: 8px;
  font-family: var(--font);
  font-size: 12px; font-weight: 400; color: #8E8E93;
  line-height: 15px;
}
.news-empty {
  padding: 40px 20px;
  text-align: center;
  font-family: var(--font);
  font-size: 14px; color: #8E8E93;
}

/* Шторка выбора языка (дизайн Figma «Язык») */
.lang-sheet-overlay {
  position: fixed;
  top: 0; right: 0; left: 0;
  height: calc(var(--vh, 1vh) * 100);
  background: rgba(0, 0, 0, 0.6);
  z-index: 300;
  display: flex; flex-direction: column; justify-content: flex-end;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.lang-sheet-overlay.active {
  opacity: 1; pointer-events: auto;
}
.lang-sheet {
  width: 100%;
  background: #FFFFFF;
  border-radius: 12px 12px 0 0;
  padding: 16px 12px max(24px, calc(12px + env(safe-area-inset-bottom, 0px)));
  transform: translateY(100%);
  transition: transform .25s ease-out;
}
.lang-sheet-overlay.active .lang-sheet {
  transform: translateY(0);
}
.lang-sheet-title {
  font-family: var(--font);
  font-size: 16px; font-weight: 700; color: #000000;
  line-height: 20px; text-align: center;
  margin-bottom: 24px;
}
.lang-opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0 8px;
  border-bottom: 1px solid #F2F2F2;
  cursor: pointer;
}
.lang-opt:first-child { padding-top: 0; }
.lang-opt:last-child { border-bottom: none; padding-bottom: 0; }
.lang-opt-name {
  font-family: var(--font);
  font-size: 14px; font-weight: 400; color: #000000;
  line-height: 22px;
}
.lang-radio {
  width: 20px; height: 20px; flex: none;
  box-sizing: border-box;
  border: 1.5px solid #E0E0E0;
  border-radius: 50%;
  background: #FFFFFF;
  position: relative;
  transition: background .15s, border .15s;
}
.lang-opt.selected .lang-radio {
  border: none;
  background: #635CFB;
}
.lang-opt.selected .lang-radio::after {
  content: '';
  position: absolute; inset: 5px;
  background: #FFFFFF;
  border-radius: 50%;
}

/* Выйти из аккаунта */
.prof-logout {
  margin: auto 12px 20px;
  height: 44px; flex-shrink: 0;
  background: rgba(255, 56, 60, 0.2);
  border: none; border-radius: 12px;
  font-family: var(--font);
  font-size: 14px; font-weight: 500; color: #FF383C;
  line-height: 18px;
  cursor: pointer;
}
.prof-logout:active { background: rgba(255, 56, 60, 0.3); }

.m-nav-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; color: #8E8E93; gap: 4px; border: none; background: transparent; cursor: pointer;
}
.m-nav-btn.active { color: #635CFB; }
.m-nav-btn span { font-size: 12px; }

/* Toggling outline and filled icons */
.m-nav-btn .icon-active { display: none; }
.m-nav-btn.active .icon-active { display: inline-block; }
.m-nav-btn.active .icon-inactive { display: none; }
.m-nav-plus {
  width: 48px; height: 48px; background: #635CFB;
  border-radius: 50%; flex: none;
  box-shadow: 0 4px 14px rgba(99,92,251,.4);
  margin-bottom: 6px; padding: 0; color: #FFF;
}

.cats-header-top {
  padding: 4px;
  cursor: pointer;
  margin-left: -13px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.m-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F2F2F7;
  border-radius: 12px;
  padding: 10px 14px;
  height: 40px;
}

.m-search {
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 15px;
  color: #3C3C43;
  width: 100%;
  outline: none;
}

.m-search::placeholder {
  color: #AEAEB2;
}

/* Scroll area */
.m-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.m-scroll::-webkit-scrollbar {
  display: none;
}

/* Белый блок y=118 h=230 */
.m-white-block {
  background: #FFFFFF;
  padding: 12px 12px 16px;
  margin-bottom: 8px;
}

.m-block-title {
  font-size: 15px;
  font-weight: 700;
  color: #1C1C1E;
  margin-bottom: 10px;
}

/* 2 карточки y=160 h=84, рядом */
.m-cards-row {
  display: flex;
  gap: 8px;
}

.m-banner-card {
  flex: 1;
  height: 84px;
  background: #FFFFFF;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding: 10px 0 0 10px;
}

.m-banner-info {
  z-index: 1;
}

.m-banner-name {
  font-size: 11px;
  font-weight: 700;
  color: #1C1C1E;
  line-height: 1.3;
  max-width: 80px;
}

.m-banner-sub {
  font-size: 10px;
  color: #635CFB;
  margin-top: 3px;
  font-weight: 500;
}

.m-banner-img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 0 0 12px 0;
}

/* Заголовок секции */
.m-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #1C1C1E;
  padding: 12px 12px 8px;
}

/* Категории — 3 в ряд (y=252 h=84 каждая w=112) */
.m-cats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 12px;
  margin-bottom: 4px;
}

.m-cat {
  background: #FFFFFF;
  border-radius: 12px;
  height: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: transform .15s;
}

.m-cat:active {
  transform: scale(.95);
}

.m-cat-img {
  width: 48px;
  height: 42px;
  object-fit: contain;
}

.m-cat-more {
  width: 48px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #8E8E93;
  letter-spacing: 2px;
}

.m-cat span {
  font-size: 10px;
  font-weight: 600;
  color: #1C1C1E;
  text-align: center;
  line-height: 1.2;
  padding: 0 4px;
}

/* Объявления — 2 колонки (y=394 h=148 rx=16) */
.m-ads-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 0 12px 16px;
}

.m-ad {
  background: #FFFFFF;
  border-radius: 16px;
  overflow: visible;
  cursor: pointer;
  transition: transform .15s;
  box-shadow: none;
}

.m-ad:active {
  transform: scale(.97);
}

.m-ad-img {
  width: 100%;
  height: 135px;
  border-radius: 16px;
  object-fit: cover;
}

.m-ad-body {
  padding: 8px 0 10px;
}

.m-ad-name {
  font-size: 13px;
  font-weight: 400;
  color: #1C1C1E;
}

.m-ad-price {
  font-size: 14px;
  font-weight: 700;
  color: #1C1C1E;
  margin-top: 2px;
}

.m-ad-loc {
  font-size: 11px;
  color: #8E8E93;
  margin-top: 3px;
}

/* Кнопка E'lon berish — y=1082 fill=#635CFB */
.m-add-btn {
  display: block;
  width: calc(100% - 24px);
  margin: 16px 12px 0;
  padding: 15px;
  background: #635CFB;
  color: #FFF;
  border: none;
  border-radius: 14px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(99, 92, 251, .35);
  transition: transform .15s;
}

.m-add-btn:active {
  transform: scale(.97);
}

/* Bottom nav — y=950 #635CFB active */
.m-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 76px;
  background: #FFFFFF;
  border-top: none;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 100;
}

.m-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: #0F172A;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 0;
  transition: color .15s;
}

.m-nav-btn.active {
  color: #635CFB;
}

.m-nav-btn span {
  font-size: 10px;
}

.m-nav-plus {
  width: 48px;
  height: 48px;
  background: #635CFB;
  border-radius: 50%;
  flex: none;
  box-shadow: none;
  margin-bottom: 6px;
  padding: 0;
  color: #FFF;
}

#screen-main {
  background: #F3F4F6;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────── */
.main-header {
  background: #FFFFFF;
  padding: 52px 16px 12px;

  border-bottom: 1px solid #F0F0F5;
}

.main-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.main-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.main-hello {
  font-size: 13px;
  color: #8E8E93;
}

.main-username {
  font-size: 17px;
  font-weight: 700;
  color: #1C1C1E;
}

.main-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #EEEDFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* Search */
.main-search {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 10px 14px;
  gap: 8px;
}

.search-icon {
  font-size: 16px;
}

.search-input {
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 15px;
  color: #1C1C1E;
  width: 100%;
  outline: none;
}

.search-input::placeholder {
  color: #AEAEB2;
}

/* ── Scroll ─────────────────────────────────────────────── */
.main-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 80px;
}

.main-scroll::-webkit-scrollbar {
  display: none;
}

/* ── Section label ──────────────────────────────────────── */
.section-label {
  font-size: 16px;
  font-weight: 700;
  color: #1C1C1E;
  padding: 16px 16px 10px;
}

/* ── Banner row ─────────────────────────────────────────── */
.banner-row {
  display: flex;
  gap: 10px;
  padding: 0 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.banner-row::-webkit-scrollbar {
  display: none;
}

.banner-card {
  min-width: 172px;
  height: 88px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  position: relative;
  overflow: hidden;

  scroll-snap-align: start;
}

.banner-card-text {
  z-index: 1;
}

.banner-card-title {
  font-size: 12px;
  font-weight: 700;
  color: #1C1C1E;
  line-height: 1.3;
}

.banner-card-sub {
  font-size: 10px;
  color: #635CFB;
  margin-top: 2px;
}

.banner-card-img {
  width: 74px;
  height: 79px;
  object-fit: cover;
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 0 0 12px 0;
}

/* ── Categories grid ────────────────────────────────────── */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 16px;
}

.cat-card {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 12px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.cat-card:active {
  transform: scale(0.95);
}

.cat-card img {
  width: 52px;
  height: 46px;
  object-fit: contain;
  border-radius: 8px;
}

.cat-card span {
  font-size: 11px;
  font-weight: 600;
  color: #1C1C1E;
  text-align: center;
}

/* ── Ads grid ───────────────────────────────────────────── */
.ads-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 16px;
}

.ad-card {
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.ad-card:active {
  transform: scale(0.97);
}

.ad-img {
  width: 100%;
  height: 130px;
  object-fit: cover;
}

.ad-info {
  padding: 8px 10px 10px;
}

.ad-title {
  font-size: 13px;
  font-weight: 600;
  color: #1C1C1E;
}

.ad-price {
  font-size: 13px;
  font-weight: 700;
  color: #635CFB;
  margin-top: 2px;
}

.ad-location {
  font-size: 11px;
  color: #8E8E93;
  margin-top: 3px;
}

/* ── Add button ─────────────────────────────────────────── */
.add-btn {
  display: block;
  margin: 20px 16px 0;
  width: calc(100% - 32px);
  padding: 16px;
  background: #635CFB;
  color: #FFFFFF;
  border: none;
  border-radius: 14px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 4px 16px rgba(99, 92, 251, 0.35);
}

.add-btn:active {
  transform: scale(0.97);
}

/* ── Bottom Nav ─────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: #FFFFFF;
  border-top: 1px solid #F0F0F5;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 100;
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: #AEAEB2;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 0;
  transition: color 0.15s ease;
}

.nav-btn.active {
  color: #635CFB;
}

.nav-btn span {
  font-size: 10px;
}

.nav-add {
  width: 52px;
  height: 52px;
  background: #635CFB;
  border-radius: 50%;
  flex: none;
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(99, 92, 251, 0.4);
  margin-bottom: 8px;
  padding: 0;
}

/* Notification Banner */
.m-notification-banner {
  width: calc(100% - 24px);
  height: 84px;
  min-height: 84px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid var(--Main-collor, #635CFB);
  background: rgba(99, 92, 251, 0.08);
  display: flex;
  align-items: center;
  padding: 10px;
  gap: 16px;
  margin: 4px 12px 4px 12px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.m-notif-avatar-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 8px;
  background: url('../img/notif_avatar.webp') center/cover;
}

.m-notif-heart-badge {
  position: absolute;
  top: -4px;
  right: -8px;
  background: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.m-notif-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
}

.m-notif-title {
  color: #000;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.m-notif-subtitle {
  color: #8E8E93;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
}

.m-notif-arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.m-notif-bg-art {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  width: 47px;
  height: 44px;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ЭКРАН КАТЕГОРИИ (Кошки и др.)
   ══════════════════════════════════════════════════════════════════════════════ */
#screen-cats {
  background: #F3F4F6;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
}

/* Заголовок экрана */
.cat-screen-header {
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 54px 16px 14px;
  
}
.cat-back-btn {
  background: none; border: none;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
}
.cat-screen-title {
  font-size: 17px; font-weight: 700; color: #000000;
}

/* Фильтры */
.cat-filters-wrap {
  background: #FFFFFF;
  padding: 0 0 12px;
  
}
.cat-filters {
  display: flex;
  gap: 8px;
  padding: 0 16px;
  overflow-x: auto;
}
.cat-filters::-webkit-scrollbar { display: none; }
.cat-filter-btn {
  white-space: nowrap;
  background: #F2F2F7;
  border: none;
  border-radius: 20px;
  padding: 7px 16px;
  font-family: var(--font);
  font-size: 13px; font-weight: 500;
  color: #000000;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.cat-filter-btn.active {
  background: #635CFB;
  color: #FFFFFF;
}

/* Список карточек */
.cat-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overscroll-behavior-y: none;
}
.cat-list::-webkit-scrollbar { display: none; }

/* Карточка объявления */
.cat-ad-card {
  background: #FFFFFF;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  position: relative;
}
.cat-ad-img {
  width: 76px; height: 76px;
  border-radius: 12px;
  object-fit: cover;
  
}
.cat-ad-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.cat-ad-price {
  font-size: 16px; font-weight: 700; color: #000000;
}
.cat-price-free {
  color: #34C759;
}
.cat-ad-name {
  font-size: 14px; font-weight: 400; color: #000000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-ad-meta {
  font-size: 12px; color: #8E8E93;
}
.cat-ad-fav {
  background: none; border: none;
  padding: 4px; cursor: pointer;
  display: flex; align-items: center;
  
}
.cat-ad-fav:active svg path { stroke: #FF3B30; }

/* ── Шапка экрана Кошки ─────────────────────────────────────────────────────── */
#screen-cats {
  width: 100%;
  left: 0;
  right: 0;
  background: #F2F2F7;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
}
/* Белая карточка сверху (как в Container.svg) */
.cats-top-card {
  background: #FFFFFF;
  border-radius: 0 0 8px 8px;
  padding: 16px 12px 12px;
  padding-top: 12px;
  
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: none;
}
body.platform-ios .cats-top-card,
body.platform-android .cats-top-card {
  padding-top: max(
    calc(env(safe-area-inset-top, 0px) * 1.3 + 24px),
    calc(var(--tg-content-safe-area-inset-top, 0px) * 1.3 + 24px)
  );
}
/* Строка поиска — pin | input | equalizer */
.cats-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  padding: 0;
  height: 44px;
}
.cats-search-input {
  border: none; background: transparent;
  font-family: var(--font); font-size: 15px; color: #000000;
  flex: 1; outline: none;
}
.cats-search-input::placeholder { color: #AEAEB2; }
.cats-city-text {
  flex: 1;
  font-family: var(--font);
  font-size: 15px; font-weight: 600;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cats-city-sub {
  font-weight: 400;
  color: #AEAEB2;
}
/* Ряд чипов-фильтров */
.cats-chips-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.cats-chips-row::-webkit-scrollbar { display: none; }
.cats-chip {
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
  background: #F2F2F7;
  border: none;
  border-radius: 8px;
  padding: 5px 10px;
  font-family: var(--font);
  font-size: 13px; font-weight: 500;
  color: #000000;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.cats-chip.active {
  background: #635CFB;
  color: #FFFFFF;
}
/* Тело экрана */
.cats-body {
  flex: 1;
  overflow-y: auto;
  background: #FFFFFF;
  border-top: none;
  margin-top: 4px;
  border-radius: 8px 8px 0 0;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  overscroll-behavior-y: none;
}
.cats-body::-webkit-scrollbar {
  display: none; /* Webkit */
}
.cats-sort-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 12px 12px;
  background: #FFFFFF;
}

.cats-ads-count {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  color: #000000;
}
.cats-sort-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.cats-sort-label {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  color: #8E8E93;
}
.cats-sort-value {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  color: #635CFB;
}

/* Figma node 3636:88 — matching mates screen */
.mating-matches-screen { flex-direction: column; align-items: stretch; justify-content: flex-start; background: #F3F4F6; overflow: hidden; }
.mating-matches-header { display: flex; align-items: center; justify-content: center; height: 48px; min-height: 48px; padding: 0 12px; background: #FFF; border-radius: 0 0 8px 8px; }
body.tg-active.platform-ios .mating-matches-header,
body.tg-active.platform-android .mating-matches-header {
  height: max(
    120px,
    calc(env(safe-area-inset-top, 0px) + 48px),
    calc(var(--tg-content-safe-area-inset-top, 0px) + 48px)
  );
  min-height: 120px;
  padding-top: max(
    72px,
    env(safe-area-inset-top, 0px),
    var(--tg-content-safe-area-inset-top, 0px)
  );
}

/* Some iOS Telegram versions report a zero content-safe-area inset while
   their native back/menu controls still overlap the Web App. Reserve the
   required space explicitly so the screen title stays below those controls. */
body.tg-active.platform-ios .mating-matches-header {
  height: max(
    128px,
    calc(env(safe-area-inset-top, 0px) + 48px),
    calc(var(--tg-content-safe-area-inset-top, 0px) + 48px)
  );
  padding-top: max(
    80px,
    env(safe-area-inset-top, 0px),
    var(--tg-content-safe-area-inset-top, 0px)
  );
}
.mating-matches-title { overflow: hidden; padding: 0 8px; color: #000; font-size: 16px; font-weight: 600; line-height: 20px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.mating-matches-content { flex: 1; overflow-y: auto; padding: 12px 12px 24px; background: #FFF; border-radius: 8px; margin-top: 4px; -webkit-overflow-scrolling: touch; }
.mating-matches-summary { margin-bottom: 14px; color: #000; font-size: 14px; font-weight: 500; line-height: 18px; }
.mating-matches-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 8px; }
.mating-match-card { min-width: 0; cursor: pointer; }
.mating-match-photo-wrap { position: relative; height: 148px; overflow: hidden; border-radius: 16px; background: #F2F2F7; }
.mating-match-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.mating-match-score { position: absolute; top: 0; left: 0; padding: 4px 6px; border-radius: 16px 0 12px 0; background: #34C759; color: #FFF; font-size: 10px; font-weight: 500; line-height: 17px; }
.mating-match-favorite { position: absolute; top: 8px; right: 8px; display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: #FFF; color: #000; cursor: pointer; }
.mating-match-favorite.active { color: #635CFB; }
.mating-match-favorite.active svg { fill: currentColor; }
.mating-match-name { overflow: hidden; margin-top: 9px; color: #000; font-size: 16px; font-weight: 700; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.mating-match-meta { overflow: hidden; margin-top: 4px; color: #000; font-size: 14px; font-weight: 400; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.mating-match-location, .mating-match-date { overflow: hidden; color: #8E8E93; font-size: 12px; font-weight: 400; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.mating-match-location { margin-top: 8px; }
.mating-matches-empty { grid-column: 1 / -1; padding: 32px 12px; color: #8E8E93; font-size: 14px; text-align: center; }
.mating-notifications-prompt { display: flex; align-items: center; gap: 8px; width: calc(100% - 24px); margin: 8px 12px 12px; padding: 8px 10px; border: 0; border-radius: 16px; background: rgba(99, 92, 251, .12); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mating-notifications-prompt.is-loading { opacity: .72; pointer-events: none; }
.mating-notifications-prompt.is-enabled { cursor: default; background: rgba(52, 199, 89, .12); }
.mating-notifications-prompt.is-enabled .mating-notifications-icon { background: rgba(52, 199, 89, .14); }
.mating-notifications-prompt.is-enabled .mating-notifications-icon svg path { stroke: #34C759; }
.mating-notifications-icon { display: flex; width: 48px; height: 48px; flex: 0 0 48px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(99, 92, 251, .12); }
.mating-notifications-copy { min-width: 0; flex: 1; }
.mating-notifications-title { color: #000; font-size: 12px; font-weight: 600; line-height: 16px; }
.mating-notifications-text { color: #8E8E93; font-size: 12px; font-weight: 400; line-height: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ВЕТКЛИНИКИ (сервис с главного экрана — Figma node 3833-48)
   ═══════════════════════════════════════════════════════════════════════════ */
.vet-screen { flex-direction: column; align-items: stretch; justify-content: flex-start; background: #F3F4F6; overflow: hidden; }
/* Шапка прижата вверх — как в «Избранное»: safe-area padding только в полном
   экране, а заголовок подтягивается через --app-title-margin */
.vet-header { background: #FFF; flex-shrink: 0; }
body.platform-ios.tg-fullscreen .vet-header,
body.platform-android.tg-expanded .vet-header {
  padding-top: max(
    calc(env(safe-area-inset-top, 0px) * 1.4 + 24px),
    calc(var(--tg-content-safe-area-inset-top, 0px) * 1.4 + 24px)
  );
}
body.tg-active.platform-ios:not(.tg-fullscreen) .vet-header,
body.tg-active.platform-android:not(.tg-expanded) .vet-header {
  padding-top: 0;
}
.vet-header-inner {
  display: flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  margin-top: var(--app-title-margin, 0px);
}
body.tg-active.platform-ios:not(.tg-fullscreen) .vet-header-inner,
body.tg-active.platform-android:not(.tg-expanded) .vet-header-inner {
  margin-top: 0;
  height: 44px;
}
.vet-title { overflow: hidden; padding: 0 8px; color: #000; font-size: 16px; font-weight: 600; line-height: 20px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

.vet-toolbar { padding: 8px 12px 12px; background: #FFF; flex-shrink: 0; border-radius: 0 0 8px 8px; }
.vet-search-row { display: flex; align-items: center; gap: 8px; }
.vet-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px; background: #F2F2F7; }
.vet-search svg { flex: 0 0 auto; }
.vet-search-input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #000; font-size: 14px; font-weight: 400; line-height: 18px; }
.vet-search-input::placeholder { color: #8E8E93; }

.vet-chips { display: flex; gap: 4px; margin-top: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.vet-chips::-webkit-scrollbar { display: none; }
.vet-chip { flex: 0 0 auto; padding: 6px 10px; border: 0; border-radius: 8px; background: #F2F2F7; color: #000; font-size: 12px; font-weight: 400; line-height: 15px; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s; }
.vet-chip.active { background: #635CFB; color: #FFF; }

.vet-location { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.vet-location-info { display: flex; align-items: center; gap: 4px; min-width: 0; cursor: pointer; }
.vet-location-info svg { flex: 0 0 auto; }
.vet-location-text { overflow: hidden; color: #000; font-size: 15px; font-weight: 600; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.vet-map-link { flex: 0 0 auto; color: #635CFB; font-size: 14px; font-weight: 400; line-height: 18px; cursor: pointer; }

.vet-content { flex: 1; overflow-y: auto; margin-top: 4px; padding: 12px 12px 24px; background: #FFF; border-radius: 8px 8px 0 0; -webkit-overflow-scrolling: touch; }
.vet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 7px; }
.vet-card { min-width: 0; cursor: pointer; }
.vet-card--static { cursor: default; }
.vet-card-photo-wrap { position: relative; width: 100%; aspect-ratio: 172 / 148; overflow: hidden; border-radius: 16px; background: #F2F2F7; }
.vet-card-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.vet-top-badge { position: absolute; top: 8px; left: 8px; padding: 2px 6px; border-radius: 6px; background: #635CFB; color: #FFF; font-size: 12px; font-weight: 500; line-height: 15px; }
.vet-card-name { overflow: hidden; margin-top: 9px; color: #000; font-size: 16px; font-weight: 700; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.vet-card-status { margin-top: 4px; color: #1BA23D; font-size: 12px; font-weight: 500; line-height: 17px; }
.vet-card-address, .vet-card-distance { overflow: hidden; color: #8E8E93; font-size: 12px; font-weight: 400; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.vet-card-address { margin-top: 4px; }
.vet-empty { grid-column: 1 / -1; padding: 32px 12px; color: #8E8E93; font-size: 14px; text-align: center; }
/* Зоомагазины (Figma 3863-203): строка «Найдено N магазинов» и шаг сетки 16 */
.shop-found { margin-bottom: 12px; color: #8E8E93; font-size: 12px; font-weight: 400; line-height: 15px; }
.shop-found:empty { display: none; }
.vet-grid--shops { gap: 16px 7px; }

/* Скелетоны ветклиник (только при первом открытии без кэша) */
.vet-skel-img { width: 100%; aspect-ratio: 172 / 148; border-radius: 16px; }
.vet-skel-line { height: 14px; margin-top: 9px; border-radius: 6px; }
.vet-skel-line.sm { height: 11px; margin-top: 6px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ДЕТАЛЬНЫЙ ЭКРАН КЛИНИКИ (Figma node 3851-778)
   ═══════════════════════════════════════════════════════════════════════════ */
.vetc-screen { flex-direction: column; align-items: stretch; justify-content: flex-start; background: #FFF; overflow: hidden; }
/* Пока открыта шторка карты — прячем содержимое, чтобы сквозь затемнение не
   просвечивал экран (как #screen-ad-details.modal-open в объявлении).
   Экран зоомагазина использует ту же шторку «Адрес» — правила общие. */
#screen-vet-clinic > *,
#screen-pet-shop > * { transition: opacity .4s; }
#screen-vet-clinic.modal-open > *,
#screen-pet-shop.modal-open > * { opacity: 0; pointer-events: none; }
.vetc-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; margin-top: 56px; }

/* Верхняя панель (избранное + меню) — как .ad-header */
.vetc-topbar { position: absolute; top: 0; left: 0; right: 0; height: 56px; display: flex; align-items: center; justify-content: flex-end; padding: 0 8px; background: #FFF; z-index: 210; }
.vetc-topbar-actions { display: flex; align-items: center; gap: 0; }
.vetc-action-btn { display: flex; align-items: center; justify-content: center; padding: 4px; border: 0; background: none; cursor: pointer; transition: transform .15s; -webkit-tap-highlight-color: transparent; }
#vetc-fav-btn.active svg path,
#shopc-fav-btn.active svg path { fill: #635CFB; }
body.tg-active.platform-ios.tg-fullscreen .vetc-topbar { top: calc(env(safe-area-inset-top, 0px) + 23px); align-items: flex-end; padding-bottom: 8px; }
/* .shopc-scroll — тот же отступ: иначе в fullscreen шапка съезжает вниз,
   а контент остаётся под нативными кнопками Telegram */
body.tg-active.platform-ios.tg-fullscreen .vetc-scroll,
body.tg-active.platform-ios.tg-fullscreen .shopc-scroll { margin-top: calc(56px + env(safe-area-inset-top, 0px) + 23px); }

/* Hero */
.vetc-hero { position: relative; width: 100%; }
.vetc-hero-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.vetc-hero-track::-webkit-scrollbar { display: none; }
.vetc-hero-img { display: block; flex: 0 0 100%; width: 100%; height: 220px; object-fit: cover; scroll-snap-align: start; background: #F2F2F7; }
.vetc-hero-dots { display: flex; gap: 4px; justify-content: center; }
.vetc-hero-dots:not(:empty) { padding-top: 8px; }
.vetc-hero-dot { width: 6px; height: 6px; border-radius: 50%; background: #E5E5EA; }
.vetc-hero-dot.active { background: #635CFB; }

.vetc-divider { height: 1px; background: #D9D9D9; border-radius: 21px; }

.vetc-body { display: flex; flex-direction: column; padding: 24px 12px; }

/* Инфо */
.vetc-info { display: flex; flex-direction: column; gap: 8px; }
.vetc-name { color: #000; font-size: 20px; font-weight: 700; line-height: 29px; }
.vetc-rating-row { display: flex; align-items: center; gap: 6px; }
.vetc-star-gold { flex: 0 0 20px; }
.vetc-rating-val { color: #000; font-size: 16px; font-weight: 500; line-height: 23px; }
.vetc-rdiv { width: 1px; height: 16px; background: #E5E8EA; border-radius: 13px; }
.vetc-review-count { color: #8E8E93; font-size: 12px; font-weight: 500; line-height: 17px; }

/* О клинике */
.vetc-about { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.vetc-section-head { display: flex; align-items: center; gap: 8px; color: #000; font-size: 16px; font-weight: 600; line-height: 23px; }
.vetc-section-head svg { flex: 0 0 20px; }
.vetc-about-text { color: #000; font-size: 14px; font-weight: 400; line-height: 20px; }

.vetc-section-title { color: #000; font-size: 16px; font-weight: 600; line-height: 23px; }

/* Прайс-лист */
.vetc-block--prices { margin-top: 21px; }
.vetc-price-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.vetc-price-item { display: flex; flex-direction: column; gap: 4px; padding: 13px 19px; border: 1px solid #EEEFF0; border-radius: 12px; background: #F3F4F6; }
.vetc-price-name { color: #8E8E93; font-size: 14px; font-weight: 400; line-height: 20px; }
.vetc-price-val { color: #000; font-size: 16px; font-weight: 700; line-height: 23px; }
.vetc-price-item.is-hidden { display: none; }
.vetc-more-btn { width: 100%; height: 48px; margin-top: 12px; border: 0; border-radius: 12px; background: rgba(99, 92, 251, .12); color: #635CFB; font-size: 14px; font-weight: 600; line-height: 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vetc-more-btn.is-hidden { display: none; }

/* График работы */
.vetc-block--sched { margin-top: 30px; }
.vetc-sched-sub { margin-top: 8px; color: #8E8E93; font-size: 14px; font-weight: 400; line-height: 20px; }
.vetc-sched-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.vetc-sched-row { display: grid; grid-template-columns: 182fr 139fr; column-gap: 30px; align-items: center; }
.vetc-sched-day, .vetc-sched-time { display: flex; align-items: center; min-width: 0; }
.vetc-sched-day { gap: 10px; }
.vetc-sched-time { gap: 12px; }
.vetc-sched-day svg, .vetc-sched-time svg { flex: 0 0 20px; }
.vetc-sched-day span { color: #8E8E93; font-size: 14px; font-weight: 500; line-height: 20px; }
.vetc-sched-time span { color: #8E8E93; font-size: 14px; font-weight: 400; line-height: 20px; white-space: nowrap; }
.vetc-sched-time.is-closed span { color: #FF383C; }
.vetc-sched-divider { margin: 4px 0; }

/* Карта */
.vetc-block--map { margin-top: 20px; }
.vetc-map-wrap { position: relative; }
.vetc-map { width: 100%; height: 200px; border-radius: 12px; overflow: hidden; background: #ECECEC; }
/* Превью карты — не тянется пальцем, тап открывает шторку с картой */
.vetc-map-tap { position: absolute; inset: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vetc-block--map .vetc-divider { margin-top: 20px; }
.vetc-map-desc { margin-top: 20px; color: #8E8E93; font-size: 12px; font-weight: 400; line-height: 17px; }
.vetc-map-actions { display: flex; gap: 12px; margin-top: 20px; }
.vetc-map-open { flex: 1; height: 48px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: #635CFB; color: #FFF; font-size: 14px; font-weight: 600; line-height: 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vetc-map-share { flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: rgba(99, 92, 251, .12); cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* Отзывы */
.vetc-block--reviews { margin-top: 18px; }
.vetc-rev-sub { margin-top: 8px; color: #8E8E93; font-size: 14px; font-weight: 400; line-height: 20px; }
.vetc-rev-sub:empty { display: none; }
.vetc-rev-summary { display: flex; align-items: center; gap: 24px; margin-top: 26px; }
.vetc-rev-big { color: #000; font-size: 32px; font-weight: 700; line-height: 46px; }
.vetc-rev-sum-right { display: flex; flex-direction: column; gap: 8px; }
.vetc-rev-stars { display: flex; gap: 12px; }
.vetc-rev-count { color: #8E8E93; font-size: 12px; font-weight: 500; line-height: 17px; }
.vetc-histogram { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.vetc-hist-row { display: flex; align-items: center; gap: 12px; min-height: 25px; }
.vetc-hist-num { flex: 0 0 auto; min-width: 11px; color: #4D4C58; font-size: 17px; font-weight: 600; line-height: 25px; text-align: center; }
.vetc-hist-bar { flex: 1; height: 13px; border-radius: 17px; background: #EEEFF0; overflow: hidden; }
.vetc-hist-fill { height: 100%; border-radius: 13px; background: #FFCC00; transition: width .3s; }
.vetc-rev-list { display: flex; flex-direction: column; gap: 20px; margin-top: 41px; }
.vetc-review { display: flex; flex-direction: column; }
.vetc-review-head { display: flex; align-items: center; gap: 12px; }
.vetc-review-avatar { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; object-fit: cover; background: #D9D9D9; display: flex; align-items: center; justify-content: center; color: #FFF; font-size: 16px; font-weight: 600; }
.vetc-review-name { color: #000; font-size: 14px; font-weight: 600; line-height: 20px; }
.vetc-review-stars { display: flex; gap: 10px; margin-top: 16px; }
.vetc-review-body { margin-top: 8px; color: #000; font-size: 14px; font-weight: 400; line-height: 20px; }
.vetc-star { width: 20px; height: 20px; flex: 0 0 20px; }

/* Написать отзыв */
.vetc-write { margin-top: 20px; padding: 12px; border: 1px solid #635CFB; border-radius: 16px; background: rgba(99, 92, 251, .12); }
.vetc-write-top { display: flex; align-items: flex-start; gap: 10px; }
.vetc-write-icon { flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(99, 92, 251, .2); }
.vetc-write-copy { min-width: 0; }
.vetc-write-title { color: #000; font-size: 14px; font-weight: 600; line-height: 18px; }
.vetc-write-text { margin-top: 8px; color: #8E8E93; font-size: 12px; font-weight: 400; line-height: 15px; }
.vetc-write-btn { width: 100%; height: 40px; margin-top: 12px; border: 0; border-radius: 12px; background: #635CFB; color: #FFF; font-size: 14px; font-weight: 500; line-height: 18px; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* Нижняя панель «Позвонить» */
.vetc-callbar { flex-shrink: 0; padding: 12px 12px calc(20px + env(safe-area-inset-bottom, 0px)); background: #FFF; }
.vetc-call-btn { width: 100%; height: 44px; border: 0; border-radius: 12px; background: #635CFB; color: #FFF; font-size: 14px; font-weight: 500; line-height: 18px; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* ═══ Детальный экран товара (Figma node 3915-109) ═══ */
/* Экран и контент белые — верх (за нативной шапкой Telegram и в safe-area)
   белый, пустое место под описанием тоже белое. Серый #F3F4F6 — только два
   чистых разделителя (как зазоры в Figma): 4-px шов между карточкой товара и
   «Описанием» и 8-px полоса над блоком кнопки. Никакой «плавающей» серой
   заливки переменной высоты. */
.prodc-screen { flex-direction: column; align-items: stretch; justify-content: flex-start; background: #FFF; overflow: hidden; }
.prodc-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; margin-top: 56px; overscroll-behavior: none; background: #FFF; }

/* Верхняя панель: название магазина по центру + избранное/поделиться справа.
   «Назад» — нативная кнопка Telegram слева (как на всех детальных экранах). */
.prodc-topbar { position: absolute; top: 0; left: 0; right: 0; height: 56px; display: flex; align-items: center; padding: 0 8px; background: #FFF; z-index: 210; }
.prodc-topbar-title { flex: 1; text-align: center; padding: 0 44px; font-size: 16px; font-weight: 600; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prodc-topbar-actions { position: absolute; right: 8px; top: 0; bottom: 0; display: flex; align-items: center; gap: 4px; }
.prodc-action-btn { display: flex; align-items: center; justify-content: center; padding: 4px; border: 0; background: none; cursor: pointer; transition: transform .15s; -webkit-tap-highlight-color: transparent; }
#prodc-fav-btn.active svg path { fill: #635CFB; }
body.tg-active.platform-ios.tg-fullscreen .prodc-topbar { top: calc(env(safe-area-inset-top, 0px) + 23px); }
body.tg-active.platform-ios.tg-fullscreen .prodc-scroll { margin-top: calc(56px + env(safe-area-inset-top, 0px) + 23px); }

/* Полноширинные белые блоки; 4-px серый шов между карточкой товара и «Описанием» */
.prodc-card { background: #FFF; }
.prodc-desc-card { border-top: 4px solid #F3F4F6; }

/* Фото товара — по центру на белом, как в макете (155×218) */
.prodc-image-wrap { display: flex; align-items: center; justify-content: center; padding: 12px 12px 0; min-height: 220px; }
.prodc-image { display: block; max-width: 60%; max-height: 218px; object-fit: contain; }

/* Краткая информация */
.prodc-info { padding: 16px 12px; }
.prodc-info-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.prodc-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 24px; color: #000; }
.prodc-stock { flex-shrink: 0; margin-top: 2px; font-size: 14px; font-weight: 400; line-height: 18px; color: #34C759; white-space: nowrap; }
.prodc-stock.prodc-stock--out { color: #8E8E93; }
.prodc-subtitle { margin-top: 8px; font-size: 14px; font-weight: 400; line-height: 18px; color: #8E8E93; }
.prodc-subtitle:empty { display: none; }
.prodc-price { margin-top: 12px; font-size: 18px; font-weight: 700; line-height: 22px; color: #000; }
.prodc-price-label { font-weight: 400; color: #8E8E93; }

/* Описание */
.prodc-desc-card { padding: 12px 12px 20px; }
.prodc-desc-title { font-size: 16px; font-weight: 600; line-height: 20px; color: #000; }
.prodc-desc-text { margin-top: 12px; font-size: 14px; font-weight: 400; line-height: 22px; color: #000; white-space: pre-line; }

/* Фиксированная нижняя кнопка «Связаться с магазином».
   8-px серая полоса сверху — чистый разделитель от контента (зазор из Figma). */
.prodc-callbar { flex-shrink: 0; padding: 12px 12px calc(20px + env(safe-area-inset-bottom, 0px)); background: #FFF; border-top: 8px solid #F3F4F6; }
.prodc-contact-btn { width: 100%; height: 44px; border: 0; border-radius: 12px; background: #635CFB; color: #FFF; font-size: 14px; font-weight: 500; line-height: 18px; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* Модалка отзыва */
/* padding-top 24px = прежние 8px шторки + 4px грабера + его 12px отступа,
   чтобы заголовок остался на том же месте после удаления грабера */
.vetc-review-sheet { padding: 24px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.vetc-review-title { color: #000; font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 16px; }
.vetc-mstars { display: flex; justify-content: center; gap: 10px; margin-bottom: 16px; }
.vetc-mstars .vetc-star { width: 34px; height: 34px; flex: 0 0 34px; cursor: pointer; }
.vetc-review-textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #E5E5EA; border-radius: 12px; background: #F7F7F9; color: #000; font-size: 14px; font-family: var(--font); resize: none; outline: none; }
.vetc-review-textarea:focus { border-color: #635CFB; }
.vetc-review-submit { width: 100%; height: 48px; margin-top: 16px; border: 0; border-radius: 12px; background: #635CFB; color: #FFF; font-size: 15px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vetc-review-submit:disabled { opacity: .5; }

/* ═══════════════════════════════════════════════════════════════════════════
   ДЕТАЛЬНЫЙ ЭКРАН ЗООМАГАЗИНА (Figma 3868-1110)
   Блоки — белые карточки на сером фоне; общие части (галерея, рейтинг,
   график, карта, «Позвонить») переиспользуют классы .vetc-*
   ═══════════════════════════════════════════════════════════════════════════ */

/* Экран белый, серый — только на скролле: над шапкой (в fullscreen она сдвинута
   вниз под нативные кнопки Telegram) должно просвечивать белое, как у клиники */
.shopc-screen { flex-direction: column; align-items: stretch; justify-content: flex-start; background: #FFF; overflow: hidden; }
.shopc-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; margin-top: 56px; display: flex; flex-direction: column; gap: 4px; background: #F3F4F6; }
/* flex-shrink:0 — иначе во flex-колонке со скроллом карточки сжимаются по высоте */
.shopc-card { flex-shrink: 0; padding: 12px; background: #FFF; }
.shopc-card--head { padding: 0; }
.shopc-head-body { padding: 24px 12px 12px; }

/* «Для кого ищете товары?» */
.shopc-pet-options { display: flex; gap: 8px; margin-top: 12px; }
.shopc-pet-opt { flex: 1; min-width: 0; height: 39px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; border: 1px solid transparent; border-radius: 12px; background: #F3F4F6; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, border-color .15s; }
.shopc-pet-opt.active { border-color: #635CFB; background: rgba(99, 92, 251, .12); }
.shopc-pet-icon { flex: 0 0 30px; width: 30px; height: 30px; object-fit: contain; }
.shopc-pet-label { color: #000; font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shopc-pets-hint { margin-top: 8px; color: #8E8E93; font-size: 11px; font-weight: 400; line-height: 16px; text-align: center; }

/* «Категории товаров» */
.shopc-cats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.shopc-cat { height: 103px; display: flex; flex-direction: column; align-items: center; padding: 12px 2px 0; border-radius: 12px; background: #F3F4F6; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.shopc-cat-icon { width: 48px; height: 48px; flex: 0 0 48px; object-fit: contain; }
.shopc-cat-label { margin-top: 5px; height: 30px; color: #000; font-size: 10px; font-weight: 600; line-height: 15px; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   ТОВАРЫ КАТЕГОРИИ МАГАЗИНА (Figma 3873-112)
   Шапка, поиск, чипы и сетка — общие классы .vet-* (совпадают с макетом
   вплоть до сетки gap: 20px 7px). Здесь только то, чего в них нет.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Заголовок центрируется по всей ширине, иконка «поделиться» — поверх справа */
.prod-header-inner { position: relative; }
.prod-share { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; padding: 4px; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.prod-filter-btn { flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: #F2F2F7; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.prod-sort { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 6px 6px 6px 10px; border: 0; border-radius: 8px; background: #F2F2F7; color: #000; font-family: var(--font); font-size: 12px; font-weight: 400; line-height: 15px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.prod-sort svg { flex: 0 0 16px; }

/* Карточка товара */
.prod-card { min-width: 0; display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.prod-img-wrap { width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 12px; border-radius: 20px; background: #F3F4F6; overflow: hidden; }
.prod-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.prod-info { display: flex; flex-direction: column; gap: 12px; }
.prod-text { display: flex; flex-direction: column; gap: 8px; }
.prod-brand { overflow: hidden; color: #000; font-size: 14px; font-weight: 700; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.prod-type { overflow: hidden; color: #000; font-size: 14px; font-weight: 400; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.prod-price { color: #635CFB; font-size: 16px; font-weight: 700; line-height: 18px; }

/* Скелетоны и пустое состояние */
.prod-skel-img { width: 100%; aspect-ratio: 1 / 1; border-radius: 20px; }
.prod-empty { grid-column: 1 / -1; padding: 40px 0; color: #8E8E93; font-size: 14px; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODALS (Breeds, etc.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0; right: 0; left: 0;
  height: calc(var(--vh, 1vh) * 100);
  background: rgba(0, 0, 0, 0.4);
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  /* Closing: fade out slightly delayed so slide down is visible */
  transition: opacity 0.25s ease 0.1s, visibility 0.4s ease;
}

.modal-overlay--scroll {
  /* no special scroll - sheet handles it */
}
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  /* Opening: fade in immediately */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-sheet {
  background: #FFFFFF;
  border-radius: 24px 24px 0 0;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  min-height: 0;
  max-height: 92vh;
  max-height: 92dvh;
  cursor: default;
  transform: translateY(100%);
  /* Закрытие: плавное ускорение (ease-in) */
  transition: transform 0.35s cubic-bezier(0.4, 0, 1, 1);
}
body.tg-expanded .modal-sheet {
  max-height: 82vh;
  max-height: 82dvh;
}
.modal-overlay.active .modal-sheet {
  transform: translateY(0);
  /* Открытие: плавное замедление (ease-out) */
  transition: transform 0.4s cubic-bezier(0, 0, 0.2, 1);
}

/* Шторки тарифов и оплаты собраны на инлайн-стилях (без .modal-sheet) — даём их
   содержимому тот же выезд снизу, что у остальных bottom sheet. Сдвиг в 100vh
   (не 100%!) одинаков для обоих детей: у полоски-«стека» своих 100% — это 10px,
   и она приезжала раньше карточки, а нужен единый монолитный подъём */
#tariff-modal > div,
#payment-modal > div,
#card-pay-modal > div {
  transform: translateY(100vh);
  transition: transform 0.35s cubic-bezier(0.4, 0, 1, 1);
}
#tariff-modal.active > div,
#payment-modal.active > div,
#card-pay-modal.active > div {
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0, 0, 0.2, 1);
}

.modal-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 16px;
  position: relative;
  flex-shrink: 0;
}
.modal-title {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 600;
  color: #1C1C1E;
  margin: 0;
}
.modal-close {
  background: #F2F2F7;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #8E8E93;
  cursor: pointer;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.modal-list {
  padding: 0 16px;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.modal-list::-webkit-scrollbar { display: none; }
.modal-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  cursor: pointer;
}
.modal-list-item-text {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  color: #1C1C1E;
}
.modal-list-item input[type="radio"] {
  display: none;
}
.radio-custom {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: relative;
  transition: all 0.18s ease-in-out;
  flex-shrink: 0;
  border: none;
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10.5' stroke='%23C7C7CC' stroke-width='1.5'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
.modal-list-item input[type="radio"]:checked ~ .radio-custom {
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2Z' fill='%23635CFB'/%3E%3Cpath d='M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2Z' stroke='%23635CFB'/%3E%3Cpath d='M12 7C14.7614 7 17 9.23858 17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7Z' fill='white'/%3E%3Cpath d='M12 7C14.7614 7 17 9.23858 17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7Z' stroke='%23635CFB'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
.modal-footer {
  padding: 10px 12px;
  padding-bottom: max(16px, calc(12px + env(safe-area-inset-bottom)));
  flex-shrink: 0;
  background: #FFFFFF;
}
.modal-apply-btn {
  width: 100%;
  background: #635CFB;
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 12px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.modal-apply-btn:active { transform: scale(0.97); }

/* ── Action Sheet (Поделиться / Пожаловаться) ──────────────────────────── */
.action-sheet-handle {
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: #D1D1D6;
  margin: 8px auto 0;
  flex-shrink: 0;
}
.action-sheet-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px;
  border: none;
  background: #FFFFFF;
  font-family: var(--font);
  font-size: 16px;
  color: #323232;
  cursor: pointer;
  flex-shrink: 0;
}
.action-sheet-btn:active {
  background: #F2F2F7;
}
.action-sheet-divider {
  height: 1px;
  background: #F2F2F7;
  margin: 0 16px;
  flex-shrink: 0;
}

/* ── Price Modal ─────────────────────────────────────────────────────────── */
.price-modal-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 16px 14px;
  flex-shrink: 0;
  position: relative;
}
.price-modal-header .modal-title {
  margin: 0;
  text-align: center;
}
.price-reset-btn {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  color: #635CFB;
  cursor: pointer;
  padding: 0;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.price-modal-body {
  padding: 16px 16px 8px;
}
.price-currency-row {
  display: flex;
  gap: 0;
  background: #F2F2F7;
  border-radius: 8px;
  padding: 2px;
  margin-bottom: 14px;
  width: fit-content;
}
.price-currency-tab {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: #8E8E93;
  cursor: pointer;
  padding: 5px 16px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.price-currency-tab.active {
  background: #FFFFFF;
  color: #1C1C1E;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.price-inputs-row {
  display: flex;
  gap: 12px;
}
.price-input-box {
  flex: 1;
  display: flex;
  align-items: center;
  background: #F2F2F7;
  border-radius: 8px;
  padding: 13px 14px;
  border: 1.5px solid #E5E5EA;
  transition: border-color 0.2s;
}
.price-input-box:focus-within {
  border-color: #635CFB;
  background: #FFFFFF;
}
.price-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  color: #000000;
  outline: none;
  width: 100%;
}
.price-input::placeholder { color: #8E8E93; }
.price-input::-webkit-outer-spin-button,
.price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ─── Основной фильтр ─────────────────────────────────────────────────────── */
#main-filter-modal.modal-overlay {
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
#main-filter-modal .modal-sheet {
  background: #F3F4F6 !important;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  border-radius: 0;
  position: relative;
  /* Закрытие: плавное ускорение для большого окна */
  transition: transform 0.4s cubic-bezier(0.4, 0, 1, 1);
}
#main-filter-modal.modal-overlay.active .modal-sheet {
  /* Открытие: плавное замедление */
  transition: transform 0.45s cubic-bezier(0, 0, 0.2, 1);
}
/* Шапка фильтров — та же .fav-header, что у «Избранного»: заголовок встаёт в ряд
   нативных кнопок Telegram, между «Назад» и «…». Отступы и высоту строки целиком
   отдаём правилам .fav-header / .fav-header-inner, своих здесь нет — иначе шапки
   разъедутся при первой же правке. «Сбросить» в этот ряд не влезает (края заняты
   кнопками Telegram), поэтому оно живёт в контенте: .filter-reset-row */
#main-filter-modal .modal-header {
  /* Гасим боковые отступы базового .modal-header, но padding-top не трогаем:
     его задают правила .fav-header (id перебил бы их по специфичности, и шапка
     перестала бы следовать за «Избранным») */
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  display: block;
}
#main-filter-modal .modal-title {
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #000;
  flex: 1;
  text-align: center;
}
.filter-reset-row {
  display: flex;
  justify-content: flex-end;
  padding: 0 16px;
}
.filter-reset-row .price-reset-btn {
  /* базовое .price-reset-btn абсолютное — здесь кнопка обычный элемент строки */
  position: static;
  transform: none;
}
.filter-chip {
  height: 34px;
  padding: 0 16px;
  background: #FFFFFF;
  border: 1px solid #E5E5EA;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: #1C1C1E;
  cursor: pointer;
  transition: all 0.18s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.filter-chip.active {
  background: rgba(99, 92, 251, 0.2) !important;
  border-color: #635CFB !important;
  color: #1C1C1E !important;
}
.filter-chip:active {
  transform: scale(0.96);
}
.filter-checkbox-custom {
  position: absolute;
  top: 0; left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #C7C7CC;
  transition: all 0.2s;
  background-color: transparent;
}
.filter-checkbox-input:checked ~ .filter-checkbox-custom {
  border-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 28C17.5759 28 19.1363 27.6896 20.5922 27.0866C22.0481 26.4835 23.371 25.5996 24.4853 24.4853C25.5996 23.371 26.4835 22.0481 27.0866 20.5922C27.6896 19.1363 28 17.5759 28 16C28 14.4241 27.6896 12.8637 27.0866 11.4078C26.4835 9.95189 25.5996 8.62902 24.4853 7.51472C23.371 6.40042 22.0481 5.5165 20.5922 4.91345C19.1363 4.31039 17.5759 4 16 4C12.8174 4 9.76516 5.26428 7.51472 7.51472C5.26428 9.76515 4 12.8174 4 16C4 19.1826 5.26428 22.2348 7.51472 24.4853C9.76516 26.7357 12.8174 28 16 28ZM15.6907 20.8533L22.3573 12.8533L20.3093 11.1467L14.576 18.0253L11.6093 15.0573L9.724 16.9427L13.724 20.9427L14.756 21.9747L15.6907 20.8533Z' fill='%23635CFB'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
}

/* ─── Main Filter Card & Header Alignments ─── */
#main-filter-modal .modal-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  position: absolute;
  left: -1px;
  bottom: 8px;
}
.filter-card {
  background: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 16px 12px 12px 12px !important;
  border: none !important;
  box-shadow: none !important;
}
.filter-card.filter-card--row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.filter-card-title {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  color: #1C1C1E;
  margin-bottom: 12px;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filter-chips.filter-chips--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.filter-card-text {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  color: #1C1C1E;
}
.filter-checkbox-wrap {
  position: relative;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: block;
}
.filter-checkbox-input {
  display: none;
}
.modal-list--filter {
  background: #F3F4F6 !important;
  padding: 4px 0 8px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-chip-large {
  flex: 1;
  height: 34px;
  padding: 0 12px;
  background: #FFFFFF;
  border: 1px solid #E5E5EA;
  border-radius: 8px;
  display: flex;
  align-items: center;
  margin-right: 12px;
}

#main-filter-modal .modal-footer {
  position: static;
  background: #FFFFFF !important;
  padding: 10px 12px !important;
  padding-bottom: max(16px, calc(12px + env(safe-area-inset-bottom))) !important;
}

.chat-bubble-time {
  display: block;
  font-size: 11px;
  margin-top: 4px;
  line-height: 1;
}

.chat-msg--sent .chat-bubble-time {
  text-align: right;
  color: #FFFFFF;
}

.chat-msg--received .chat-bubble-time {
  text-align: left;
  color: #B0B0B0;
}

/* ---------------------------------------------------------------------------
   AD DETAILS SCREEN (????????? ?? ????????)
   --------------------------------------------------------------------------- */
#screen-ad-details {
  background: #FFFFFF;
  z-index: 200;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}

/* Header */
.ad-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* 12 px: с учётом внутреннего padding кнопок иконки встают на x=303 и x=335,
     как в Figma 3918-52 */
  padding: 0 12px;
  z-index: 210;
}
.ad-back-btn, .ad-action-btn {
  background: none;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 4px;
  transition: transform 0.15s;
}
#ad-fav-btn.active svg path {
  fill: #635CFB;
}
.ad-back-btn {
  margin-left: -9px;
}
.ad-header-actions {
  display: flex;
  align-items: center;
  gap: 0;
}
/* Заголовок шапки — порода по центру (Figma 3918-52).
   В потоке (не absolute!), высотой ровно как кнопки-иконки: в Telegram iOS
   fullscreen шапка переключается на align-items:flex-end + padding-bottom,
   и абсолютный заголовок этому не подчинялся — уезжал из ряда с иконками.
   Слева спейсер шириной с блок иконок, поэтому текст стоит ровно по центру
   экрана (в Figma центр Title = 187.5 при ширине 375). */
.ad-header-spacer { flex: 0 0 64px; }
.ad-header-title {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* Scroll area */
.ad-scroll {
  overflow-x: hidden;
  background: #F3F4F6;
  overscroll-behavior-y: none;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 56px;
}
.ad-scroll::-webkit-scrollbar { display: none; }

.ad-scroll-inner {
  background: #F3F4F6;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Slider */
.ad-slider-container {
  background: #FFFFFF;
  padding-bottom: 4px;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}
.ad-slider {
  width: 100%;
  aspect-ratio: 375 / 220;
  background: transparent;
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ad-slide-wrap {
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ad-slider-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ad-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}
.ad-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #E5E5EA;
}
.ad-dot.active {
  background: #635CFB;
}

/* Photo cropper shown while a seller adds a photo to an ad. */
.photo-cropper {
  position: fixed;
  z-index: 10020;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.58);
}
.photo-cropper__panel {
  width: min(100%, 420px);
  padding: 20px;
  box-sizing: border-box;
  border-radius: 20px;
  background: #FFF;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
}
.photo-cropper__heading {
  color: #111;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}
.photo-cropper__hint {
  margin-top: 6px;
  color: #8E8E93;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}
.photo-cropper__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 375 / 220;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 14px;
  background: #E5E5EA;
  touch-action: none;
  cursor: grab;
}
.photo-cropper__viewport:active { cursor: grabbing; }
.photo-cropper__viewport img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.photo-cropper__actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.photo-cropper__actions button {
  flex: 1;
  height: 48px;
  border: 0;
  border-radius: 12px;
  font: 600 16px/20px var(--font, 'Onest', sans-serif);
  cursor: pointer;
}
.photo-cropper__cancel { color: #635CFB; background: #F0EFFF; }
.photo-cropper__save { color: #FFF; background: #635CFB; }

/* Blocks */
.ad-block {
  background: #FFFFFF;
  padding: 16px;
  border-bottom: 4px solid #F3F4F6;
}
.ad-similar-block {
  background: #FFFFFF;
  padding: 16px 0; /* Removing side padding for the grid to stretch */
  border-bottom: 4px solid #F3F4F6;
}
.ad-slider-container + .ad-block {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.ad-similar-block .ad-block-title {
  padding: 0 16px;
}
.ad-date {
  font-size: 11px;
  color: #8E8E93;
  margin-bottom: 6px;
}
.ad-age-gender {
  color: #000;
  font-family: 'Onest', sans-serif;
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  margin-bottom: 12px;
}
.ad-title {
  font-size: 18px;
  font-weight: 500;
  color: #000000;
  margin-bottom: 8px;
}
.ad-price-large {
  font-size: 22px;
  font-weight: 800;
  color: #000000;
  margin-bottom: 16px;
}
.ad-currency {
  font-size: 16px;
  font-weight: 600;
}
.ad-tag {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #635CFB;
  border-radius: 6px;
  color: #635CFB;
  font-size: 12px;
  font-weight: 500;
}

/* Бейдж совпадения на фото (Figma 3918-52) */
.ad-match-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 5;
  background: #34C759;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  padding: 3px 12px;
  border-radius: 12px;
}

/* Строка «Вакцинирован» / «Есть документы» (Figma 3918-52) */
.ad-flags-row { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 16px; }
.ad-flag { display: inline-flex; align-items: center; gap: 8px; }
.ad-flag-ico {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.ad-flag--vacc .ad-flag-ico { background: #006DCC; }
.ad-flag--doc .ad-flag-ico { background: #34C759; }
.ad-flag-text { font-size: 13px; font-weight: 500; line-height: 17px; color: #000000; }

.ad-block-title {
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 12px;
}
.ad-desc {
  font-size: 14px;
  line-height: 1.5;
  color: #000000;
}

/* Seller Block */
.ad-seller-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ad-seller-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ad-seller-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #E5E5EA;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 20px;
  color: #000;
}
.ad-seller-name {
  font-size: 15px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 4px;
}
.ad-seller-status {
  font-size: 12px;
  color: #8E8E93;
}
.ad-seller-stats {
  display: flex;
  gap: 8px;
}
.ad-stat-item {
  flex: 1;
  background: #F3F4F6;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}
.ad-stat-val {
  font-size: 15px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 4px;
}
.ad-stat-lbl {
  font-size: 11px;
  color: #8E8E93;
}

.ad-loc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #000000;
  margin-bottom: 16px;
}
.ad-loc-row svg {
  flex-shrink: 0;
}
.ad-map-placeholder {
  width: 100%;
  height: 160px;
  background: #E5E5EA;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

/* Bottom Bar */
.ad-bottom-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: #FFFFFF;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 210;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}
.ad-bottom-actions { display: flex; gap: 12px; }

/* Панель с блоком совместимости — точно как «tab» в Figma 3918-52:
   сверху серый зазор-разделитель (16 px фона страницы между блоком локации и
   панелью; у нас = серый фон скролла + 8 px серого бордюра панели), затем
   18 px белого отступа панели до карточки и 24 px между карточкой и кнопками. */
.ad-bottom-bar--match {
  border-top: 8px solid #F3F4F6;
  padding-top: 18px;
  gap: 24px;
}

/* Карточка совместимости (Figma 3918-52): бледно-зелёный фон (green 8%),
   тёмный заголовок, серая подпись и бледно-зелёный кружок (green 20%) с
   зелёной лапкой */
.ad-compat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(52, 199, 89, 0.08);
  border-radius: 16px;
  padding: 12px;
}
.ad-compat-ico {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(52, 199, 89, 0.2);
  display: flex; align-items: center; justify-content: center;
}
.ad-compat-title { font-size: 14px; font-weight: 600; line-height: 18px; color: #000000; }
.ad-compat-detail { margin-top: 4px; font-size: 12px; font-weight: 400; line-height: 15px; color: #8E8E93; }
/* Кнопки объявления — 44 px, 14/500, в одну строку (Figma 3918-52).
   flex:1 здесь не задаём: в блоке продавца кнопка — ребёнок flex-колонки,
   и flex-grow растягивал бы её по высоте. Деление ширины поровну нужно
   только нижней паре — оно задано в .ad-bottom-actions */
.ad-btn-primary,
.ad-btn-secondary {
  flex: 0 0 auto;
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 12px;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s;
}
.ad-btn-primary { background: #635CFB; color: #FFFFFF; }
.ad-btn-secondary { background: #EEEDFF; color: #635CFB; }
.ad-btn-primary:active,
.ad-btn-secondary:active { transform: scale(.97); }

/* Нижняя пара кнопок делит ширину поровну */
.ad-bottom-actions .ad-btn-primary,
.ad-bottom-actions .ad-btn-secondary { flex: 1 1 0; width: auto; }

/* ─── Ad Popup Menu ─────────────────────────────────────────────────── */
.ad-popup-menu {
  position: absolute;
  top: 68px;
  right: 12px;
  width: 250px;
  border-radius: 14px;
  overflow: hidden;
  z-index: 220;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95) translateY(-8px) translateZ(0);
  transform-origin: top right;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.3s ease;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.ad-popup-menu.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0) translateZ(0);
}
.ad-popup-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: 'Onest', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000000;
  -webkit-tap-highlight-color: transparent;
}
.ad-popup-item:active {
  background: rgba(0, 0, 0, 0.08);
}
.ad-popup-item--danger .ad-popup-text {
  color: #FF3B30;
}
.ad-popup-divider {
  height: 0.5px;
  background: rgba(60, 60, 67, 0.16);
  margin: 0;
}
.ad-popup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 215;
}


/* ─── Phone Contact Popup ────────────────────────────────────────────────── */
.phone-popup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.phone-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}
.phone-popup-box {
  width: calc(100% - 50px);
  max-width: 300px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transform: scale(0.95) translateY(10px) translateZ(0);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.phone-popup-overlay.active .phone-popup-box {
  transform: scale(1) translateY(0) translateZ(0);
}
.phone-popup-call {
  display: block;
  width: 100%;
  padding: 16px 20px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: 'Onest', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #007AFF;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.phone-popup-call:active {
  background: rgba(0, 0, 0, 0.06);
}
.phone-popup-divider {
  height: 0.33px;
  background: rgba(60, 60, 67, 0.36);
}
.phone-popup-cancel {
  display: block;
  width: 100%;
  padding: 16px 20px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: 'Onest', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #8E8E93;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.phone-popup-cancel:active {
  background: rgba(0, 0, 0, 0.06);
}


/* Hide HTML back buttons in Telegram (using native BackButton instead) */
body.tg-active .ad-back-btn,
body.tg-active .modal-back-btn {
  visibility: hidden;
  pointer-events: none;
}



/* ─── Telegram iOS FULLSCREEN: offset below status bar + TG nav bar ──────── */
body.tg-active.platform-ios.tg-fullscreen .ad-header {
  top: calc(env(safe-area-inset-top, 0px) + 23px);
  height: 56px;
  background: #FFFFFF;
  align-items: flex-end;
  padding-bottom: 8px;
}
body.tg-active.platform-ios.tg-fullscreen .ad-scroll {
  overflow-x: hidden;
  background: #FFFFFF;
  overscroll-behavior-y: none;
  margin-top: calc(56px + env(safe-area-inset-top, 0px) + 23px);
}

/* ═══════════════════ CHAT SCREEN ═══════════════════ */
#screen-chat {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: #FFFFFF;
  height: 100%;
  overflow: hidden;
}

/* Chat Header */
.chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px;
  background: #FFFFFF;
  border-bottom: 4px solid #F3F4F6;
  flex-shrink: 0;
  z-index: 10;
}
body.platform-ios .chat-header,
body.platform-android .chat-header {
  padding-top: max(
    calc(env(safe-area-inset-top, 0px) * 1.4 + 24px),
    calc(var(--tg-content-safe-area-inset-top, 0px) * 1.4 + 24px)
  );
}
.chat-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #E5E5EA;
  flex-shrink: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.chat-header-text {
  flex: 1;
  min-width: 0;
}
.chat-seller-name {
  font-family: 'Onest', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #1C1C1E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-online {
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  color: #34C759;
  margin-top: 1px;
}
.chat-menu-btn {
  background: none;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

/* Ad preview card */
.chat-ad-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 16px 0;
  padding: 8px 12px;
  background: #EAE8FF;
  border-radius: 12px;
  flex-shrink: 0;
}
.chat-ad-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #FFFFFF;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}
.chat-ad-info {
  flex: 1;
  min-width: 0;
}
.chat-ad-title {
  font-family: 'Onest', sans-serif;
  font-size: 13px;
  color: #1C1C1E;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
.chat-ad-price {
  font-family: 'Onest', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1C1C1E;
  margin-top: 2px;
}

/* Messages area */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-messages > *:first-child {
  margin-top: auto;
}
.chat-messages::-webkit-scrollbar { display: none; }

/* Empty state */
.chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #8E8E93;
  text-align: center;
  padding: 40px 20px;
}
.chat-empty-icon {
  font-size: 48px;
  opacity: 0.5;
}
.chat-empty-text {
  font-family: 'Onest', sans-serif;
  font-size: 15px;
  color: #8E8E93;
}

/* Message bubbles */
.chat-msg {
  display: flex;
  max-width: 80%;
  margin-bottom: 2px;
}
.chat-msg--sent {
  align-self: flex-end;
}
.chat-msg--received {
  align-self: flex-start;
}
.chat-bubble {
  padding: 10px 14px;
  border-radius: 18px;
  font-family: 'Onest', sans-serif;
  font-size: 15px;
  line-height: 1.4;
  position: relative;
  z-index: 0;
  word-wrap: break-word;
}

/* Sent Style */
.chat-msg--sent .chat-bubble {
  background: #635CFB;
  color: #FFFFFF;
  border-radius: 18px 18px 0 18px;
}
.chat-msg--sent .chat-bubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -8px;
  height: 20px;
  width: 20px;
  background: #635CFB;
  border-bottom-left-radius: 16px;
  z-index: -1;
}
.chat-msg--sent .chat-bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -10px;
  height: 20px;
  width: 10px;
  background: #FFFFFF;
  border-bottom-left-radius: 10px;
  z-index: -1;
}

/* Received Style */
.chat-msg--received .chat-bubble {
  background: #F2F2F7;
  color: #1C1C1E;
  border-radius: 18px 18px 18px 0;
}
.chat-msg--received .chat-bubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -8px;
  height: 20px;
  width: 20px;
  background: #F2F2F7;
  border-bottom-right-radius: 16px;
  z-index: -1;
}
.chat-msg--received .chat-bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -10px;
  height: 20px;
  width: 10px;
  background: #FFFFFF;
  border-bottom-right-radius: 10px;
  z-index: -1;
}



/* Input bar */
.chat-input-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: #FFFFFF;
  flex-shrink: 0;
}
.chat-input-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  background: #FFFFFF;
  border: 1px solid #E5E5EA;
  border-radius: 16px;
  height: 48px;
  padding: 0 16px;
  box-sizing: border-box;
}
.chat-attach-btn {
  background: none;
  border: none;
  padding: 0;
  margin-right: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.chat-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0;
  height: 100%;
  font-family: 'Onest', sans-serif;
  font-size: 15px;
  color: #000000;           /* набираемый текст — чёрный */
  caret-color: #635CFB;     /* мигающая каретка — фирменный фиолетовый */
  outline: none;
  -webkit-appearance: none;
}
.chat-input::placeholder { color: #8E8E93; }
.chat-send-btn {
  background: none;
  border: 1px solid #E5E5EA;
  border-radius: 16px;
  width: 48px;
  height: 48px;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: transform 0.15s;
}
.chat-send-btn svg {
  pointer-events: none;
}
.chat-send-btn:active { transform: scale(0.9); }

/* ─── Global Loader ─── */
.global-loader {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.global-loader.active {
  opacity: 1;
  visibility: visible;
}
.dot-flashing {
  display: flex;
  gap: 6px;
}
.dot-flashing div {
  width: 12px; height: 12px;
  background-color: #635CFB;
  border-radius: 50%;
  animation: dotFlashing 0.6s infinite alternate;
}
.dot-flashing div:nth-child(2) { animation-delay: 0.2s; }
.dot-flashing div:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotFlashing {
  0% { background-color: #635CFB; opacity: 1; transform: scale(1); }
  100% { background-color: #EAE8FF; opacity: 0.3; transform: scale(0.8); }
}

/* ── Favorites Panel ───────────────────────────────────────────────────────── */
.favorites-panel {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: #F3F4F6;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 50;
}

/* Избранное Header */
.fav-header {
  background: #FFFFFF;
  flex-shrink: 0;
  z-index: 10;
  position: sticky;
  top: 0;
}
.fav-header-inner {
  display: flex;
  height: 48px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  margin-top: var(--app-title-margin, 0px);
}
.fav-title {
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #000;
  flex: 1;
  text-align: center;
}
.fav-header-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Content Container */
.fav-content-wrap {
  flex: 1;
  padding: 12px 0 88px 0; /* 12px top, 88px bottom for tab bar */
  background: #FFFFFF;
  border-radius: 8px 8px 0 0;
  margin: 4px 0 0 0;
}

/* Badges */
.ad-badge {
  position: absolute;
  display: flex;
  align-items: center;
  color: #fff;
  z-index: 2;
}
.ad-badge-red {
  top: 8px;
  left: 8px;
  background: #FF383C;
  gap: 4px;
  padding: 2px 8px 2px 4px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 400;
}
.ad-badge-red svg {
  width: 18px;
  height: 18px;
}
.ad-badge-green {
  top: 0;
  left: 0;
  background: #34C759;
  padding: 3px 6px;
  border-radius: 16px 0 8px 0;
  font-size: 10px;
  font-weight: 500;
}

/* Hide Scrollbar */
.favorites-panel::-webkit-scrollbar {
  display: none;
}
.favorites-panel {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Heart Icon Overlay */
.ad-heart-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  cursor: pointer;
  backdrop-filter: none;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
}
.ad-heart-btn svg {
  width: 16px;
  height: 16px;
  fill: #FFFFFF;
}



/* ═══════════════════════════════════════════════════════════════════════════
   SKELETON LOADERS
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f5 25%, #e8e8f0 50%, #f0f0f5 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 8px;
}

/* Ad card skeleton */
.skeleton-ad {
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
}
.skeleton-ad-img {
  width: 100%;
  height: 135px;
  border-radius: 16px;
}
.skeleton-ad-line {
  margin: 8px 0 0;
  height: 14px;
  border-radius: 6px;
}
.skeleton-ad-line--short {
  width: 60%;
}
.skeleton-ad-line--medium {
  width: 80%;
}
.skeleton-ad-line--xs {
  width: 40%;
  height: 11px;
  margin-top: 6px;
}

/* List card skeleton (category screen) */
.skeleton-list-card {
  background: #FFFFFF;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
}
.skeleton-list-thumb {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  flex-shrink: 0;
}
.skeleton-list-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skeleton-list-line {
  height: 14px;
  border-radius: 6px;
}
.skeleton-list-line--w80 { width: 80%; }
.skeleton-list-line--w55 { width: 55%; }
.skeleton-list-line--w40 { width: 40%; height: 11px; }

/* Chat list skeleton */
.skeleton-chat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #FFFFFF;
}
.skeleton-chat-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skeleton-chat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.skeleton-chat-line { height: 13px; border-radius: 6px; }
.skeleton-chat-line--w70 { width: 70%; }
.skeleton-chat-line--w45 { width: 45%; }

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

#toast-container {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: calc(100% - 32px);
  max-width: 380px;
}

.toast {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  background: #1C1C1E;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: auto;
}

.toast.toast--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast--success { background: #34C759; }
.toast--error   { background: #FF3B30; }
.toast--info    { background: #635CFB; }

/* ═══════════════════════════════════════════════════════════════════════════
   PULL-TO-REFRESH INDICATOR
   ═══════════════════════════════════════════════════════════════════════════ */

.ptr-indicator {
  position: absolute;
  top: -48px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: top 0.2s ease, opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
}
.ptr-indicator.ptr--visible {
  opacity: 1;
}
.ptr-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #E5E5EA;
  border-top-color: #635CFB;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   IMAGE LAZY LOAD — fade in when loaded
   ═══════════════════════════════════════════════════════════════════════════ */

img.lazy {
  opacity: 0;
  transition: opacity 0.3s ease;
}
img.lazy.loaded {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════════ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 12px;
  text-align: center;
}
.empty-state-icon {
  font-size: 52px;
  line-height: 1;
  opacity: 0.55;
}
.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: #1C1C1E;
}
.empty-state-subtitle {
  font-size: 13px;
  color: #8E8E93;
  max-width: 240px;
  line-height: 1.4;
}
.empty-state-btn {
  margin-top: 8px;
  padding: 12px 24px;
  background: #635CFB;
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s;
}
.empty-state-btn:active { transform: scale(0.97); }

/* ═══════════════════════════════════════════════════════════════════════════
   NETWORK ERROR BANNER
   ═══════════════════════════════════════════════════════════════════════════ */

#network-error-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #FF3B30;
  color: #FFFFFF;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 8px 16px;
  z-index: 9997;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}
#network-error-banner.visible {
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON LOADING STATE
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MICRO-INTERACTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Smooth heart toggle animation */
.ad-heart-btn {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ad-heart-btn:active {
  transform: scale(0.82) !important;
}
.ad-heart-btn.heart-pop {
  animation: heartPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes heartPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* Ripple on primary buttons */
.ripple-btn {
  position: relative;
  overflow: hidden;
}
.ripple-btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: rippleEffect 0.5s linear;
  pointer-events: none;
}
@keyframes rippleEffect {
  to { transform: scale(4); opacity: 0; }
}

/* ── Мои объявления (дизайн Figma 3810-314) ────────────────────────────────── */
/* Чипы статусов в белой шапке, гориз. скролл */
.myads-chips {
  display: flex;
  gap: 4px;
  padding: 8px 12px 12px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.myads-chips::-webkit-scrollbar { display: none; }
.myads-chip {
  flex: 0 0 auto;
  height: 27px;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: #F2F2F7;
  color: #000;
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  line-height: 15px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.myads-chip.active {
  background: #635CFB;
  color: #FFF;
}
/* Скруглить низ белой шапки как в макете */
#my-ads-panel .fav-header { border-radius: 0 0 8px 8px; }

/* Контент: карточки-списки на сером фоне */
#my-ads-panel .fav-content-wrap.myads-content {
  background: transparent;
  border-radius: 0;
  margin: 0;
  padding: 4px 0 88px;
  /* column, чтобы пустое состояние (.myads-empty flex:1) заняло всю высоту
     и отцентрировалось; на списке карточек не сказывается */
  display: flex;
  flex-direction: column;
}
.myads-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0; /* в column-контейнере список не сжимаем — иначе ломается скролл */
}
.myads-card {
  background: #FFF;
  border-radius: 8px;
  padding: 12px;
}
.myads-card-top {
  position: relative;
  display: flex;
  gap: 10px;
}
.myads-card-img {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  background: #F3F4F6;
  flex-shrink: 0;
}
.myads-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 28px;
}
.myads-card-title {
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.myads-card-price {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: #635CFB;
}
.myads-card-loc {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.myads-card-loc img {
  width: 12px;
  height: 15px;
  flex-shrink: 0;
}
.myads-card-loc span {
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  line-height: 15px;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.myads-menu-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.myads-menu-btn img { width: 24px; height: 24px; display: block; }
.myads-card-divider {
  height: 1px;
  background: #E5E5EA;
  margin: 12px 0 13px;
}
.myads-card-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.myads-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  line-height: 15px;
  color: #000;
}
.myads-stat img { width: 20px; height: 20px; }
.myads-promote-btn {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: 20px;
  border: none;
  border-radius: 12px;
  background: rgba(99, 92, 251, 0.15);
  color: #635CFB;
  font-family: 'Onest', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
}
.myads-promote-btn:active { background: rgba(99, 92, 251, 0.25); }

/* Продвинутое объявление: тариф уже оплачен, кнопка неактивна до конца срока */
.myads-promote-btn--on {
  background: #F2F2F7;
  color: #8E8E93;
  cursor: default;
}
.myads-promote-btn--on:active { background: #F2F2F7; }

/* Плашка активного тарифа (Figma 3908-1189): иконка + название + срок + подпись.
   Фон и иконка зависят от тарифа */
.myads-plan {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 6px 10px;
  border-radius: 12px;
  background: #F2F2F7;
}
.myads-plan--turbo   { background: #F4FFDD; }
.myads-plan--premium { background: #FFF5DF; }
.myads-plan--start   { background: #F1F4FF; }
.myads-plan-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: contain;
}
.myads-plan-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.myads-plan-head {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.myads-plan-name {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #000;
}
.myads-plan-until {
  font-family: 'Onest', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #000;
}
.myads-plan-desc {
  font-family: 'Onest', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  color: #8E8E93;
}

/* Выпадающее меню карточки (⋯) */
.myads-menu-backdrop {
  position: absolute;
  inset: 0;
  z-index: 70;
  background: transparent;
}
.myads-menu {
  position: absolute;
  z-index: 71;
  width: 175px;
  border-radius: 12px 12px 16px 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  animation: myadsMenuIn 0.15s ease-out;
}
@keyframes myadsMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.myads-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 34px;
  padding: 8px;
  border: 1px solid #E5E5EA;
  border-top: none;
  background: #FFF;
  cursor: pointer;
  font-family: 'Onest', sans-serif;
  font-size: 14px;
  line-height: 18px;
  color: #000;
}
.myads-menu-item:first-child { border-top: 1px solid #E5E5EA; border-radius: 12px 12px 0 0; }
.myads-menu-item:last-child  { border-radius: 0 0 12px 12px; }
.myads-menu-item:active { background: #F2F2F7; }
.myads-menu-item img { width: 18px; height: 18px; }

/* Пустое состояние и скелетоны */
.myads-empty {
  padding: 40px 20px;
  text-align: center;
  font-family: 'Onest', sans-serif;
  font-size: 14px;
  color: #8E8E93;
}
.myads-skeleton-card {
  background: #FFF;
  border-radius: 8px;
  padding: 12px;
}
.myads-skeleton-card .sk-top { display: flex; gap: 10px; }
.myads-skeleton-card .sk-img { width: 72px; height: 72px; border-radius: 12px; }
.myads-skeleton-card .sk-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.myads-skeleton-card .sk-line { height: 14px; border-radius: 4px; }
.myads-skeleton-card .sk-line--w70 { width: 70%; }
.myads-skeleton-card .sk-line--w45 { width: 45%; }
.myads-skeleton-card .sk-line--w60 { width: 60%; }
.myads-skeleton-card .sk-btn { height: 44px; border-radius: 12px; margin-top: 16px; }

/* ── Шторка «Пожаловаться» ─────────────────────────────────────────────────── */
.report-other-text {
  width: 100%;
  box-sizing: border-box;
  margin-top: 16px;
  min-height: 80px;
  border: 1px solid #E5E5EA;
  border-radius: 12px;
  padding: 12px;
  font-family: var(--font);
  font-size: 14px;
  line-height: 18px;
  color: #000;
  resize: none;
  outline: none;
}
.report-other-text:focus { border-color: #635CFB; }
.report-submit-btn {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: 16px;
  border: none;
  border-radius: 12px;
  background: #635CFB;
  color: #FFF;
  font-family: var(--font);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
}
.report-submit-btn:disabled { opacity: 0.4; }

/* Пустое состояние «Мои объявления» (дизайн Figma 3811-593).
   flex:1 не только центрирует блок, но и гарантирует, что пустая вкладка
   ровно заполняет контейнер (scrollHeight == clientHeight) и не прокручивается
   вовсе. Центрирование чувствительно к высоте контейнера — сдвиг высоты на
   N px двигает картинку на N/2 px, — поэтому высота панели меняться не должна */
.myads-empty {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 12px;
  text-align: center;
}
.myads-empty-img {
  width: 200px;
  height: 200px;
  margin-bottom: -8px; /* у картинки прозрачные поля — прижимаем текст вплотную */
}
.myads-empty-title {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 31px;
  color: #000;
  margin-bottom: 8px;
}
.myads-empty-desc {
  font-family: 'Onest', sans-serif;
  font-size: 14px;
  line-height: 18px;
  color: #8E8E93;
  max-width: 317px;
  margin-bottom: 24px;
}
.myads-empty-cta {
  display: block;
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: #635CFB;
  color: #FFF;
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
}
.myads-empty-cta:active { opacity: 0.85; }

/* Карточка «В модерации» — бейдж «На проверке» (дизайн Figma 3812-8) */
.myads-mod-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  min-width: 0;
}
.myads-mod-badge {
  flex: 0 0 auto;
  background: #FF8D28;
  color: #FFF;
  border-radius: 6px;
  padding: 3px 8px;
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  line-height: 15px;
  white-space: nowrap;
}
.myads-mod-badge--rejected { background: #FF383C; }
.myads-mod-time {
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  line-height: 15px;
  color: #8E8E93;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Свайп между вкладками «Мои объявления»: контент въезжает со стороны свайпа */
.myads-slide-left { animation: myadsSlideLeft .22s ease-out; }
.myads-slide-right { animation: myadsSlideRight .22s ease-out; }
@keyframes myadsSlideLeft {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes myadsSlideRight {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}