.rmk-catalog{
  --blue:#2d77e8; --blue-d:#2559c9; --orange:#ff4d00; --purple:#b765f2;
  --green:#58ad30; --text:#141b31; --muted:#8291a7; --val:#5e6272; --line:#e8eaee;
  --rating-good:#58ad30; --rating-mid:#f6a400; --rating-bad:#ff4c00;
  --bg:#f5f5f5; --card:#fff; --radius:8px;
  /* По макету весь текст /catalogNew/ — Nunito (не Nunito Sans, хоть в Figma и попадается
     местами вперемешку: как вебшрифт в проекте подключён только Nunito). Стек фолбэков —
     ровно как в общесайтовом style.css (local/templates/roomook/css/style.css:335), а не
     свой длинный список системных шрифтов — тестировщик сравнил через инспектор оба места
     и указал на расхождение в коде. */
  font-family:Nunito,sans-serif;
  color:var(--text); background:var(--bg); box-sizing:border-box;
  padding-bottom:40px;
}
.rmk-catalog *,.rmk-catalog *::before,.rmk-catalog *::after{box-sizing:border-box;}
.rmk-catalog button{font-family:inherit;cursor:pointer;}

.rmk-searchwrap{
  /* Ниже общесайтового промо-попапа с видео (.modal, z-index:80) — он должен всегда
     перекрывать строку поиска, а не наоборот. */
  position:sticky;top:0;z-index:30;background:#fff;
  padding:14px 0;
}
.rmk-search-trigger{display:none;}
.rsb-mobile-head,.rso-hub,.rso-hub-actions,.rso-guest-actions{display:none;}
.rmk-searchbar{
  display:flex;align-items:center;gap:0;
  max-width:700px;margin:0 auto;
  background:#eff1f3;border-radius:30px;height:54px;padding:0 7px 0 0;
}
.rsb-field{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:9px 22px;min-width:0;position:relative;}
.rsb-field + .rsb-field::before{content:"";position:absolute;left:0;top:11px;bottom:11px;
  width:1px;background:#dfe3e8;}
.rsb-datefields{position:relative;flex:2;display:flex;min-width:0;}
.rsb-datefields .rsb-field{flex:1;}
.rsb-field + .rsb-datefields::before,.rsb-datefields + .rsb-field::before{
  content:"";position:absolute;left:0;top:11px;bottom:11px;width:1px;background:#dfe3e8;}
.rsb-datefields .rsb-input{padding-right:22px;}
.rsb-cal-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;display:flex;}
.rsb-label{font-size:10px;font-weight:600;color:#8291a7;line-height:1.2;}
.rsb-input{border:0;outline:0;font-size:14px;font-weight:600;color:#5e6272;background:transparent;width:100%;
  padding:0;line-height:1.2;}
.rsb-input::placeholder{color:#8291a7;font-weight:600;}
.rsb-input[readonly]{cursor:pointer;}
.rsb-where .rsb-input{padding-right:20px;}
.rsb-clear{display:none;position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border:0;border-radius:50%;background:#dfe3e8;color:#5e6272;
  align-items:center;justify-content:center;padding:0;cursor:pointer;}
.rsb-clear:hover{background:#cfd5dd;}
.rsb-clear.is-visible{display:flex;}
.rsb-go{border:0;background:#ff4d00;width:40px;height:40px;flex:0 0 40px;display:flex;
  align-items:center;justify-content:center;border-radius:50%;}
.rsb-go:hover{background:#e64600;}

.rwd{position:absolute;top:calc(100% + 20px);left:0;width:364px;max-width:calc(100vw - 40px);
  background:#fff;border-radius:8px;padding:8px 0;
  box-shadow:0 20px 40px rgba(20,27,49,.12);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:200;}
.rwd.is-open{opacity:1;visibility:visible;transform:translateY(0);}
.rwd:after{content:"";position:absolute;z-index:1;top:-8px;left:24px;width:16px;height:16px;
  border-radius:3px;background:#fff;box-shadow:-2px -2px 6px rgba(20,27,49,.06);
  transform:rotate(-45deg);}
.rwd:before{content:"";position:absolute;background:#fff;width:36px;height:24px;top:0;left:16px;z-index:2;}
.rwd-list{position:relative;z-index:3;}
.rwd-item{display:flex;align-items:center;gap:6px;padding:5px 20px;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--val);}
.rwd-item:hover,.rwd-item--active{background:rgba(225,231,240,.71);}
.rwd-ic{width:10px;height:10px;flex:0 0 10px;color:var(--val);}
.rwd-section{padding:0 20px 6px;font-size:12px;font-weight:600;color:var(--muted);}
.rwd-divider{height:1px;margin:2px 0;background:rgba(94,98,114,.3);}
.rwd-empty{display:none;position:relative;z-index:3;padding:5px 20px;font-size:14px;font-weight:600;color:var(--muted);}

.rdc{position:absolute;top:calc(100% + 20px);left:0;width:246px;max-width:calc(100vw - 40px);
  background:#fff;border:1px solid #dbdbdb;border-radius:4px;padding:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:200;}
.rdc.is-open{opacity:1;visibility:visible;transform:translateY(0);}
.rdc:after{content:"";position:absolute;z-index:1;top:-8px;left:24px;width:16px;height:16px;
  border-radius:3px;background:#fff;box-shadow:-2px -2px 6px rgba(20,27,49,.06);
  transform:rotate(-45deg);}
.rdc:before{content:"";position:absolute;background:#fff;width:36px;height:24px;top:0;left:16px;z-index:2;}
.rdc-header{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;
  padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid #efefef;}
.rdc-title{font-size:14px;font-weight:400;color:#4a4a4a;}
.rdc-title-year{color:#9c9c9c;}
.rdc-nav{position:absolute;top:50%;transform:translateY(-50%);
  border:0;background:none;padding:3px;cursor:pointer;color:#9c9c9c;display:flex;border-radius:4px;}
.rdc-nav--prev{left:0;}
.rdc-nav--next{right:0;}
.rdc-nav svg{width:10px;height:10px;}
.rdc-nav:disabled{display:none;}
.rdc-nav:not(:disabled):hover{background:#f0f0f0;}
.rdc-weekdays{position:relative;z-index:3;display:grid;grid-template-columns:repeat(7,1fr);
  text-align:center;font-size:11.2px;font-weight:400;color:var(--blue);padding-bottom:7px;margin-bottom:7px;}
.rdc-days{position:relative;z-index:3;display:grid;grid-template-columns:repeat(7,1fr);gap:0;}
.rdc-day{display:flex;align-items:center;justify-content:center;height:32px;font-size:14px;font-weight:400;
  color:#4a4a4a;cursor:pointer;position:relative;box-sizing:border-box;}
.rdc-day.is-empty{cursor:default;}
.rdc-day.is-disabled{color:#aeaeae;cursor:default;}
.rdc-day.is-adjacent{color:#dedede;}
.rdc-day.is-today{color:var(--blue);}
.rdc-day.is-in-range{background:rgba(92,196,239,.1);}
.rdc-day.is-start{background:var(--blue);color:#fff;font-weight:400;}
.rdc-day.is-end{background:var(--blue);color:#fff;font-weight:400;}
.rdc-day.is-round-l{border-top-left-radius:4px;border-bottom-left-radius:4px;}
.rdc-day.is-round-r{border-top-right-radius:4px;border-bottom-right-radius:4px;}
.rdc-footer{position:relative;z-index:3;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
  font-size:11.6px;font-weight:500;color:var(--muted);}

.rgd{position:absolute;top:calc(100% + 20px);right:0;width:230px;max-width:calc(100vw - 40px);
  background:#fff;border-radius:12px;padding:16px;
  box-shadow:0 14px 22px rgba(225,231,240,.7);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:200;}
.rgd.is-open{opacity:1;visibility:visible;transform:translateY(0);}
.rgd:after{content:"";position:absolute;z-index:1;top:-8px;right:24px;width:16px;height:16px;
  border-radius:3px;background:#fff;box-shadow:-2px -2px 6px rgba(20,27,49,.06);
  transform:rotate(-45deg);}
.rgd:before{content:"";position:absolute;background:#fff;width:36px;height:24px;top:0;right:16px;z-index:2;}
.rgd-row{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:10px 0;}
.rgd-label{font-size:13.7px;font-weight:500;color:var(--val);}
.rgd-divider{position:relative;z-index:3;height:1px;background:var(--line);}
.rgd-stepper{display:flex;align-items:center;gap:14px;}
.rgd-btn{width:26px;height:26px;border:2px solid #8291a7;border-radius:7px;background:transparent;
  color:#8291a7;display:flex;align-items:center;justify-content:center;
  padding:0;cursor:pointer;}
.rgd-btn:hover{background:#f4f6f9;}
.rgd-count{min-width:16px;text-align:center;font-size:18px;font-weight:600;color:#8291a7;}
.rgd-switch{position:relative;display:inline-block;width:42px;height:24px;cursor:pointer;}
.rgd-switch input{display:none;}
.rgd-switch i{position:absolute;inset:0;background:#cfd4dc;border-radius:20px;transition:.2s;}
.rgd-switch i::after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:.2s;}
.rgd-switch input:checked + i{background:var(--blue);}
.rgd-switch input:checked + i::after{transform:translateX(18px);}

.rmk-chipsbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.rmk-chips{display:contents;}
.rmk-filters-btn{display:none;position:relative;align-items:center;justify-content:center;gap:8px;background:#fff;color:#5e6272;
  border:1.5px solid var(--blue);border-radius:30px;padding:0 18px;height:38px;font-size:14px;font-weight:600;}
.rmk-filters-badge{display:none;position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 4px;
  border-radius:50%;background:var(--orange);color:#fff;font-size:11px;font-weight:700;
  align-items:center;justify-content:center;}
.rmk-filters-badge.is-visible{display:flex;}
.rmk-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:0;border-radius:30px;padding:0 14px;height:25px;font-size:12px;font-weight:600;color:var(--text);}
.rmk-chip i{font-style:normal;color:#8291a7;cursor:pointer;font-size:14px;line-height:1;}
.rmk-reset{margin-left:auto;background:transparent;border:1px solid #cdd4de;color:#8291a7;
  border-radius:30px;padding:0 16px;height:25px;font-size:12px;font-weight:600;}

.rmk-grid{display:grid;grid-template-columns:285px minmax(0,790px) minmax(0,1fr);gap:20px;align-items:start;}

.rmk-filters{background:#fff;padding:6px 18px 18px;margin-top:1px;
  position:sticky;top:var(--search-h,82px);}
.rmk-filters-head{display:none;}
.rf-row--switch{display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;border-bottom:1px solid var(--line);font-size:16px;font-weight:600;color:var(--text);}
.rf-switch{position:relative;display:inline-block;width:42px;height:24px;}
.rf-switch input{display:none;}
.rf-switch i{position:absolute;inset:0;background:#cfd4dc;border-radius:20px;transition:.2s;}
.rf-switch i::after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:.2s;}
.rf-switch input:checked + i{background:var(--blue);}
.rf-switch input:checked + i::after{transform:translateX(18px);}
.rf-group{padding:18px 0;border-bottom:1px solid var(--line);}
.rf-group:last-of-type{border-bottom:0;}
.rf-title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:12px;}
.rf-price-tabs{position:relative;display:flex;background:#fff;border:1px solid #cbd2dc;border-radius:5px;height:36px;padding:3px;margin-bottom:10px;}
.rf-price-tabs-active{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:30px;background:var(--blue);border-radius:5px;transition:transform .2s ease;}
.rf-pt{position:relative;z-index:1;flex:1;border:0;background:transparent;font-size:13px;font-weight:600;color:#5e6272;}
.rf-pt--active{color:#fff;}
.rf-price-inputs{display:flex;border:1px solid #cbd2dc;border-radius:5px;height:36px;margin-bottom:14px;}
.rf-price-inputs input{flex:1;min-width:0;border:0;background:transparent;text-align:center;font-size:13px;color:#5e6272;}
.rf-range-wrap{position:relative;height:15px;margin:6px 7px 4px;}
.rf-range-track{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:2px;background:#cbd2dc;border-radius:2px;}
.rf-range-fill{position:absolute;top:50%;transform:translateY(-50%);height:2px;background:var(--blue);border-radius:2px;}
.rf-range{position:absolute;left:0;right:0;top:0;width:100%;height:15px;margin:0;background:transparent;
  -webkit-appearance:none;appearance:none;pointer-events:none;}
.rf-range--min{z-index:2;}
.rf-range--max{z-index:1;}
.rf-range::-webkit-slider-runnable-track{background:transparent;height:15px;}
.rf-range::-moz-range-track{background:transparent;height:15px;}
.rf-range::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:15px;height:15px;
  border-radius:50%;background:#fff;border:2px solid var(--blue);cursor:pointer;box-sizing:border-box;}
.rf-range::-moz-range-thumb{pointer-events:auto;width:15px;height:15px;border-radius:50%;
  background:#fff;border:2px solid var(--blue);cursor:pointer;box-sizing:border-box;}
.rf-check{display:flex;align-items:center;gap:10px;padding:7px 0;cursor:pointer;font-size:14px;}
.rf-check input{display:none;}
.rf-box{width:20px;height:20px;border:1.5px solid #cfd4dc;border-radius:6px;flex:0 0 20px;position:relative;transition:.15s;}
.rf-check input:checked + .rf-box{background:var(--blue);border-color:var(--blue);}
.rf-check input:checked + .rf-box::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.rf-lbl{flex:1;color:var(--val);font-weight:600;}
.rf-cnt{color:var(--muted);font-size:14px;}
.rf-radio .rf-box{border-radius:50%;}
.rf-radio input:checked + .rf-box{background:#fff;border-color:var(--blue);}
.rf-radio input:checked + .rf-box::after{left:50%;top:50%;width:10px;height:10px;border:0;
  border-radius:50%;background:var(--blue);transform:translate(-50%,-50%);}
.rf-illustration{display:none;}
.rf-arc{display:none;}
.rf-actions{display:none;}
/* Колонки-обёртки нужны только в планшетном оверлее — в остальных случаях
   выключаем их из потока, чтобы группы шли как обычный вертикальный список. */
.rf-col{display:contents;}
.rf-stepper{display:flex;align-items:center;justify-content:space-between;padding:6px 0;}
.rf-step-lbl{font-size:14px;font-weight:600;color:var(--val);}
.rf-step-ctrl{display:inline-flex;align-items:center;gap:8px;}
.rf-step-btn{width:18px;height:18px;border:1px solid #cbd2dc;border-radius:2px;background:transparent;
  color:var(--val);font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;}
.rf-step-btn:hover{background:#f2f4f7;}
.rf-step-val{min-width:37px;text-align:center;font-size:13px;color:var(--val);}
.rf-floor-inputs{display:flex;gap:8px;margin-bottom:8px;}
.rf-floor-inputs input{flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:14px;color:var(--val);}
.rf-reset-all{width:100%;margin-top:18px;
  background:var(--blue);border:0;color:#fff;
  border-radius:5px;padding:12px;font-size:14px;font-weight:600;
  position:sticky;bottom:16px;z-index:5;
  box-shadow:0 4px 4px rgba(0,0,0,.25);}
.rf-reset-all:hover{background:var(--blue-d);}

.rmk-list{margin-top:30px;}
.rmk-back-to-map{display:none;}
.rmk-list-head{margin-bottom:16px;}
.rmk-found{font-size:16px;font-weight:600;color:var(--text);margin:0 0 16px;}
.rmk-sort{display:flex;gap:10px;flex-wrap:wrap;}
.rmk-sort-btn{background:transparent;border:1px solid #cdd4de;border-radius:30px;
  height:25px;padding:0 16px;font-size:12px;font-weight:600;color:#8291a7;display:inline-flex;align-items:center;}
.rmk-sort-btn--active{background:#fff;border-color:transparent;color:var(--text);}

.rmk-cards{display:flex;flex-direction:column;gap:16px;}

.rc-card{display:flex;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:box-shadow .2s;cursor:pointer;}
.rc-card:hover{box-shadow:0 6px 20px rgba(20,30,60,.10);}
.rc-media{position:relative;display:block;flex:0 0 236px;height:210px;align-self:flex-start;background:#eceef2;overflow:hidden;}
.rc-img{width:100%;height:100%;object-fit:cover;display:block;}
.rc-fav{position:absolute;top:12px;left:12px;width:36px;height:36px;border:0;border-radius:50%;
  background:rgba(94,98,114,.5);color:#fff;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(1px);z-index:2;}
.rc-fav:hover{background:rgba(94,98,114,.65);}
.rc-fav.is-on{color:#ff4d4d;}

.rc-content{flex:1;min-width:0;padding:16px 20px;display:flex;flex-direction:column;gap:6px;}
.rc-toprow{display:flex;align-items:center;gap:10px;}
.rc-rating{display:flex;align-items:center;gap:6px;font-size:12px;}
.rc-star{color:var(--rating-good);flex:0 0 auto;}
.rc-rating b{font-weight:700;font-size:14px;color:var(--rating-good);}
.rc-reviews{color:var(--val);}
/* Цвет звезды/оценки по значению рейтинга (протокол тестирования, п.76):
   4.00–5.00 зелёный (по умолчанию выше), 2.00–3.90 жёлтый, 0.10–1.90 красный. */
.rc-rating--mid .rc-star,.rc-rating--mid b{color:var(--rating-mid);}
.rc-rating--bad .rc-star,.rc-rating--bad b{color:var(--rating-bad);}
.rc-no-reviews{font-weight:700;font-size:14px;line-height:1.14;color:var(--green);white-space:nowrap;}
.rc-nr-blue{color:var(--blue);}
.rc-nr-orange{color:var(--orange);}
.rc-nr-break{display:none;}
.rc-rating--aside .rc-nr-break{display:inline;}
.rc-rating--top{display:none;}
/* Статус ХОЗЯИНА объекта (UF_HOST_STATUS / IBlock 14 "Статусы хозяев") — не путать с
   .rc-tag--popular, тот про статус ЖИЛЬЯ (IBlock 15). По макету (Figma, node 4251:105391) —
   просто цветной текст рядом с рейтингом, без заливки/рамки/паддингов (не таблетка, как
   остальные бейджи). Цвет — inline из FG_COLOR элемента статуса (см. rmkGetHostStatusBadge
   в search_query.php); фолбэк ниже — на случай если у конкретного статуса цвет не задан. */
.rc-host-status{font-size:12px;font-weight:600;color:var(--green);white-space:nowrap;}
.rc-title{font-size:18px;font-weight:700;color:var(--text);margin:0;line-height:1.25;}
.rc-title a{color:inherit;text-decoration:none;}
.rc-addr{display:flex;align-items:center;gap:5px;color:var(--val);font-size:12px;}
.rc-addr svg{flex:0 0 auto;width:9px;height:11px;color:var(--val);}
.rc-div{border:0;height:1px;background:#edeff2;margin:8px 0;width:100%;}
.rc-specs{color:var(--muted);font-size:12px;}

.rc-amenities{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:2px;}
.rc-amenity{display:flex;align-items:center;justify-content:center;width:18px;height:18px;
  color:var(--muted);flex:0 0 auto;}
.rc-amenity img{width:16px;height:16px;object-fit:contain;display:block;}
.rc-amenity svg{width:16px;height:16px;display:block;}
.rc-amenity--more{width:21px;height:21px;border-radius:50%;border:1px solid var(--muted);
  font-size:10px;font-weight:400;color:var(--muted);}

.rc-foot{margin-top:auto;padding-top:8px;}
.rc-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0;}
.rc-price-night{display:flex;align-items:baseline;gap:4px;}
/* nowrap — иначе на узких карточках (2-колоночная планшетная сетка, ~300-330px) flex-сжатие
   переносит текст ВНУТРИ этих элементов ("2 300" отдельно от "₽", "за" отдельно от "ночь") —
   поймано вживую на карточке "Уютная студия в центре Анапы" при ширине карточки 312px. */
.rc-price-night b{font-size:20px;font-weight:700;color:var(--blue);white-space:nowrap;}
.rc-price-night span{color:var(--text);font-size:12px;font-weight:700;white-space:nowrap;}
.rc-price-total{color:var(--muted);font-size:12px;white-space:nowrap;}
.rc-price-total::before{content:"/";margin:0 6px;color:var(--muted);}

.rc-aside{flex:0 0 180px;padding:16px 20px;display:flex;flex-direction:column;gap:10px;
  border-left:1px solid var(--line);}
.rc-perks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.rc-perks li{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--val);}
.rc-perk-ic{flex:0 0 20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--val);border-radius:50%;box-sizing:border-box;}
.rc-perks svg{flex:0 0 11px;width:11px;height:11px;color:var(--val);}
.rc-tags{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:5px;margin-top:auto;}
.rc-tag{font-size:10px;font-weight:400;padding:5px 6px;border-radius:20px;border:1px solid;
  white-space:nowrap;text-align:center;}
/* Цвет — фолбэк, обычно рендерится через inline style с реальными BG_COLOR/FG_COLOR/BORDER_COLOR
   элемента 76/77 справочника "Статусы жилья" (сплошная заливка, т.к. FG_COLOR — это цвет текста
   ПОВЕРХ заливки, а не текста на прозрачном фоне, как было раньше). "Популярный" и "Лучшая цена" —
   концептуально один и тот же тип бейджа статуса, поэтому теперь в одном месте (.rc-tags) и в
   одном стиле .rc-tag, а не отдельной "таблеткой" .rc-superhost где-то в другом углу карточки. */
.rc-tag--best{color:#fff;background:var(--blue);border-color:var(--blue);}
.rc-tag--popular{color:#fff;background:var(--purple);border-color:var(--purple);}
/* Если в справочнике задано хоть одно из BG_COLOR/FG_COLOR/BORDER_COLOR — используем ТОЛЬКО
   заданное через inline style, а не смешиваем с этим дефолтом выше (иначе, скажем,
   background:var(--blue) рисовался бы поверх даже когда админ специально оставил фон пустым).
   Специфичность равна .rc-tag--best/.rc-tag--popular — побеждает по порядку объявления (ниже). */
.rc-tag--custom{background:transparent;color:inherit;border-color:transparent;}
.rc-tag--rmk{color:var(--orange);border-color:var(--orange);}
.rc-tag--demand{color:var(--purple);border-color:var(--purple);}

.rmk-empty{display:flex;align-items:center;justify-content:center;gap:32px;padding:40px 20px;}
.rmk-empty-guy{flex:0 0 auto;height:250px;width:auto;}
.rmk-empty-content{display:flex;flex-direction:column;align-items:center;text-align:center;}
.rmk-empty-title{margin:0 0 16px;font-size:22px;font-weight:700;color:var(--text);}
.rmk-empty-text{margin:0 0 24px;font-size:15px;line-height:1.5;color:var(--val);max-width:420px;}
.rmk-empty-reset{background:var(--blue);color:#fff;border:0;
  border-radius:30px;padding:14px 28px;font-size:15px;font-weight:600;margin-bottom:20px;}
.rmk-empty-reset:hover{background:var(--blue-d);}
.rmk-empty-smile{width:64px;height:auto;}

.rmk-pager{display:flex;gap:5px;justify-content:center;align-items:center;margin-top:24px;flex-wrap:wrap;}
.rmk-page{background:transparent;border:1px solid #e1e7f0;border-radius:50%;
  width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:14px;font-weight:600;color:#5e6272;cursor:pointer;}
.rmk-page--active{background:#e3e9f1;border-color:transparent;}
.rmk-page:disabled{opacity:.4;cursor:default;}
.rmk-page-dots{color:var(--muted);padding:0 2px;}
/* Кнопки «Назад»/«Далее» — отдельная широкая пилюля, с увеличенным отступом от цифр. */
.rmk-page--nav{width:auto;min-width:80px;border-radius:30px;padding:0 12px;}
.rmk-page--nav:first-of-type{margin-right:15px;}
.rmk-page--nav:last-of-type{margin-left:15px;}

.rmk-map-col{position:sticky;top:var(--search-h,82px);}
.rmk-map{width:100%;height:calc(100vh - var(--search-h,82px) - 16px);min-height:480px;
  overflow:hidden;background:#e6eaf0;border:1px solid var(--line);}

.rmk-map-expand{position:absolute;top:12px;left:12px;z-index:20;display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--text);border:0;border-radius:10px;padding:9px 14px;
  font-size:13px;font-weight:600;box-shadow:0 2px 8px rgba(20,27,49,.16);}
.rmk-map-expand:hover{background:#f4f6f9;}
.rmk-map-expand svg{flex:0 0 auto;color:var(--val);}
.rmk-map-expand-close{display:none;}

.rmk-map-zoom{position:absolute;right:12px;z-index:20;width:34px;height:34px;display:flex;
  align-items:center;justify-content:center;background:#fff;color:var(--text);border:0;
  border-radius:10px;box-shadow:0 2px 8px rgba(20,27,49,.16);}
.rmk-map-zoom:hover{background:#f4f6f9;}
.rmk-map-zoom--in{top:12px;}
.rmk-map-zoom--out{top:54px;}
.rmk-geo-toast{position:absolute;top:12px;left:50%;transform:translateX(-50%) translateY(-8px);
  z-index:25;max-width:calc(100% - 140px);background:#fff;color:var(--text);font-size:13px;
  font-weight:600;padding:9px 14px;border-radius:10px;box-shadow:0 2px 8px rgba(20,27,49,.16);
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;text-align:center;}
.rmk-geo-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0);}

/* Плашка «Загрузка карты…» — видна, пока API Яндекс.Карт грузится и инициализируется
   (initMap в script.js), пропадает сразу как только карта реально создана. */
.rmk-map-loading{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:21;
  display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--text);
  font-size:13px;font-weight:600;padding:9px 14px;border-radius:10px;
  box-shadow:0 2px 8px rgba(20,27,49,.16);transition:opacity .2s ease;white-space:nowrap;}
.rmk-map-loading.is-hidden{opacity:0;pointer-events:none;}
.rmk-map-loading-spinner{width:14px;height:14px;flex:0 0 auto;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--blue);animation:rmkMapLoadingSpin .7s linear infinite;}
@keyframes rmkMapLoadingSpin{to{transform:rotate(360deg);}}

/* Полноэкранная карта: выносим колонку поверх страницы, список и фильтры прячем. */
.rmk-catalog.rmk-map-full .rmk-map-col{position:fixed;inset:0;top:0;z-index:1500;margin:0;padding:0;}
.rmk-catalog.rmk-map-full .rmk-map{height:100%;min-height:0;border:0;border-radius:0;}
.rmk-catalog.rmk-map-full .rmk-list,
.rmk-catalog.rmk-map-full .rmk-filters,
.rmk-catalog.rmk-map-full .rmk-searchwrap{display:none;}
.rmk-catalog.rmk-map-full .rmk-map-expand-open{display:none;}
.rmk-catalog.rmk-map-full .rmk-map-expand-close{display:inline;}

.rmk-pin{display:inline-block;background:#fff;border:1.5px solid #e3e7ee;border-radius:20px;padding:7px 14px;
  font-size:13px;font-weight:700;color:var(--blue);white-space:nowrap;box-shadow:0 2px 6px rgba(20,27,49,.12);
  cursor:pointer;}
.rmk-pin:hover,.rmk-pin.is-active,.rmk-pin.is-hover{background:var(--blue);border-color:var(--blue);color:#fff;}

.rmk-dot{width:14px;height:14px;border-radius:50%;background:var(--blue);border:2px solid #fff;
  box-shadow:0 1px 4px rgba(20,27,49,.35);cursor:pointer;box-sizing:border-box;}
.rmk-dot:hover,.rmk-dot.is-active,.rmk-dot.is-hover{width:18px;height:18px;box-shadow:0 2px 6px rgba(20,27,49,.45);}

.rmk-mc{position:absolute;top:0;left:0;width:260px;background:#fff;border-radius:16px;
  box-shadow:0 20px 40px rgba(20,27,49,.18);z-index:300;
  opacity:0;visibility:hidden;transform:translate(-50%,-100%) translateY(-14px);
  transition:opacity .15s ease,visibility .15s;pointer-events:none;}
.rmk-mc.is-open{opacity:1;visibility:visible;pointer-events:auto;}
.rmk-mc-close{position:absolute;top:-14px;right:-14px;z-index:3;width:36px;height:36px;border:0;border-radius:50%;
  background:rgba(40,42,54,.55);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(20,27,49,.25);cursor:pointer;padding:0;}
.rmk-mc-media{position:relative;height:150px;border-radius:16px 16px 0 0;overflow:hidden;background:#eceef2;}
.rmk-mc-img{width:100%;height:100%;object-fit:cover;display:block;}
.rmk-mc-fav{position:absolute;top:10px;left:10px;z-index:2;width:28px;height:28px;border:0;border-radius:50%;
  background:rgba(70,75,90,.42);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.rmk-mc-fav.is-on{color:#ff4d4d;}
.rmk-mc-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;}
.rmk-mc-rating{display:flex;align-items:center;gap:6px;font-size:12px;}
.rmk-mc-rating svg{color:var(--rating-good);flex:0 0 auto;}
.rmk-mc-rating b{font-weight:700;font-size:13px;color:var(--rating-good);}
.rmk-mc-rating span{color:var(--val);}
.rmk-mc-rating .rc-no-reviews{color:var(--green);font-size:13px;}
.rmk-mc-rating .rc-nr-blue{color:var(--blue);}
.rmk-mc-rating .rc-nr-orange{color:var(--orange);}
.rmk-mc-rating--mid svg,.rmk-mc-rating--mid b{color:var(--rating-mid);}
.rmk-mc-rating--bad svg,.rmk-mc-rating--bad b{color:var(--rating-bad);}
.rmk-mc-title{font-size:15px;font-weight:700;color:var(--text);margin:0;line-height:1.3;}
.rmk-mc-addr{font-size:12px;color:var(--val);}
.rmk-mc-foot{display:contents;}
.rmk-mc-price{margin-top:4px;font-size:13px;}
.rmk-mc-price b{font-size:18px;font-weight:800;color:var(--text);}
.rmk-mc-price span{color:var(--muted);margin-left:4px;}
.rmk-mc-btn{display:block;text-align:center;margin-top:8px;background:var(--blue);color:#fff;
  border-radius:10px;padding:11px;font-size:14px;font-weight:600;text-decoration:none;}
.rmk-mc-btn:hover{background:var(--blue-d);}


/* Скелетон повторяет структуру карточки: фото — контент с разделителями — правая колонка. */
.rmk-skeleton .sk-card{display:flex;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;}
.sk-media{flex:0 0 230px;min-height:210px;align-self:stretch;}
.sk-content{flex:1;min-width:0;padding:16px 20px;display:flex;flex-direction:column;gap:10px;}
.sk-aside{flex:0 0 200px;padding:16px 20px;display:flex;flex-direction:column;gap:10px;
  border-left:1px solid var(--line);}
.sk-aside-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;}
.sk-line{height:13px;border-radius:7px;width:100%;}
.sk-line--sm{width:28%;}
.sk-line--md{width:52%;}
.sk-line--lg{width:78%;height:16px;}
.sk-line--specs{width:64%;}
.sk-line--icons{width:40%;}
.sk-line--price{width:72%;height:18px;margin-top:auto;}
.sk-line--rating{width:56%;}
.sk-line--tag{width:70%;}
.sk-line--tag2{width:88%;}
.sk-div{height:1px;background:#edeff2;width:100%;flex:0 0 1px;}
.sk-media,.sk-line{background:linear-gradient(90deg,#eef0f4 25%,#e2e6ec 50%,#eef0f4 75%);
  background-size:200% 100%;animation:sk-shimmer 1.3s infinite;}
@keyframes sk-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* Крайние даты диапазона (заезд/выезд) — своя дата инстанса и так подсвечена штатным
   -selected- библиотеки, но "чужая" (например дата заезда в календаре выезда) им никак не
   отмечена — тестировщик это заметил. Проставляем обе крайние даты сами (см. script.js,
   inRangeCellClasses) одним и тем же классом, чтобы в обоих календарях они выглядели
   одинаково. Календарь AirDatepicker рендерится в общий .air-datepicker-global-container
   прямо на <body>, вне .rmk-catalog — поэтому var(--val) тут недоступна, цвет буквально.
   !important — так же, как уже переопределён z-index попапа в header.php, иначе порядок
   подключения air-datepicker.css/собственных стилей не гарантирован. */
.air-datepicker-cell.rmk-adp-range-edge{
  background:#5e6272 !important;color:#fff !important;border-radius:var(--adp-cell-border-radius,4px) !important;}

@media (max-width:1300px){
  .rmk-filters-btn{display:inline-flex;}
  .rmk-filters{position:fixed;inset:0;height:auto;width:auto;max-width:none;background:#F6F7F8;
    z-index:2000;margin:0;padding:0;display:flex;flex-direction:column;
    transform:translateX(-100%);transition:transform .28s ease;box-shadow:none;}
  .rmk-filters.is-open{transform:translateX(0);}
  /* Иллюстрация и дуга лежат внутри прокручиваемого .rf-groups, чтобы уезжать
     вместе с контентом, а не висеть поверх него. */
  .rf-illustration{display:block;position:absolute;top:6px;right:44px;height:170px;width:auto;
    pointer-events:none;z-index:6;}
  .rf-arc{display:block;position:absolute;top:0;right:0;width:260px;height:auto;
    pointer-events:none;z-index:5;}
  .rmk-filters-head{display:flex;position:absolute;top:10px;right:10px;z-index:7;
    background:transparent;border:0;padding:0;}
  .rmk-filters-head span{display:none;}
  .rmk-filters-close{border:0;background:transparent;font-size:32px;line-height:1;color:var(--text);
    width:36px;height:36px;display:flex;align-items:center;justify-content:center;}
  .rf-groups{position:relative;flex:1;min-height:0;overflow-y:auto;padding:48px 16px 16px;}
  .rmk-filters .rf-group,.rmk-filters .rf-row--switch{background:#fff;border-radius:12px;
    padding:14px 16px;border-bottom:0;margin:0 0 12px;break-inside:avoid;}
  /* В оверлее «Оплата за RMK» — обычный чекбокс, а не тумблер как в десктопном сайдбаре. */
  .rmk-filters .rf-row--switch{display:flex;padding:18px 16px;position:relative;z-index:10;}
  .rmk-filters .rf-switch{width:20px;height:20px;flex:0 0 20px;}
  .rmk-filters .rf-switch i{background:#fff;border:1.5px solid #cfd4dc;border-radius:6px;}
  .rmk-filters .rf-switch i::after{width:5px;height:10px;left:6px;top:2px;background:none;
    border:solid #fff;border-width:0 2px 2px 0;border-radius:0;transform:rotate(45deg);opacity:0;}
  .rmk-filters .rf-switch input:checked + i{background:var(--blue);border-color:var(--blue);}
  .rmk-filters .rf-switch input:checked + i::after{transform:rotate(45deg);opacity:1;}
  .rmk-filters .rf-reset-all{display:none;}
  .rf-actions{display:flex;gap:8px;padding:10px 12px;background:#fff;
    box-shadow:0 -6px 16px rgba(20,27,49,.08);}
  .rf-actions-reset,.rf-actions-found{border:0;border-radius:5px;height:36px;
    font-size:14px;font-weight:600;color:#fff;align-self:center;}
  .rf-actions-reset{flex:1;background:#2D77E8;}
  .rf-actions-found{flex:2;background:#FF4D00;}
  .rmk-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1999;opacity:0;
    visibility:hidden;transition:.28s;}
  .rmk-overlay.is-open{opacity:1;visibility:visible;}
}

@media (min-width:641px) and (max-width:1300px){
  .rf-groups{display:flex;align-items:flex-start;gap:12px;padding:48px 24px 16px;}
  .rf-col{display:block;flex:1 1 0;min-width:0;}
  /* Иллюстрация висит абсолютом над правой частью — отводим под неё третью колонку. */
  .rf-col:last-child{padding-top:130px;}
}

@media (min-width:1101px) and (max-width:1300px){
  .rmk-grid{grid-template-columns:minmax(0,1fr) minmax(320px,36vw);padding-left:40px;}
  .rmk-searchwrap{display:flex;align-items:center;gap:16px;padding:14px 20px;}
  .rmk-searchbar{flex:1;max-width:700px;margin:0 auto;}
  .rmk-searchwrap .rmk-filters-btn{flex:0 0 auto;margin:0;}

  /* 1101–1300px — вертикальная карточка с кнопкой (макет 4251:105294), как и на обычном
     десктопе (>1300px) — отличается от диапазона 641–1100, где карточка горизонтальная. */
  .rmk-mc{width:220px;display:block;padding:0;gap:0;}
  .rmk-mc-media{position:relative;width:auto;height:140px;flex:0 0 auto;border-radius:16px 16px 0 0;}
  .rmk-mc-close{top:-14px;right:-14px;width:30px;height:30px;background:var(--val);box-shadow:none;}
  .rmk-mc-fav{top:16px;left:5px;width:30px;height:30px;background:rgba(94,98,114,.5);color:#fff;}
  .rmk-mc-body{padding:14px 16px 16px;gap:6px;}
  .rmk-mc-title{font-size:14px;font-weight:600;white-space:normal;overflow:visible;text-overflow:clip;}
  .rmk-mc-addr{color:var(--muted);white-space:normal;overflow:visible;text-overflow:clip;}
  .rmk-mc-foot{display:contents;}
  .rmk-mc-price{margin-top:4px;}
  .rmk-mc-price b{font-size:14px;font-weight:700;color:var(--blue);}
  .rmk-mc-price span{font-size:12px;margin-left:6px;}
  .rmk-mc-btn{all:revert;display:block;text-align:center;margin-top:8px;background:var(--blue);color:#fff;
    border-radius:5px;padding:11px;font-size:14px;font-weight:600;text-decoration:none;}
  .rmk-mc-btn:hover{background:var(--blue-d);}
}

/* 641–1100px — компактная горизонтальная карточка попапа на карте (макет 3623:27389 —
   реальный фрейм "Планшет" 744px, и 4271:128191). Выше (1101+) и на мобиле — другие
   правила (см. выше и блок ≤640px ниже). */
@media (min-width:641px) and (max-width:1100px){
  .rmk-mc{width:380px;max-width:calc(100vw - 24px);display:flex;flex-direction:row;
    padding:5px;gap:11px;}
  .rmk-mc-close{top:-12px;right:-5px;width:30px;height:30px;background:var(--val);box-shadow:none;}
  .rmk-mc-media{width:110px;height:110px;flex:0 0 110px;border-radius:8px;}
  .rmk-mc-fav{top:8px;left:8px;width:25px;height:25px;background:rgba(94,98,114,.5);color:#fff;}
  .rmk-mc-body{flex:1;min-width:0;padding:8px 16px 8px 0;gap:6px;}
  .rmk-mc-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rmk-mc-addr{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rmk-mc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;}
  .rmk-mc-price{margin-top:0;font-size:12px;white-space:nowrap;}
  .rmk-mc-price b{font-size:14px;font-weight:700;color:var(--blue);}
  .rmk-mc-btn{all:unset;color:var(--text);font-size:14px;font-weight:600;text-decoration:underline;
    cursor:pointer;white-space:nowrap;}
}

@media (max-width:1100px){
  .rmk-catalog{padding:0 0 32px;}
  /* Список лежит на обычном сером фоне страницы — белые только сами карточки
     и отдельные элементы (кнопки, пилюли), а не вся обёртка списка целиком. */
  .rmk-list{padding:14px 20px 24px;background:var(--bg);border-radius:20px 20px 0 0;
    margin-top:-20px;position:relative;z-index:5;}
  .rmk-list-handle{width:36px;height:4px;border-radius:2px;background:#d5d9e0;margin:0 auto 14px;}
  .rmk-searchwrap{padding:14px 20px;}
  .rmk-searchbar{max-width:none;width:100%;margin:0;}
  .rmk-grid{grid-template-columns:1fr;gap:16px;}
  .rmk-map-col{position:relative;top:auto;order:-1;}
  .rmk-map{height:340px;min-height:0;}

  /* Появляется при скролле списка вниз, когда карта уехала из вида. Макет 4276:132573 —
     без иконки, просто пилюля с текстом. bottom:20px тут — дефолт/фолбэк; реальное
     значение подставляет JS (updateBottomOffset в script.js): если на экране есть нижняя
     навигация сайта (свой брейкпоинт max-width:992px, не совпадает с нашим 1100px) —
     кнопка встаёт над ней по её фактической высоте, если навигации нет — остаётся у низа.
     Цвет — литералом (#2d77e8), не var(--blue): кнопку выносим в JS прямым потомком
     <body> (см. script.js), чтобы её не запирал stacking context .rmk-list — а переменные
     --blue/--blue-d объявлены только внутри .rmk-catalog, за пределами body они не видны. */
  .rmk-back-to-map{display:none;position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
    align-items:center;justify-content:center;background:#2d77e8;color:#fff;border:0;border-radius:20px;
    padding:13px 20px;font-size:16px;font-weight:600;
    font-family:Nunito,sans-serif;z-index:60;}
  .rmk-back-to-map.is-visible{display:inline-flex;}
  .rmk-back-to-map:hover{background:#2559c9;}

  .rmk-empty{position:relative;flex-direction:column;padding:32px 20px 24px;gap:0;}
  .rmk-empty-guy{position:absolute;left:48px;bottom:12px;height:190px;width:auto;margin:0;}
  .rmk-empty-title{font-size:19px;margin-bottom:10px;}
  .rmk-empty-text{font-size:14px;margin-bottom:18px;max-width:360px;}
  .rmk-empty-reset{padding:12px 24px;font-size:14px;margin-bottom:16px;}
  .rmk-empty-smile{width:52px;}

  .rmk-filters-btn{order:-2;justify-self:start;margin:8px 0 -8px 16px;}
  .rmk-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
  /* .rc-content и .rc-aside делят одну и ту же грид-ячейку (перекрываются) вместо старого
     position:absolute;bottom:16px у .rc-aside — тот отсчитывался от нижнего края ВСЕЙ карточки
     фиксированным числом пикселей и не знал о реальной высоте контента над ним (адрес/список
     удобств переменной длины) — если они были выше обычного, блок тегов наезжал на разделитель
     .rc-div сверху. align-self:end сам находит нижний край независимо от высоты соседней ячейки. */
  .rc-card,.rmk-skeleton .sk-card{display:grid;grid-template-columns:1fr;position:relative;}
  .rc-price{flex-direction:column;align-items:flex-start;}
  .rc-price-total{margin-top:2px;}
  .rc-price-total::before{content:none;}
  /* Раньше здесь был max-width:calc(100% - 175px) — расчёт оказался неверным: 100% для
     .rc-price-night резолвится от ширины .rc-price (та растянута на всю ширину .rc-content),
     а НЕ от ширины карточки, как предполагалось. На узких карточках 2-колоночной планшетной
     сетки (~300-330px) это давало ~95px вместо задуманных ~140 — цена не помещалась и текст
     разваливался ВНУТРИ себя (см. white-space:nowrap выше — вот от чего он защищает). Явную
     резервацию места под теги убрали: они — отдельный оверлей (.rc-aside поверх той же
     grid-ячейки), от ширины .rc-price физически не зависят, эта резервация ничего не решала
     на бóльших карточках и только вредила на маленьких. */
  /* Блок тегов (.rc-aside) выровнен по нижнему краю той же ячейки, что и .rc-content
     (align-self:end выше) — но если тегов несколько и они переносятся на 2 строки (до 49px
     высотой), а цена у объекта однострочная (28px, нет "N ₽ за N ночей"), .rc-foot оказывается
     ниже тегов, и те всё равно вылезают выше разделителя .rc-div. min-height резервирует место
     под 2 строки тегов заранее, независимо от реальной высоты самой цены. */
  .rc-foot{min-height:49px;padding-top:0;display:flex;align-items:center;}
  .rc-media,.sk-media{grid-column:1;grid-row:1;width:100%;height:180px;min-height:0;}
  /* Карточка становится вертикальной — правая колонка скелетона не нужна. */
  .sk-aside{display:none;}
  .rc-rating--top{display:flex;}
  .rc-addr{color:var(--muted);}
  .rc-content{grid-column:1;grid-row:2;}
  .rc-aside{grid-column:1;grid-row:2;align-self:end;justify-self:end;flex:0 0 auto;width:auto;
    border:0;padding:0 20px 16px 0;gap:0;}
  .rc-aside:has(.rc-tags > .rc-tag:only-child){align-self:start;}
  .rc-rating--aside,.rc-perks{display:none;}
  /* По макету (Figma, node 4251:105357) бейджи в этом блоке выровнены по левому краю
     самого блока, не по правому — justify-content:flex-start, а не flex-end. Сам блок
     при этом остаётся у правого края карточки (.rc-aside{justify-self:end} выше) — меняется
     только выравнивание бейджей ВНУТРИ него. */
  /* .rc-foot{min-height:49px} выше зарезервирован ровно под 2 строки бейджей (как в макете —
     "Лучшая цена"+"За RMK" в одну строку, "Повышенный спрос" отдельной строкой, 130px). У нас
     реальные бейджи другие ("Популярный"+"Лучшая цена" — по ~75px каждый, замерено в браузере)
     — вместе с 5px зазором это 155px, а не 130 как в макете (там второй бейдж в паре — короткий
     "За RMK", 50px). Ширину берём МИНИМАЛЬНО достаточную под эту пару (155 + 3px запас на
     сабпиксельное округление шрифта) — не больше, чтобы не отъедать зазор до цены сильнее
     необходимого: с более широким блоком бейджи визуально прилипали к цене. */
  .rc-tags{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:5px;margin-top:0;max-width:158px;}
  .rmk-found,.rmk-sort{justify-content:center;text-align:center;}
  .rmk-sort{justify-content:center;}
}

@media (max-width:640px){
  .rmk-catalog{padding:0 0 32px;}
  .rmk-list{padding:14px 12px 24px;}
  .rmk-filters-btn{margin:8px 0 -8px 12px;}
  /* Иллюстрация занимает правый верхний угол — первую карточку сужаем под неё. */
  .rf-illustration{height:120px;top:0;right:50px;}
  .rf-arc{width:224px;top:0;}
  /* Первая карточка сужена, чтобы не заезжать под иллюстрацию. */
  .rmk-filters .rf-row--switch{max-width:50%;}
  .rmk-searchbar{max-width:none;}
  .rsb-field{padding:8px 14px;}
  .rmk-cards{grid-template-columns:1fr;}
  .rc-media,.sk-media{height:200px;}
  .rmk-map{height:280px;}
  .rmk-reset{display:none;}

  .rmk-empty{position:relative;flex-direction:column;padding:24px 16px 44px;gap:0;}
  .rmk-empty-guy{position:absolute;left:16px;bottom:0;height:130px;width:auto;margin:0;}
  .rmk-empty-title{font-size:17px;margin-bottom:8px;}
  .rmk-empty-text{font-size:13px;margin-bottom:18px;max-width:none;}
  .rmk-empty-reset{padding:11px 20px;font-size:13px;margin-bottom:10px;}
  .rmk-empty-smile{width:44px;}

  /* Мобильный попап на карте — фото не встык с краями карточки, а с отступом со всех
     сторон (5px) и скруглено целиком, а не только слева; крестик заметно вылезает
     за пределы карточки (вверх и вправо), а не просто в углу. */
  .rmk-mc{position:absolute;left:10px;right:10px;bottom:10px;top:auto;width:auto;
    display:flex;flex-direction:row;align-items:stretch;border-radius:16px;
    padding:5px;gap:11px;transform:translateY(16px);}
  .rmk-mc.is-open{transform:translateY(0);}
  .rmk-mc-close{top:-12px;right:-5px;width:30px;height:30px;background:var(--val);box-shadow:none;}
  .rmk-mc-fav{width:25px;height:25px;background:rgba(94,98,114,.5);color:#fff;}
  .rmk-mc-media{width:auto;height:auto;flex:0 0 100px;border-radius:8px;}
  .rmk-mc-body{flex:1;padding:8px 16px 8px 0;gap:3px;min-width:0;}
  .rmk-mc-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rmk-mc-addr{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rmk-mc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;}
  .rmk-mc-price{margin-top:0;font-size:12px;white-space:nowrap;}
  .rmk-mc-price b{font-size:14px;font-weight:700;color:var(--blue);}
  .rmk-mc-btn{all:unset;color:var(--text);font-size:14px;font-weight:600;text-decoration:underline;
    cursor:pointer;white-space:nowrap;}

  /* .rmk-searchbar внутри становится position:fixed (полноэкранный оверлей, см. ниже) —
     паддинг обёртки ничего больше не обрамляет и только создаёт лишний пустой отступ
     между .rmk-search-trigger и .rmk-filters-btn (п.45 протокола тестирования). */
  .rmk-searchwrap{padding:0;}

  .rf-actions-reset{flex:0 0 150px;width:150px;}
  .rf-actions-found{flex:1;}

  .rmk-search-trigger{display:flex;align-items:center;gap:12px;margin:0 16px;
    background:#eff1f3;border-radius:30px;height:64px;padding:0 6px 0 16px;}
  .rmk-st-back{flex:0 0 22px;width:22px;height:22px;border:0;background:transparent;color:var(--val);
    display:flex;align-items:center;justify-content:center;padding:0;}
  .rmk-st-summary{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;
    border:0;background:transparent;text-align:left;padding:0;height:100%;}
  .rmk-st-main{font-size:18px;font-weight:700;color:var(--val);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rmk-st-sub{font-size:14px;font-weight:500;color:#8291a7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rmk-st-go{border:0;background:var(--orange);width:50px;height:50px;flex:0 0 50px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;}
  .rmk-st-go svg{width:20px;height:20px;}

  .rmk-searchbar{position:fixed;inset:0;z-index:400;max-width:none;height:auto;border-radius:0;
    background:#fff;flex-direction:column;align-items:stretch;padding:0;
    transform:translateX(100%);transition:transform .22s ease;overflow-y:auto;}
  .rmk-searchbar.is-open{transform:translateX(0);}
  /* .rmk-searchwrap сам стоит ниже общесайтовой шапки (z-index:40) — в закрытом виде так и
     нужно, но открытый на весь экран мобильный оверлей поиска обязан перекрыть шапку целиком. */
  .rmk-searchwrap:has(.rmk-searchbar.is-open){z-index:41;}
  /* П.23 протокола тестирования: кнопка ТП не должна висеть поверх открытого на весь
     экран модуля поиска жилья — но в остальное время на мобиле она нужна, не убираем. */
  body:has(#rmkSearchbar.is-open) #sw-widget{display:none;}

  .rsb-mobile-head{display:flex;align-items:center;gap:10px;padding:18px 16px 20px;
    background:var(--bg);flex:0 0 auto;}
  /* Пока ни одно поле не заполнено (сразу после «Сбросить») — весь экран остаётся
     монотонно-серым, без белой подложки под шапкой и карточкой полей. */
  .rmk-searchbar.rsb-step-hub{background:#f3f4f4;}
  .rmk-searchbar.rsb-step-hub .rsb-mobile-head{background:transparent;}
  .rmk-searchbar.rsb-step-hub:has(.rso-hub-value:not(:empty)) .rsb-mobile-head{
    background:#fff;border-bottom:1px solid var(--line);}
  .rsb-mobile-back,.rsb-mobile-close{border:0;background:transparent;color:var(--muted);
    display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;flex:0 0 28px;}
  .rsb-mobile-back{display:none;}
  .rsb-mobile-title{display:none;flex:1;text-align:center;font-size:14px;font-weight:600;color:var(--val);}
  .rsb-mobile-summary{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;text-align:center;}
  .rsb-mobile-summary-sub{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rsb-mobile-summary-main{font-size:16px;font-weight:700;color:var(--val);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  .rso-hub{display:none;flex-direction:column;padding:16px;flex:1;gap:5px;border-radius:8px;}
  .rmk-searchbar.rsb-step-hub .rso-hub{display:flex;}
  .rso-hub:has(.rso-hub-value:not(:empty)){background:#fff;}
  /* Фон полей — #eff1f3 ОДИНАКОВЫЙ что у пустых, что у заполненных (сверено с обоими
     референсами Figma: "Нажали сбросить" и "Телефон" — значение совпадает в обоих один в
     один). Раньше тут была разница (#f5f6f7 у пустых) — она была придумана "по ходу",
     не по макету. Тень — точно как в макете, мягкая, у каждого поля. */
  .rso-hub-row{display:flex;align-items:center;gap:10px;flex:0 0 auto;
    border:0;background:#eff1f3;border-radius:25px;height:50px;padding:0 20px;text-align:left;
    box-shadow:0 25px 33px rgba(225,231,240,.2);}
  .rso-hub-text{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;}
  .rso-hub-label{font-size:14px;font-weight:600;line-height:14px;color:#5e6272;}
  .rso-hub-value{display:none;font-size:14px;font-weight:600;line-height:14px;color:#5e6272;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  /* Заполненное поле — плавающий лейбл: мельче и серее сверху, значение крупнее снизу. */
  .rso-hub-row:has(.rso-hub-value:not(:empty)) .rso-hub-label{font-size:10px;color:#8291a7;margin-bottom:3px;}
  .rso-hub-row:has(.rso-hub-value:not(:empty)) .rso-hub-value{display:block;}
  .rso-hub-ic{color:var(--val);display:flex;flex:0 0 auto;}
  .rso-hub-ic svg{width:22px;height:22px;}
  /* Общая панель действий — видна на любом шаге мобильного оверлея (хаб/даты/гости/адрес).
     ВАЖНО: раньше это был flex-элемент с margin-top:auto — но auto-отступ в flex-колонке
     съедает ВСЁ свободное место раньше, чем соседний flex:1-блок (.rso-hub и т.п.) успевает
     вырасти, поэтому белая карточка обрывалась раньше времени, а кнопки оказывались то у
     самого низа, то заметно выше него в зависимости от шага. Теперь панель выведена из потока
     (position:fixed внизу .rmk-searchbar) — она всегда ровно на одном и том же месте у нижнего
     края экрана с небольшим фиксированным отступом, независимо от высоты экрана устройства и
     от того, сколько контента над ней; .rmk-searchbar сам — position:fixed, поэтому fixed
     внутри него позиционируется относительно него же (т.е. относительно всего экрана). */
  .rmk-searchbar.is-open .rso-hub-actions{display:flex;position:fixed;left:0;right:0;bottom:0;
    gap:22px;padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px));background:inherit;}
  /* На шаге «Хаб» карточка полей белая только когда хоть одно поле заполнено (см. .rso-hub
     выше) — панель кнопок физически вне этой карточки (position:fixed), поэтому background:
     inherit сам эту белизну не подхватывает и остаётся серым фоном .rmk-searchbar. Дублируем
     то же условие явно, чтобы кнопки визуально лежали на одном сплошном белом фоне с карточкой. */
  .rmk-searchbar.rsb-step-hub.is-open:has(.rso-hub-value:not(:empty)) .rso-hub-actions{background:#fff;}
  /* Шаг «Гости» — своя единственная кнопка подтверждения вместо пары Сбросить/Найти. */
  .rmk-searchbar.rsb-step-guests.is-open .rso-hub-actions{display:none;}
  .rmk-searchbar.rsb-step-guests.is-open .rso-guest-actions{display:flex;position:fixed;left:0;right:0;bottom:0;
    padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px));background:inherit;}
  .rso-hub-reset,.rso-hub-find{flex:1;border:0;border-radius:5px;height:50px;font-size:16px;font-weight:600;color:#fff;
    box-shadow:0 4px 4px rgba(0,0,0,.25),0 25px 33px rgba(225,231,240,.2);}
  .rso-hub-reset{background:var(--blue);}
  .rso-hub-find{background:var(--orange);}
  /* Контент шагов должен уметь проскроллиться целиком выше зафиксированной панели кнопок —
     иначе последние строки/дни календаря она бы перекрывала. 82px ≈ высота панели (кнопка 50px
     + отступы 16+16) с запасом. */
  .rso-hub,.rmk-searchbar .rsb-where,.rmk-searchbar .rsb-datefields,.rmk-searchbar .rsb-guests{
    padding-bottom:calc(82px + env(safe-area-inset-bottom,0px));}

  .rmk-searchbar .rsb-where,
  .rmk-searchbar .rsb-datefields,
  .rmk-searchbar .rsb-guests{display:none;padding:16px;}
  .rmk-searchbar.rsb-step-where .rsb-where{display:flex;flex-direction:column;flex:none;}
  .rmk-searchbar.rsb-step-dates .rsb-datefields{display:block;flex:none;position:static;}
  .rmk-searchbar.rsb-step-guests .rsb-guests{display:flex;flex-direction:column;flex:none;}

  .rmk-searchbar .rsb-field + .rsb-field::before,
  .rmk-searchbar .rsb-field + .rsb-datefields::before,
  .rmk-searchbar .rsb-datefields + .rsb-field::before{display:none;}

  .rmk-searchbar .rsb-where .rsb-label{display:none;}
  .rmk-searchbar .rsb-where .rsb-input{font-size:16px;border:1px solid #cbd2dc;border-radius:20px;
    padding:10px 40px 10px 20px;}
  .rmk-searchbar .rsb-where .rsb-clear{right:30px;}
  .rmk-searchbar .rwd{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    width:auto;max-width:none;padding:8px 0 0;margin-top:6px;}
  .rmk-searchbar .rwd:before,.rmk-searchbar .rwd:after{display:none;}

  /* Поля Заезд/Отъезд на мобильном шаге «Даты» скрыты целиком (как и раньше со старым
     .rdc-календарём) — виден только сам календарь. AirDatepicker в inline-режиме (script.js)
     при биндинге на <input> всегда вставляет себя следующим соседом внутри родителя инпута
     (это поведение самой библиотеки, container-опция для этого случая не работает) — то есть
     прямо внутри .rsb-field.rsb-checkin/.rsb-checkout, поэтому показываем/прячем саму обёртку
     через .is-cal-active (см. showPicker() в script.js), а не отдельный контейнер. */
  .rmk-searchbar .rsb-checkin,.rmk-searchbar .rsb-checkout{display:none;}
  .rmk-searchbar .rsb-checkin.is-cal-active,.rmk-searchbar .rsb-checkout.is-cal-active{display:block;}
  .rmk-searchbar .rsb-checkin > .rsb-label,.rmk-searchbar .rsb-checkin > .rsb-input,.rmk-searchbar .rsb-checkin > .rsb-cal-icon,
  .rmk-searchbar .rsb-checkout > .rsb-label,.rmk-searchbar .rsb-checkout > .rsb-input,.rmk-searchbar .rsb-checkout > .rsb-cal-icon{
    display:none;}
  .rmk-searchbar .rsb-checkin .air-datepicker,.rmk-searchbar .rsb-checkout .air-datepicker{
    position:static;width:100%;max-width:none;border:none;box-shadow:none;padding:0;}
  .rmk-searchbar .rsb-checkin .air-datepicker-nav--title,.rmk-searchbar .rsb-checkout .air-datepicker-nav--title{
    font-size:20px;font-weight:600;color:var(--text);}

  .rmk-searchbar .rsb-guests .rsb-label,
  .rmk-searchbar .rsb-guests .rsb-input{display:none;}
  .rmk-searchbar .rgd{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    width:auto;max-width:none;padding:0;}
  .rmk-searchbar .rgd:before,.rmk-searchbar .rgd:after{display:none;}

  .rmk-searchbar .rsb-go{display:none;}
}