/* Travel61 — styles */
:root{
  --ink:#0c1424; --ink-2:#455271; --ink-3:#7484a3;
  --line:#e5e9f3; --line-2:#eef1f8;
  --bg:#f5f7fc; --card:#ffffff;
  --blue:#1046f0; --blue-d:#0a2fa8; --violet:#6a4cff;
  --green:#0fa958; --orange:#ff6a2b;
  --grad:linear-gradient(120deg,#0e3ff2 0%,#2a6bff 52%,#6a4cff 100%);
  --sh-1:0 1px 2px rgba(12,20,36,.06),0 8px 24px rgba(12,20,36,.06);
  --sh-2:0 2px 6px rgba(12,20,36,.06),0 18px 50px rgba(12,20,36,.12);
  --r:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
input,select{font:inherit; color:inherit}
h1,h2,h3{margin:0; letter-spacing:-.02em; line-height:1.12}
p{margin:0}
.wrap{width:100%; max-width:1160px; margin:0 auto; padding:0 22px}

/* ------------------------------- header ------------------------------- */
.hdr{position:fixed; inset:0 0 auto; z-index:60; transition:background .25s,box-shadow .25s,backdrop-filter .25s}
.hdr-in{display:flex; align-items:center; gap:26px; height:74px}
.hdr .nav{display:flex; gap:24px; margin-left:8px}
.hdr .nav a{color:rgba(255,255,255,.86); font-size:15px; font-weight:500; transition:color .2s}
.hdr .nav a:hover{color:#fff}
.hdr-phone{display:flex; align-items:center; gap:8px; margin-left:auto; color:rgba(255,255,255,.9); font-size:15px; font-weight:500}
.hdr-phone svg{width:18px;height:18px}
.hdr.is-solid{background:rgba(255,255,255,.92); backdrop-filter:blur(14px) saturate(150%); box-shadow:0 1px 0 var(--line)}
.hdr.is-solid .nav a{color:var(--ink-2)}
.hdr.is-solid .nav a:hover{color:var(--ink)}
.hdr.is-solid .hdr-phone{color:var(--ink-2)}

.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; letter-spacing:-.03em; color:#fff}
.logo-mark{display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:var(--grad); color:#fff; box-shadow:0 6px 16px rgba(20,70,240,.35)}
.logo-mark svg{width:20px;height:20px}
.logo-txt b{color:#8fb2ff}
.hdr.is-solid .logo{color:var(--ink)}
.hdr.is-solid .logo-txt b{color:var(--blue)}
.logo--light,.logo--light.logo{border:0}
.ftr .logo-txt b{color:#8fb2ff}

/* -------------------------------- hero -------------------------------- */
.hero{position:relative; z-index:1; padding:104px 0 0; isolation:isolate}
.hero-bg{position:absolute; inset:0; z-index:-2; overflow:hidden}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:50% 45%}
.hero-veil{position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(85% 90% at 8% 18%,rgba(6,14,38,.82) 0%,rgba(6,14,38,.55) 45%,rgba(6,14,38,0) 72%),
    linear-gradient(180deg,rgba(6,13,32,.72) 0%,rgba(6,13,32,.42) 45%,rgba(6,13,32,.3) 66%,rgba(245,247,252,.97) 100%);
}
.hero-in{padding-bottom:18px}
.hero-h1{font-size:clamp(30px,4.3vw,52px); font-weight:800; color:#fff; max-width:15ch; text-wrap:balance; text-shadow:0 2px 24px rgba(4,10,28,.35)}
.hero-sub{margin-top:14px; max-width:52ch; font-size:clamp(14.5px,1.5vw,17.5px); color:rgba(255,255,255,.9); text-shadow:0 1px 12px rgba(4,10,28,.3)}
.hero-badges{display:flex; flex-wrap:wrap; gap:7px 18px; margin:18px 0 0; padding:0; list-style:none}
.hero-badges li{display:flex; align-items:center; gap:7px; font-size:14px; color:rgba(255,255,255,.9)}
.hero-badges svg{width:17px;height:17px; color:#7ef0b2}

/* ------------------------------ search form ---------------------------- */
.sform{position:relative; background:var(--card); border-radius:22px; box-shadow:var(--sh-2); padding:16px 18px 14px; margin:20px 0 -92px; z-index:5}
.sform-tabs{display:flex; gap:6px; margin-bottom:14px}
.tab{padding:9px 16px; border-radius:11px; font-size:15px; font-weight:600; color:var(--ink-2); background:transparent; transition:.18s}
.tab:hover{background:var(--line-2); color:var(--ink)}
.tab.is-on{background:#eef3ff; color:var(--blue-d)}
.sform-grid{display:grid; grid-template-columns:1.15fr 40px 1.15fr .92fr .92fr auto auto; gap:10px; align-items:end}
.field{position:relative; background:var(--bg); border:1.5px solid transparent; border-radius:14px; padding:8px 14px 9px; transition:border-color .18s, background .18s, box-shadow .18s}
.field:focus-within{background:#fff; border-color:var(--blue); box-shadow:0 0 0 4px rgba(16,70,240,.1)}
.field label{display:block; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#5d6d90}
.field input{width:100%; border:0; outline:0; background:transparent; font-size:16px; font-weight:600; padding:2px 0 0; color:var(--ink)}
.field input::placeholder{color:#9dabc6; font-weight:500}
.field input[type=date]{min-height:24px; padding-right:0}
.field-date{padding-right:10px}
input[type=date]::-webkit-calendar-picker-indicator{opacity:.55; cursor:pointer}
.swap{align-self:center; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:#fff; box-shadow:var(--sh-1); color:var(--ink-2); margin-bottom:6px; transition:.18s; z-index:2}
.swap:hover{color:var(--blue); transform:rotate(180deg)}
.swap svg{width:19px;height:19px}
.check{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--ink-2); padding:0 4px 8px; cursor:pointer; white-space:nowrap}
.check input{position:absolute; opacity:0; width:0; height:0}
.check-box{width:20px;height:20px;border-radius:6px;border:1.5px solid #cdd6ea; background:#fff; display:grid; place-items:center; transition:.16s; flex:none}
.check input:checked + .check-box{background:var(--blue); border-color:var(--blue)}
.check input:checked + .check-box::after{content:""; width:10px;height:6px; border:2px solid #fff; border-top:0; border-right:0; transform:rotate(-45deg) translateY(-1px)}
.check input:focus-visible + .check-box{box-shadow:0 0 0 4px rgba(16,70,240,.15)}
.btn-find{display:flex; align-items:center; gap:9px; height:56px; padding:0 26px; border-radius:14px; background:var(--grad); color:#fff; font-weight:700; font-size:16px; box-shadow:0 10px 24px rgba(20,70,240,.3); transition:transform .16s, box-shadow .16s, filter .16s}
.btn-find:hover{transform:translateY(-1px); box-shadow:0 14px 30px rgba(20,70,240,.36); filter:saturate(1.1)}
.btn-find:active{transform:translateY(0)}
.btn-find svg{width:19px;height:19px}
.btn-find[disabled]{opacity:.7; cursor:progress; transform:none}
.sform-foot{margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.quick{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--ink-3)}
.chip{border-radius:999px; background:var(--line-2); padding:7px 13px; font-size:13px; font-weight:600; color:var(--ink-2); transition:.16s}
.chip:hover{background:#e4ecff; color:var(--blue-d)}

/* autocomplete */
.sug{position:absolute; z-index:80; left:-1.5px; right:-1.5px; top:calc(100% + 8px); background:#fff; border-radius:16px; box-shadow:var(--sh-2); padding:6px; max-height:340px; overflow:auto}
.sug-item{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:10px 12px; border-radius:11px; transition:.13s}
.sug-item:hover,.sug-item.is-active{background:#f1f5ff}
.sug-code{flex:none; width:42px; text-align:center; font-size:12px; font-weight:800; letter-spacing:.03em; color:var(--blue-d); background:#e8efff; border-radius:8px; padding:6px 0}
.sug-txt{min-width:0}
.sug-name{font-weight:600; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sug-sub{font-size:12.5px; color:var(--ink-3)}
.sug-empty{padding:14px 12px; color:var(--ink-3); font-size:14px}

/* ------------------------------- results ------------------------------- */
.results{padding:96px 0 60px; min-height:70vh}
.res-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px}
.back{display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--ink-2); background:#fff; border-radius:11px; padding:9px 14px 9px 10px; box-shadow:var(--sh-1)}
.back:hover{color:var(--blue)}
.back svg{width:18px;height:18px}
.res-route{font-size:clamp(20px,2.6vw,28px); font-weight:800; letter-spacing:-.02em}
.res-meta{font-size:14px; color:var(--ink-3); margin-left:auto}
.res-layout{display:grid; grid-template-columns:250px 1fr; gap:22px; align-items:start}
.filters{background:#fff; border-radius:var(--r); box-shadow:var(--sh-1); padding:18px; position:sticky; top:88px}
.fgroup + .fgroup{margin-top:20px; padding-top:18px; border-top:1px solid var(--line-2)}
.fgroup-t{font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
.radio,.fcheck{display:flex; align-items:center; gap:9px; padding:6px 0; font-size:14.5px; color:var(--ink-2); cursor:pointer}
.radio input,.fcheck input{accent-color:var(--blue); width:17px;height:17px; margin:0}
.freset{margin-top:16px; font-size:13.5px; font-weight:600; color:var(--blue); width:100%; text-align:left}
.res-main{min-width:0}
.res-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.res-count{font-size:15px; font-weight:700}
.ftoggle{display:none; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--ink-2); background:#fff; border:1px solid var(--line); border-radius:11px; padding:9px 13px}
.ftoggle svg{width:17px;height:17px}
.ftoggle.is-on{border-color:var(--blue); color:var(--blue); background:#f2f6ff}
.sort{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-3)}
.sort select{border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:#fff; font-weight:600; color:var(--ink)}
.res-list{display:flex; flex-direction:column; gap:12px}
.fcard{display:grid; grid-template-columns:1fr auto; gap:16px; background:#fff; border-radius:var(--r); box-shadow:var(--sh-1); padding:18px; transition:box-shadow .2s, transform .2s; border:1px solid transparent}
.fcard:hover{box-shadow:var(--sh-2); border-color:#dbe4f8; transform:translateY(-1px)}
.fcard-air{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.air-badge{width:34px;height:34px;border-radius:10px; display:grid; place-items:center; font-size:11.5px; font-weight:800; color:#fff; letter-spacing:.02em; flex:none}
.air-name{font-size:13.5px; font-weight:600; color:var(--ink-2)}
.fcard-body{display:flex; flex-direction:column; gap:12px}
.leg{display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; min-width:0}
.leg-end{display:flex; flex-direction:column; gap:1px; min-width:64px}
.leg-end--r{text-align:right}
.leg-time{font-size:21px; font-weight:800; letter-spacing:-.02em; line-height:1.15; white-space:nowrap}
.leg-time sup{font-size:11px; font-weight:700; color:var(--blue); vertical-align:super; margin-left:2px}
.leg-code{font-size:13px; font-weight:600; color:#4c5d80; white-space:nowrap}
.leg-mid{display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0}
.leg-dur{font-size:12px; font-weight:600; color:var(--ink-3); white-space:nowrap}
.leg-line{position:relative; width:100%; height:2px; background:linear-gradient(90deg,#dde5f6,#c6d4f1); border-radius:2px}
.leg-line::after{content:""; position:absolute; right:-1px; top:-3px; width:7px; height:7px; border-radius:50%; background:var(--blue)}
.leg-tr{font-size:11.5px; font-weight:600; color:var(--ink-3); white-space:nowrap}
.leg-label{font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-bottom:-6px}
.tr-badge{font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:999px; background:#e6f8ee; color:#077a41; white-space:nowrap}
.tr-badge.tr-1{background:#fdf1e2; color:#9a5606}
.tr-badge.tr-2{background:#fdeaea; color:#a72f2f}
.fcard-buy{display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:10px; min-width:172px; border-left:1px solid var(--line-2); padding-left:16px}
.fprice{font-size:24px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; text-align:right}
.fprice small{font-size:12.5px; font-weight:600; color:var(--ink-3); display:block; text-align:right; letter-spacing:0; margin-top:1px}
.btn-primary{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--grad); color:#fff; font-weight:700; font-size:15px; padding:12px 18px; border-radius:12px; box-shadow:0 8px 18px rgba(20,70,240,.26); transition:transform .16s, box-shadow .16s}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 12px 24px rgba(20,70,240,.32)}
.res-note{font-size:12.5px; color:var(--ink-3); margin-top:16px; line-height:1.55; max-width:80ch}
.res-cta{margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; background:linear-gradient(120deg,#0b1533,#152a63); color:#fff; border-radius:var(--r); padding:20px 22px}
.res-cta-txt strong{display:block; font-size:17px; margin-bottom:3px}
.res-cta-txt span{font-size:14px; color:rgba(255,255,255,.72)}

/* states */
.res-state{background:#fff; border-radius:var(--r); box-shadow:var(--sh-1); padding:32px 26px; text-align:center}
.res-state h3{font-size:20px; margin-bottom:8px}
.res-state p{color:var(--ink-2); font-size:15px; max-width:56ch; margin:0 auto 18px}
.res-state .btn-primary{margin-top:4px}
.st-ic{width:54px;height:54px;border-radius:16px; display:grid; place-items:center; margin:0 auto 14px; background:#eef3ff; color:var(--blue)}
.st-ic svg{width:26px;height:26px}
.skeleton{height:104px;border-radius:var(--r); background:linear-gradient(100deg,#eef1f8 20%,#f7f9ff 40%,#eef1f8 60%); background-size:200% 100%; animation:sk 1.2s infinite}
@keyframes sk{0%{background-position:120% 0}100%{background-position:-20% 0}}

/* режим результатов: компактная полоса поиска */
body.is-results .hero{padding-top:86px; background:#fff; border-bottom:1px solid var(--line-2)}
body.is-results .hero-bg,body.is-results .hero-veil,body.is-results .hero-in{display:none}
body.is-results .sform{margin:14px 0 16px; box-shadow:var(--sh-1); padding:12px 14px 10px; border-radius:16px}
body.is-results .sform-foot{display:none}
body.is-results .sform-tabs{margin-bottom:10px}
body.is-results .tab{padding:7px 13px; font-size:14px}
body.is-results .results{padding:18px 0 60px}
body.is-results .dest,body.is-results .how,body.is-results .why,body.is-results .faq{display:none}
body.is-results .ftr{margin-top:40px}

/* ------------------------------ sections ------------------------------ */
.sec{padding:120px 0 0}
.dest{padding-top:150px}
.sec-head{max-width:640px; margin-bottom:26px}
.sec-head h2{font-size:clamp(24px,3.4vw,38px); font-weight:800}
.sec-head p{margin-top:10px; color:var(--ink-2); font-size:16px}
.dest-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.dcard{position:relative; height:230px; border-radius:20px; overflow:hidden; text-align:left; box-shadow:var(--sh-1); isolation:isolate}
.dcard-bg{position:absolute; inset:0; background-image:var(--img); background-size:cover; background-position:center; transform:scale(1.02); transition:transform .5s ease; z-index:-2}
.dcard::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(6,14,34,0) 30%,rgba(6,14,34,.78) 100%)}
.dcard:hover .dcard-bg{transform:scale(1.09)}
.dcard-in{position:absolute; inset:auto 0 0; padding:18px 20px; display:flex; flex-direction:column; gap:2px; color:#fff}
.dcard-name{font-size:20px; font-weight:800}
.dcard-sub{font-size:13px; color:rgba(255,255,255,.78)}
.dcard-price{margin-top:8px; align-self:flex-start; font-size:13px; font-weight:700; background:rgba(255,255,255,.94); color:var(--ink); border-radius:999px; padding:6px 12px}
.dcard-price:empty{display:none}

.how-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.how-card{background:#fff; border-radius:var(--r); box-shadow:var(--sh-1); padding:24px}
.how-num{font-size:13px; font-weight:800; color:var(--blue); letter-spacing:.08em}
.how-card h3{margin:12px 0 8px; font-size:19px}
.how-card p{color:var(--ink-2); font-size:14.5px}

.why{padding-top:110px}
.why-in{display:grid; grid-template-columns:1.25fr .75fr; gap:44px; align-items:center}
.why-list{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:20px}
.why-list li{display:flex; gap:16px}
.why-ic{flex:none; width:44px;height:44px;border-radius:13px; display:grid; place-items:center; background:#fff; box-shadow:var(--sh-1); color:var(--blue)}
.why-ic svg{width:22px;height:22px}
.why-list strong{font-size:16px}
.why-list p{color:var(--ink-2); font-size:14.5px; margin-top:3px}
.why-visual{position:relative; height:300px}
.wv-card{position:absolute; background:#fff; border-radius:16px; box-shadow:var(--sh-2); padding:14px 18px; display:flex; align-items:center; gap:10px; font-weight:700; font-size:14px}
.wv-card svg{width:18px;height:18px; color:var(--blue)}
.wv-a{top:26px; left:6%; background:var(--grad); color:#fff}
.wv-a svg{color:rgba(255,255,255,.85)}
.wv-b{top:106px; right:0; flex-direction:column; align-items:flex-start; gap:2px}
.wv-b em,.wv-c em{font-style:normal; font-size:12px; color:var(--ink-3); font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.wv-b strong,.wv-c strong{font-size:19px}
.wv-c{bottom:34px; left:2%; flex-direction:column; align-items:flex-start; gap:2px}

.faq{padding-top:100px}
.faq-list{max-width:820px; display:flex; flex-direction:column; gap:10px}
.faq-item{background:#fff; border-radius:14px; box-shadow:var(--sh-1); padding:2px 4px}
.faq-item summary{cursor:pointer; list-style:none; padding:17px 18px; font-weight:600; font-size:16px; display:flex; justify-content:space-between; gap:14px; align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; font-size:22px; font-weight:400; color:var(--ink-3); line-height:1}
.faq-item[open] summary::after{content:"–"}
.faq-body{padding:0 18px 18px; color:var(--ink-2); font-size:14.5px; line-height:1.6; max-width:74ch}

/* ------------------------------- footer ------------------------------- */
.ftr{margin-top:110px; background:#080f22; color:rgba(255,255,255,.72); padding:44px 0 22px}
.ftr-in{display:flex; gap:40px; justify-content:space-between; flex-wrap:wrap; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.09)}
.ftr-brand{max-width:360px}
.ftr-brand p{margin-top:14px; font-size:14px; line-height:1.6}
.ftr-nav{display:flex; flex-direction:column; gap:10px; font-size:14.5px}
.ftr-nav a:hover{color:#fff}
.ftr-legal{padding-top:18px; font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.42); max-width:900px}

/* ------------------------------ responsive ----------------------------- */
@media (max-width:1080px){
  .sform-grid{grid-template-columns:1fr 40px 1fr; grid-auto-rows:auto}
  .field-date{grid-column:span 1}
  .btn-find{grid-column:1 / -1}
  .check{grid-column:1 / -1; padding-left:2px}
  .res-layout{grid-template-columns:1fr}
  .filters{position:static; display:grid; grid-template-columns:1fr 1fr; gap:0 20px; margin-bottom:0}
  .freset{grid-column:1 / -1}
  .dest-grid{grid-template-columns:repeat(2,1fr)}
  .how-grid{grid-template-columns:1fr}
  .why-in{grid-template-columns:1fr; gap:20px}
  .why-visual{display:none}
}
@media (max-width:760px){
  .hdr-in{height:64px; gap:12px}
  .hdr .nav{display:none}
  .hdr-phone span{display:none}
  .hero{padding-top:96px}
  .hero-sub{font-size:15px}
  .hero-badges{gap:6px 14px}
  .sform{margin-bottom:-70px; padding:14px 14px 12px; border-radius:18px}
  .sform-grid{grid-template-columns:1fr; gap:8px}
  .swap{position:static; justify-self:center; width:34px; height:34px; margin:0; background:#eef2fb; box-shadow:none; color:var(--ink-2)}
  .swap:hover{color:var(--blue); transform:none}
  .sform-tabs .tab{padding:8px 12px; font-size:14px}
  .dest{padding-top:118px}
  .dest-grid{grid-template-columns:1fr; gap:12px}
  .dcard{height:180px}
  .fcard{grid-template-columns:1fr; gap:12px}
  .fcard-buy{flex-direction:row; align-items:center; justify-content:space-between; border-left:0; border-top:1px solid var(--line-2); padding:12px 0 0}
  .fcard-buy .btn-primary{padding:11px 20px}
  .filters{position:static; display:none; grid-template-columns:1fr; padding:16px; margin-bottom:6px}
  .filters.is-open{display:block}
  .ftoggle{display:inline-flex}
  .res-count{order:1}
  .sort{order:2; margin-left:auto}
  .res-head{gap:10px}
  .res-meta{margin-left:0; width:100%}
  .res{padding-top:80px}
  .ftr{margin-top:70px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important; transition-duration:.001s !important}
}