/* =============================================================================
   Попап номера на детальной отеля — t_80266c45 (вёрстка) + t_fb57ba40 (роутинг).
   Mobile-first: базовые правила — 360–430px, десктоп — @media (min-width:901px),
   тот же брейкпоинт, что у hotel-detail-v2.css.

   Только токены и компоненты кита /js/vse-ui.css (диздок /js/vse-ui.README.md):
   ни одного хекса, кегля или радиуса вне токенов. Кнопки — .vs-btn с ролями,
   шторка — геометрия .vs-sheet (скругление сверху, ручка, заголовок, тело,
   главное действие внизу). На экране ровно одна primary — главное действие
   в нижней панели.

   Корневой узел .hrp монтируется прямо в <body> (не внутрь .hd-wrap): у обёртки
   страницы есть свой stacking context, из которого z-index не перебивает шапку
   темы — та же ловушка, что уже обходили в галерее отеля (t_004867b8).
   ============================================================================= */

.hrp{position:fixed;inset:0;z-index:1000000;display:none;font-family:var(--font);color:var(--ink);}
.hrp.is-mounted{display:block;}
.hrp *{box-sizing:border-box;}

.hrp__scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity .28s ease;}
.hrp.is-open .hrp__scrim{opacity:1;}

/* --- Шторка ---------------------------------------------------------------- */
.hrp__sheet{
  position:absolute;left:0;right:0;bottom:0;
  top:calc(env(safe-area-inset-top,0px) + var(--sp-3));
  display:flex;flex-direction:column;overflow:hidden;
  transform:translate3d(0,100%,0);
  transition:transform .34s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
  outline:none;
}
.hrp.is-open .hrp__sheet{transform:translate3d(0,0,0);}
.hrp.is-dragging .hrp__sheet,.hrp.is-dragging .hrp__scrim{transition:none;}

.hrp__head{flex:0 0 auto;position:relative;background:var(--card);border-bottom:1px solid transparent;transition:border-color .2s;}
.hrp.is-scrolled .hrp__head{border-bottom-color:var(--line);}
.hrp__grip{display:block;width:36px;height:4px;border-radius:var(--r-pill);background:var(--line);margin:var(--sp-2) auto 0;}
.hrp__bar{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-2) var(--sp-2) var(--sp-4);min-height:calc(var(--tap) + var(--sp-2));}
.hrp__title{flex:1 1 auto;min-width:0;margin:0;font-size:var(--fs-17);font-weight:700;line-height:1.25;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hrp__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);border-radius:var(--r-pill);border:0;background:none;color:var(--ink-2);cursor:pointer;}
.hrp__icon:hover{background:var(--paper);color:var(--ink);}
.hrp__icon:focus-visible,.hrp .vs-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.hrp__icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}

.hrp__body{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:0 var(--sp-4) var(--sp-6);background:var(--card);}

/* --- Галерея --------------------------------------------------------------- */
.hrp__gal{position:relative;margin:0 calc(-1 * var(--sp-4));background:var(--paper);}
.hrp__track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;
  aspect-ratio:4/3;overscroll-behavior-x:contain;}
.hrp__track::-webkit-scrollbar{display:none;}
.hrp__track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;scroll-snap-stop:always;display:block;background:var(--line-2);}
.hrp__cnt{position:absolute;right:var(--sp-3);bottom:var(--sp-3);padding:var(--sp-1) 10px;border-radius:var(--r-pill);
  background:var(--scrim);color:var(--on-media);font-size:var(--fs-12);font-weight:600;font-variant-numeric:tabular-nums;pointer-events:none;}
.hrp__arrow{display:none;position:absolute;top:50%;transform:translateY(-50%);width:var(--tap);height:var(--tap);
  border-radius:var(--r-pill);border:0;background:var(--glass);color:var(--ink);box-shadow:var(--sh-2);cursor:pointer;
  align-items:center;justify-content:center;}
.hrp__arrow svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.hrp__arrow--prev{left:var(--sp-3);} .hrp__arrow--next{right:var(--sp-3);}
.hrp__nophoto{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:var(--muted-2);}
.hrp__nophoto svg{width:48px;height:48px;stroke:currentColor;fill:none;stroke-width:1.4;}

/* --- Шапка номера: факты и рейтинг ---------------------------------------- */
.hrp__lead{padding-top:var(--sp-4);}
.hrp__facts{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0;padding:0;} /* t_202951b2 (D70): обёртка статичных VS::chip — только раскладка */
.hrp__rate svg{flex:0 0 auto;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.hrp__rate{display:inline-flex;align-items:center;gap:6px;margin-top:var(--sp-3);font-size:var(--fs-14);color:var(--ink-2);}
.hrp__rate b:not(.vs-rate){color:var(--ink);font-size:var(--fs-15);}
.hrp__rate b.vs-rate{font-size:var(--fs-14);}
.hrp__rate svg{color:var(--gold);fill:var(--gold);stroke:var(--gold);}





/* --- Плашка статуса — кирпич VS::notice (t_b23ad0d2, кит /js/vse-ui.css); здесь только отступы места (.hrp .vs-notice) */
/* t_202951b2 (D77): предоплата, отмена и оплата под статусом — плашки VS::notice (кит), своих правил нет */

/* --- Секции, описание, кровати, удобства, правила, вкладки — кирпичи Лего (VS::section density=sheet, VS::about, VS::amenities, VS::terms, VS::tabs; t_31cbd07b), своих правил нет --- */

/* --- Нижняя панель: цена и главное действие -------------------------------- */
.hrp__foot{flex:0 0 auto;background:var(--card);border-top:1px solid var(--line);
  padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-b));}
.hrp__foot-row{display:flex;align-items:center;gap:var(--sp-3);}
.hrp__price{flex:1 1 auto;min-width:0;}
.hrp__price-v{font-size:var(--fs-20);font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;}
.hrp__price-s{margin-top:1px;font-size:var(--fs-12);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hrp__price--muted .hrp__price-v{font-size:var(--fs-15);color:var(--ink-2);}
.hrp__cta{flex:0 0 auto;min-width:160px;min-height:48px;font-size:var(--fs-15);}
.hrp__cta.is-busy{pointer-events:none;}



html.hrp-lock,html.hrp-lock body{overflow:hidden !important;}

/* --- Карточка номера на странице: кликабельна целиком ---------------------- */
.hd-room[data-room-id]{cursor:pointer;}

/* t_202951b2 (D70): факты — статичные VS::chip в div.hrp__facts (не список), тире темы Aspro их не касается — правило для li убрано */

/* --- Десктоп: модалка по центру ---------------------------------------------- */
@media (hover:hover){
  .hrp__gal:hover .hrp__arrow{display:inline-flex;}
}
@media (min-width:901px){
  .hrp__sheet{
    left:50%;top:50%;right:auto;bottom:auto;
    width:min(920px, calc(100vw - 48px));height:min(88vh, 900px);
    border-radius:var(--r-l);box-shadow:var(--sh-2);
    transform:translate3d(-50%,-47%,0) scale(.985);opacity:0;
    transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s ease;
  }
  .hrp.is-open .hrp__sheet{transform:translate3d(-50%,-50%,0);opacity:1;}
  .hrp__grip{display:none;}
  .hrp__bar{padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-6);}
  .hrp__title{font-size:var(--fs-20);}
  .hrp__body{padding:0 var(--sp-6) var(--sp-8);}
  .hrp__gal{margin:0;border-radius:var(--r-m);overflow:hidden;}
  .hrp__track{aspect-ratio:16/9;}
  .hrp__foot{padding:var(--sp-3) var(--sp-6);}
  .hrp__cta{min-width:220px;}
}

@media (prefers-reduced-motion:reduce){
  .hrp__sheet,.hrp__scrim{transition:none;}
}

/* t_a4f7935e: раздел «Отзывы» варианта. Карточки — общие с детальной (hd-reviews.css), тут только сводка и оболочка на токенах кита. */
.hrp__rv-sum{display:flex;align-items:center;gap:var(--sp-5);margin-bottom:var(--sp-4);}
.hrp__rv-score{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;}
.hrp__rv-score b{font-size:32px;line-height:1;letter-spacing:-.02em;color:var(--ink);}
.hrp__rv-score span{font-size:var(--fs-13);color:var(--ink-2);}
.hrp__rv-bars{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.hrp__rv-row{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-13);color:var(--ink-2);}
.hrp__rv-row span{flex:0 0 12px;text-align:right;}
.hrp__rv-row i{flex:1;height:6px;border-radius:var(--r-pill);background:var(--line-2);overflow:hidden;display:block;}
.hrp__rv-row u{display:block;height:100%;background:var(--gold);border-radius:var(--r-pill);text-decoration:none;min-width:2px;}
.hrp__rv-row em{flex:0 0 30px;text-align:right;font-style:normal;color:var(--muted);}
.hrp__rv-wait{padding:var(--sp-3) 0;font-size:var(--fs-14);color:var(--muted);}
.hrp .hd-rvc{border-color:var(--line-2);border-radius:var(--r-m);padding:var(--sp-3) var(--sp-4);}
.hrp .hd-rvc--bare{border-color:transparent;}
.hrp .hd-rv__more{width:100%;border-radius:var(--r-m);}

/* t_50b76612 (26.09.2026): даты и гости поверх попапа. Виджет .hd-booking страницы на время
   переносится в эту шторку (JS), поэтому здесь только оболочка. Строка «2–4 окт · 2 гостя ·
   Изменить» — над ценой в футере, когда даты уже выбраны. */
.hrp__dates{position:absolute;inset:0;z-index:5;}
.hrp__dates[hidden]{display:none;}
.hrp__dates-scrim{position:absolute;inset:0;background:var(--scrim);}
.hrp__dates-sheet{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--card);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--sh-3);padding:0 0 var(--safe-b);}
.hrp__dates-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-3) var(--sp-2) var(--sp-5);background:var(--card);font-size:var(--fs-17);}
.hrp__dates-slot .hd-booking{margin:0;border:0;box-shadow:none;border-radius:0;position:static;padding:0 var(--sp-5) var(--sp-5);}
@media (min-width:900px){
  .hrp__dates-sheet{left:50%;top:50%;bottom:auto;width:440px;transform:translate(-50%,-50%);border-radius:var(--r-xl);max-height:86vh;}
}
.hrp__when{display:flex;align-items:center;gap:var(--sp-2);width:100%;min-height:var(--tap);margin:0 0 var(--sp-2);padding:0 var(--sp-3);
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper);color:var(--ink);font:600 var(--fs-14)/1.2 var(--font);cursor:pointer;text-align:left;}
.hrp__when svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.hrp__when-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hrp__when-edit{flex:none;color:var(--blue);font-weight:600;font-size:var(--fs-13);}
.hrp__when:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

/* t_50b76612 доработка (26.09.2026, Данил: «календарь открывается под попапом + некрасиво»).
   1) Календарь и выбор гостей sc-* порталятся в <body> с z-index 9999, попап — 1000000:
      пока попап открыт (html.hrp-lock), поднимаем их (и подложку календаря) над попапом.
   2) В шторке попапа виджет страницы без «Цена от … / ночь» отеля — здесь речь о ЭТОМ варианте,
      его цена уже в футере попапа; кнопка — главная кнопка кита на всю ширину. */
html.hrp-lock .sc-cal-backdrop{z-index:1000015;}
html.hrp-lock .sc-calendar-dropdown,
html.hrp-lock .sc-guests-dropdown{z-index:1000020;}
.hrp__dates-slot .hd-booking .from,
.hrp__dates-slot .hd-booking .price{display:none;}
.hrp__dates-slot .hd-booking{padding-top:var(--sp-1);}
.hrp__dates-slot .hd-booking .sc-fields--detail-mobile{margin-bottom:var(--sp-4);}
.hrp__dates-slot .hd-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;border:0;border-radius:var(--r-m);
  background:var(--blue);color:var(--on-accent);font:700 var(--fs-15)/1 var(--font);cursor:pointer;}
.hrp__dates-sub{margin:0;padding:0 var(--sp-5) var(--sp-3);font-size:var(--fs-13);color:var(--muted);}
/* t_a457f865: фото отеля и варианта открываются на весь экран — курсор это подсказывает */
.hrp__track img,#hdGalTrack img{cursor:zoom-in;}
#hdGalTrack:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;}

/* ---- t_4fd2007e: фото по разделам (как у Суточно) ---- */
.hrp__pgcap{position:absolute;left:var(--sp-3,12px);bottom:var(--sp-3,12px);padding:5px 10px;border-radius:var(--r-pill,999px);background:rgba(18,33,59,.72);color:#fff;font:600 var(--fs-13)/1.2 'Inter',sans-serif;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);pointer-events:none;transition:opacity .2s;}
.hrp__pgcap[hidden]{display:none;}
.hrp__pg{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:10px calc(-1 * var(--sp-4,16px)) 0;padding:0 var(--sp-4,16px) 2px;}
.hrp__pg::-webkit-scrollbar{display:none;}
.hrp__pgc{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;margin:0;padding:0 12px;border:1px solid var(--line,#e3e7ec);border-radius:var(--r-pill,999px);background:#fff;color:var(--ink,#12213b);font:600 13px/1 'Inter',sans-serif;cursor:pointer;transition:background .18s,border-color .18s,color .18s;-webkit-tap-highlight-color:transparent;}
.hrp__pgc em{font-style:normal;font-weight:400;color:var(--muted,#6b7a90);}
.hrp__pgc:hover{border-color:var(--ink,#12213b);}
.hrp__pgc.is-on{background:var(--ink,#12213b);border-color:var(--ink,#12213b);color:#fff;}
.hrp__pgc.is-on em{color:rgba(255,255,255,.75);}
@media (min-width:768px){.hrp__pg{margin:10px 0 0;padding:0 0 2px;}}

/* t_b0ca54bd → t_202951b2 (D77): условия отмены и способ оплаты — плашки VS::notice, правила лесенки (hrp__terms/tl/pay) убраны */

/* ---- t_1377b1c2: удобства в попапе номера — группы как в шторке ---- */
/* t_94c62386: липкая навигация по разделам попапа */
.hrp__nav{position:sticky;top:0;z-index:6;margin:12px calc(-1 * var(--sp-4,16px)) 4px;padding:0 var(--sp-4,16px);background:var(--card,#fff);box-shadow:0 1px 0 var(--line,#e6e9ee);}
/* t_600436eb: даты и гости в футере попапа — две кнопки */
.hrp__when2{display:flex;height:44px;margin:0 0 10px;border:1px solid var(--line,#e6e9ee);border-radius:12px;overflow:hidden;background:var(--card,#fff);}
.hrp__when2-b{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 10px;border:0;background:none;color:var(--ink,#12213b);font:600 14px/1.1 var(--font,'Inter',sans-serif);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.hrp__when2-b + .hrp__when2-b{border-left:1px solid var(--line,#e6e9ee);}
.hrp__when2-b:hover,.hrp__when2-b:active{background:var(--paper,#f4f6f9);}
.hrp__when2-b svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--blue,#2f6fed);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.hrp__when2-b span{min-width:0;overflow:hidden;text-overflow:ellipsis;}
/* шторки дат/гостей поверх попапа */
html.hrp-lock .sc-calendar-dropdown.sc-has-head,html.hrp-lock .sc-guests-dropdown.sc-has-head{z-index:1000003!important;}
html.hrp-lock .sc-sheet-backdrop.show{display:block!important;z-index:1000002!important;}
/* t_530c5538: попап на мобиле — шторка (свайп вниз/тап по фону), крестик не нужен */
@media (max-width:900px){.hrp__head .hrp__icon[data-hrp-close]{display:none!important;}}
/* t_6127687c: мобила — навигация липнет к низу тела попапа, выезжает после галереи */
@media (max-width:900px){
  .hrp__nav.hrp__nav--bottom{top:auto;bottom:0;margin:12px calc(-1 * var(--sp-4,16px)) calc(-1 * var(--sp-6,24px));box-shadow:0 -1px 0 var(--line,#e6e9ee),0 -6px 16px rgba(18,33,59,.06);transform:translateY(110%);opacity:0;transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .25s ease;pointer-events:none;}
  .hrp__nav.hrp__nav--bottom.is-on{transform:none;opacity:1;pointer-events:auto;}
}
/* t_600436eb: компоновка попапа на мобиле */
@media (max-width:900px){
  .hrp__body:has(.hrp__nav--bottom){padding-bottom:0!important;}
  .hrp__nav.hrp__nav--bottom{bottom:0!important;margin-bottom:0!important;}
  .hrp__when2{height:38px;margin:0 0 8px;}
  .hrp__when2-b{font-size:var(--fs-14);}
}
/* t_e21cd21e: красный акцент бренда в попапе */
.hrp__when2-b svg{stroke:var(--blue,#1E4FA3);}
@media (min-width:901px){.hrp__nav{margin-left:calc(-1 * var(--sp-6,24px));margin-right:calc(-1 * var(--sp-6,24px));padding:0 var(--sp-6,24px);}}

/* ==========================================================================
   t_aacb3ba8 (Данил 29.09): попап номера — та же система, что на детальной.
   Кегли (моб/деск): заголовок попапа 18/21 · заголовок секции 18/20 · текст 15 · мета 14 · подпись 13.
   Отступы: --p-sec секция 24/28 (сверху от разделителя и под ним) · --p-h заголовок→содержимое 14/16
            --p-blk между блоками 14/16 · --p-el внутри блока 8/10.
   ========================================================================== */
/* t_9c856fe2: значения — в ките (--vs-s-*), здесь алиасы */
.hrp{--p-sec:var(--vs-s-sec);--p-h:var(--vs-s-h);--p-blk:var(--vs-s-blk);--p-el:var(--vs-s-el);--p-fs-t:var(--vs-s-fs-t);--p-fs-h:var(--vs-s-fs-h);}
@media (min-width:901px){.hrp .hrp__title{font-size:var(--p-fs-t)!important;font-weight:700!important;line-height:1.25!important;letter-spacing:-.015em;}} /* t_52e4546d: на телефоне заголовок — канон VS::sheet v2 */
/* лид: факты → оценка → чипы → статус, единый шаг */
.hrp .hrp__lead{display:flex!important;flex-direction:column;gap:var(--p-blk);padding-top:var(--p-blk)!important;}
.hrp .hrp__lead > *{margin:0!important;}
.hrp .hrp__facts{gap:var(--p-el);}
.hrp .hrp__rate{display:inline-flex!important;align-items:center;gap:8px!important;font-size:14px;color:var(--muted,#6b7a90);}
.hrp .hrp__rate > svg{display:none;}
.hrp .hrp__rate .vs-rate{font-size:15px!important;padding:4px 9px!important;border-radius:9px;}
.hrp .hrp__rword{font-size:15px;font-weight:700;color:var(--ink,#12213b);}
.hrp .hrp__lead + div{margin-top:var(--p-blk)!important;}
.hrp .vs-notice{margin-top:0!important;}
/* секции — VS::section density=sheet (кит) */
.hrp .hrp__pg{margin-top:var(--p-el)!important;}

/* ==========================================================================
   t_aacb3ba8 v3 (Данил 29.09): компоновка содержимого попапа как на детальной
   ========================================================================== */
.hrp .hrp__rate + .hrp__chips{margin-top:-4px!important;}

/* бронирование (t_202951b2, D77): статус, предоплата, отмена, оплата — столбец плашек VS::notice; здесь только шаг между ними */
.hrp [data-hrp-status]{display:flex;flex-direction:column;gap:var(--p-el);}

/* «О номере»: VS::about (t_31cbd07b) — своих правил нет */

/* «Удобства»: VS::amenities (t_31cbd07b) — своих правил нет */
/* «Заселение и правила»: VS::terms (t_31cbd07b) — своих правил нет */
/* t_fa8bb504 (07.10): тело попапа — flex-колонка (кит .vs-sheet__body); дети с overflow (галерея, чипы групп фото,
   статус цены) сжимались до 0, когда содержимое длиннее окна. Не сжимаем. */
.hrp__body > *{flex-shrink:0;}