/* ==========================================================================
   OrientSquare — единый стиль выпадающих списков (custom <select>)
   Панель одинакова для всех select на сайте: поиск сверху (для длинных
   списков), пункты со скруглённой hover-подсветкой, оранжевый значок
   с галочкой у выбранного пункта, стрелка-подсказка справа при наведении.
   ========================================================================== */
.os-select{position:relative}
.os-select select{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;pointer-events:none;-webkit-appearance:none;appearance:none;
}
.os-select-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  cursor:pointer;text-align:left;font:inherit;
}
.os-select-trigger-label{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;
}
.os-select-chevron{
  flex:none;width:16px;height:16px;color:#9a9188;
  transition:transform .18s ease;
}
.os-select-chevron svg{width:100%;height:100%;display:block}
.os-select.os-open .os-select-chevron{transform:rotate(180deg)}
.os-select-trigger:disabled{cursor:not-allowed;opacity:.55}

.os-select-panel{
  /* прямой потомок <body> (см. dropdown.js) — position:fixed и координаты
     выставляются из JS, поэтому её не обрезает overflow:hidden ни одного
     из предков триггера (например hero-секция на index.html). */
  position:fixed;min-width:200px;z-index:1200;
  background:#fff;border-radius:20px;
  box-shadow:0 1px 2px rgba(28,23,18,.05),0 24px 48px -16px rgba(28,23,18,.30),0 0 0 1px rgba(28,23,18,.07);
  padding:10px;opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;
  transition:opacity .14s ease,transform .14s ease;
  max-height:min(360px,70vh);display:flex;flex-direction:column;
}
.os-select-panel.os-select-panel-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.os-select-panel.os-panel-up{transform-origin:bottom center}

.os-select-search{
  display:flex;align-items:center;gap:8px;background:#f4f1ec;border-radius:999px;
  padding:8px 12px;margin-bottom:8px;flex:none;
}
.os-select-search svg{flex:none;width:15px;height:15px;color:#a39a8c}
.os-select-search input{
  border:0;background:transparent;outline:0;font:inherit;font-size:.86rem;
  width:100%;color:#1c1712;min-width:0;
}
.os-select-search input::placeholder{color:#a89e8f}
.os-select-clear{
  flex:none;width:20px;height:20px;border:0;background:none;padding:0;
  cursor:pointer;color:#a39a8c;line-height:0;display:flex;align-items:center;justify-content:center;
}
.os-select-clear svg{width:12px;height:12px}
.os-select-clear:hover{color:#1c1712}

.os-select-list{list-style:none;margin:0;padding:0;overflow-y:auto;overscroll-behavior:contain}
.os-select-list::-webkit-scrollbar{width:6px}
.os-select-list::-webkit-scrollbar-thumb{background:rgba(28,23,18,.16);border-radius:99px}

.os-select-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;
  cursor:pointer;font-size:.9rem;line-height:1.3;color:#332c22;
}
.os-select-item .os-select-check{
  flex:none;width:18px;height:18px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  visibility:hidden;background:#F57C00;color:#fff;
}
.os-select-item .os-select-check svg{width:11px;height:11px}
.os-select-item[aria-selected="true"] .os-select-check{visibility:visible}
.os-select-item .os-select-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.os-select-item .os-select-arrow{
  flex:none;width:14px;height:14px;color:#b7ada0;opacity:0;
  transform:translate(-2px,2px);transition:opacity .12s ease,transform .12s ease;
}
.os-select-item:hover,.os-select-item.os-active{background:#f4f1ec}
.os-select-item:hover .os-select-arrow,.os-select-item.os-active .os-select-arrow{opacity:1;transform:translate(0,0)}
.os-select-item[aria-selected="true"]{background:#fdf3e9}
.os-select-item[aria-disabled="true"]{color:#c8c0b4;cursor:default}
.os-select-item[aria-disabled="true"]:hover{background:transparent}
.os-select-item[aria-disabled="true"] .os-select-arrow{display:none}

.os-select-empty{padding:14px 10px;text-align:center;font-size:.85rem;color:#a39a8c;flex:none}

@media (max-width:480px){
  .os-select-panel{left:0;right:0}
}