/* ===== SILENKO AUTOcratia: "Наши филиалы" — карта + список офисов (2026-08-21) ===== */
/* Все классы с префиксом sk-offices- во избежание конфликтов с текущими стилями сайта */

.sk-offices { font-family: 'Manrope', Helvetica, Arial, sans-serif; }
.sk-offices-supertitle { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #ee2918; margin-bottom: 10px; }
.sk-offices-title { font-size: 34px; font-weight: 700; margin-bottom: 24px; color: #1a1a1a; }

.sk-offices-block {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-left: -20px;
}

.sk-offices-left {
  width: calc(33.3333% - 20px);
  margin-left: 20px;
}

.sk-offices-right {
  width: calc(66.6666% - 20px);
  margin-left: 20px;
  height: 490px;
  border-radius: 30px;
  overflow: hidden;
}

.sk-offices-right ymaps { font-family: 'Manrope', Helvetica, Arial, sans-serif; }

.sk-offices-search { margin-bottom: 20px; position: relative; }
.sk-offices-search:before {
  content: '';
  position: absolute;
  width: 46px; height: 46px;
  border-radius: 50%;
  right: 2px; top: 2px;
  background: url(/netcat_template/template/10/img/sk-offices-search.svg) #1a1a1a no-repeat center;
}
.sk-offices-search input {
  width: 100%;
  height: 50px;
  border-radius: 48px;
  border: 1px solid #e8e8ee;
  font-size: 14px;
  padding: 0 56px 0 20px;
  box-sizing: border-box;
  font-family: inherit;
}
.sk-offices-search input:focus { outline: none; border-color: #ee2918; }

.sk-offices-suggestions {
  opacity: 0; pointer-events: none;
  position: absolute; z-index: 10;
  top: calc(100% + 8px); left: 0; width: 100%;
  background: #fff; border-radius: 20px; border: 1px solid #ccc;
  list-style: none; padding: 5px; margin: 0;
  max-height: 150px; overflow-y: auto;
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.sk-offices-suggestions.active { opacity: 1; pointer-events: all; }
.sk-offices-suggestions li { padding: 8px 12px; cursor: pointer; border-radius: 14px; font-size: 14px; }
.sk-offices-suggestions li:hover { background: #f0f0f0; }

.sk-offices-items-wrap {
  box-shadow: 0 25px 30px -20px rgba(64,15,0,.15);
  background: #f5f5f8;
  padding: 30px 0 30px 30px;
  border-radius: 30px;
  height: 460px;
  overflow: hidden;
  position: relative;
}

.sk-offices-items { padding: 0 30px 0 0; list-style: none; height: 400px; overflow: auto; margin: 0; }
.sk-offices-items::-webkit-scrollbar { height: 10px; width: 10px; }
.sk-offices-items::-webkit-scrollbar-track { background: #e8e8ee; border-radius: 30px; }
.sk-offices-items::-webkit-scrollbar-thumb { background: #1a1a1a; border-radius: 30px; cursor: pointer; min-height: 80px; }
.sk-offices-items.sk-show-items { overflow: hidden; }

.sk-offices-item + .sk-offices-item { border-top: 1px solid #e8e8ee; margin-top: 20px; padding-top: 20px; }
.sk-offices-item.sk-group-soon .sk-offices-item-outer { opacity: .82; }

.sk-offices-item-outer { position: relative; }
.sk-offices-item-outer:hover .sk-offices-item-readmore svg path { fill: #ee2918; }
.sk-offices-item-outer:hover .sk-offices-item-city { color: #ee2918; }
.sk-offices-item-outer:hover .sk-offices-item-readmore span { background: #fff; color: #1a1a1a; }

.sk-offices-item-link { position: absolute; left: 0; right: 0; top: 0; bottom: 0; cursor: pointer; }

.sk-offices-item-city { font-weight: 700; font-size: 18px; text-transform: uppercase; margin-bottom: 5px; transition: color .3s; }
.sk-offices-item-address { font-size: 14px; color: #444; line-height: 1.4; }
.sk-offices-item-address p { margin: 0; }
.sk-offices-item-phone { margin-top: 10px; font-weight: 700; position: relative; z-index: 1; }
.sk-offices-item-phone p { margin: 0; }
.sk-offices-item-phone a { text-decoration: underline; color: #1a1a1a; }
.sk-offices-item-phone a:hover { color: #ee2918; }

.sk-offices-item-readmore { margin-top: 15px; display: flex; align-items: center; justify-content: space-between; }
.sk-offices-item-readmore span {
  background: #1a1a1a; border: 1px solid #1a1a1a; color: #fff;
  display: inline-block; text-align: center; font-size: 12px;
  padding: 8px 16px 6px; border-radius: 71px; margin-right: 10px;
  transition: all .3s; width: calc(100% - 41px); max-width: 200px;
}
.sk-offices-item-readmore svg path { transition: fill .3s; }

.sk-offices-item-inner {
  position: absolute; z-index: 3; left: 30px; top: 30px;
  width: calc(100% - 30px); height: calc(100% - 60px);
  background: #f5f5f8;
  display: none;
  overflow: auto;
}
.sk-offices-item.active .sk-offices-item-inner { display: block; }
.sk-offices-item-inner::-webkit-scrollbar { height: 10px; width: 10px; }
.sk-offices-item-inner::-webkit-scrollbar-track { background: #e8e8ee; border-radius: 30px; }
.sk-offices-item-inner::-webkit-scrollbar-thumb { background: #1a1a1a; border-radius: 30px; cursor: pointer; min-height: 80px; }
.sk-offices-item-inner > * { margin-right: 30px; }

.sk-offices-item-back { position: relative; cursor: pointer; margin-bottom: 20px; width: 20px; }
.sk-offices-item-back:hover svg path { fill: #ee2918; }
.sk-offices-item-back svg path { transition: fill .3s; }

.sk-offices-item-mess { display: flex; flex-wrap: wrap; margin-top: 12px; margin-left: -20px; }
.sk-offices-item-mess a {
  width: calc(50% - 20px); margin-left: 20px; text-align: center;
  border-radius: 3px; border: 1px solid #1a1a1a; height: 23px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all .3s;
  box-sizing: border-box;
}
.sk-offices-item-mess a:not(:hover) svg path { fill: #1a1a1a; }
.sk-offices-item-mess svg { width: 13px; height: auto; }
.sk-offices-item-mess svg path { transition: fill .3s; }

.sk-offices-item-inner-bottom { margin-top: 19px; padding-top: 18px; border-top: 1px solid #e8e8ee; }
.sk-offices-item-schedule { font-size: 14px; }
.sk-offices-item-schedule b { font-weight: 600; display: block; font-size: 15px; margin-bottom: 2px; }

.sk-offices-item-website { font-size: 14px; }
.sk-offices-item-website + * { margin-top: 10px; }
.sk-offices-item-website b { font-weight: 600; display: block; font-size: 15px; margin-bottom: 2px; }
.sk-offices-item-website a { color: #ee2918; display: inline-flex; align-items: center; }
.sk-offices-item-website a span { margin-right: 10px; }

.sk-offices-route { margin-top: 15px; }
.sk-offices-route a {
  display: block; width: 100%; box-sizing: border-box;
  font-size: 13px; padding: 12px 10px; text-align: center;
  background: #1a1a1a; color: #fff; border-radius: 30px; text-decoration: none;
  transition: all .3s;
}
.sk-offices-route a:hover { background: #ee2918; }

.sk-offices-balloon {
  box-shadow: 0 25px 30px -20px rgba(64,15,0,.3);
  background: #fff;
  padding: 16px 18px;
  border-radius: 20px;
  width: 240px;
  position: absolute;
  transform: translate(-50%, -125%);
  font-family: 'Manrope', Helvetica, Arial, sans-serif;
}
.sk-offices-balloon .sk-offices-item-city { font-size: 16px; }
.sk-offices-balloon .sk-offices-item-address { font-size: 13px; margin: 3px 0 0 0; }
.sk-offices-balloon .sk-offices-item-phone { font-size: 13px; margin: 8px 0 0 0; }
.sk-offices-balloon .sk-offices-item-schedule { margin-top: 12px; font-size: 13px; }
.sk-offices-balloon .sk-offices-item-mess {
  margin-top: 10px !important;
  margin-left: -8px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
}
.sk-offices-balloon .sk-offices-item-mess a {
  width: auto !important;
  flex: 1 1 0 !important;
  margin-left: 8px !important;
  height: 23px !important;
  padding: 0 !important;
  box-sizing: border-box;
}
.sk-offices-balloon .sk-offices-item-mess svg { width: 13px !important; height: auto !important; }

@media screen and (max-width: 1240px) {
  .sk-offices-right { border-radius: 24px; height: 428px; }
  .sk-offices-items-wrap { padding: 20px 0 20px 20px; border-radius: 20px; height: 400px; }
  .sk-offices-items { padding-right: 20px; height: 340px; }
  .sk-offices-item-inner { left: 20px; top: 20px; width: calc(100% - 20px); height: calc(100% - 40px); }
  .sk-offices-item-inner > * { margin-right: 20px; }
  .sk-offices-items-wrap { font-size: 14px; }
}

@media screen and (max-width: 767px) {
  .sk-offices-left { width: calc(100% - 20px); }
  .sk-offices-right { width: calc(100% - 20px); margin-top: 20px; }
}