/* ===== Shop Picker Modal (spm) ===== */
.spm {
	max-width: 895px; 
	width: 92vw;
	padding: 0 !important;
}

.spm__window
{
	overflow:hidden;
	box-shadow:0 20px 60px rgba(0,0,0,.25);
	font-family: 'GolosTextRegular';
	max-width: 895px;
	width: 92vw;
	padding: 0;
	background: none !important;
}

/* Header */
.spm__header{
  background:#9e2f2f;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
}
.spm__title{ font-size:18px; font-weight:700; }
.spm__close{
  appearance:none;
  background:transparent !important;
  border:none !important;
  color:#fff;
  cursor:pointer;
  width:36px; 
  height:36px;
  display:grid;
  place-items:center;
}
.spm__close:hover{ background:rgba(255,255,255,.12); }

/* Body */
.spm__filters{
	background:#faf9f8;
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:18px;
	padding:35px 40px;
	border-bottom:1px solid #f6f4f2;
}
@media (max-width: 720px){
  .spm__filters{ grid-template-columns: 1fr; }
}

.spm__field{ display:flex; flex-direction:column; gap:6px; }
.spm__label
{
	font-family: 'GolosTextRegular';
	font-weight:normal;
	font-size:13px; 
	color:#b3b3b3;
}

.spm__select{
  height:42px;
  border-top:none;
  border-left:none;
  border-right:none;
  border-bottom:1px solid #e6e5e2;
  padding:0;
  background:none;
  outline:none;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  transition: opacity .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.spm__select[disabled]{
  opacity:.55;
  background:#f7f7f7;
  cursor:not-allowed;
}

.spm__section-title
{
	margin:0 0 23px;
	font-family: 'GolosTextMedium';
	color:#212121;
	padding:0 40px;
}
/* Stores list with scrollbar */
.spm__stores{
	padding:0 40px;
	max-height: 370px;
	overflow-y:auto;
}

/* Store row */
.spm__store
{
	display: grid;
	font-weight: normal;
	grid-template-columns: 20px 1fr 185px 160px;
	gap: 8px;
	align-items: center;
	padding: 10px 0;
	margin: 0;
}
.spm__store:last-child{ border-bottom:0; }

.spm__store-addr
{   
	color: #212121;
	font-size: 14px;
	background: #fff;
	position: relative; 
	padding: 0 10px 0 0;
	z-index: 10;
}
.spm__store-hours
{
	color: #212121;
	font-size: 14px;
	background: #fff;
	position: relative;
	padding: 0 10px;
	z-index: 10;
	white-space: nowrap;
	text-align: left;
}

.spm__radio{
  width:18px; height:18px;
  accent-color:#9e2f2f;
  cursor:pointer;
}

/* Footer */
.spm__footer{
	border-top:1px solid #f6f4f2;
	padding:21px 40px;
	display:flex;
	justify-content:flex-start;
}
.spm__submit
{
	height:42px;
	padding:0 18px;
	border-radius:6px;
	border:0;
	font-family: 'GolosTextMedium';
	background:#aa3335;
	font-size:15px;
	color:#fff;
	cursor:pointer;
}
.spm__submit:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* Nice scrollbar (optional) */
.spm__stores::-webkit-scrollbar{ width:10px; }
.spm__stores::-webkit-scrollbar-track{ background:#f3f3f3; border-radius:10px; }
.spm__stores::-webkit-scrollbar-thumb{ background:#c9c9c9; border-radius:10px; }
.spm__stores::-webkit-scrollbar-thumb:hover{ background:#b6b6b6; }

/* ===== Smooth transitions (fade/slide) ===== */
.spm__fade-block{
  opacity:1;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease;
}
.spm__fade-block.is-fading{
  opacity:0;
  transform: translateY(4px);
}

/* Optional: loading overlay (for async later) */
.spm__loading{
  pointer-events:none;
  position:relative;
}
.spm__loading::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.6);
  backdrop-filter: blur(1px);
}

/* View buttons */
.spm__view{
  display:flex;
  gap:10px;
  margin:32px 0 35px;
  padding:0 40px;
}
.spm__view-btn{
	height:34px;
	padding:0 12px;
	font-size:13px;
	border:1px solid #e3e3e3;
	border-radius:6px;
	background:#fff;
	cursor:pointer;
}
.spm__view-btn.is-active
{
  border-color:#9e2f2f;
}

/* Map block */
.spm__body
{
  padding:0 0 40px;
}
.spm__map-wrap
{
  overflow:hidden;
  padding:0 40px;
  position:relative;
}
.spm__map-hint{
  position:absolute;
  left:10px; 
  bottom:10px;
  background:rgba(255,255,255,.92);
  padding:6px 10px;
  border-radius:8px;
  font-size:12px;
  color:#444;
  z-index:4;
}

.spm__map{
  width:100%;
  height:360px;
  border-radius:12px;
  overflow:hidden;
}

/* ===== selected store highlight (list) ===== */
/* Panels */
.spm__panel{
  transition: opacity .22s ease, transform .22s ease;
  will-change: opacity, transform;
}
.is-hidden{ display:none !important; }

.spm__panel.is-entering-right{ opacity:0; transform: translateX(14px); }
.spm__panel.is-entering-left { opacity:0; transform: translateX(-14px); }

.spm__panel.is-leaving-left  { opacity:0; transform: translateX(-14px); pointer-events:none; }
.spm__panel.is-leaving-right { opacity:0; transform: translateX(14px);  pointer-events:none; }

.spm__panel.is-active{ opacity:1; transform: translateX(0); }

/* Selected info (JS controls display) */
.spm__selected-info
{   
	background: #faf9f8;
	font-family: 'GolosTextRegular';
	margin: 0 40px 10px;
	color: #212121;
	padding: 13px 20px;
	font-size: 13px;
	display: none !important; 
} 
.spm__selected-info strong
{
	font-family: 'GolosTextRegular';
	font-size: 13px;
	font-weight: normal;
	color: #212121;
}

/* ===== FIXES FOR YANDEX MAPS ===== */

/* 1) Yandex Maps breaks inside transform containers — disable transform ONLY for map panel */
#spm-map-wrap.spm__panel,
#spm-map-wrap.spm__panel.is-active,
#spm-map-wrap.spm__panel.is-entering-right,
#spm-map-wrap.spm__panel.is-entering-left,
#spm-map-wrap.spm__panel.is-leaving-left,
#spm-map-wrap.spm__panel.is-leaving-right{
  transform:none !important;
  transition: opacity .22s ease !important; /* keep fade only */
}

/* 2) Do NOT hide map panel with display:none (Yandex loses dimensions) */
#spm-map-wrap.is-hidden{
  display:block !important;
  height:0 !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  border:0 !important;
  margin-top:0 !important;
  padding:0 !important;
}

/* Optional: stock */
.stock-muted{ color:#777; }


.store-banner
{
    background-image: url(images/store-bg.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
	display:flex;
	align-items:center;
	height:132px;
	border-radius:3px;
	line-height:1.6em;
	padding:0 55px;
	margin:0 0 35px;
	color:#212121;
	font-size:15px;
}
.store-banner.is-hidden{ display:none !important; }

.store-banner .store
{
	font-family: 'GolosTextMedium';
	font-size:17px;
    text-align: left !important;
	color:#212121;
	width:20%;
}
.store-banner__text
{ 
	background-image: url(images/svg/info-icon.svg);
	background-position: 0% 3px;
	background-repeat: no-repeat;
	background-size: 18px;
	padding: 0 0 0 25px;
	max-width: 285px;
	margin: 0 0 0 65px;
}
.store-banner__btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	line-height:44px;
	height:44px;
	font-family: 'GolosTextMedium';
	padding:0 25px;
	font-size:15px;
	border-radius:4px;
	background:#9e2f2f;
	color:#fff;
	text-decoration:none;
	font-weight:normal;
	white-space:nowrap;
}
.store-banner__btn:hover
{
	background:#212121;
	color:#fff;
}


.spm__store-info
{
	display: flex;
	align-items: center;
	position: relative;
}
.spm__store-info::after
{
  border-bottom: 1px dotted #b0b0b0;
  position: absolute;
  left: 0;
  width: calc(100% + 8px + 185px); /* col2 + gap + col3(hours) */
  content: "";
  bottom: 7px;
  display: inline-block;
}
/* ===== Подсветка выбора магазина в шапке ===== */
.header-store.is-empty
{
  position: relative;
}
.header-store.is-empty #current-store-city
{
	display: none;
}
/*
.header-store.is-empty::after{
  content:"";
  position:absolute;
  inset:-2px;  
  border-radius: 5px;
  border: 1px solid rgba(152,152,152,.9);
  pointer-events:none;
  animation: headerStorePulse 1.4s ease-in-out infinite;
}*/

@keyframes headerStorePulse{
  0%   { opacity:.25; }
  50%  { opacity:.6; }
  100% { opacity:.25; }
}

/* Текст-CTA */
.header-store.is-empty #current-store-label{
  color:#ebe4dc;
  cursor:pointer;
}

/* Город тоже кликабелен */
#current-store-city{
  cursor:pointer;
}

/* ===== Наличие товара в строке магазина (точки) ===== */
.spm__store-stock {
  align-self: center;
  white-space: nowrap;
}
.store-stock {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}
.spm__stock-label {
  font-size: 12px;
  color: #888;
}
.spm__store-stock--empty {
  visibility: hidden;
}
.spm__dots {
  display: flex;
  gap: 3px;
  align-items: center;
}
.spm__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.spm__dot--green  { background: #4caf50; }
.spm__dot--orange { background: #ff9800; }
.spm__dot--muted  { background: #d0d0d0; }