/* «Куда лететь» — слой интерактива поверх app.css (DEVOPS, 11.09).
   Здесь только то, что добавлено к дизайн-системе: внутренние селекты, липкая панель
   города, модалка выбора города, рекламная плашка поверх картинки, крупный подбор.
   Токены и типографика — из app.css, своих цветов не заводим. */

/* ===================== внутренние селекты (.ksel) =====================
   Нативный <select> остаётся в DOM (значение читают страницы), но скрыт;
   видимый контрол — кнопка + список. На мобиле список выезжает снизу листом. */
/* нативный контрол остаётся источником значения, но не виден и не ловит клики:
   min-height из .filters select иначе оставляет ему 44px живой площади поверх кнопки */
.ksel-native{position:absolute!important;width:1px!important;height:1px!important;
  min-height:0!important;padding:0!important;margin:-1px!important;border:0!important;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;opacity:0;pointer-events:none}
.ksel{position:relative;display:block;min-width:0}
.ksel-btn{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 12px;
  border:1px solid var(--hair);border-radius:var(--r-sm);background:#fff;color:var(--ink);
  font:inherit;font-size:var(--step-0);font-weight:500;cursor:pointer;text-align:left;
  transition:border-color .15s,box-shadow .15s}
.ksel-btn:hover{border-color:var(--smoke)}
.ksel-btn .ksel-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ksel-btn .ksel-chev{flex:none;transition:transform .18s cubic-bezier(.16,1,.3,1);color:var(--fog)}
.ksel[data-open="true"] .ksel-btn{border-color:var(--blue);box-shadow:0 0 0 3px rgba(12,115,254,.14)}
.ksel[data-open="true"] .ksel-chev{transform:rotate(180deg)}
.ksel-btn[data-placeholder="true"] .ksel-val{color:var(--fog);font-weight:400}

.ksel-pop{position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:100%;width:max-content;
  max-width:min(92vw,340px);max-height:min(52vh,340px);overflow:auto;background:#fff;
  border:1px solid var(--hair);border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:6px;
  opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;
  transition:opacity .16s ease,transform .18s cubic-bezier(.16,1,.3,1)}
.ksel[data-open="true"] .ksel-pop{opacity:1;transform:none;pointer-events:auto}
.ksel-opt{display:flex;align-items:center;gap:8px;min-height:42px;padding:8px 10px;border-radius:var(--r-sm);
  color:var(--chalk);cursor:pointer;font-size:var(--step-0)}
.ksel-opt:hover,.ksel-opt.is-cursor{background:var(--tile);color:var(--ink)}
.ksel-opt[aria-selected="true"]{color:var(--ink);font-weight:600}
.ksel-opt[aria-selected="true"]::after{content:"";flex:none;margin-left:auto;width:16px;height:16px;
  background:var(--blue);border-radius:50%;
  box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px var(--blue)}
.ksel-sheet-head{display:none}

@media (max-width:640px){
  .ksel-pop{position:fixed;inset:auto 0 0 0;top:auto;width:100%;max-width:none;min-width:0;
    max-height:70vh;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    transform:translateY(14px);box-shadow:0 -14px 40px rgba(15,23,41,.22)}
  .ksel[data-open="true"] .ksel-pop{transform:none}
  .ksel-opt{min-height:50px;font-size:var(--step-1)}
  .ksel-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:6px 8px 10px;font-weight:700;color:var(--ink);font-family:var(--display)}
  .ksel-sheet-head button{background:none;border:none;color:var(--blue);font:inherit;font-weight:600;
    cursor:pointer;min-height:44px;padding:0 4px}
}
.ksel-scrim{position:fixed;inset:0;z-index:55;background:rgba(15,23,41,.28);opacity:0;
  transition:opacity .2s;backdrop-filter:blur(1px)}
.ksel-scrim.show{opacity:1}
@media (min-width:641px){.ksel-scrim{background:transparent;backdrop-filter:none}}

/* фильтры: колонки под кастомный контрол */
.filters .fgroup{min-width:170px}
.filters .fgroup .ksel{width:100%}

/* ===================== липкая панель города (ctxbar) ===================== */
.ctxbar{position:sticky;top:64px;z-index:35;background:var(--palesky);
  border-bottom:1px solid var(--hair-2);
  box-shadow:0 6px 18px -14px rgba(15,23,41,.5)}
.ctxbar[hidden]{display:none}
.ctxbar.kl-in{animation:ctxIn .34s cubic-bezier(.16,1,.3,1)}
@keyframes ctxIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.ctxbar .wrap{min-height:48px}
.ctxbar .dest{overflow:visible;max-width:none;white-space:normal}
.ctxbar .kl-pin{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--hair);
  border-radius:var(--r-pill);padding:5px 6px 5px 10px;font-weight:600;color:var(--ink);cursor:pointer;
  font:inherit;font-weight:600;min-height:38px;transition:border-color .15s,transform .12s}
.ctxbar .kl-pin:hover{border-color:var(--blue)}
.ctxbar .kl-pin:active{transform:translateY(1px)}
.ctxbar .kl-pin img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
.ctxbar .kl-pin .kl-pin-x{color:var(--fog)}
.ctxbar .kl-pin .kl-pin-name{max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.ctxbar.kl-in{animation:none}}

/* ===================== модалка выбора города ===================== */
.kl-modal{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center}
.kl-modal[hidden]{display:none}
.kl-modal .kl-scrim{position:absolute;inset:0;background:rgba(15,23,41,.42);opacity:0;transition:opacity .2s}
.kl-modal.show .kl-scrim{opacity:1}
.kl-modal .kl-dialog{position:relative;width:min(920px,100%);max-height:88vh;overflow:auto;background:#fff;
  border-radius:var(--r-lg) var(--r-lg) 0 0;padding:clamp(16px,3vw,26px);
  transform:translateY(24px);opacity:0;transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .2s;
  padding-bottom:calc(clamp(16px,3vw,26px) + env(safe-area-inset-bottom))}
.kl-modal.show .kl-dialog{transform:none;opacity:1}
@media (min-width:721px){
  .kl-modal{align-items:center}
  .kl-modal .kl-dialog{border-radius:var(--r-lg)}
}
.kl-dialog-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.kl-dialog-head h2{font-size:var(--step-2)}
.kl-dialog-head p{margin:4px 0 0;color:var(--fog);font-size:var(--step--1)}
.kl-x{margin-left:auto;flex:none;width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--hair);
  background:#fff;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.kl-x:hover{background:var(--tile)}
.kl-citysearch{display:flex;gap:8px;align-items:center;border:1px solid var(--hair);border-radius:var(--r-pill);
  padding:6px 14px;margin-bottom:16px;background:var(--tile)}
.kl-citysearch input{flex:1;min-width:0;border:none;background:none;font:inherit;font-size:var(--step-0);
  min-height:38px;color:var(--ink)}
.kl-citysearch input:focus{outline:none}
.kl-citygrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin:0;padding:0}
.kl-citycard{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--hair);
  border-radius:var(--r-md);background:#fff;cursor:pointer;text-align:left;font:inherit;color:var(--ink);
  transition:border-color .15s,box-shadow .2s,transform .12s}
.kl-citycard:hover{border-color:var(--blue);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.kl-citycard[aria-pressed="true"]{border-color:var(--blue);background:var(--palesky)}
.kl-citycard img{width:52px;height:52px;border-radius:var(--r-sm);object-fit:cover;flex:none;background:var(--tile)}
.kl-citycard .kl-cc-t{font-weight:600;line-height:1.2;display:block}
.kl-citycard .kl-cc-s{display:block;color:var(--fog);font-size:var(--step--1);margin-top:3px}
.kl-city-empty{color:var(--fog);padding:14px 2px}
.kl-dialog-foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:14px;
  border-top:1px solid var(--hair-2)}

/* ===================== реклама: плашка поверх картинки ===================== */
.partner.has-img{padding:0;overflow:hidden;background:var(--card)}
.partner.has-img .p-media{position:relative;margin:0;line-height:0}
.partner.has-img .p-media img{width:100%;height:clamp(140px,22vw,190px);object-fit:cover}
.partner.has-img .p-media .adlabel{position:absolute;top:10px;left:10px;z-index:2;align-self:auto;
  background:rgba(15,23,41,.72);color:#fff;border:none;backdrop-filter:blur(3px);
  padding:4px 10px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  border-radius:var(--r-pill)}
.partner.has-img .p-body{padding:16px;display:flex;flex-direction:column;gap:8px}
/* карточка каталога: плашка поверх обложки */
.card{position:relative}
.card > .adlabel{position:absolute;top:10px;left:10px;z-index:2;background:rgba(15,23,41,.72);color:#fff;
  border:none;padding:4px 10px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;border-radius:var(--r-pill)}

/* ===================== главная: центр + два пути ===================== */
.hero.kl-center{text-align:center}
.hero.kl-center h1{max-width:18ch;margin-left:auto;margin-right:auto}
.hero.kl-center .lede{max-width:60ch;margin-left:auto;margin-right:auto}
.hero.kl-center .entry{text-align:left}
.entry{position:relative}
@media (min-width:880px){
  .entry{grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px)}
  .entry::before{content:"или";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    z-index:3;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--hair);
    display:flex;align-items:center;justify-content:center;color:var(--fog);font-size:var(--step--1);
    font-weight:700;box-shadow:var(--shadow-sm)}
}
.entry-card{position:relative;min-height:100%}
.entry-card .kl-way{display:inline-flex;align-items:center;gap:8px;font-size:var(--step--1);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin-bottom:2px}
.entry-card.primary .kl-way{color:#cfe1ff}
.entry-card .btn-lg{align-self:flex-start}
.entry-card .kl-hint{margin-top:auto;color:var(--fog);font-size:var(--step--1)}
.entry-card.primary .kl-hint{color:rgba(255,255,255,.8)}

/* ===================== подбор: крупнее и понятнее ===================== */
.wizard.kl-big{max-width:860px;padding:clamp(22px,4vw,44px)}
.kl-steplab{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px;
  font-size:var(--step--1);color:var(--fog)}
.kl-steplab .cur{color:var(--ink);font-weight:700}
.wizard.kl-big .stepbar .dot{height:8px}
.wizard.kl-big .step h2{font-size:var(--step-3)}
.wizard.kl-big .opts{gap:12px}
@media (min-width:560px){.wizard.kl-big .opts{grid-template-columns:1fr 1fr}}
@media (min-width:820px){.wizard.kl-big .opts{grid-template-columns:1fr 1fr 1fr}}
.wizard.kl-big .opt{flex-direction:column;align-items:flex-start;gap:6px;padding:18px;min-height:104px;
  border-radius:var(--r-md);position:relative;font-size:var(--step-1)}
.wizard.kl-big .opt .kl-ico{font-size:24px;line-height:1}
.wizard.kl-big .opt .kl-sub{font-size:var(--step--1);color:var(--fog);font-weight:500}
.wizard.kl-big .opt[aria-pressed="true"]{box-shadow:0 0 0 2px var(--blue) inset}
.wizard.kl-big .opt[aria-pressed="true"]::after{content:"✓";position:absolute;top:10px;right:12px;
  color:var(--blue);font-weight:800}
.wizard.kl-big .opt[data-skip]{background:var(--tile);color:var(--chalk);font-size:var(--step-0);
  min-height:auto;padding:14px 18px;flex-direction:row;align-items:center}
.wizard.kl-big .wizard-nav{margin-top:28px}
.wizard.kl-big .wizard-nav .btn{min-height:52px;padding:.85em 1.6em;font-size:var(--step-1)}
@media (max-width:559px){.wizard.kl-big .wizard-nav{position:sticky;bottom:0;background:#fff;
  padding:12px 0 calc(6px + env(safe-area-inset-bottom));margin-bottom:-6px}}