/* Стильный выбор города и отделения с поиском. Нативный select скрыт, но остаётся в DOM — на нём держится вся логика сайта. Выпадающий список живёт прямо в (см. fancy-select.js), поэтому его правила не привязаны к #map: иначе соседний блок «Відділення» перекрывал меню. Оформление — палитра сайта: полупрозрачные светлые панели поверх тёмного фона, рамки rgba(255,255,255,.19), радиус 8px, шрифт Rubik, акцент — красный #c02f2f (тот же, что у рамки карты и полос слева). */ #map .hor-select .select select.fs-native { position: absolute; /* !important: старий код міг проставляти цьому select'у inline-ширину, через що прихований елемент вилазив за правий край вікна */ width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; } /* Старая стрелка-картинка рядом с select больше не нужна: у кнопки своя. */ #map .hor-select .select > img { display: none; } .fancy-select { position: relative; display: inline-block; /* Розтягується під текст, поки є вільне місце, і обрізається лише тоді, коли місця вже немає (довгі адреси на кшталт "пл.Українських Героїв 1г (ст метро)" інакше виштовхували сторінку за екран). min() — щоб мінімальна ширина не перемогла на зовсім вузьких екранах. */ min-width: min(210px, 100%); max-width: 100%; } .fancy-select .fs-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 14px; border: 2px solid rgba(255, 255, 255, .19); border-radius: 8px; background: rgba(255, 255, 255, .08); color: #fff; font-family: "Rubik Regular", sans-serif; font-size: 16px; line-height: 1.3; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; } .fancy-select .fs-button:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .32); } .fancy-select.fs-open .fs-button { background: rgba(255, 255, 255, .14); border-color: #c02f2f; } .fancy-select .fs-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Стрелка: вниз в покое, вверх — когда список открыт. */ .fancy-select .fs-caret { flex: 0 0 auto; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid rgba(255, 255, 255, .7); transition: transform .15s, border-top-color .15s; } .fancy-select.fs-open .fs-caret { transform: rotate(180deg); border-top-color: #c02f2f; } /* Меню вынесено в : position: fixed + большой z-index, чтобы его не перекрывал и не обрезал ни один блок страницы. Фон непрозрачный — список ложится и на фотофон, и на таблицу курсов. */ .fs-menu { position: fixed; z-index: 99999; display: none; box-sizing: border-box; padding: 6px; border: 2px solid rgba(255, 255, 255, .19); border-radius: 8px; background: #1b1b1b; box-shadow: 0 14px 34px rgba(0, 0, 0, .55); font-family: "Rubik Regular", sans-serif; } .fs-menu.fs-menu-open { display: block; } .fs-menu .fs-search { padding: 2px 2px 6px; } .fs-menu .fs-search input { width: 100%; padding: 8px 10px; border: 2px solid rgba(255, 255, 255, .19); border-radius: 7px; background: rgba(255, 255, 255, .08); color: #fff; font-family: inherit; font-size: 15px; outline: none; box-sizing: border-box; transition: border-color .15s, background .15s; } .fs-menu .fs-search input::placeholder { color: rgba(255, 255, 255, .45); } .fs-menu .fs-search input:focus { border-color: #c02f2f; background: rgba(255, 255, 255, .12); } .fs-menu .fs-list { max-height: 260px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; } .fs-menu .fs-list::-webkit-scrollbar { width: 8px; } .fs-menu .fs-list::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(255, 255, 255, .25); } .fs-menu .fs-item { padding: 9px 10px; border-radius: 7px; font-size: 15px; color: rgba(255, 255, 255, .88); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .12s, color .12s; } .fs-menu .fs-item:hover, .fs-menu .fs-item.active { background: rgba(255, 255, 255, .12); color: #fff; } /* Текущий выбор помечаем красным акцентом сайта, а не заливкой. */ .fs-menu .fs-item.selected { background: rgba(192, 47, 47, .22); box-shadow: inset 3px 0 0 #c02f2f; color: #fff; } .fs-menu .fs-empty { display: none; padding: 10px; font-size: 14px; color: rgba(255, 255, 255, .5); text-align: center; } @media (max-width: 768px) { .fancy-select { min-width: 0; width: 100%; } .fancy-select .fs-button { font-size: 15px; } } /* 992-1399px: селектори міста й відділення стоять поруч із таблицею курсів, тому звужуємо їх разом із вікном */ @media (min-width: 992px) and (max-width: 1399px) { #map .hor-select .fancy-select { min-width: min(clamp(130px, 13vw, 210px), 100%); } }