/* Агрегатор аренды BA. Тема: по умолчанию системная, выбор пользователя — в data-theme на (переключатель в шапке, сохраняется в localStorage). */ :root { color-scheme:light; --bg:#f2f2f7; --card:#ffffff; --elev:#ffffff; --line:rgba(60,60,67,.29); --line-soft:rgba(60,60,67,.14); --card-line:rgba(60,60,67,.09); --txt:#141922; --mut:#626c7a; --soft:#f2f2f7; --soft-h:#e5e5ea; --acc:#2f6fed; --acc-soft:rgba(47,111,237,.10); --acc-line:rgba(47,111,237,.32); --ok:#15803d; --ok-soft:#e9f9f0; --ok-line:#c7ecd6; --heart:#e11d48; --scrim:rgba(0,0,0,.55); --grad-photo:linear-gradient(transparent, rgba(0,0,0,.22)); /* типографическая шкала iOS: базовые ступени + токены ролей */ --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-md:15px; --fs-base:17px; --fs-lg:22px; --fs-xl:20px; --fs-2xl:28px; --fs-t1:28px; --fs-t2:22px; --fs-t3:20px; --fs-head:17px; --fs-body:17px; --fs-call:16px; --fs-sub:15px; --fs-foot:13px; --fs-cap:12px; --fs-cap2:11px; --rad:16px; --rad-s:10px; /* шаг сетки: вертикальные интервалы шапки, фильтров и списка кратны 4px, поля по краям и предельная ширина — одни на все полосы, поэтому левый край логотипа, фильтров и карточек стоит на одной линии */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --gutter:20px; --maxw:1240px; --shadow:0 1px 2px rgba(0,0,0,.05); --shadow-h:0 8px 24px rgba(0,0,0,.18); --dur-f:.15s; --dur:.25s; --dur-s:.35s; --ease:cubic-bezier(.25,.1,.25,1); --head-h:132px; /* высота шапки+фильтров для sticky-карты */ } /* явный выбор тёмной темы (переключатель в шапке) — вне media-запроса: работает при любой системной схеме. NB: список токенов синхронизирован с системным блоком ниже. */ :root[data-theme="dark"] { color-scheme:dark; --bg:#000000; --card:#1c1c1e; --elev:#2c2c2e; --line:rgba(84,84,88,.65); --line-soft:rgba(84,84,88,.45); --card-line:rgba(255,255,255,.08); --txt:#f5f5f7; --mut:#98a2b3; --soft:#2c2c2e; --soft-h:#3a3a3c; --acc:#7aa2ff; --acc-soft:rgba(122,162,255,.14); --acc-line:rgba(122,162,255,.30); --ok:#4ade80; --ok-soft:#152a1f; --ok-line:#1f4433; --heart:#fb7185; --shadow:0 1px 2px rgba(0,0,0,.5); --shadow-h:0 8px 24px rgba(0,0,0,.6); } /* системная тёмная — если пользователь явно не выбрал светлую. NB: токены синхронизировать с :root[data-theme="dark"] выше. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme:dark; --bg:#000000; --card:#1c1c1e; --elev:#2c2c2e; --line:rgba(84,84,88,.65); --line-soft:rgba(84,84,88,.45); --card-line:rgba(255,255,255,.08); --txt:#f5f5f7; --mut:#98a2b3; --soft:#2c2c2e; --soft-h:#3a3a3c; --acc:#7aa2ff; --acc-soft:rgba(122,162,255,.14); --acc-line:rgba(122,162,255,.30); --ok:#4ade80; --ok-soft:#152a1f; --ok-line:#1f4433; --heart:#fb7185; --shadow:0 1px 2px rgba(0,0,0,.5); --shadow-h:0 8px 24px rgba(0,0,0,.6); } } /* поверхность поверх поверхности: баблы карты и заметка */ :root[data-theme="dark"] .bubble, :root[data-theme="dark"] .map-note { background:var(--elev); } /* hover/кластер сохраняют акцент поверх var(--elev) */ :root[data-theme="dark"] .bubble:hover, :root[data-theme="dark"] .bubble.agg { background:var(--acc); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bubble, :root:not([data-theme="light"]) .map-note { background:var(--elev); } :root:not([data-theme="light"]) .bubble:hover, :root:not([data-theme="light"]) .bubble.agg { background:var(--acc); } } * { box-sizing:border-box; } /* многие элементы ниже получают display:flex — он бы перебил [hidden] от браузера */ [hidden] { display:none !important; } .mobile-only { display:none; } .mobile-actions { display:contents; } .mobile-search { display:none; } .mobile-sort, .mobile-view-toggle { display:none; } html { -webkit-text-size-adjust:100%; overflow-x:hidden; } body { margin:0; background:var(--bg); color:var(--txt); font:var(--fs-base)/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; /* страница скроллится по вертикали обычным образом; горизонтальный скролл недопустим (жалоба — только про ширину) */ overflow-x:hidden; } ::selection { background:var(--acc-soft); } body.noscroll { overflow:hidden; } button, input, select { font:inherit; color:inherit; touch-action:manipulation; } :focus-visible { outline:2px solid var(--acc); outline-offset:2px; border-radius:8px; } .skip { position:absolute; left:-9999px; top:8px; z-index:100; padding:10px 16px; background:var(--card); border:1px solid var(--acc); border-radius:var(--rad-s); font-weight:600; text-decoration:none; color:var(--acc); } .skip:focus { left:12px; } img { max-width:100%; } /* ---------- шапка ---------- */ /* Одна строка: логотип с дескриптором слева, управление справа. Все элементы управления одной высоты (40px), поэтому правый край читается рядом, а не россыпью. Счётчик найденного уехал к результатам — в липкой шапке он занимал высоту на каждом экране, хотя относится к списку. */ header { position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:0.5px solid var(--line); padding:calc(var(--sp-3) + constant(safe-area-inset-top)) var(--gutter) var(--sp-3); padding:calc(var(--sp-3) + env(safe-area-inset-top)) var(--gutter) var(--sp-3); } .hrow { max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; } h1 { font-size:var(--fs-t2); margin:0; letter-spacing:.01em; font-weight:600; line-height:1.25; } /* логотип вместо текстового заголовка: задана высота, ширина считается из пропорций файла — строка шапки не прыгает при загрузке */ .brand { display:flex; align-items:center; gap:var(--sp-3); } /* логотип + селекты страны/города — левая колонка шапки */ .brand-col { display:flex; flex-direction:column; align-items:flex-start; gap:6px; } .brand-cities { display:flex; gap:6px; } /* Лого собрано из самостоятельных SVG-знака и вордмарка: название крупнее, а их визуальные центры совпадают независимо от размеров исходного общего SVG. */ .brand-home { position:relative; display:inline-flex; align-items:center; gap:4px; flex:none; line-height:0; border-radius:var(--rad-s); text-decoration:none; color:inherit; transition:opacity var(--dur-f) var(--ease); } .brand-home:hover { opacity:.72; } .brand-home::before { content:""; position:absolute; inset:-5px -8px; } /* hit-area 44 */ .brand-mark, .brand-wordmark { display:block; width:auto; flex:none; } .brand-mark { height:34px; } .brand-wordmark { height:21px; } .brand-mark.dark, .brand-wordmark.dark { display:none; } :root[data-theme="dark"] .brand-mark.light, :root[data-theme="dark"] .brand-wordmark.light { display:none; } :root[data-theme="dark"] .brand-mark.dark, :root[data-theme="dark"] .brand-wordmark.dark { display:block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-mark.light, :root:not([data-theme="light"]) .brand-wordmark.light { display:none; } :root:not([data-theme="light"]) .brand-mark.dark, :root:not([data-theme="light"]) .brand-wordmark.dark { display:block; } } /* логотип — картинка, а имя продукта должно оставаться словом: для скринридеров и поиска дублируем текстом */ .visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } h1 .sub { font-size:var(--fs-sm); color:var(--mut); font-weight:400; line-height:1; margin-top:2px; } /* по вертикали с логотипом (34px) */ .hctl { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:var(--sp-2); } /* строка результатов — над сеткой и в тех же полях, что карточки */ .results { max-width:var(--maxw); margin:var(--sp-5) auto 0; padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); } .stats { color:var(--mut); font-size:var(--fs-foot); } .sort-sel { flex:none; max-width:60%; min-height:40px; padding:8px 11px; border:1px solid var(--line); border-radius:var(--rad-s); background:var(--card); font-size:var(--fs-sub); cursor:pointer; } .sort-sel:focus { border-color:var(--acc); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent); } .view-toggle { display:flex; gap:2px; background:var(--soft); border-radius:999px; padding:3px; } .view-toggle button { position:relative; border:0; background:transparent; border-radius:999px; cursor:pointer; font-size:var(--fs-sm); font-weight:600; color:var(--mut); min-height:34px; transition:all .15s var(--ease); padding:5px 14px; } /* hit-area ≥44 для узких сегментов шапки */ .view-toggle button::before { content:""; position:absolute; inset:-4px; } .view-toggle button.active { background:var(--card); color:var(--acc); } /* одна кнопка языка с меню (жалоба 2026-08-31: три кнопки в хиро -> одна) */ .lang-wrap { position:relative; } .lang-btn { display:inline-flex; align-items:center; gap:5px; border:0; background:var(--soft); color:var(--fg); border-radius:999px; padding:5px 12px; min-height:34px; font-size:var(--fs-sm); font-weight:600; cursor:pointer; transition:all .15s var(--ease); } .lang-btn:hover { color:var(--acc); } .lang-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:900; background:var(--card); border:.5px solid var(--line-soft); border-radius:var(--rad-s); box-shadow:0 8px 24px rgba(0,0,0,.14); padding:4px; min-width:132px; } .lang-menu button { display:block; width:100%; text-align:left; border:0; background:transparent; color:var(--txt); border-radius:8px; padding:8px 12px; font-size:var(--fs-sm); cursor:pointer; } .lang-menu button:hover { background:var(--soft); } .lang-menu button.active { color:var(--acc); font-weight:600; } /* Мобильное overflow-меню: глобальные настройки, которые не должны постоянно занимать место в top app bar. На desktop весь блок скрыт через .mobile-only. */ .mobile-more-wrap { position:relative; } .mobile-more-menu { position:absolute; right:0; top:calc(100% + 7px); z-index:900; width:210px; padding:6px; background:var(--card); border:.5px solid var(--line-soft); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.18); } .mobile-more-menu > button { width:100%; min-height:44px; display:flex; align-items:center; gap:10px; padding:9px 11px; border:0; border-radius:10px; background:transparent; color:var(--txt); font-size:var(--fs-sub); text-align:left; cursor:pointer; } .mobile-more-menu > button:hover { background:var(--soft); } .mobile-lang-row { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:6px 4px 2px; border-top:.5px solid var(--line-soft); } .mobile-lang-row button { min-height:44px; border:0; border-radius:9px; background:var(--soft); color:var(--mut); font-weight:600; cursor:pointer; } .mobile-lang-row button.active { background:var(--acc); color:#fff; } .add-listing-fab { position:fixed; right:calc(16px + env(safe-area-inset-right, 0px)); bottom:calc(18px + env(safe-area-inset-bottom, 0px)); z-index:55; width:56px; height:56px; align-items:center; justify-content:center; border:0; border-radius:50%; background:var(--acc); color:#fff; cursor:pointer; box-shadow:0 8px 24px color-mix(in srgb, var(--acc) 40%, transparent); } /* Тост «Установить приложение» (PWA): нижний шторок, показывается один раз, «больше не показывать» запоминается в localStorage. */ .install-toast { position:fixed; left:0; right:0; bottom:calc(0px + env(safe-area-inset-bottom, 0px)); z-index:950; padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background:var(--card); border-top:.5px solid var(--line-soft); box-shadow:0 -10px 30px rgba(0,0,0,.12); } .install-toast-body { max-width:560px; margin:0 auto; display:flex; flex-direction:column; gap:10px; } .install-toast-text { display:flex; flex-direction:column; gap:2px; } .install-toast-text b { font-size:var(--fs-t3); } .install-toast-text span { color:var(--mut); font-size:var(--fs-foot); } .install-toast-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .install-dont { display:flex; align-items:center; gap:6px; font-size:var(--fs-foot); color:var(--mut); cursor:pointer; } .install-dont input { width:16px; height:16px; accent-color:var(--acc); } .install-btns { display:flex; gap:8px; } .install-btns button { min-height:40px; padding:8px 16px; border:0; border-radius:999px; font-weight:600; cursor:pointer; } #install-close { background:var(--soft); color:var(--mut); } #install-go { background:var(--acc); color:#fff; } /* переключатель города в шапке: компактный селект в тон остальных контролов */ .city-sel { background:var(--soft); color:var(--fg); border:0; border-radius:999px; padding:5px 10px; font-size:var(--fs-sm); font-weight:600; min-height:34px; cursor:pointer; max-width:118px; } .city-sel:focus { outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent); } .city-sel option { background:var(--card); color:var(--fg); } /* иконки солнца/луны меняются местами в зависимости от активной темы */ #theme-btn .sun { display:none; } #theme-btn .moon { display:block; } :root[data-theme="dark"] #theme-btn .sun { display:block; } :root[data-theme="dark"] #theme-btn .moon { display:none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #theme-btn .sun { display:block; } :root:not([data-theme="light"]) #theme-btn .moon { display:none; } } /* 40px — общая высота элементов шапки; тап-зона добирается до 44 псевдоэлементом */ .icon-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; border:1px solid var(--line); background:var(--card); cursor:pointer; transition:all .15s var(--ease); } .icon-btn::before { content:""; position:absolute; inset:-2px; } .icon-btn:hover { background:var(--soft); color:var(--heart); } .icon-btn .cnt { position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:var(--heart); color:#fff; font-size:var(--fs-cap); font-weight:700; display:flex; align-items:center; justify-content:center; } /* ---------- фильтры ---------- */ .filters-wrap { max-width:var(--maxw); margin:var(--sp-4) auto 0; padding:0 var(--gutter); } .filters-toggle { display:none; align-items:center; gap:8px; width:100%; min-height:44px; padding:11px 14px; border:1px solid var(--line); border-radius:var(--rad-s); background:var(--card); cursor:pointer; font-weight:600; font-size:var(--fs-t3); } .filters-toggle .fcount { min-width:22px; height:20px; padding:0 6px; margin-left:6px; border-radius:999px; background:var(--acc); color:#fff; font-size:var(--fs-cap); display:flex; align-items:center; justify-content:center; } .filters-toggle .chev { margin-left:auto; flex:none; transition:transform .2s var(--ease); } .filters-toggle[aria-expanded="true"] { border-color:var(--acc); } .filters-toggle[aria-expanded="true"] .chev { transform:rotate(180deg); } /* Фильтры сгруппированы в три строки: поиск+район+«кто сдаёт»+вид, затем числа+комнаты+источник, затем тихие чекбоксы и сброс. Строки — сетка в 12 колонок с общими границами (4+4+2+2 и 2+2+2+2+4), поэтому поля обеих строк стоят столбцами и правые края совпадают. Прежний flex раздавал ширины «кто как влез», и карточка выглядела рваной. Пролёты подобраны по замеру самих контролов: «Комнаты: любые» требует 177px, «Все источники» с длинными именами каналов — до 223px. */ .filters { padding:var(--sp-3); background:var(--card); border:1px solid var(--card-line); border-radius:var(--rad); display:flex; flex-direction:column; gap:var(--sp-2); } .f-row { display:grid; grid-template-columns:repeat(12,1fr); gap:var(--sp-2); align-items:stretch; } .f-row > * { min-width:0; } /* иначе поля распирают колонки по min-content */ .f-main .f-search, .f-main .ms { grid-column:span 4; } .f-main select { grid-column:span 2; } .f-num > * { grid-column:span 2; } .f-num #f-source { grid-column:span 4; } /* имена источников длинные */ /* Подписи числовых полей: на десктопе роль играет плейсхолдер, лейблы скрыты и появляются только на телефоне, где «от USD» само по себе непонятно. */ .f-num-l { display:none; font-size:var(--fs-cap); color:var(--mut); font-weight:600; line-height:1.2; margin-bottom:4px; } .f-num-f { display:flex; flex-direction:column; justify-content:flex-end; min-width:0; } /* чекбоксы — фильтры другого типа (да/нет), поэтому отделены линией и живут потоком: ширина у них по тексту, в колонки сетки их загонять незачем */ .f-chks { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); border-top:0.5px solid var(--line-soft); padding-top:var(--sp-2); } .f-chks .reset-btn { margin-left:auto; } .f-chks #f-save { margin-left:auto; } .f-chks #f-save + .reset-btn { margin-left:0; } /* поиск — главное поле карточки: иконка отличает его от прочих полей */ .f-search { position:relative; display:flex; } .f-search-i { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--mut); pointer-events:none; } /* аватар вошедшего вместо иконки-человечка */ #login-btn img { width:100%; height:100%; border-radius:999px; object-fit:cover; } #login-btn.on { border-color:var(--acc); } .tg-login { display:flex; justify-content:center; padding:6px 0 2px; min-height:46px; } .auth-note { color:var(--mut); font-size:var(--fs-sub); line-height:1.5; } .auth-or { text-align:center; color:var(--mut); font-size:var(--fs-foot); margin:14px 0 10px; } .auth-email { margin-top:4px; } .auth-form { display:flex; flex-direction:column; gap:10px; margin-top:12px; } .auth-form label { display:flex; flex-direction:column; gap:4px; font-size:var(--fs-sub); color:var(--mut); } .auth-form input, .auth-form textarea { min-height:42px; padding:8px 12px; border:1px solid var(--line, #ddd); border-radius:var(--rad-s); background:var(--bg2, #fff); color:inherit; } .auth-form textarea { resize:vertical; min-height:90px; } .auth-form .btn { min-height:44px; border:0; border-radius:var(--rad-s); background:var(--acc, #2f6f4f); color:#fff; font-weight:600; cursor:pointer; } .auth-err { color:#c0392b; font-size:var(--fs-foot); line-height:1.4; } /* полная форма объявления (владелец, 2026-08-31) */ dialog.modal.wide { max-width:880px; } .wide .wbody { padding:20px 24px 24px; } .wide h3 { margin:0 0 14px; } .owner-form fieldset { border:0; padding:0; margin:0 0 18px; } .owner-form legend { font-weight:600; font-size:var(--fs-sub); color:var(--mut); margin-bottom:10px; padding:0; } .owner-form label { display:flex; flex-direction:column; gap:4px; font-size:var(--fs-sub); color:var(--mut); } .owner-form input:not([type=checkbox]), .owner-form select, .owner-form textarea { min-height:42px; padding:8px 12px; border:1px solid var(--line, #ddd); border-radius:var(--rad-s); background:var(--bg2, #fff); color:inherit; font-size:var(--fs-base); } .owner-form select { cursor:pointer; } .owner-form textarea { resize:vertical; min-height:80px; } .owner-form .frow { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .owner-form .btn { min-height:44px; border:0; border-radius:var(--rad-s); background:var(--acc, #2f6f4f); color:#fff; font-weight:600; cursor:pointer; padding:10px 22px; } .field-hint { font-size:var(--fs-foot); color:var(--mut); } .chip-row { display:flex; flex-wrap:wrap; gap:8px; } .chip-btn { border:1px solid var(--line, #ddd); background:var(--card, #fff); border-radius:999px; padding:7px 14px; font-size:var(--fs-sm); cursor:pointer; color:var(--txt); transition:all .15s var(--ease); } .chip-btn:hover { border-color:var(--acc); } .chip-btn[data-on] { border-color:var(--acc); color:var(--acc); background:color-mix(in srgb, var(--acc) 10%, transparent); } .check-chip { flex-direction:row !important; align-items:center; gap:8px; min-height:42px; padding:8px 12px; border:1px solid var(--line, #ddd); border-radius:var(--rad-s); cursor:pointer; font-weight:500; } .check-chip input { accent-color:var(--acc); } @media (max-width:560px) { .owner-form .frow { grid-template-columns:1fr; } } .auth-links { display:flex; justify-content:space-between; gap:8px; font-size:var(--fs-foot); } .auth-links a { color:var(--acc, #2f6f4f); text-decoration:none; } .add-listing { color:var(--acc, #2f6f4f); } .srch-row { display:flex; align-items:center; gap:8px; min-height:44px; padding:9px 2px; border-bottom:0.5px solid var(--line); } .srch-name { flex:1; font-size:var(--fs-call); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .srch-row .chk { white-space:nowrap; font-size:var(--fs-foot); } .srch-local { font-size:var(--fs-foot); color:var(--mut); white-space:nowrap; } .srch-local-wrap { margin-top:14px; } .srch-local-wrap h4 { font-size:var(--fs-sub); margin:0 0 4px; color:var(--mut); } .filters-toggle + .filters, .mobile-actions + .filters { margin-top:var(--sp-2); } .filters input:not([type=checkbox]), .filters select { padding:8px 11px; border:1px solid var(--line); border-radius:var(--rad-s); font-size:var(--fs-call); background:var(--soft); min-height:44px; } /* после общего правила: иначе его padding-шорткат затрёт отступ под иконку */ .filters .f-search input { width:100%; padding-left:38px; } .filters input:focus, .filters select:focus { border-color:var(--acc); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent); } /* чекбоксы — тихие: без подложки, пока не выбраны; выбранный — акцентная пилюля */ .filters .chk { display:flex; align-items:center; gap:7px; font-size:var(--fs-sub); white-space:nowrap; padding:7px 12px; border-radius:999px; cursor:pointer; user-select:none; min-height:44px; } .filters .chk:hover { background:var(--soft); } .filters .chk input { width:17px; height:17px; margin:0; accent-color:var(--acc); flex:none; cursor:pointer; } .filters .chk:has(input:checked) { background:var(--acc-soft); color:var(--acc); font-weight:600; } /* мультивыбор районов */ .ms { position:relative; } .ms-btn { display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; min-height:44px; padding:8px 11px; border:1px solid var(--line); border-radius:var(--rad-s); background:var(--soft); font-size:var(--fs-call); cursor:pointer; text-align:left; } .ms-btn > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ms-btn[aria-expanded="true"] { border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent); } .ms-pop { position:absolute; z-index:70; top:calc(100% + 6px); left:0; min-width:250px; max-width:320px; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-h); padding:8px; animation:msfade .25s var(--ease); } @keyframes msfade { from { opacity:0; transform:scale(.96); } } .ms-search { width:100%; padding:7px 10px; margin-bottom:6px; font-size:var(--fs-call); border:1px solid var(--line); border-radius:8px; background:var(--soft); } .ms-list { max-height:264px; overflow-y:auto; } .ms-row { display:flex; align-items:center; gap:9px; padding:10px 12px; min-height:44px; border-radius:8px; cursor:pointer; font-size:var(--fs-sub); } .ms-row:hover { background:var(--soft); } .ms-row input { width:16px; height:16px; margin:0; accent-color:var(--acc); flex:none; } .ms-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ms-n { color:var(--mut); font-size:var(--fs-foot); } .ms-empty { color:var(--mut); font-size:var(--fs-sm); padding:8px 6px; } .ms-clear { width:100%; margin-top:6px; min-height:44px; padding:10px 14px; border:1px solid var(--line); border-radius:8px; background:var(--soft); cursor:pointer; font-size:var(--fs-call); } .ms-clear:hover { background:var(--soft-h); } .reset-btn { min-height:44px; padding:10px 14px; border:1px solid var(--line); border-radius:var(--rad-s); background:var(--soft); cursor:pointer; font-size:var(--fs-call); transition:background .15s var(--ease); } .reset-btn:hover { background:var(--soft-h); } .reset-btn.ghost { visibility:hidden; pointer-events:none; } .saved-banner { max-width:var(--maxw); margin:var(--sp-3) auto 0; padding:10px var(--gutter); display:flex; align-items:center; gap:var(--sp-3); font-weight:600; } /* ---------- раскладка: список / список + карта ---------- */ .split { display:block; } .pane-list { } #grid { max-width:var(--maxw); margin:var(--sp-5) auto; padding:0 var(--gutter); display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:20px; } .results + #grid { margin-top:var(--sp-3); } /* отступ уже дала строка результатов */ /* в режиме карты контент занимает всю ширину, поэтому шапка и фильтры тоже тянутся до краёв: иначе они центрированы по 1240px и левый край заголовка не совпадает с краем карточек, а правый обрывается посреди карты. Поля задаются одной переменной — полосы не разъезжаются по отдельности */ body.map-mode { overflow:hidden; --gutter:16px; } /* скроллится колонка списка, не страница */ body.map-mode .hrow, body.map-mode .results, body.map-mode .filters-wrap, body.map-mode .saved-banner { max-width:none; } body.map-mode .split { display:flex; align-items:flex-start; gap:0; } body.map-mode .pane-list { width:46%; max-width:720px; height:calc(100dvh - var(--head-h)); overflow-y:auto; overscroll-behavior:contain; } body.map-mode #grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin:var(--sp-4) auto; } body.map-mode #map { flex:1; position:sticky; top:var(--head-h); height:calc(100dvh - var(--head-h)); } body.map-mode footer { display:none; } /* ---------- карточки ---------- */ .card { position:relative; background:var(--card); border:1px solid var(--card-line); border-radius:var(--rad); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow); transition:box-shadow .25s var(--ease); } .card:hover { box-shadow:0 12px 30px rgba(20,25,34,.12); } /* обводка рисуется вокруг всей карточки, хотя фокус — на кнопке-заголовке */ .card:has(.card-open:focus-visible) { outline:2px solid var(--acc); outline-offset:2px; } .card-open { display:block; width:100%; padding:0; border:0; background:none; text-align:left; font:inherit; color:inherit; font-weight:600; font-size:var(--fs-head); line-height:1.3; letter-spacing:-.02em; cursor:pointer; } .card-open:focus-visible { outline:none; } .card-open::after { content:""; position:absolute; inset:0; z-index:1; } .card .photo { position:relative; aspect-ratio:4/3; background:var(--soft); overflow:hidden; } .card .photo::after { content:""; position:absolute; inset:auto 0 0 0; height:44px; z-index:3; background:var(--grad-photo); pointer-events:none; } /* горизонтальная лента кадров: свайп и инерция — нативные, без обработчиков жестов */ .rail { position:relative; z-index:2; display:flex; height:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none; /* горизонтальный жест отдаём JS (ровно один кадр за свайп): нативная инерция со scroll-snap пролетает по два кадра; вертикальный скролл страницы цел */ touch-action:pan-y; } .rail::-webkit-scrollbar { display:none; } .rail.single { overflow:hidden; } .rail img { flex:0 0 100%; width:100%; height:100%; object-fit:cover; display:block; scroll-snap-align:center; scroll-snap-stop:always; } .noimg { display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-height:120px; color:var(--mut); font-size:34px; background:var(--soft); } /* карусель в карточке: стрелки поверх растянутой области .card-open::after */ .pnav { position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:36px; height:36px; border:0; border-radius:999px; cursor:pointer; background:rgba(255,255,255,.9); color:#141922; font-size:var(--fs-lg); line-height:1; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s var(--ease), transform .15s var(--ease); } .pnav::before { content:""; position:absolute; inset:-4px; } /* hit-area 44 */ .pnav.p { left:8px; } .pnav.n { right:8px; } .card:hover .pnav, .pnav:focus-visible { opacity:1; } .pnav:hover { transform:translateY(-50%) scale(1.1); } .dots { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); z-index:4; display:flex; gap:6px; pointer-events:none; } .dots i { width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,.6); box-shadow:0 1px 3px rgba(0,0,0,.55); transition:transform .15s var(--ease), background .15s var(--ease); } .dots i.on { background:#fff; transform:scale(1.25); } .pcount { position:absolute; top:10px; left:10px; z-index:4; font-size:var(--fs-cap); color:#fff; background:var(--scrim); padding:2px 8px; border-radius:999px; opacity:0; transition:opacity .15s var(--ease); } .card:hover .pcount { opacity:1; } @media (hover:none) { .pnav { display:none; } } /* на тач листаем свайпом */ .heart { position:absolute; top:8px; right:8px; z-index:5; width:44px; height:44px; border-radius:999px; border:0; background:rgba(255,255,255,.93); color:#3a4452; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .15s var(--ease), color .15s var(--ease); } .heart:hover { transform:scale(1.12); color:var(--heart); } .heart.on { color:var(--heart); } .heart.on svg { fill:var(--heart); } /* «поделиться» в карточке — рядом с сердечком, поверх фото */ .photo .share { position:absolute; top:8px; right:60px; z-index:5; width:44px; height:44px; border-radius:999px; background:rgba(255,255,255,.93); color:#3a4452; justify-content:center; padding:0; margin:0; transition:transform .15s var(--ease), color .15s var(--ease), background .15s var(--ease); } .photo .share:hover { background:var(--soft); color:var(--txt); transform:scale(1.12); } .badges { position:absolute; bottom:10px; left:10px; display:flex; gap:5px; flex-wrap:wrap; max-width:calc(60% - 10px); z-index:4; } .badges.static { position:static; margin:2px 0; } /* нейтральный бейдж + единственный семантический (.b-direct) */ .badge { font-size:var(--fs-cap); font-weight:600; padding:4px 10px; border-radius:999px; color:#fff; background:rgba(20,25,34,.66); } .b-direct { background:var(--ok); } /* остальные типы бейджей — один нейтральный цвет (классы сохраняются для JS) */ .b-agency, .b-furn, .b-lav, .b-pets, .b-kids, .b-type { background:rgba(20,25,34,.66); color:#fff; } .badges.static .badge { background:var(--soft); color:var(--mut); } .badges.static .b-direct { background:var(--ok-soft); color:var(--ok); } .card .body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; } .price { font-size:var(--fs-t3); font-weight:600; letter-spacing:-.015em; display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; } .price.big { font-size:var(--fs-t2); } .price.none { font-size:var(--fs-call); font-weight:500; color:var(--mut); } .price .per { font-size:var(--fs-foot); color:var(--mut); font-weight:500; } .price .ars { font-size:var(--fs-foot); color:var(--mut); font-weight:400; } .exp { font-size:var(--fs-foot); color:var(--mut); } .addr { color:var(--mut); font-size:var(--fs-sub); line-height:1.4; } /* пин-ссылка в карты: над растянутым ::after заголовка (.card-open), как .maps/.report; align-self не даёт ссылке занять всю ширину карточки */ a.addr { position:relative; z-index:2; align-self:flex-start; text-decoration:none; border-radius:8px; padding:2px 6px; margin:-2px -6px; } a.addr:hover { background:var(--soft); color:var(--txt); } .attrs { display:flex; flex-wrap:wrap; gap:6px; } .attr { background:var(--soft); border-radius:999px; padding:5px 12px; font-size:var(--fs-foot); color:var(--mut); } .desc { color:var(--mut); font-size:var(--fs-sub); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .contacts { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; } .contacts a, .contacts span.c { text-decoration:none; font-size:var(--fs-sub); padding:7px 14px; border-radius:999px; background:var(--acc-soft); color:var(--acc); } .contacts a:hover { filter:brightness(.97); } .contacts .wa { background:var(--ok-soft); color:var(--ok); } /* в мете три элемента (источник + даты публикации и сбора): при space-between перенесённая дата прижималась к левому краю — источник держим слева, даты собираем справа, перенос выглядит намеренным. Тонкий разделитель сверху закрывает карточку, как подвал, и даёт глазу опору между описанием и метой. */ .meta { margin-top:auto; padding-top:12px; border-top:.5px solid var(--line-soft); display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; column-gap:8px; row-gap:6px; font-size:var(--fs-foot); color:var(--mut); } .meta .src { margin-right:auto; } .meta .src, .mmeta .src { background:var(--soft); padding:4px 10px; border-radius:999px; } /* «уже сдано» — тихая кнопка-жалоба: заметна в мете, но не спорит с датами. position+z-index поднимают её над растянутым ::after заголовка (.card-open), иначе клик уходил бы в открытие карточки */ .report { position:relative; z-index:2; border:0; background:transparent; padding:2px 6px; margin:-2px -6px; border-radius:8px; color:var(--mut); font-size:var(--fs-foot); cursor:pointer; } .report:hover { background:var(--soft); color:var(--txt); } .report:disabled { opacity:.5; cursor:default; } .report.done { color:var(--ok); } .report-status { color:var(--mut); font-size:var(--fs-foot); } /* «открыть в картах» — тихая ссылка в мете, над растянутым ::after заголовка */ .maps { position:relative; z-index:2; text-decoration:none; color:var(--mut); font-size:var(--fs-sub); padding:2px 6px; margin:-2px -6px; border-radius:8px; line-height:1; } .maps:hover { background:var(--soft); color:var(--txt); } /* «поделиться»: тихая иконка в мете карточки и в подвале модалки */ .share { position:relative; z-index:2; display:inline-flex; align-items:center; border:0; background:transparent; color:var(--mut); cursor:pointer; padding:4px 7px; margin:-2px -5px; border-radius:8px; line-height:1; } .share:hover { background:var(--soft); color:var(--txt); } .mmeta .share { margin:-4px -6px; } /* модалка «поделиться»: мессенджеры, почта, копирование пермалинка */ .sh-row { display:flex; } .sh-row + .sh-row { margin-top:8px; } .sh { flex:1; text-align:center; padding:10px 14px; border-radius:999px; background:var(--soft); color:var(--txt); text-decoration:none; font-weight:600; font-size:var(--fs-sub); } .sh.wa { background:var(--ok-soft); color:var(--ok); } .sh.tg { background:var(--acc-soft); color:var(--acc); } .sh:hover { filter:brightness(.97); } .sh-copy { display:flex; gap:8px; margin-top:14px; } .sh-copy input { flex:1; min-width:0; min-height:44px; padding:9px 12px; border:1px solid var(--line); border-radius:var(--rad-s); font-size:var(--fs-foot); background:var(--soft); color:var(--mut); } .sh-copy button { min-height:44px; padding:9px 16px; border:0; white-space:nowrap; border-radius:var(--rad-s); background:var(--acc); color:#fff; font-weight:600; font-size:var(--fs-call); cursor:pointer; } .sh-copy button.done { background:var(--ok); } /* миникарта внизу объявления: интерактивная (драг/колесо/пинч), слои — схема/спутник/гибрид, во внешние карты ведёт бейдж-ссылка */ .minimap { position:relative; display:block; height:270px; flex:none; border-radius:var(--rad-s); overflow:hidden; border:.5px solid var(--line-soft); } /* растяжение карты за нижний хендл (запрос 2026-08-31) */ .mm-resize { position:absolute; left:0; right:0; bottom:0; height:16px; border:0; padding:0; background:transparent; cursor:ns-resize; touch-action:none; z-index:650; } .mm-resize::before { content:""; position:absolute; left:50%; bottom:4px; width:44px; height:4px; transform:translateX(-50%); border-radius:999px; background:var(--txt); opacity:.25; transition:opacity .15s; } .minimap:hover .mm-resize::before, .mm-resize:focus-visible::before { opacity:.55; } body.mm-resizing { user-select:none; -webkit-user-select:none; cursor:ns-resize; } body.mm-resizing .minimap .leaflet-control-container { pointer-events:none; } .mm-canvas { position:absolute; inset:0; background:var(--soft); } .mm-canvas.leaflet-container { background:var(--soft); } /* OSM-подложка пёстрая (зелёные парки, синяя вода, цветные дороги) — слегка обесцветить и высветлить, чтобы карта читалась спокойнее и бледнее. */ .leaflet-tile-pane { filter:saturate(.6) brightness(1.07) contrast(.96); } .mm-dot { display:block; width:10px; height:10px; border-radius:50%; background:var(--acc); border:3px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,.35); } /* оверлеи поверх карты: панель слоёв, бейдж-ссылка, подпись источника. z-index выше листлетовских (панели до 700, контролы 800) */ .mm-layers { position:absolute; top:8px; left:8px; z-index:1100; display:flex; gap:4px; } .mm-layers button { border:0; padding:4px 10px; border-radius:999px; background:var(--card); color:var(--mut); font-size:var(--fs-cap); font-weight:600; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.18); } .mm-layers button.on { background:var(--acc); color:#fff; } .mm-badge { position:absolute; left:10px; bottom:10px; z-index:1100; padding:5px 12px; border-radius:999px; background:var(--card); color:var(--txt); font-size:var(--fs-foot); font-weight:600; text-decoration:none; box-shadow:0 1px 4px rgba(0,0,0,.18); } .mm-badge:hover { background:var(--soft); } .mm-attribution { position:absolute; right:8px; bottom:5px; z-index:1100; font-size:9px; color:var(--mut); opacity:.75; pointer-events:none; } /* компактный зум-контроль в тон карточке */ .minimap .leaflet-control-zoom { border:0; box-shadow:0 1px 4px rgba(0,0,0,.18); border-radius:10px; overflow:hidden; } .minimap .leaflet-control-zoom a { width:26px; height:26px; line-height:26px; color:var(--txt); background:var(--card); font-size:15px; } .minimap .leaflet-control-zoom a:hover { background:var(--soft); color:var(--txt); } /* поля заезда: депозит, комиссия, срок, коммуналка */ .movein { display:flex; flex-wrap:wrap; gap:6px; } .movein .chip { font-size:var(--fs-foot); color:var(--mut); background:var(--soft); padding:5px 12px; border-radius:999px; } /* удобства: тихий ряд эмодзи на карточке, подписанные чипсы — в модалке */ .amen { display:flex; flex-wrap:wrap; gap:9px; font-size:var(--fs-sub); letter-spacing:.04em; } .amen .amen-more { color:var(--mut); font-size:var(--fs-foot); align-self:center; } /* стоимость заезда: первый месяц + депозит + комиссия */ .cost { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; margin-top:8px; padding:10px 12px; border-radius:var(--rad-s); background:var(--acc-soft); font-size:var(--fs-sub); } .cost b { font-size:var(--fs-call); color:var(--acc); } .cost-parts { color:var(--mut); } /* оценённая составляющая заезда (источник промолчал): тильда + пунктир */ .cost .assumed { border-bottom:1px dashed currentColor; cursor:help; } .cost-note { flex-basis:100%; font-size:var(--fs-foot); color:var(--mut); } .cost.ok { background:var(--ok-soft); } .cost.ok b { color:var(--ok); } /* провенанс: «также на Zonaprop ↗» */ .prov { color:var(--acc); text-decoration:none; font-weight:600; } /* ближайший парк/площадка на карточке */ .poi { position:relative; z-index:2; display:inline-flex; align-items:center; gap:4px; margin-top:2px; font-size:var(--fs-foot); color:var(--mut); text-decoration:none; border-radius:8px; padding:2px 6px; margin-left:-6px; } .poi:hover { background:var(--soft); color:var(--acc); } .prov:hover { text-decoration:underline; } /* ---------- анализ цены (бета; спека tenant-price-analysis-spec §7) ---------- Панель-«карточка» внутри модалки: hairline-разделители вместо рамок-перегрузок, единственный акцент --acc на маркере цены и активных пилюлях, радиус панели var(--rad) 16, тёмная тема живёт в существующих переменных. */ .analysis { margin-top:4px; padding:0 14px; background:var(--card); border:.5px solid var(--line-soft); border-radius:var(--rad); } .analysis > summary { display:flex; align-items:center; gap:8px; min-height:48px; padding:8px 0; cursor:pointer; font-weight:600; font-size:var(--fs-head); line-height:1.3; letter-spacing:-.02em; list-style:none; user-select:none; overflow-wrap:anywhere; } .analysis > summary::-webkit-details-marker { display:none; } .analysis > summary::marker { content:""; } /* свой шеврон вместо системного маркера */ .an-chevron { flex:none; width:12px; color:var(--mut); font-size:12px; transition:transform .2s var(--ease); } .analysis[open] .an-chevron { transform:rotate(90deg); } .an-beta { margin-left:auto; flex:none; font-size:var(--fs-cap); font-weight:600; color:var(--mut); background:var(--soft); padding:3px 10px; border-radius:999px; } .an-body { display:flex; flex-direction:column; gap:10px; padding:12px 0 16px; border-top:.5px solid var(--line-soft); } .an-body .sk-line { margin:8px 0; } /* скелетон без карточных полей .sk */ .an-verdict { font-size:var(--fs-head); font-weight:600; line-height:1.3; letter-spacing:-.02em; overflow-wrap:anywhere; } .an-verdict.below { color:var(--ok); } .an-typical { font-size:var(--fs-sub); color:var(--mut); line-height:1.4; overflow-wrap:anywhere; } .an-note { font-size:var(--fs-foot); color:var(--mut); line-height:1.45; overflow-wrap:anywhere; } /* гистограмма ≈64px: столбцы --soft-h, маркер и стрелка края — --acc */ .an-chart svg { display:block; width:100%; height:64px; } .an-bar { fill:var(--soft-h); } .an-mk { stroke:var(--acc); stroke-width:2; } .an-arrow { fill:var(--acc); } .an-axis { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:var(--fs-cap); font-weight:500; color:var(--mut); overflow:hidden; white-space:nowrap; } .an-axis .an-marker-cap { color:var(--acc); } .an-sub { margin:2px 0 0; font-size:var(--fs-head); font-weight:600; line-height:1.3; letter-spacing:-.02em; } /* похожие: inset-группированные строки на всю ширину панели */ .an-sims { display:flex; flex-direction:column; } .an-sim { display:flex; align-items:center; gap:10px; min-height:56px; padding:6px 8px; margin:0 -8px; width:calc(100% + 16px); border:0; background:none; border-radius:12px; cursor:pointer; text-align:left; font:inherit; color:inherit; } .an-sim + .an-sim { border-top:.5px solid var(--line-soft); } .an-sim:hover { background:var(--soft); } .an-thumb { flex:none; width:48px; height:48px; border-radius:8px; object-fit:cover; background:var(--soft-h); } .an-sim-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .an-sim-title { font-size:var(--fs-foot); font-weight:600; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .an-sim-meta { font-size:var(--fs-cap); color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .an-sim-price { flex:none; font-size:var(--fs-sub); font-weight:600; } .an-fail { display:flex; align-items:center; justify-content:space-between; gap:12px; } .an-fail span { font-size:var(--fs-sub); color:var(--mut); } .an-fail button { flex:none; min-height:44px; padding:9px 16px; border:1px solid var(--line); border-radius:999px; background:var(--soft); cursor:pointer; font-size:var(--fs-call); font-weight:600; } .an-fail button:hover { background:var(--soft-h); } /* пилюли голоса: фон --soft (спека §7.2), тап-зона ≥44px */ .an-votes { display:flex; gap:8px; flex-wrap:wrap; } .an-votes button { flex:1; min-width:96px; min-height:44px; padding:10px 14px; border:0; border-radius:999px; background:var(--soft); color:var(--txt); font-size:var(--fs-call); font-weight:600; cursor:pointer; white-space:nowrap; transition:background .15s var(--ease), color .15s var(--ease); } .an-votes button:hover { background:var(--acc-soft); color:var(--acc); } .an-votes button:disabled { opacity:.55; cursor:default; } .an-thanks { align-self:center; color:var(--ok); font-weight:600; font-size:var(--fs-call); } /* открытый вишлист: компактная строка объявления с кнопкой удаления */ .wl-item { display:flex; gap:14px; padding:12px; align-items:flex-start; } .wl-thumb { flex:0 0 128px; aspect-ratio:4/3; border-radius:var(--rad-s); overflow:hidden; background:var(--soft); } .wl-thumb img { width:100%; height:100%; object-fit:cover; display:block; } .wl-thumb .noimg { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:var(--fs-lg); } .wl-body { display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; } .wl-body .card-open { text-align:left; } .wl-foot { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:2px; } .wl-foot .price { margin:0; } .wl-foot .exp { margin:0; } .wl-remove { position:relative; z-index:2; margin-left:auto; border:0; background:transparent; color:var(--mut); font-size:var(--fs-foot); padding:6px 10px; border-radius:999px; cursor:pointer; } .wl-remove:hover { background:var(--soft); color:var(--heart); } /* ---------- скелетоны и состояния ---------- */ .sk-tail { display:contents; } /* скелетоны догрузки — прямые дети grid-сетки */ .sk { background:var(--card); border:1px solid var(--card-line); border-radius:var(--rad); overflow:hidden; padding-bottom:10px; } .sk .sk-img { aspect-ratio:4/3; } .sk .sk-line { height:13px; margin:12px 16px; border-radius:6px; } .sk .sk-line.w60 { width:60%; } .sk .sk-line.w40 { width:40%; } .sk-img, .sk-line { background:linear-gradient(90deg, var(--soft) 25%, var(--bg) 50%, var(--soft) 75%); background-size:200% 100%; animation:shimmer 1.3s infinite; } @keyframes shimmer { to { background-position:-200% 0; } } @media (prefers-reduced-motion: reduce) { .sk-img, .sk-line { animation:none; } *, *::before, *::after { transition:none !important; animation-duration:.01ms !important; } } .more-wrap { text-align:center; padding:2px 0 28px; } .shown { color:var(--mut); font-size:var(--fs-foot); margin-bottom:9px; } #more { min-height:44px; padding:11px 30px; border:1px solid var(--line); border-radius:999px; background:var(--card); cursor:pointer; font-size:var(--fs-call); font-weight:600; } #more[aria-busy="true"] { color:var(--mut); pointer-events:none; } #more[aria-busy="true"]::before { content:""; display:inline-block; width:13px; height:13px; margin-right:8px; vertical-align:-2px; border:2px solid var(--line); border-top-color:var(--acc); border-radius:999px; animation:spin .7s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } .empty { max-width:1240px; margin:40px auto; text-align:center; color:var(--mut); display:flex; flex-direction:column; align-items:center; gap:12px; padding:0 20px; } footer { max-width:1240px; margin:0 auto; color:var(--mut); font-size:var(--fs-foot); line-height:1.6; padding:0 20px calc(30px + constant(safe-area-inset-bottom)); padding:0 20px calc(30px + env(safe-area-inset-bottom)); } /* «Как это работает» — тихая ссылка-кнопка в подвале, повторное открытие онбординга */ .footer-link { display:inline; border:0; background:none; padding:4px 8px; margin:-4px -8px; border-radius:8px; cursor:pointer; color:var(--acc); font-size:inherit; text-decoration:underline; text-underline-offset:2px; } .footer-link:hover { background:var(--soft); } /* ---------- карта ---------- */ #map { height:calc(100dvh - var(--head-h)); min-height:400px; z-index:1; background:var(--soft); } .bubble { position:relative; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-size:var(--fs-sm); font-weight:700; color:var(--txt); white-space:nowrap; cursor:pointer; display:inline-flex; gap:5px; align-items:baseline; transform:translate(-50%,-50%); transition:transform .15s var(--ease), background .15s var(--ease); } /* hit-зона баббла ≥44px: расширитель-псевдоэлемент, сам визуал не растёт. Клики в расширенной области всплывают на .leaflet-marker-icon и открывают объявление — промахи пальцем больше не уходят в полигон района (который молча менял фильтр) и не зависят от того, как Leaflet измерил иконку */ .bubble::after { content:""; position:absolute; inset:-12px; border-radius:inherit; } .bubble:active { transform:translate(-50%,-50%) scale(.94); } .bubble:hover { transform:translate(-50%,-50%) scale(1.12); background:var(--acc); color:#fff; border-color:var(--acc); z-index:1000; } .bubble:hover .r { color:#fff; } .bubble .r { color:var(--mut); font-weight:500; font-size:var(--fs-xs); } .bubble.own { border-color:var(--ok); } .bubble.agg { background:var(--acc); color:#fff; border-color:var(--acc); font-size:var(--fs-sm); padding:6px 13px; } .bubble.agg .r { color:rgba(255,255,255,.85); } /* пульс агрегата в момент клика — отклик до того, как карта начнёт приближать */ @keyframes bubbleGo { 0% { transform:translate(-50%,-50%) scale(1); } 40% { transform:translate(-50%,-50%) scale(1.28); } 100% { transform:translate(-50%,-50%) scale(1); } } .bubble.go { animation:bubbleGo .45s var(--ease); } /* страховка: иконка маркера кликабельна всегда, даже если класс leaflet-interactive потеряется или хит-бокс будет измерен неверно */ .leaflet-marker-icon.leaflet-interactive { pointer-events:auto; } .leaflet-div-icon { background:transparent; border:0; } path.barrio.hit { cursor:pointer; } /* глобальный :focus-visible рисовал прямоугольник по bounding box полигона — для района понятнее подсветить саму границу */ .leaflet-interactive:focus, .leaflet-interactive:focus-visible { outline:none; } path.barrio:focus-visible { stroke-width:3; } .leaflet-tooltip { font-size:var(--fs-sm); font-weight:600; } /* Единый блок управления картой: «+» (мульти-режим) и кнопка слоёв в одной колонке; контейнер плавает над картой. */ .map-controls { position:absolute; top:12px; right:12px; z-index:501; display:flex; flex-direction:column; border-radius:11px; border:1px solid var(--line); background:var(--card); box-shadow:0 2px 10px rgba(0,0,0,.16); } .map-controls .map-multi { display:none; width:44px; height:44px; align-items:center; justify-content:center; border:0; border-bottom:1px solid var(--line-soft); background:transparent; color:var(--txt); cursor:pointer; } .map-controls .map-multi.on { background:var(--acc); color:#fff; } .map-layers { position:relative; } .map-layers-btn { display:flex; width:44px; height:44px; align-items:center; justify-content:center; border:0; background:transparent; color:var(--txt); cursor:pointer; } .map-layers-menu { position:absolute; top:0; right:calc(100% + 6px); min-width:132px; padding:5px; background:var(--card); border:.5px solid var(--line-soft); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.18); display:flex; flex-direction:column; gap:2px; } .map-layers-menu button { display:flex; align-items:center; gap:7px; width:100%; min-height:38px; padding:7px 10px; border:0; border-radius:9px; background:transparent; color:var(--txt); font-size:var(--fs-sub); text-align:left; cursor:pointer; white-space:nowrap; } .map-layers-menu button:hover { background:var(--soft); } .map-layers-menu button.active { background:var(--acc); color:#fff; } .map-note { position:absolute; left:50%; transform:translateX(-50%); bottom:calc(16px + constant(safe-area-inset-bottom)); bottom:calc(16px + env(safe-area-inset-bottom)); z-index:500; background:var(--card); color:var(--mut); border:1px solid var(--line); border-radius:999px; padding:7px 16px; font-size:var(--fs-sm); white-space:nowrap; max-width:92%; overflow:hidden; text-overflow:ellipsis; } .map-fallback { display:flex; align-items:center; justify-content:center; height:100%; color:var(--mut); } /* ---------- модалки (нативный : focus trap, inert фона, Esc) ---------- */ dialog.modal { border:0; padding:0; background:var(--elev); color:var(--txt); border-radius:20px; max-width:700px; width:calc(100% - 40px); max-height:90dvh; overflow-y:auto; position:relative; box-shadow:var(--shadow-h); overscroll-behavior:contain; /* iOS: скролл не «протекает» на страницу за модалкой */ animation:pop .25s cubic-bezier(.32,.72,0,1); } dialog.modal::backdrop { background:var(--scrim); animation:fadein .2s; } @keyframes fadein { from { opacity:0; } } @keyframes pop { from { transform:scale(.97); opacity:0; } } .modal .x { position:absolute; top:12px; right:12px; z-index:3; width:44px; height:44px; border-radius:999px; border:0; background:rgba(255,255,255,.94); color:#141922; cursor:pointer; font-size:var(--fs-base); } .gal { position:relative; background:#000; } .gal img { width:100%; height:min(430px,52dvh); object-fit:contain; display:block; } .gal-caption, .pv-caption { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(transparent, rgba(0,0,0,.72)); color:#fff; padding:26px 16px 10px; font-size:var(--fs-sub); text-align:center; pointer-events:none; z-index:2; } .photo-row { display:grid; grid-template-columns:1.4fr 1fr auto; gap:8px; margin-bottom:8px; align-items:center; } .photo-batch { margin-top:10px; } .photo-batch summary { cursor:pointer; font-size:var(--fs-sm); color:var(--acc); padding:6px 0; } .photo-batch textarea { width:100%; margin:8px 0; font-family:monospace; font-size:var(--fs-sm); } .photo-del { border:0; background:var(--soft); color:var(--mut); width:38px; height:38px; border-radius:var(--rad-s); cursor:pointer; font-size:var(--fs-base); } @media (max-width:560px) { .photo-row { grid-template-columns:1fr; } } /* большая фотография — реальная кнопка: фокус и клавиатура работают, клик открывает полноэкранный просмотр */ .gal-main { display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; } .gal-main img { display:block; } .gal-main:focus-visible { outline-offset:-3px; } /* лента миниатюр под галереей */ .thumbs { display:flex; gap:6px; padding:8px 10px; overflow-x:auto; background:#000; scrollbar-width:thin; } .thumbs .th { flex:none; width:56px; height:44px; padding:0; border:2px solid transparent; border-radius:8px; overflow:hidden; background:none; cursor:pointer; opacity:.55; transition:opacity .15s var(--ease), border-color .15s var(--ease); } .thumbs .th img { width:100%; height:100%; object-fit:cover; display:block; } .thumbs .th:hover { opacity:.85; } .thumbs .th.on { opacity:1; border-color:#fff; } .gal.empty, .gal .noimg { display:flex; align-items:center; justify-content:center; height:180px; color:var(--mut); font-size:var(--fs-base); background:var(--soft); } .gal .nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:999px; border:0; background:rgba(255,255,255,.93); color:#141922; cursor:pointer; font-size:var(--fs-xl); line-height:1; } .gal .nav.p { left:10px; } .gal .nav.n { right:10px; } .gal .gcount { position:absolute; bottom:10px; right:12px; color:#fff; background:var(--scrim); font-size:var(--fs-cap); padding:3px 10px; border-radius:999px; } .mbody { padding:22px 24px 28px; display:flex; flex-direction:column; gap:12px; } /* цена — главный акцент модалки, заметно крупнее заголовка */ .mbody .price.big { font-size:var(--fs-2xl); letter-spacing:-.02em; } .mtitle { font-size:var(--fs-t2); font-weight:600; line-height:1.25; letter-spacing:-.01em; } .mdesc { font-size:var(--fs-md); color:var(--txt); white-space:pre-line; line-height:1.55; border-top:.5px solid var(--line-soft); padding-top:14px; } .mrow { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .msave { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:10px 18px; border-radius:999px; border:1px solid var(--line); background:var(--card); cursor:pointer; font-weight:600; font-size:var(--fs-call); transition:all .15s var(--ease); } .msave:hover { border-color:var(--heart); color:var(--heart); } .msave.on { color:var(--heart); border-color:var(--heart); } .msave.on svg { fill:var(--heart); } .mmeta { font-size:var(--fs-foot); color:var(--mut); display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:8px; padding-top:14px; border-top:0.5px solid var(--line); } .mmeta a { color:var(--acc); text-decoration:none; font-weight:600; } /* в модалке «уже сдано» — тихая пилюля по центру, а не растянутая кнопка */ .mbody .report { align-self:center; padding:8px 16px; border-radius:999px; background:var(--soft); } /* контакты в модалке чуть крупнее, чем на карточке */ .mbody .contacts a, .mbody .contacts span.c { padding:8px 16px; font-weight:600; } /* ---------- полноэкранный просмотр фото (лайтбокс поверх модалки) ---------- */ dialog.modal.photo { max-width:none; width:100vw; max-height:none; height:100dvh; border-radius:0; background:#000; color:#fff; box-shadow:none; overflow:hidden; animation:pvfade .2s var(--ease); } dialog.modal.photo::backdrop { background:rgba(0,0,0,.9); } @keyframes pvfade { from { opacity:0; } } .pv { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } .pv-img { width:auto; height:auto; max-width:calc(100% - 110px); max-height:calc(100% - 130px); object-fit:contain; display:block; user-select:none; -webkit-user-drag:none; } .pv-count { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); color:#fff; background:rgba(255,255,255,.16); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:var(--fs-sm); font-weight:600; padding:6px 14px; border-radius:999px; white-space:nowrap; } dialog.modal.photo .nav { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:999px; border:0; cursor:pointer; background:rgba(255,255,255,.16); color:#fff; font-size:26px; line-height:1; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:background .15s var(--ease), transform .15s var(--ease); } dialog.modal.photo .nav:hover { background:rgba(255,255,255,.3); } dialog.modal.photo .nav:active { transform:translateY(-50%) scale(.92); } dialog.modal.photo .nav.p { left:16px; } dialog.modal.photo .nav.n { right:16px; } dialog.modal.photo .x { background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } dialog.modal.photo .x:hover { background:rgba(255,255,255,.3); } /* вишлисты */ dialog.wl { max-width:440px; } .wl .wbody { padding:20px 22px 22px; } .wl h3 { margin:0 0 10px; font-size:var(--fs-t2); } .wl-row { display:flex; align-items:center; gap:8px; min-height:44px; padding:9px 2px; border-bottom:0.5px solid var(--line); } .wl-row label { display:flex; align-items:center; gap:10px; flex:1; cursor:pointer; font-size:var(--fs-call); min-width:0; } .wl-row input[type=checkbox] { width:17px; height:17px; accent-color:var(--heart); } .wl-name { flex:1; font-size:var(--fs-call); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .wl-n { color:var(--mut); font-size:var(--fs-foot); white-space:nowrap; } .wl-row .mini { border:0; background:transparent; cursor:pointer; color:var(--mut); width:44px; height:44px; padding:10px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; } .wl-row .mini:hover { background:var(--soft); color:var(--txt); } .wl-row [data-del]:hover { color:var(--heart); } .wl-new { display:flex; gap:8px; margin-top:14px; } .wl-new input { flex:1; min-width:0; min-height:44px; padding:9px 12px; border:1px solid var(--line); border-radius:var(--rad-s); font-size:var(--fs-call); background:var(--soft); } .wl-new button { min-height:44px; padding:9px 16px; border:0; border-radius:var(--rad-s); background:var(--acc); color:#fff; font-weight:600; font-size:var(--fs-call); cursor:pointer; white-space:nowrap; } .wl-empty { color:var(--mut); font-size:var(--fs-sm); padding:10px 0; } .wl-show { position:relative; min-height:32px; font-size:var(--fs-foot); color:var(--acc); background:var(--acc-soft); border:1px solid var(--acc-line); border-radius:999px; padding:4px 11px; cursor:pointer; white-space:nowrap; } .wl-show::before { content:""; position:absolute; inset:-6px; } /* 32 + 12 = hit-area 44 */ /* ---------- онбординг двух ролей ---------- Панель --card с радиусом var(--rad) 16 и hairlines вместо рамок-перегрузок, один акцент --acc (точки списка, hover карточек роли, CTA), тёмная тема через существующие переменные (токены ios-refresh-spec). */ dialog.modal.onb { max-width:440px; background:var(--card); border-radius:var(--rad); } .onb-body { padding:26px 22px 24px; display:flex; flex-direction:column; gap:16px; } .onb-title { margin:0; font-size:var(--fs-t2); font-weight:600; line-height:1.25; letter-spacing:-.01em; } .onb-sub { margin:6px 0 0; color:var(--mut); font-size:var(--fs-sub); line-height:1.45; } /* карточки-кнопки выбора роли: на телефоне вертикально, на широком — в ряд */ .onb-roles { display:grid; grid-template-columns:1fr; gap:10px; } @media (min-width:560px) { .onb-roles { grid-template-columns:1fr 1fr; } } .onb-role { display:flex; align-items:center; justify-content:center; text-align:center; min-height:64px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--rad); background:var(--card); cursor:pointer; font-size:var(--fs-call); font-weight:600; transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .onb-role:hover { background:var(--acc-soft); color:var(--acc); border-color:var(--acc-line); } .onb-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; } .onb-list li { position:relative; padding-left:20px; font-size:var(--fs-sub); line-height:1.45; overflow-wrap:anywhere; } /* маркер — точка единственного акцента, без радуги */ .onb-list li::before { content:""; position:absolute; left:2px; top:.55em; width:7px; height:7px; border-radius:999px; background:var(--acc); } .onb-cta { margin-top:4px; min-height:48px; padding:12px 20px; border:0; border-radius:999px; background:var(--acc); color:#fff; cursor:pointer; font-size:var(--fs-call); font-weight:600; transition:filter .15s var(--ease); } .onb-cta:hover { filter:brightness(.94); } /* модалка «вход скоро»: та же панель, что у входа, но без виджета */ .onb-soon .auth-note { margin-top:2px; } /* ---------- планшет ---------- */ @media (max-width:1000px) { body.map-mode .pane-list { width:40%; } body.map-mode #grid { grid-template-columns:1fr; } } /* Фильтры на промежуточных ширинах. Ниже ~1180px шесть полей в строку уже не помещаются без обрезки подписей (замер: селектам нужно 153–223px), поэтому сетка складывается вдвое — 6 колонок: поля первой строки идут парами, числовые по три. На телефоне остаётся два столбца. */ @media (max-width:1180px) { .f-row { grid-template-columns:repeat(6,1fr); } .f-main .f-search, .f-main .ms, .f-main select { grid-column:span 3; } .f-num > * { grid-column:span 2; } .f-num #f-source { grid-column:span 4; } /* добирает строку до края */ } @media (max-width:720px) { .f-row { grid-template-columns:1fr 1fr; } .f-row > * { grid-column:span 1; } /* сбросить пролёты крупных сеток */ .f-main .f-search, .f-main .ms { grid-column:1 / -1; } /* .f-main select и .f-num #f-source НЕ покрыты сбросом `.f-row > *` выше: их правила (span 3 / span 4) из брейкпоинта ≤1180 имеют более высокую специфичность, и на 2-колоночной сетке их пролёты создают неявные 0px-колонки — из-за этого «Цена от»/«Цена до» схлопывались до ~24px, а «Кто сдаёт»/«Вид» растягивались на всю строку. Принудительно возвращаем селекты в пары, источник — на всю строку. */ .f-main select { grid-column:span 1; } .f-num #f-source { grid-column:1 / -1; } /* Выровнять контролы по нижнему краю ряда: поля с подписями выше инпута (62px) соседствуют с «Комнатами»/«Источником» без подписей (44px). Без выравнивания кнопка «Комнаты» встаёт на верх ячейки, а подписанные инпуты — снизу, и ряд съезжает на ~18px. */ .f-main, .f-num { align-items:end; } /* Чекбоксы уже отделены линией; убрать дублирующий padding-top, иначе гэп перед блоком чекбоксов вдвое больше остальных (8 + 8 = 16px). */ .f-chks { padding-top:0; } .filters input:not([type=checkbox]), .filters select { width:100%; max-width:none; } .ms-pop { left:0; right:0; min-width:0; max-width:none; } /* подписи числовых полей видны, дублирующий их плейсхолдер прячем */ .f-num-l { display:block; } #f-min::placeholder, #f-max::placeholder, #f-area::placeholder { color:transparent; } } /* ---------- мобильные ---------- */ @media (max-width:720px) { :root { --head-h:112px; --gutter:16px; } header { padding:calc(var(--sp-2) + constant(safe-area-inset-top)) var(--gutter) var(--sp-2); padding:calc(var(--sp-2) + env(safe-area-inset-top)) var(--gutter) var(--sp-2); } h1 { font-size:var(--fs-t2); } h1 .sub { display:none; } /* Top app bar: логотип + один город, справа только избранное и overflow. */ .hrow { flex-wrap:nowrap; gap:8px; } .brand-col { min-width:0; flex:1; flex-direction:row; align-items:center; gap:8px; } .brand-cities { min-width:0; gap:0; } #country-sel { display:none; } #city-sel { max-width:118px; min-height:36px; font-size:var(--fs-xs); padding:4px 8px; } .hctl { flex:none; flex-wrap:nowrap; gap:6px; } .hctl > #theme-btn, .hctl > #login-btn, .hctl > #add-listing-btn, .hctl > .desktop-view-toggle, .hctl > .lang-wrap { display:none; } .mobile-only { display:flex; } .mobile-more-menu:not([hidden]) { display:block; } .hctl .icon-btn { width:40px; height:40px; min-width:40px; min-height:40px; } /* Контекстная строка выдачи: фильтры, сортировка, список/карта. */ .filters-wrap { margin-top:8px; } /* Поиск — отдельная строка над контекстной панелью: искать можно, не открывая фильтры. В панели фильтров дубль поиска скрыт. */ .mobile-search { display:flex; align-items:center; gap:8px; min-height:44px; margin-bottom:6px; padding:0 12px; border:1px solid var(--line); border-radius:var(--rad-s); background:var(--card); color:var(--mut); } .mobile-search input { flex:1; min-width:0; border:0; background:transparent; color:var(--txt); font-size:var(--fs-base); outline:none; min-height:42px; } .filters .f-main .f-search { display:none; } .mobile-actions { display:grid; grid-template-columns:minmax(92px,1fr) minmax(96px,122px) auto; align-items:center; gap:6px; } .filters-toggle { display:flex; width:auto; min-width:0; min-height:44px; padding:8px 10px; white-space:nowrap; } .filters-toggle, .mobile-sort { font-size:var(--fs-sm); font-weight:600; line-height:normal; } .filters-toggle .chev { display:none; } .mobile-sort { display:block; width:100%; min-width:0; max-width:none; min-height:44px; padding:8px 10px; } .mobile-view-toggle { display:flex; } .mobile-view-toggle button { width:40px; min-width:40px; min-height:38px; padding:5px 8px; } .results .sort-sel { display:none; } /* 360px: сохраняем 44px тап-зоны, ужимаем только подписи и промежутки. */ @media (max-width:360px) { .brand-mark { height:32px; } .brand-wordmark { height:20px; } .brand-col { gap:5px; } #city-sel { max-width:102px; padding:4px 6px; } .hctl { gap:4px; } .mobile-actions { grid-template-columns:minmax(82px,1fr) minmax(88px,108px) auto; gap:4px; } .filters-toggle { padding:8px; } .mobile-sort { padding:8px 5px; } } /* столбцы заданы в блоке фильтров выше; здесь панель просто свёрнута */ .filters { display:none; } .filters.open { display:flex; flex-direction:column; gap:var(--sp-2); } .map-controls .map-multi { display:flex; } .results { margin-top:var(--sp-4); } #grid { grid-template-columns:1fr; gap:16px; margin:16px auto; } /* на телефоне карта занимает весь экран, список прячется */ body.map-mode .split { display:block; } body.map-mode .pane-list { display:none; } /* leaflet сам ставит position:relative инлайном, поэтому гасим смещение через top */ body.map-mode #map { position:relative; top:0; height:calc(100dvh - var(--head-h)); } dialog.modal { max-width:none; width:100%; max-height:100dvh; height:100dvh; border-radius:0; } dialog.wl { max-width:none; } .gal img { height:44dvh; } .thumbs .th { width:56px; height:44px; } .mbody { padding:16px 16px calc(28px + constant(safe-area-inset-bottom)); padding:16px 16px calc(28px + env(safe-area-inset-bottom)); } .modal .x { top:calc(12px + constant(safe-area-inset-top)); top:calc(12px + env(safe-area-inset-top)); } /* лайтбокс на телефоне: компактные стрелки, фото с запасом под управление */ dialog.modal.photo .nav { width:44px; height:44px; font-size:22px; } dialog.modal.photo .nav.p { left:10px; } dialog.modal.photo .nav.n { right:10px; } dialog.modal.photo .x { right:12px; } .pv-img { max-width:calc(100% - 76px); max-height:calc(100% - 150px); } .pv-count { bottom:calc(18px + constant(safe-area-inset-bottom)); bottom:calc(18px + env(safe-area-inset-bottom)); } } /* модалка «поделиться» — нижний шит (прикреплена к низу экрана), компактная, даже на мобильных не разворачивается на весь экран (специфичность выше медиа-запроса) */ dialog.modal.share-dlg { width:min(420px, 100%); max-width:100%; margin:auto auto 0; border-radius:20px 20px 0 0; max-height:min(560px, 80dvh); height:auto; } /* ---------- широкий экран: крупные заголовки ---------- */ @media (min-width:1000px) { :root { --fs-t1:34px; --fs-t2:24px; } } /* поповер комнат: список короткий, ширина по содержимому */ .ms-rooms .ms-pop { min-width:0; width:max-content; } .ms-rooms .ms-row { min-height:40px; padding:8px 14px; }