/* ═══════════════════════════════════════════════════════════════════════════
   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;
  /* Закрытие: фон гаснет синхронно со сползанием шторки, помедленнее — чтобы
     закрытие ощущалось плавным, а не рывком */
  transition: opacity 0.45s ease, visibility 0.5s 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%);
  /* Закрытие: помедленнее и с мягкой кривой без резкого «щелчка» в конце */
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 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);
}

/* ─── Перевод на карту (Figma: 4277:45) ─────────────────────────────────── */
#card-pay-modal .card-pay-sheet {
  position: relative;
  z-index: 1002;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Та же геометрия, что у тарифной шторки и выбора способа оплаты. */
  height: calc(100% - 105px);
  min-height: 600px;
  max-height: calc(100% - 24px);
  overflow: hidden;
  box-sizing: border-box;
  background: #fff;
  border-radius: 24px 24px 0 0;
  font-family: var(--font);
}
#card-pay-modal .card-pay-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  padding: 64px 12px 12px;
  overflow-y: auto;
  box-sizing: border-box;
}
#card-pay-modal .card-pay-art {
  position: relative;
  width: 163px;
  height: 123px;
  overflow: hidden;
  flex: 0 0 auto;
}
#card-pay-modal .card-pay-art img {
  position: absolute;
  top: -23.85%;
  left: -12%;
  display: block;
  width: 123.99%;
  height: 147.7%;
  max-width: none;
}
#card-pay-modal .card-pay-title {
  margin: 20px 0 0;
  color: #000;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
#card-pay-modal .card-pay-hint {
  white-space: pre-line;
  max-width: 343px;
  margin: 8px 0 0;
  color: #8e8e93;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}
#card-pay-modal .card-pay-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 351px;
  margin-top: 36px;
}
#card-pay-modal .card-pay-field-group { width: 100%; }
#card-pay-modal .card-pay-label {
  margin-bottom: 8px;
  color: #000;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}
#card-pay-modal .card-pay-field {
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  padding: 0 14px 0 16px;
  box-sizing: border-box;
  border: 1px solid #e5e5ea;
  border-radius: 16px;
  background: #fff;
}
#card-pay-modal .card-pay-value {
  overflow: hidden;
  color: #000;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#card-pay-modal .card-pay-field--amount .card-pay-value {
  font-weight: 600;
}
#card-pay-modal .card-pay-copy {
  display: grid;
  width: 32px;
  height: 32px;
  margin-left: auto;
  padding: 6px;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  cursor: pointer;
}
#card-pay-modal .card-pay-copy img {
  display: none;
}
#card-pay-modal .card-pay-copy::before {
  display: block;
  width: 20px;
  height: 20px;
  content: '';
  background: #635cfb;
  -webkit-mask: url('../../img/card-pay-copy.svg?v=v2') center / contain no-repeat;
  mask: url('../../img/card-pay-copy.svg?v=v2') center / contain no-repeat;
}
#card-pay-modal .card-pay-holder {
  min-height: 0;
  margin-top: 6px;
  color: #8e8e93;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
}
#card-pay-modal .card-pay-holder:empty { display: none; }
#card-pay-modal .card-pay-status {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 343px;
  min-height: 21px;
  margin-top: 18px;
}
#card-pay-modal .card-pay-status-text { display: none; }
#card-pay-modal #cardpay-status-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
#card-pay-modal .card-pay-timer {
  color: #ff383c;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
@media (max-height: 680px) {
  #card-pay-modal .card-pay-content { padding-top: 34px; }
  #card-pay-modal .card-pay-art { width: 132px; height: 100px; }
  #card-pay-modal .card-pay-details { margin-top: 22px; }
}

.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: 225 / 250;
  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: contain;
  background: #F8F8F8;
  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);
  /* Плавное появление/закрытие — только затухание фона: масштаб панели нельзя,
     иначе getBoundingClientRect рамки во время анимации возвращает уменьшённый
     размер и по краям фото вылезает серый фон */
  opacity: 0;
  transition: opacity .2s ease;
}
.photo-cropper.is-open { opacity: 1; }
.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: 225 / 250;
  max-height: 52vh;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 14px;
  background: #E5E5EA;
  touch-action: none;
  cursor: grab;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.photo-cropper__viewport:active { cursor: grabbing; }
.photo-cropper__viewport img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  opacity: 0;
  transition: opacity .15s ease;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
/* Сетка-«трети» — видна только во время подстройки */
.photo-cropper__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 1px, transparent 1px);
  background-size: 33.333% 33.333%;
  background-position: -1px -1px;
}
.photo-cropper__viewport.is-adjusting .photo-cropper__grid { opacity: 1; }

/* Ползунок масштаба */
.photo-cropper__zoom {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.photo-cropper__zoom-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #F0EFFF;
  color: #635CFB;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.photo-cropper__slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: #E5E5EA;
  border-radius: 2px;
  outline: none;
}
.photo-cropper__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #635CFB;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.photo-cropper__slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #635CFB;
  cursor: pointer;
}

/* Поворот на 90° */
.photo-cropper__tools {
  display: flex;
  margin-top: 12px;
}
.photo-cropper__rotate {
  flex: 1;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: #F0EFFF;
  color: #635CFB;
  font: 600 14px/38px var(--font, 'Onest', sans-serif);
  cursor: pointer;
}
.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 3979-228) */
.ad-lost-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 5;
  background: #FF383C;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  padding: 3px 12px;
  border-radius: 12px;
}

/* Строка «Вакцинирован» / «Есть опыт вязки» (Figma 4005-91):
   кружок со светлой заливкой (акцент 8%) и цветная иконка внутри */
.ad-flags-row { display: flex; flex-wrap: wrap; gap: 12px 10px; margin-top: 10px; }
.ad-flag { display: inline-flex; align-items: center; gap: 5px; }
.ad-flag-ico {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.ad-flag-img { display: block; width: 18px; height: 18px; }
/* Подложки под цвет иконок из Figma (щит #0088FF, мед-карта #34C759) */
.ad-flag--vacc .ad-flag-ico { background: rgba(0, 136, 255, 0.10); }
.ad-flag--doc .ad-flag-ico { background: rgba(52, 199, 89, 0.10); }
/* «Есть опыт вязки» — та же структура, что у вакцинации/документов: подложка-кружок
   24px + глиф 18px (Figma 4125-288: магента-кружок с белым символом ♂♀), чтобы все
   три флага были одного размера. Подложка — светло-розовый ореол из макета. */
.ad-flag--exp .ad-flag-ico { background: rgba(245, 35, 141, 0.12); }
.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.55;
  color: #000000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ad-desc-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ad-desc-line--plain {
  display: block;
}
.ad-desc-ico {
  flex: 0 0 auto;
  min-width: 18px;
  font-size: 15px;
  text-align: center;
}
.ad-desc-txt {
  flex: 1 1 auto;
  min-width: 0;
}

/* 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: 8px; }

/* Панель с блоком совместимости — точно как «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: 8px;
  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; }
/* «Написать владельцу» — фиолетовый фон 20% (Figma 4005-91) */
.ad-bottom-actions .ad-btn-secondary { background: rgba(99, 92, 251, 0.20); }

/* ─── 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);
}