/* Depends on .container from base.css (see nav-tabs .container below) -- relies
on css.php's $nvFiles bundle order (fonts, tokens, base, layout); reordering
that array would break this without warning. */
/* ── HEADER ── */
/* ── TEST MODE BANNER ── */
/* Dev/staging only. Legacy pages style this from styles.css; the redesigned
templates do not load that file, so it needs its own rules here. */
#testModeWarning{background:var(--gold);color:#3d2a00;font-size:.78rem;font-weight:600;padding:7px 0;border-bottom:1px solid rgba(0,0,0,.12)}
#testModeWarning .container{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center}
#testModeWarning strong{font-weight:800;text-transform:uppercase;letter-spacing:.04em}
#testModeWarning svg{flex-shrink:0}
.tmw-sep{width:1px;height:14px;background:rgba(0,0,0,.25)}
@media(max-width:600px){#testModeWarning [lang=en],#testModeWarning .tmw-sep{display:none}}
/* ── TRUST BAR ── */
.trust-bar{background:#eef2f7;border-bottom:1px solid var(--g200);padding:7px 0;font-size:.75rem}
.trust-bar .container{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--g600)}
.trust-item svg{color:var(--blue)}
.site-header{background:var(--blue-dk);position:sticky;top:0;z-index:200;box-shadow:var(--sh2)}
.header-inner{display:flex;align-items:center;gap:14px;padding-block:11px}
.logo{flex-shrink:0;line-height:1}
/* width:auto is load-bearing because the ![]()
carries width/height
attributes: those map to presentational hints (low-specificity CSS), so
with only a height declared the hint would supply the width too. Declaring
width:auto lets the intrinsic ratio drive it while the attributes still
reserve the box before load.
The lockup is a fixed 58px so swapping the baked-in PNG for a wordmark plus
HTML strapline leaves the header exactly 80px (58 + 11 padding each side).
Centred rather than packed, so the pair sits on the old optical centre.
33px on the mark is not arbitrary: the wordmark's own ratio is 10.6242 (its
getBBox with the strapline removed), so 33px puts it at ~351px wide -- the
width the PNG lockup occupied. The header's horizontal rhythm is unchanged. */
.logo img{width:auto;display:block}
.logo-lockup{display:flex;flex-direction:column;justify-content:center;gap:3px;height:58px}
.logo-mark{height:33px}
/* The strapline the PNG used to carry. Letter-spacing tunes its measured width
to sit under the mark rather than running past it -- the site's font is not
the PT Sans the original artwork was set in, so the tracking has to be set
here rather than inherited from the asset. */
.logo-tag{font-size:.75rem;line-height:1;font-weight:600;white-space:nowrap;
color:rgba(255,255,255,.82)}
.hd-links{display:flex;align-items:center;gap:10px;margin-left:auto}
/* Signed-out account icon, phone only -- shown in the mobile block below. */
.hd-login-m{display:none;align-items:center;justify-content:center;width:38px;height:38px;
border-radius:50%;color:var(--white);flex-shrink:0;transition:background var(--t)}
.hd-login-m:active{background:rgba(255,255,255,.12)}
.hd-link{padding:8px 13px;border-radius:var(--r8);color:rgba(255,255,255,.78);font-size:.84rem;font-weight:600;transition:color var(--t),background var(--t)}
.hd-link:hover{color:var(--white);background:rgba(255,255,255,.1)}
.hd-btn{background:var(--orange);color:var(--white)!important;padding:8px 18px;border-radius:var(--r8);font-weight:700;transition:background var(--t),transform var(--t)}
.hd-btn:hover{background:var(--orange-dk);transform:translateY(-1px)}
.hd-social-label{color:rgba(255,255,255,.4);font-size:.78rem;font-weight:600}
.hd-divider{width:1px;height:24px;background:rgba(255,255,255,.15)}
.social-btn{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r8);background:rgba(255,255,255,.1);color:rgba(255,255,255,.9);font-size:.83rem;font-weight:600;border:1px solid rgba(255,255,255,.16);transition:background var(--t),transform var(--t)}
.social-btn:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
/* logged-in header */
.hd-user{display:flex;align-items:center;gap:6px;margin-left:auto}
.hd-ubadge{background:var(--orange);color:var(--white);font-size:.66rem;font-weight:700;border-radius:100px;padding:1px 6px;line-height:1.5}
.hd-uwho{position:relative;margin-left:6px}
.hd-uavatar{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:100px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);cursor:pointer;font-family:var(--f);transition:background var(--t)}
.hd-uavatar:hover{background:rgba(255,255,255,.18)}
.hd-uavatar .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#ff8a1f,#e2540a);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:700;flex-shrink:0}
.hd-uavatar .nm{font-size:.83rem;font-weight:700;color:var(--white);white-space:nowrap}
.hd-uavatar .nm .profile_alert img{display:inline-block;height:14px;margin-left:4px}
.hd-uavatar .cv{color:rgba(255,255,255,.5);flex-shrink:0;transition:transform var(--t)}
.hd-uwho.open .cv{transform:rotate(180deg)}
.hd-umenu{position:absolute;top:calc(100% + 8px);right:0;min-width:210px;background:var(--white);border-radius:var(--r12);box-shadow:var(--sh3);overflow:hidden;display:none;z-index:400}
/* The panel's own header -- avatar, name, close. Only used in the phone's
full-screen form; under the desktop chip the name is already beside it. */
.hd-umenu-top{display:none}
.hd-uwho.open .hd-umenu{display:block}
.hd-umenu a{display:flex;align-items:center;gap:9px;width:100%;padding:10px 16px;font-size:.85rem;font-weight:600;color:var(--g600);font-family:var(--f);transition:background var(--t),color var(--t)}
.hd-umenu a:hover{background:var(--off);color:var(--text)}
.hd-umenu a svg{color:var(--g400);flex-shrink:0}
.hd-umenu .out{border-top:1px solid var(--g100);color:var(--orange-dk)}
.hd-umenu .out svg{color:var(--orange)}
.hamburger{display:none;flex-direction:column;gap:5px;padding:8px;border-radius:var(--r8);transition:background var(--t);flex-shrink:0}
.hamburger span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;transition:transform var(--t),opacity var(--t)}
.hamburger:hover{background:rgba(255,255,255,.08)}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ── NAV TABS ── */
.nav-tabs{background:var(--blue);border-top:1px solid rgba(255,255,255,.08)}
.nav-tabs .container{display:flex;overflow-x:auto;scrollbar-width:none}
.nav-tabs .container::-webkit-scrollbar{display:none}
.ntab{flex-shrink:0;padding:11px 18px;font-size:.98rem;font-weight:600;color:rgba(255,255,255,.75);border-bottom:3px solid transparent;transition:color var(--t),border-color var(--t)}
.ntab:hover{color:var(--white)}
.ntab.active{color:var(--white);border-bottom-color:var(--orange)}
/* Pushes this tab and everything after it to the right-hand end. In the
scrolling state below the auto margin collapses on its own, so a narrow
window still gets an evenly packed, swipeable strip. */
.ntab-end{margin-left:auto}
/* ── MOBILE DRAWER ── */
.mob-nav{position:fixed;inset:0;z-index:500;pointer-events:none;visibility:hidden;transition:visibility 0s 220ms linear}
/* 220ms, matching the sheet -- NOT var(--t), which is 200ms. Two durations
running together meant the backdrop finished 120ms before the panel landed,
and that mismatch is what made the drawer read as less smooth than the
account panel, whose single transform is the only thing moving. */
.mob-nav .ov{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity 220ms ease}
/* Rises from the bottom edge, the way a phone sheet does -- both this and the
account panel are full-screen and opened from controls in the top-right, and
a horizontal slide read as a page swap rather than something being raised. */
.mob-nav .dr{position:absolute;top:0;left:0;bottom:0;width:280px;background:var(--blue-dk);transform:translateY(100%);transition:transform 220ms ease;will-change:transform;padding:20px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
/* The 220ms delay on visibility is for CLOSING only -- it keeps the sheet
painted long enough to slide back down. Left unqualified it applied on the
way in too, so the panel spent its entire entrance hidden and appeared,
already landed, at 220ms. That is why the drawer looked like it had no
animation at all while the account panel did: the panel overrides the delay
to 0 when opening, and this did not. */
.mob-nav.open{pointer-events:all;visibility:visible;transition:visibility 0s 0s linear}
.mob-nav.open .ov{opacity:1}
.mob-nav.open .dr{transform:translateY(0)}
.dr-close{align-self:flex-end;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-4px -4px 4px 0;border-radius:50%;color:rgba(255,255,255,.75);background:rgba(255,255,255,.08);cursor:pointer;transition:color var(--t),background var(--t)}
.dr-close:hover{color:var(--white);background:rgba(255,255,255,.18)}
/* The primary nav inside the drawer. The drawer previously carried no
links at all -- only the auth card -- so on mobile the site had no
navigation whatsoever. */
.dr-nav{display:flex;flex-direction:column;gap:2px;margin-bottom:18px}
.dr-nav-lnk{display:block;padding:13px 14px;border-radius:var(--r8);color:rgba(255,255,255,.82);font-size:1rem;font-weight:600;transition:color var(--t),background var(--t)}
.dr-nav-lnk:hover{color:var(--white);background:rgba(255,255,255,.08)}
.dr-nav-lnk.active{color:var(--orange)}
/* .dr-lnk / .dr-auth / .dr-or / .dr-soc / .dr-user / .dr-avatar removed with
the drawer's account block -- it is navigation only now, in both signed-in
and signed-out states. See header.php for where those links went. */
/* ── FOOTER ── */
.site-footer{background:var(--blue-dk);color:rgba(255,255,255,.6);padding:44px 0 22px}
/* The company column carries contact details rather than links, so it needs
more room than the two link columns beside it. */
/* brand · Оферти · Условия · Помощ. The operator's contact details are not a
column any more -- they run full width below, in .foot-info. */
.foot-grid{display:grid;grid-template-columns:1.5fr .9fr 1.15fr .9fr;gap:34px;margin-bottom:30px}
.foot-brand .foot-logo{margin-bottom:9px}
/* Wordmark only here, so 20px of letters rather than 28px of letters plus an
unreadable baked strapline. 20 x 10.6242 puts it at ~212px wide. */
.foot-brand .foot-logo img{height:20px;width:auto}
.foot-tag{font-size:.82rem;line-height:1.6;color:rgba(255,255,255,.6);max-width:340px}
/* The operator's details, one container each, across the full width. Auto-fit
rather than a fixed count so the row reflows to 3, 2 and 1 across without a
breakpoint per step -- there are five items and no width divides them evenly. */
/* Only a rule above it: .foot-bot already draws its own border-top, and the
two together read as a double line.
align-items:stretch (not the start it used to be) so every card is as tall
as the tallest in its row -- the working hours run to three lines and the
phone numbers to one, and ragged card bottoms read as broken rather than
as tidy. */
.foot-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;
padding:22px 0 0;margin-bottom:20px;border-top:1px solid rgba(255,255,255,.1);align-items:stretch}
.foot-info-item{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border-radius:var(--r8);
background:rgba(255,255,255,.04)}
.fi-ico{color:var(--orange);flex-shrink:0;margin-top:2px}
.fi-label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
color:rgba(255,255,255,.62);margin-bottom:3px}
.fi-value{display:block;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.82)}
.fi-value a{color:inherit;transition:color var(--t)}
.fi-value a:hover{color:var(--white)}
.foot-col h4{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.6);margin-bottom:12px}
.foot-col ul{display:flex;flex-direction:column;gap:7px}
.foot-col ul li a{font-size:.82rem;transition:color var(--t)}
.foot-col ul li a:hover{color:var(--white)}
/* Company contact block */
.foot-licence{font-size:.75rem;line-height:1.5;color:rgba(255,255,255,.45);margin-bottom:14px}
.foot-contact li{display:flex;align-items:flex-start;gap:10px;font-size:.82rem;line-height:1.55}
/* Nudged down so the glyph sits on the first line's centre, not its cap height. */
.fc-ico{flex-shrink:0;margin-top:3px;color:rgba(255,255,255,.45)}
.foot-contact a{transition:color var(--t)}
.foot-contact a:hover{color:var(--white)}
.foot-bot{border-top:1px solid rgba(255,255,255,.08);padding-top:18px;display:flex;justify-content:space-between;align-items:center;font-size:.74rem;flex-wrap:wrap;gap:10px}
.foot-bot .copyright a{color:var(--white);text-decoration:underline}
/* ── RESPONSIVE ── */
@media(max-width:1024px){
.foot-grid{grid-template-columns:1fr 1fr}
}
/* The mobile shell -- header, drawer, breadcrumbs, footer, newsletter popup.
900 to match listing/hotels/detail and listing.js min-width:901; see the
note in critical.css for the landscape dead band this closes. */
@media(max-width:900px){
.trust-bar{display:none}
/* The signed-out row -- "Вход с:", two social buttons, Вход, Регистрация --
has no room beside a burger and stays hidden; .hd-login-m replaces it. */
.hd-links{display:none}
/* Account control beside the burger, the way a phone header usually reads:
identity on the right, next to the menu. Signed in it is the avatar with
its own dropdown (the name and chevron are dropped -- at this width the
circle alone says who you are); signed out it is the person icon. */
.hd-user{display:flex}
.hd-uwho{margin-left:0}
.hd-uavatar{padding:0;background:none;border:none;gap:0}
.hd-uavatar:hover{background:none}
.hd-uavatar .nm,.hd-uavatar .cv{display:none}
.hd-uavatar .av{width:34px;height:34px;font-size:.8rem}
.hd-login-m{display:flex}
/* ── FULL-SCREEN ACCOUNT PANEL ─────────────────────────────────────────
The dropdown becomes a sheet covering the screen, the way a phone header
usually opens an account menu. A 210px card hanging off a 34px avatar is
a desktop shape: at this width its tap targets are cramped and it floats
over content it has nothing to do with.
z-index above .mob-nav (500) so it is never opened behind the drawer. */
.hd-umenu{position:fixed;inset:0;top:0;min-width:0;border-radius:0;
box-shadow:none;overflow-y:auto;z-index:600;
-webkit-overflow-scrolling:touch;
/* Same entrance as the drawer: rises from the bottom over 220ms ease.
Both are full-screen panels opened from the same corner, so they had
to stop behaving differently -- this one simply appeared.
display stays block and VISIBILITY does the hiding. display:none is not
animatable, so toggling it (which is what the desktop dropdown does)
would skip the transform entirely. The 220ms delay on visibility is
what keeps the panel on screen long enough to slide back down; on the
way in it is removed so it shows immediately. Same trick, same numbers
as .mob-nav. */
display:block;visibility:hidden;transform:translateY(100%);
transition:transform 220ms ease,visibility 0s 220ms linear;
/* Both sheets get the same compositing hint, so the slide moves a layer
rather than repainting the list inside it every frame. */
will-change:transform}
.hd-uwho.open .hd-umenu{visibility:visible;transform:translateY(0);
transition:transform 220ms ease,visibility 0s 0s linear}
.hd-umenu-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:14px 18px;border-bottom:1px solid var(--g200)}
.hd-umenu-who{display:flex;align-items:center;gap:11px;font-size:1rem;font-weight:700;color:var(--text)}
.hd-umenu-av{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
border-radius:50%;background:linear-gradient(135deg,#ff8a1f,#e2540a);
color:var(--white);font-size:.82rem;font-weight:700;flex-shrink:0}
.hd-umenu-x{display:flex;align-items:center;justify-content:center;width:42px;height:42px;
margin-right:-8px;border-radius:50%;color:var(--g600);cursor:pointer;flex-shrink:0;
transition:background var(--t)}
.hd-umenu-x:active{background:var(--off)}
/* Full-size rows rather than the dropdown's compact ones -- there is a whole
screen to spend and these are thumb targets now. */
.hd-umenu a{padding:16px 18px;font-size:1rem;border-bottom:1px solid var(--g100)}
/* Full-screen too, not a 280px rail with the page showing beside it. */
.mob-nav .dr{width:100%;padding:16px 18px}
.hamburger{display:flex;margin-left:0}
/* The free space belongs to the LOGO, not to any of the controls after it.
Hanging it off the account control worked while there was one, then broke
on /user/login, which sets $show_login_bar = FALSE: with neither .hd-user
nor .hd-login-m rendered nothing carried the auto margin and the burger sat
101px short of the edge, right against the wordmark. Pushing from the logo
pins whatever follows to the right whether that is two controls, one, or
none. */
.logo{flex-shrink:1;min-width:0;margin-right:auto}
.logo img{height:auto;width:auto;max-width:100%}
.logo-lockup{height:auto;gap:2px}
/* Smaller again: the row carries an account control and the burger as well
as the lockup, and the wordmark was still the widest thing in it. */
.logo-mark{max-height:19px}
/* The strapline is 51 characters; below this it cannot fit beside a
burger without shrinking to noise. The footer states it in full. */
.logo-tag{font-size:.47rem;overflow:hidden}
.foot-grid{grid-template-columns:1fr;gap:24px}
}
/* Under ~350px the wordmark stops being height-bound and starts being width-
bound -- at 320 it renders 161px wide while the strapline still measures 195,
so the line was clipped mid-word. Dropped rather than shrunk further: it is
already the smallest type on the page, and the footer carries it in full. */
@media(max-width:359px){
.logo-tag{display:none}
}
/* ── BREADCRUMBS ──────────────────────────────────────────────────────── */
.crumbs{background:var(--off);border-bottom:1px solid var(--g200);font-size:.78rem}
.crumbs ol{display:flex;align-items:center;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:11px 0}
.crumbs li{display:flex;align-items:center;gap:7px;color:var(--muted);min-width:0}
/* Separator on the pseudo-element rather than in the markup, so it is never
read out by a screen reader or copied with the text. */
.crumbs li+li::before{content:'›';color:var(--g400)}
.crumbs a{color:var(--muted);text-decoration:none;transition:color var(--t)}
.crumbs a:hover{color:var(--blue);text-decoration:underline}
.crumbs [aria-current="page"]{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ── EXIT-INTENT NEWSLETTER POPUP ─────────────────────────────────────── */
.nl-pop{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px}
.nl-pop[hidden]{display:none}
.nl-pop-ov{position:absolute;inset:0;background:rgba(0,20,45,.55);backdrop-filter:blur(2px)}
.nl-pop-card{position:relative;z-index:1;display:grid;grid-template-columns:1fr 240px;gap:24px;align-items:center;
width:min(760px,100%);background:var(--white);border-radius:var(--r16);box-shadow:var(--sh3);padding:38px 34px}
.nl-pop-x{position:absolute;top:12px;right:12px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
border-radius:50%;color:var(--muted);background:transparent;cursor:pointer;border:none;transition:color var(--t),background var(--t)}
.nl-pop-x:hover{color:var(--text);background:var(--off)}
.nl-pop-ttl{font-family:var(--fs);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;color:var(--blue);line-height:1.15;margin-bottom:10px}
.nl-pop-sub{font-size:1rem;color:var(--blue);opacity:.85;margin-bottom:20px}
.nl-pop-lbl{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.nl-pop-input{width:100%;padding:14px 16px;border-radius:var(--r8);border:1px solid var(--g200);background:var(--off);
font-family:var(--f);font-size:.95rem;color:var(--text)}
.nl-pop-input:focus{outline:2px solid var(--orange);outline-offset:1px;background:var(--white)}
.nl-pop-consent{display:flex;align-items:flex-start;gap:9px;margin:12px 0 16px;font-size:.78rem;color:var(--muted);line-height:1.45;cursor:pointer}
.nl-pop-consent input{margin-top:2px;flex-shrink:0;accent-color:var(--orange)}
.nl-pop-consent a{color:var(--blue);text-decoration:underline}
.nl-pop-btn{width:100%;padding:15px;border-radius:var(--r8);border:none;background:var(--orange);color:var(--white);
font-family:var(--f);font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:background var(--t)}
.nl-pop-btn:hover{background:var(--orange-dk)}
.nl-pop-form.busy{opacity:.6;pointer-events:none}
.nl-pop-msg{margin-top:12px;font-size:.82rem;line-height:1.5}
.nl-pop-msg.ok{color:var(--save)}
.nl-pop-msg.err{color:#c02626}
.nl-pop-art{align-self:center}
.nl-pop-art svg{width:100%;height:auto;display:block}
@media(max-width:640px){
/* The artwork is decoration; on a phone the form needs the room. */
.nl-pop-card{grid-template-columns:1fr;padding:34px 20px 24px}
.nl-pop-art{display:none}
}
/* ── BACK TO TOP ──────────────────────────────────────────────────────────
Site-wide, rendered by site_redesign_template.php next to the newsletter
popup and driven by nv/shell.js.
Deliberately the same control as the review rail's arrows (.rv-nav in
reviews.css): white disc, hairline border, soft blue-tinted shadow, filling
with blue on hover. The site already teaches that vocabulary for "circular
button that moves you somewhere", so back-to-top reads as part of the set
rather than a widget bolted on. 44px rather than .rv-nav's 42 because this
one is a primary touch target with nothing beside it to aim at.
Hidden state is opacity + visibility, NOT display:none: visibility keeps it
out of the tab order while still allowing the fade, and a page whose JS never
runs simply never shows it -- no dead button, no layout shift.
z-index 400 slots it under the mobile nav drawer (500), the favourites toast
(900) and the newsletter modal (2000), and over ordinary page content. It
clears .mob-filter-btn on mobile listings by geometry rather than by z-index:
that pill is centred (measured 127..248 of 390) while this sits in the right
corner (330..374), so the two share a baseline without ever touching. */
.to-top{position:fixed;right:16px;bottom:18px;z-index:400;
width:44px;height:44px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--white);border:1px solid var(--g200);color:var(--blue-dk);
box-shadow:0 4px 16px rgba(0,42,84,.16);cursor:pointer;padding:0;
opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity 180ms ease,transform 180ms ease,visibility 0s 180ms,
background var(--t),color var(--t),border-color var(--t)}
.to-top.is-on{opacity:1;visibility:visible;transform:none;
transition:opacity 180ms ease,transform 180ms ease,visibility 0s 0s,
background var(--t),color var(--t),border-color var(--t)}
.to-top:hover{background:var(--blue-dk);color:var(--white);border-color:var(--blue-dk)}
.to-top:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.to-top svg{display:block}
@media(min-width:901px){
.to-top{right:24px;bottom:24px}
}
@media(prefers-reduced-motion:reduce){
.to-top{transition:none}
}
/* ── ORDER STEPPER ────────────────────────────────────────────────────────
The numbered "1 -- 2 -- 3" row inside the dark page header, shared by both
purchase flows: the offer checkout (tro_checkout / tro_review / tro_pay,
three steps) and the gift-voucher order (gift_voucher_order / _preview, two).
It lives in layout.css rather than checkout.css because those two flows load
different bundles -- the voucher pages carry only hotels.css -- and a stepper
defined in checkout.css reached them as unstyled text. core is the only place
both are guaranteed to see, which is the same reason .to-top sits here.
Colours are hardcoded rgba(255,255,255,...) rather than tokens because this
only ever sits on the blue .hd-top / .co-top header; they are opacities of
the header's own white, not palette entries. */
.co-steps{display:flex;align-items:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.co-step{display:flex;align-items:center;gap:8px;font-size:.83rem;font-weight:600;color:rgba(255,255,255,.5)}
.co-step .n{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;
align-items:center;justify-content:center;font-size:.76rem;flex-shrink:0}
.co-step.on{color:var(--white)}
.co-step.on .n{background:var(--orange)}
.co-step-sep{width:26px;height:1px;background:rgba(255,255,255,.2)}
@media(max-width:640px){
/* Three labels of this length wrap into an uneven two-and-one with a stray
connector dangling. Stacked, the connector turns from a horizontal rule
into a downward chevron, sitting in the 24px column the number circles
occupy so the arrows line up with them. */
.co-steps{flex-direction:column;align-items:flex-start;gap:4px;margin-top:14px}
.co-step-sep{width:24px;height:14px;background:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-opacity='.45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:center;background-size:14px 14px}
}
/* ── FAVOURITES HEART ─────────────────────────────────────────────────────
Sits over a card image, or over a gallery on a detail page. The card itself
is an , so the button stops the click from following it (see
nv/favourites.js).
In core rather than listing.css because the heart is not a listing feature:
it is on the offer cards (listing, home), the hotel cards, the offer detail
gallery and the hotel detail gallery -- and those pages run four different
bundles. Left in listing.css it rendered on the hotel detail page (bundle
"hotel", which carries no listing.css) as an unstyled static button sitting
above the gallery instead of over its corner. .nv-fav-toast is site-wide
chrome for the same reason. */
.nv-fav{position:absolute;top:10px;left:10px;z-index:3;display:flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
background:rgba(255,255,255,.92);color:var(--muted);box-shadow:var(--sh1);
transition:background var(--t),color var(--t),transform var(--t)}
.nv-fav:hover{background:var(--white);color:var(--orange);transform:scale(1.08)}
.nv-fav.done{color:var(--orange)}
.nv-fav:disabled{opacity:.6;cursor:default}
.nv-fav:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
/* The feature card's photo is bigger, so the heart sits a touch further in --
the corner it sits in is deliberately the same as every other card's. */
.feat-img .nv-fav,.od-gal .nv-fav,.hd-gal-wrap .nv-fav{top:14px;left:14px}
/* Replaces the jQuery UI dialog the legacy handler opened for every message.
Top RIGHT, not bottom centre: bottom centre is where the floating Филтри
button lives on a phone, and in the same dark-blue pill the toast read as a
second button rather than as a message. A card, with a heart, coming down
from the top corner -- nothing else on the site looks like that, which is
the point. */
.nv-fav-toast{position:fixed;top:calc(var(--nv-top,0px) + 14px);right:16px;left:auto;z-index:900;
display:flex;align-items:center;gap:10px;
max-width:min(340px,calc(100vw - 32px));padding:13px 16px;border-radius:var(--r12);
background:var(--white);color:var(--text);border:1px solid var(--g200);border-left:4px solid var(--save);
font-size:.86rem;font-weight:600;text-align:left;line-height:1.45;box-shadow:var(--sh3);
transform:translateY(-12px);
opacity:0;visibility:hidden;transition:opacity 200ms ease,transform 200ms ease,visibility 0s linear 200ms}
/* The heart marks what the message is about without spending a word on it. */
.nv-fav-toast::before{content:'';flex-shrink:0;width:18px;height:18px;background:var(--save);
-webkit-mask:var(--heart-ico) center/contain no-repeat;mask:var(--heart-ico) center/contain no-repeat}
.nv-fav-toast.on{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
@media(prefers-reduced-motion:reduce){
.nv-fav-toast{transition:opacity 200ms ease,visibility 0s linear 200ms;transform:none}
.nv-fav-toast.on{transform:none}
}