/* ============================================================ mir-search.css — блок подбора авто «страна → (штат) → город → класс». Полоса ПОД первым экраном, обычный поток (как .av-fleet и .seo-art), в Tilda-артборд не лезем: там пиксельные координаты на 5 брейкпоинтов. ДИЗАЙН НЕ ИЗОБРЕТАЛСЯ. Каждое правило скопировано из assets/arenda.css: .mir-search ← .av-fleet arenda.css:81-88 (токены, шрифт, фон, box-sizing) .mir-search__wrap ← .av-wrap arenda.css:89 .mir-search__eyebrow ← .av-eyebrow arenda.css:91 .mir-search__title ← .av-title arenda.css:92 .mir-search__panel ← .av-bar arenda.css:192-193 (radius 40, padding-строка) .mir-sel ← .hdr-sel arenda.css:309 .mir-sel__btn ← .hdr-sel__btn arenda.css:311-313 .mir-sel__btn:hover← .hdr-sel__btn:hover arenda.css:314 .mir-sel__ic ← .hdr-sel__ic arenda.css:317 .mir-sel__ar ← .hdr-sel__ar arenda.css:318 .mir-sel.is-open .mir-sel__ar ← arenda.css:319 .mir-sel__menu ← .hdr-sel__menu arenda.css:320-322 .mir-sel.is-open .mir-sel__menu ← arenda.css:323 .mir-sel__opt ← .hdr-sel__opt arenda.css:315,324-325 .mir-sel__opt:hover← .hdr-sel__opt:hover arenda.css:326 .mir-sel__opt.is-active ← .hdr-sel__opt.is-active arenda.css:327 .mir-search__go ← .av-card__btn arenda.css:175-177 (главная кнопка сайта) .mir-sel.is-disabled ← .av-chip / .av-chip:hover arenda.css:99-101 (неактивная светлая плашка) .mir-search__go min-height:44px ← arenda.css:1007 (мобильный тач-таргет) Отступления от копий — только там, где список стоит в строке контента, а не в фиксированной шапке; каждое помечено «ОТСТУПЛЕНИЕ». ============================================================ */ /* --- корпус секции: копия .av-fleet (arenda.css:81-88) --- */ .mir-search{ --ac:#cefe46; --ink:#202020; --dark:#1d1d1d; --plate:#f0f2f3; --plate2:#e7ebec; --muted:#8b8f93; --white:#fff; font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; background:#fff;color:var(--ink);padding:48px 0 8px; -webkit-font-smoothing:antialiased; position:relative;z-index:1; /* ОТСТУПЛЕНИЕ: чтобы раскрытый список лёг поверх соседей */ } .mir-search,.mir-search *,.mir-search *::before,.mir-search *::after{box-sizing:border-box} /* --- .av-wrap (arenda.css:89) --- */ .mir-search__wrap{width:100%;max-width:1800px;margin:0 auto;padding:0 clamp(20px,3.6vw,80px)} /* --- панель: радиус и внутренние отступы от .av-bar (arenda.css:192-193), фон — токен --plate вместо --dark, т.к. полоса светлая, как карточки каталога --- */ .mir-search__panel{background:var(--plate);border-radius:40px;padding:22px 32px} /* --- .av-eyebrow / .av-title (arenda.css:91-92); выравнивание по левому краю, а не по центру (.av-head, arenda.css:90) — полоса, а не заголовок секции --- */ .mir-search__head{margin:0 0 16px} .mir-search__eyebrow{display:inline-block;font-size:16px;font-weight:500;color:var(--ink);opacity:.55;margin-bottom:6px} .mir-search__title{font-size:clamp(22px,2.2vw,28px);font-weight:600;line-height:1.04;letter-spacing:-.02em;color:var(--ink);margin:0} .mir-search__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap} /* ============================================================ Списки. Копия .hdr-sel* (arenda.css:309-328) с переименованием классов: на .hdr-sel висит обработчик шапки в arenda.js:439-484, его не трогаем. ============================================================ */ .mir-sel{position:relative} /* ОТСТУПЛЕНИЕ: в строке контента список тянется, в шапке был по содержимому */ .mir-sel{flex:1 1 200px;min-width:0} .mir-sel[hidden]{display:none!important} .mir-sel__btn{display:flex;align-items:center;gap:6px;height:42px;padding:0 14px;border:0;cursor:pointer; background:#202020;color:#fff;border-radius:100px;font-size:14px;font-weight:600;line-height:1; white-space:nowrap;transition:background .15s;text-transform:none;letter-spacing:0; width:100%;justify-content:space-between} /* ОТСТУПЛЕНИЕ: во всю ширину слота */ .mir-sel__btn:hover{background:#2c2c2c} .mir-sel__btn:focus-visible{outline:3px solid var(--ac);outline-offset:2px} /* ОТСТУПЛЕНИЕ: видимый фокус (требование доступности) */ .mir-sel__ic{flex:0 0 auto;color:#cefe46} .mir-sel__ar{flex:0 0 auto;opacity:.7;transition:transform .15s} .mir-sel.is-open .mir-sel__ar{transform:rotate(180deg)} .mir-sel__val{flex:1 1 auto;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ОТСТУПЛЕНИЕ */ .mir-sel__menu{position:absolute;top:calc(100% + 6px);inset-inline-start:0;min-width:100%;margin:0;padding:6px;list-style:none; background:#1b1b1b;border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.28); display:none;flex-direction:column;gap:2px; /* ОТСТУПЛЕНИЕ: якорь слева (в шапке был справа), длинные списки прокручиваются */ max-height:290px;overflow-y:auto;z-index:5} .mir-sel.is-open .mir-sel__menu{display:flex} .mir-sel.is-open{z-index:6} /* ОТСТУПЛЕНИЕ: раскрытый список поверх соседних слотов */ .mir-sel__opt{padding:9px 14px;border-radius:10px;color:#cfcfcf;font-size:14px;font-weight:600;cursor:pointer; white-space:nowrap;transition:background .12s,color .12s;text-transform:none} .mir-sel__opt:hover{background:#2a2a2a;color:#fff} .mir-sel__opt.is-active{color:#cefe46} .mir-sel__opt:focus-visible{outline:2px solid var(--ac);outline-offset:-2px} /* ОТСТУПЛЕНИЕ: видимый фокус */ /* Служебная строка «нет доступных городов» — НЕ role="option", в подсчёт опций не входит */ .mir-sel__note{padding:9px 14px;color:var(--muted);font-size:14px;font-weight:500;white-space:nowrap} /* Слот, у которого пока нечего выбирать. Не «полупрозрачная тёмная пилюля» (на светлой плашке читается как поломка), а неактивный чип: .av-chip — arenda.css:99-101, тот же приём «светлая плашка + приглушённый текст». */ .mir-sel.is-disabled .mir-sel__btn{background:var(--plate2);color:var(--muted);cursor:not-allowed} .mir-sel.is-disabled .mir-sel__btn:hover{background:var(--plate2)} .mir-sel.is-disabled .mir-sel__ic{color:var(--muted)} /* ============================================================ Кнопка — главная кнопка сайта .av-card__btn (arenda.css:175-177) ============================================================ */ .mir-search__go{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff; border-radius:30px;padding:12px 22px;font-size:15px;font-weight:600;transition:.18s;white-space:nowrap;text-decoration:none; min-height:44px;flex:0 0 auto} /* min-height 44 — arenda.css:1007 */ .mir-search__go:hover{background:#000;color:#fff;transform:translateY(-1px)} .mir-search__go:focus-visible{outline:3px solid var(--ink);outline-offset:3px} /* ============================================================ Фолбэк без JS (