/* Unified city-route design. Loaded only by Kyiv/Lviv destination pages. */
body.city-route-design{
  --cr-panel:rgba(7,28,45,.96);
  --cr-panel-2:rgba(17,46,61,.9);
  --cr-cell:rgba(255,255,255,.045);
  --cr-line:rgba(255,255,255,.105);
  --cr-line-soft:rgba(255,255,255,.072);
  --cr-muted:rgba(234,244,255,.7);
}

body.city-route-design .kn-page{padding:18px 0 8px}
body.city-route-design .kn-page .kicker,
body.city-route-design .kn-kicker{
  display:inline-flex;
  width:max-content;
  padding:8px 13px;
  border:1px solid rgba(0,181,200,.34);
  border-radius:999px;
  background:rgba(0,181,200,.13);
  color:rgba(220,251,255,.88);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
body.city-route-design .kn-page .h2{margin:12px 0 0;font-size:clamp(28px,3.4vw,45px);line-height:1.05;letter-spacing:-.035em}
body.city-route-design .kn-page .btn{border-radius:11px;box-shadow:none}
body.city-route-design .kn-page .btn.ghost{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.055)}
body.city-route-design .kn-page .btn.gold{background:linear-gradient(135deg,#f0a500,#ffd45f);box-shadow:0 10px 24px rgba(240,165,0,.14)}

/* Hero is one route workspace. */
body.city-route-design .kn-hero{padding:0 0 12px!important;overflow:visible}
body.city-route-design .kn-hero>.container{
  overflow:hidden;
  border:1px solid rgba(111,230,255,.16);
  border-radius:30px;
  background:radial-gradient(circle at 8% 0%,rgba(30,185,215,.15),transparent 30%),linear-gradient(112deg,var(--cr-panel),var(--cr-panel-2));
  box-shadow:0 26px 64px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04);
}
body.city-route-design .kn-breadcrumbs{margin:0!important;padding:20px 26px 0}
body.city-route-design .kn-grid{grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr)!important;gap:0!important}
body.city-route-design .kn-grid>.reveal{padding:14px 26px 26px}
body.city-route-design .kn-title{margin:10px 0 8px!important}
body.city-route-design .kn-subtitle{margin-bottom:13px!important}
body.city-route-design .kn-lead{color:rgba(234,244,255,.82)}
body.city-route-design .kn-chipline span,
body.city-route-design .kn-route-tags span,
body.city-route-design .kn-route-tags a{border-color:rgba(255,255,255,.11);background:rgba(255,255,255,.055)}
body.city-route-design .kn-route-tags a{
  display:inline-flex;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  color:rgba(235,246,255,.9);
  font-size:13px;
  text-decoration:none;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
body.city-route-design .kn-route-tags a:hover,
body.city-route-design .kn-route-tags a:focus-visible{border-color:rgba(111,230,255,.42);background:rgba(111,230,255,.1);color:#fff}
body.city-route-design .kn-metrics{
  margin-top:20px;
  padding:16px 0 0;
  border:0;
  border-top:1px solid var(--cr-line-soft);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body.city-route-design .kn-metrics article{padding:0 9px}
body.city-route-design .kn-metrics img{width:52px;height:52px;margin-bottom:5px}
body.city-route-design .kn-metrics b{font-size:11px}
body.city-route-design .kn-panel{
  align-self:stretch;
  padding:26px;
  border:0;
  border-left:1px solid var(--cr-line);
  border-radius:0;
  background:rgba(3,18,30,.3);
  box-shadow:none;
}
body.city-route-design .kn-stop__code{border-radius:11px;background:rgba(255,255,255,.055)}

/* Shared rhythm and panels. */
body.city-route-design .kn-section{padding:12px 0}
body.city-route-design .kn-section--fare{padding:0 0 12px}
body.city-route-design #booking{padding:0 0 12px;scroll-margin-top:90px}
body.city-route-design .kn-fare,
body.city-route-design #booking>.kn-form-wrap,
body.city-route-design .kn-card--faq-combo{
  border-color:rgba(111,230,255,.15);
  border-radius:28px;
  background:radial-gradient(circle at 9% 0%,rgba(31,184,214,.1),transparent 30%),linear-gradient(112deg,var(--cr-panel),var(--cr-panel-2));
  box-shadow:0 22px 54px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04);
}

/* Fare becomes a clear content area with a price rail. */
body.city-route-design .kn-fare{grid-template-columns:minmax(0,1fr) 300px;gap:0;padding:0;overflow:hidden}
body.city-route-design .kn-fare__content{padding:28px}
body.city-route-design .kn-fare__content p{max-width:820px;color:var(--cr-muted)}
body.city-route-design .kn-fare__aside{
  align-self:stretch;
  display:grid;
  align-content:center;
  padding:28px;
  border:0;
  border-left:1px solid var(--cr-line);
  border-radius:0;
  background:linear-gradient(150deg,rgba(255,210,122,.1),rgba(255,255,255,.025));
  box-shadow:none;
}
body.city-route-design .kn-fare__aside b{font-size:36px}

/* City-specific departure days and vehicle configuration. */
body.city-route-design .city-departures{padding:0 0 12px}
body.city-route-design .city-departures__card{
  overflow:hidden;
  border:1px solid rgba(111,230,255,.15);
  border-radius:28px;
  background:radial-gradient(circle at 88% 0%,rgba(255,210,122,.1),transparent 28%),linear-gradient(112deg,var(--cr-panel),var(--cr-panel-2));
  box-shadow:0 22px 54px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04);
}
body.city-route-design .city-departures__card>header{padding:27px 28px 22px}
body.city-route-design .city-departures__card>header p{max-width:760px;margin:10px 0 0;color:var(--cr-muted);font-size:13px;line-height:1.65}
body.city-route-design .city-departures__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--cr-line-soft);border-bottom:1px solid var(--cr-line-soft)}
body.city-route-design .city-departures__direction{display:grid;align-content:start;gap:14px;min-width:0;padding:24px 28px}
body.city-route-design .city-departures__direction+article{border-left:1px solid var(--cr-line-soft)}
body.city-route-design .city-departures__direction>span{color:rgba(223,247,255,.65);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
body.city-route-design .city-departures__direction>p{margin:0;color:var(--cr-muted);font-size:12px;line-height:1.55}
body.city-route-design .city-departures__days{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body.city-route-design .city-departures__days>div{display:grid;gap:5px;padding:14px 15px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.045)}
body.city-route-design .city-departures__days strong{color:#fff;font-size:17px}
body.city-route-design .city-departures__days b{color:#ffd27a;font-size:11px;text-transform:uppercase;letter-spacing:.07em}
body.city-route-design .city-departures__direction--return .city-departures__days b{color:#9aeeff}
body.city-route-design .city-departures__direction--note{align-content:center;background:rgba(3,18,30,.17)}
body.city-route-design .city-departures__card>footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 28px}
body.city-route-design .city-departures__card>footer strong{color:#ffd27a;font-size:16px}

/* Vehicle interior gallery for the southern routes. */
body.city-route-design .kn-gallery-section{padding:0 0 12px}
body.city-route-design .kn-gallery-shell{padding:24px;border:1px solid rgba(111,230,255,.15);border-radius:28px;background:radial-gradient(circle at 9% 0%,rgba(31,184,214,.1),transparent 30%),linear-gradient(112deg,var(--cr-panel),var(--cr-panel-2));box-shadow:0 22px 54px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04)}
body.city-route-design .kn-gallery-head{display:flex;align-items:flex-start;justify-content:flex-start;gap:14px;margin-bottom:14px;padding-bottom:15px;border-bottom:1px solid var(--cr-line-soft)}
body.city-route-design .kn-gallery-headline{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
body.city-route-design .kn-gallery-line{display:inline-flex;align-items:center;margin:0;padding:6px 2px 0;color:rgba(234,244,255,.78);font-size:14px;line-height:1.45}
body.city-route-design .kn-film{display:grid;gap:14px;margin-top:16px}
body.city-route-design .kn-film-stage{position:relative;min-height:500px;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(3,15,25,.58)}
body.city-route-design .kn-carousel-slides{position:relative;height:100%}
body.city-route-design .kn-carousel-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding:14px;opacity:0;pointer-events:none;transition:opacity .32s ease,transform .45s ease;transform:scale(1.015)}
body.city-route-design .kn-carousel-slide.is-active{opacity:1;pointer-events:auto;transform:scale(1)}
body.city-route-design .kn-carousel-slide::before{content:"";position:absolute;inset:0;background-image:var(--gallery-image);background-position:center;background-size:cover;filter:blur(34px) saturate(1.06);opacity:0;pointer-events:none;transform:scale(1.12)}
body.city-route-design .kn-carousel-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,15,24,.18),rgba(6,15,24,.4));opacity:0;pointer-events:none}
body.city-route-design .kn-carousel-slide.is-portrait::before,
body.city-route-design .kn-carousel-slide.is-portrait::after{opacity:1}
body.city-route-design .kn-carousel-slide img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.22)}
body.city-route-design .kn-film-counter{position:absolute;top:16px;right:16px;z-index:3;display:inline-flex;align-items:baseline;gap:6px;padding:9px 12px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(10,21,32,.78)}
body.city-route-design .kn-film-counter strong{color:#eaf4ff;font-size:20px}
body.city-route-design .kn-film-counter span{color:rgba(234,244,255,.62);font-size:12px;letter-spacing:.1em}
body.city-route-design .kn-film-btn{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(10,21,32,.68);color:#eaf4ff;font-size:20px;cursor:pointer;transform:translateY(-50%)}
body.city-route-design .kn-film-btn--prev{left:16px}
body.city-route-design .kn-film-btn--next{right:16px}
body.city-route-design .kn-film-strip{display:flex;gap:12px;overflow:auto;padding:2px 2px 6px;scrollbar-width:none}
body.city-route-design .kn-film-thumb{display:block;flex:0 0 168px;padding:0;border:0;background:transparent;cursor:pointer}
body.city-route-design .kn-film-thumb-frame{display:block;overflow:hidden;aspect-ratio:16/11;padding:6px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(9,20,31,.38)}
body.city-route-design .kn-film-thumb-frame img{display:block;width:100%;height:100%;border-radius:8px;object-fit:cover}
body.city-route-design .kn-film-thumb.is-active .kn-film-thumb-frame{border-color:rgba(116,216,255,.34);background:rgba(12,27,41,.56)}

/* Booking form and supporting information share one surface. */
body.city-route-design #booking>.kn-form-wrap{grid-template-columns:minmax(0,1fr) 350px;gap:0;padding:0;overflow:hidden}
body.city-route-design .kn-form{padding:30px;border:0;border-radius:0;background:transparent;box-shadow:none}
body.city-route-design .kn-form .lead{color:var(--cr-muted);font-size:14px;line-height:1.65}
body.city-route-design .kn-form-grid{gap:12px}
body.city-route-design .kn-field{gap:6px}
body.city-route-design .kn-field label{color:rgba(223,247,255,.7);font-size:11px}
body.city-route-design .kn-form input,
body.city-route-design .kn-form select,
body.city-route-design .kn-form textarea{padding:13px 14px;border-radius:9px;background:rgba(255,255,255,.055)}
body.city-route-design .kn-aside{display:block;border-left:1px solid var(--cr-line);background:rgba(3,18,30,.2)}
body.city-route-design .kn-note{padding:23px;border:0;border-bottom:1px solid var(--cr-line-soft);border-radius:0;background:transparent;box-shadow:none}
body.city-route-design .kn-note:last-child{border-bottom:0}
body.city-route-design .kn-note a{border-radius:9px;background:rgba(255,255,255,.045)}

/* Context and FAQ conclude the route without changing tone. */
body.city-route-design .kn-card--faq-combo{gap:0;padding:0;overflow:hidden}
body.city-route-design .kn-card--faq-combo>div{padding:30px}
body.city-route-design .kn-card--faq-combo>div+div{border-left:1px solid var(--cr-line)}
body.city-route-design .kn-card--faq-combo .kn-combo-copy p{color:var(--cr-muted);line-height:1.72}
body.city-route-design .kn-faq{margin-top:18px}
body.city-route-design .kn-faq details{padding:15px 16px;border-radius:9px;background:rgba(255,255,255,.04)}
body.city-route-design .kn-faq details+details{margin-top:8px}

@media (max-width:1080px){
  body.city-route-design .kn-grid{grid-template-columns:1fr!important}
  body.city-route-design .kn-panel{border-left:0;border-top:1px solid var(--cr-line)}
  body.city-route-design #booking>.kn-form-wrap{grid-template-columns:1fr}
  body.city-route-design .kn-aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-left:0;border-top:1px solid var(--cr-line)}
  body.city-route-design .kn-note{border-right:1px solid var(--cr-line-soft);border-bottom:0}
  body.city-route-design .kn-note:last-child{border-right:0}
}

@media (max-width:760px){
  body.city-route-design .kn-page{padding-top:10px}
  body.city-route-design .kn-hero>.container,
  body.city-route-design .kn-fare,
  body.city-route-design #booking>.kn-form-wrap,
  body.city-route-design .kn-card--faq-combo{border-radius:20px}
  body.city-route-design .kn-breadcrumbs{padding:17px 18px 0}
  body.city-route-design .kn-grid>.reveal,
  body.city-route-design .kn-panel,
  body.city-route-design .kn-form,
  body.city-route-design .kn-card--faq-combo>div{padding:20px}
  body.city-route-design .kn-metrics{padding-top:13px}
  body.city-route-design .kn-fare{grid-template-columns:1fr}
  body.city-route-design .kn-fare__content,
  body.city-route-design .kn-fare__aside{padding:22px}
  body.city-route-design .kn-fare__aside{border-left:0;border-top:1px solid var(--cr-line)}
  body.city-route-design .kn-fare__aside b{font-size:30px}
  body.city-route-design .kn-aside{display:block}
  body.city-route-design .kn-note{border-right:0;border-bottom:1px solid var(--cr-line-soft)}
  body.city-route-design .kn-note:last-child{border-bottom:0}
  body.city-route-design .kn-card--faq-combo{grid-template-columns:1fr}
  body.city-route-design .kn-card--faq-combo>div+div{border-left:0;border-top:1px solid var(--cr-line)}
  body.city-route-design .city-departures__card{border-radius:20px}
  body.city-route-design .city-departures__card>header,
  body.city-route-design .city-departures__direction{padding:21px 20px}
  body.city-route-design .city-departures__grid{grid-template-columns:1fr}
  body.city-route-design .city-departures__direction+article{border-left:0;border-top:1px solid var(--cr-line-soft)}
  body.city-route-design .city-departures__card>footer{align-items:stretch;flex-direction:column;padding:18px 20px}
  body.city-route-design .city-departures__card>footer .btn{width:100%;text-align:center}
  body.city-route-design .kn-gallery-shell{padding:16px;border-radius:20px}
  body.city-route-design .kn-gallery-head{margin-bottom:12px}
  body.city-route-design .kn-gallery-line{font-size:13px}
  body.city-route-design .kn-film-stage{min-height:0;aspect-ratio:16/11}
  body.city-route-design .kn-carousel-slide{padding:10px}
  body.city-route-design .kn-film.is-portrait-active .kn-film-stage{min-height:380px;aspect-ratio:4/5}
  body.city-route-design .kn-film-btn{width:38px;height:38px;font-size:18px}
  body.city-route-design .kn-film-btn--prev{left:12px}
  body.city-route-design .kn-film-btn--next{right:12px}
  body.city-route-design .kn-film-thumb{flex-basis:132px}
}