
/* Окна */
.sdek_modal_div {
	width: 500px; 
	height: 400px; /* Размеры должны быть фиксированы */
	border-radius: 5px;
	border: 3px #000 solid;
	background: #fff;
	position: fixed; /* чтобы окно было в видимой зоне в любом месте */
	top: 45%; /* отступаем сверху 45%, остальные 5% подвинет скрипт */
	left: 50%; /* половина экрана слева */
	margin-top: -200px;
	margin-left: -250px; /* тут вся магия центровки css, отступаем влево и вверх минус половину ширины и высоты соответственно =) */
	display: none; /* в обычном состоянии окна не должно быть */
	opacity: 0; /* полностью прозрачно для анимирования */
	z-index: 1001; /* окно должно быть наиболее большем слое */
	padding: 5px 5px;
}
/* Кнопка закрыть для тех кто в танке) */
.sdek_modal_close {
	width: 21px;
	height: 21px;
	position: absolute;
	top: 0px;
	right: -28px;
	cursor: pointer;
	display: block;
}
/* Подложка */
#sdek_overlay {
	z-index: 1000; /* подложка должна быть выше слоев элементов сайта, но ниже слоя модального окна */
	position: fixed; /* всегда перекрывает весь сайт */
	background-color: #000; /* черная */
	opacity: 0.8; /* но немного прозрачна */
	width: 100%; 
	height: 100%; /* размером во весь экран */
	top: 0; 
	left: 0; /* сверху и слева 0, обязательные свойства! */
	cursor: pointer;
	display: none; /* в обычном состоянии её нет) */
}
/* Start CDEK pickup search */
#sdek_map { position: relative; }
.cdek-search, .cdek-map-close { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.cdek-search-row, .cdek-search-row input, .cdek-search-row > button, .cdek-map-close {
  min-height: 28px;
  max-height: 28px;
  box-sizing: border-box;
}
.cdek-search-row > button, .cdek-map-close {
  min-width: 28px;
  max-width: 28px;
  appearance: none;
  -webkit-appearance: none;
}
#sdek_modal1 .sdek_modal_close { display: none; }
.cdek-map-close {
  position: absolute;
  top: 10px;
  right: 48px;
  z-index: 500;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
  color: #333;
  font: 22px/28px Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.cdek-map-close > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cdek-map-close > span::before,
.cdek-map-close > span::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
}
.cdek-map-close > span::after { transform: rotate(-45deg); }
.cdek-map-close:hover { background: #f5f5f5; }
.cdek-map-close:active { background: #eee; }
.cdek-map-close:focus-visible { outline: 2px solid #ffdb4d; outline-offset: -2px; }
.cdek-search {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 86px;
  max-width: 360px;
  z-index: 500;
  color: #333;
  font: 13px/18px Arial, Helvetica, sans-serif;
}
.cdek-search-row {
  display: flex;
  height: 28px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
}
.cdek-search-row:focus-within { box-shadow: 0 0 0 2px #ffdb4d, 0 1px 5px rgba(0, 0, 0, .3); }
.cdek-search-row input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 28px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 9px;
  border: 0;
  border-radius: 3px 0 0 3px;
  background: transparent;
  box-shadow: none;
  outline: none;
  color: #333;
  font: 16px/28px Arial, Helvetica, sans-serif;
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
}
.cdek-search-row input::placeholder { color: #888; opacity: 1; }
.cdek-search-row input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cdek-search button {
  box-sizing: border-box;
  margin: 0;
  padding: 5px 10px;
  border: 0;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  color: #333;
  font: inherit;
  text-transform: none;
  cursor: pointer;
}
.cdek-search button:hover { background: #f5f5f5; }
.cdek-search button:active { background: #eee; }
.cdek-search button:focus-visible { outline: 2px solid #ffdb4d; outline-offset: -2px; }
.cdek-search-row > button {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 0 3px 3px 0;
  box-shadow: none;
  color: #777;
  font: 22px/28px Arial, Helvetica, sans-serif;
}
.cdek-search-results {
  max-height: 130px;
  margin-top: 4px;
  overflow-y: auto;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
  overscroll-behavior: contain;
}
.cdek-search-results:empty { display: none; }
.cdek-search-results > div:not(.cdek-search-result) { padding: 7px 10px; }
/* Pickup confirmation */
.cdek-search .cdek-search-select {
  display: block;
  width: calc(100% - 20px);
  margin: 4px 10px 10px;
  padding: 10px;
  border-radius: 8px;
  background: #2dc5ff;
  box-shadow: none;
  color: #fff;
  font: 14px/20px 'Inter', Arial, sans-serif;
  text-align: center;
}
.cdek-search .cdek-search-select:hover,
.cdek-search .cdek-search-select:active {
  background: #2dc5ff;
  color: #fff;
}
.cdek-search-result + .cdek-search-result { border-top: 1px solid #eee; }
.cdek-search .cdek-search-address {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  white-space: normal;
}
@media (max-width: 600px) {
  #sdek_modal1 { width: calc(100vw - 44px); height: 70vh; margin-left: 0; margin-top: -35vh; left: 16px; box-sizing: border-box; }
  #sdek_modal1 { height: 70svh; margin-top: -35svh; }
}
/* End CDEK pickup search */
