/* ============================================================================= Попап номера на детальной отеля — 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 монтируется прямо в (не внутрь .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,.hrp__more: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) var(--sp-4);margin:0;padding:0;list-style:none;} .hrp__fact{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-15);font-weight:600;color:var(--ink);} .hrp__fact svg,.hrp__li svg,.hrp__chip svg,.hrp__status svg,.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__fact svg{color:var(--muted);} .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{color:var(--ink);font-size:var(--fs-15);} .hrp__rate svg{color:var(--gold);fill:var(--gold);stroke:var(--gold);} .hrp__chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3);} .hrp__chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 var(--sp-3);border-radius:var(--r-pill); background:var(--paper);color:var(--ink-2);font-size:var(--fs-13);font-weight:600;} .hrp__chip--accent{background:var(--blue-soft);color:var(--blue);} /* --- Плашка статуса (доступность на даты) ---------------------------------- */ .hrp__status{display:flex;gap:var(--sp-3);align-items:flex-start;margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4); border-radius:var(--r-m);background:var(--paper);} .hrp__status > svg{width:22px;height:22px;margin-top:1px;} .hrp__status-t{font-size:var(--fs-15);font-weight:700;line-height:1.35;} .hrp__status-s{margin-top:2px;font-size:var(--fs-13);line-height:1.45;color:var(--ink-2);} .hrp__status--ok{background:var(--green-soft);} .hrp__status--ok > svg{color:var(--green);} .hrp__status--bad{background:var(--coral-soft);} .hrp__status--bad > svg{color:var(--coral);} .hrp__status--info{background:var(--blue-soft);} .hrp__status--info > svg{color:var(--blue);} .hrp__status--wait > svg{color:var(--muted);animation:hrpSpin 1s linear infinite;} @keyframes hrpSpin{to{transform:rotate(360deg);}} /* --- Секции ---------------------------------------------------------------- */ .hrp__sec{margin-top:var(--sp-6);padding-top:var(--sp-6);border-top:1px solid var(--line-2);} .hrp__h{margin:0 0 var(--sp-3);font-size:var(--fs-17);font-weight:700;letter-spacing:-.01em;} .hrp__list{margin:0;padding:0;list-style:none;display:grid;gap:var(--sp-2);} .hrp__li{display:flex;align-items:flex-start;gap:var(--sp-2);font-size:var(--fs-15);line-height:1.4;color:var(--ink);} .hrp__li svg{margin-top:2px;color:var(--green);} .hrp__li--no svg{color:var(--muted-2);} .hrp__li--no{color:var(--muted);} .hrp__li--bed svg{color:var(--ink-2);} .hrp__li b{font-weight:700;} .hrp__desc{font-size:var(--fs-15);line-height:1.6;color:var(--ink-2);white-space:pre-line;} .hrp__desc.is-clamped{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;} .hrp__more{display:inline-flex;align-items:center;min-height:var(--tap);padding:0;margin-top:var(--sp-1);border:0;background:none; font:600 var(--fs-15)/1.2 var(--font);color:var(--blue);cursor:pointer;} .hrp__cat + .hrp__cat{margin-top:var(--sp-5);} .hrp__cat-t{margin:0 0 var(--sp-2);font-size:var(--fs-12);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);} .hrp__cat .hrp__list{grid-template-columns:1fr;} .hrp__times{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-bottom:var(--sp-3);} .hrp__time{padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-m);} .hrp__time span{display:block;font-size:var(--fs-12);color:var(--muted);} .hrp__time b{display:block;margin-top:2px;font-size:var(--fs-20);font-weight:700;font-variant-numeric:tabular-nums;} /* --- Нижняя панель: цена и главное действие -------------------------------- */ .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;} .hrp__cta .hrp__spin{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:hrpSpin .8s linear infinite;} .hrp__err{margin-top:var(--sp-2);font-size:var(--fs-13);line-height:1.4;color:var(--coral);font-weight:600;} .hrp__err:empty{display:none;} html.hrp-lock,html.hrp-lock body{overflow:hidden !important;} /* --- Карточка номера на странице: кликабельна целиком ---------------------- */ .hd-room[data-room-id]{cursor:pointer;} /* --- t_676b5414 (21.09.2026): тире перед каждым пунктом ------------------------ Глобальное правило темы Aspro (li::before с «—», styles.min.css) протекало в списки попапа: перед фактами («— до 2 гостя»), кроватью и каждым удобством рисовалось тире. Гасим точечно на уровне списков попапа (специфичность выше темы, без !important) — не трогая остальной сайт. */ .hrp .hrp__facts > li::before,.hrp .hrp__facts > li::after, .hrp .hrp__list > li::before,.hrp .hrp__list > li::after{content:none;display:none;} /* --- Десктоп: модалка по центру ---------------------------------------------- */ @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__cat .hrp__list{grid-template-columns:1fr 1fr;column-gap:var(--sp-6);} .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;} .hrp__status--wait > svg,.hrp__cta .hrp__spin{animation: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);}