/* ======================================================================
   FILE: /styles_2026/slider_2026.css
   (замени целиком)
   ====================================================================== */

#s26{
  position:fixed;
  inset:0;
  z-index:9999999999;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

#s26 .s26__bg{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.84);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#s26 .s26__stage{
  position:absolute;
  inset:0;
  overflow:hidden;
  touch-action:none; /* чтобы жесты не уезжали в скролл/зум */
}

/* ===== 3-screen track ===== */
#s26 .s26__track{
  position:absolute;
  inset:0;
  display:flex;
  width:100%;
  height:100%;
  will-change: transform;
  user-select:none;
  -webkit-user-select:none;
}

#s26 .s26__track.is-anim{
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}

#s26 .s26__pane{
  flex:0 0 100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* IMPORTANT: жёстко прибиваем “вписывание” на мобиле */
#s26 .s26__img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block !important;
}

/* when no navigation */
#s26 .s26__track.is-single .s26__pane[data-slot="prev"],
#s26 .s26__track.is-single .s26__pane[data-slot="next"]{
  display:none;
}

/* ===== buttons ===== */
#s26 .s26__btn{
  position:absolute;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(15,18,24,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color:rgba(255,255,255,.92);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  border-radius:14px;
  padding:10px 12px;
  line-height:1;
  cursor:pointer;
  transition: transform .15s ease, opacity .9s cubic-bezier(.2,.8,.2,1), background .25s ease;
  -webkit-tap-highlight-color: transparent;
}

/*#s26 .s26__btn:active{ transform: scale(.98); }*/

#s26 .s26__btn--close{
  font-size:28px;
	display: flex;
    align-items: center;
    justify-content: center;
    width: var(--button_size);
    height: var(--button_size);
    border-radius: 50%;
    background: rgb(139 139 139 / 27%);
    backdrop-filter: blur(2px);
    transition: /*transform 0.2s ease,*/ background 0.3s ease;
	right: var(--padding_button);
    top: var(--padding_button);
	opacity:0.5;
}

#s26 .s26__btn--dl{
  font-size:20px;
		display: flex;
    align-items: center;
    justify-content: center;
    width: var(--button_size);
    height: var(--button_size);
    border-radius: 50%;
    background: rgb(139 139 139 / 27%);
    backdrop-filter: blur(2px);
    transition: /*transform 0.2s ease,*/ background 0.3s ease;
	left: var(--padding_button);
    top: var(--padding_button);
}

#s26 .s26__btn--left{
  top:50%;
  transform: translateY(-50%);
  font-size:36px;
	display: flex;
    align-items: center;
    justify-content: center;
    width: var(--button_size);
    height: var(--button_size);
    border-radius: 50%;
    background: rgb(139 139 139 / 27%);
    backdrop-filter: blur(2px);
    transition: /*transform 0.2s ease,*/ background 0.3s ease;
	left: var(--padding_button);
}

#s26 .s26__btn--right{ 
  right:16px; top:50%;
  transform: translateY(-50%);
  font-size:36px;
	display: flex;
    align-items: center;
    justify-content: center;
    width: var(--button_size);
    height: var(--button_size);
    border-radius: 50%;
    background: rgb(139 139 139 / 27%);
    backdrop-filter: blur(2px);
    transition: /*transform 0.2s ease,*/ background 0.3s ease;
	right: var(--padding_button);
}
#s26 .s26__btn--right:hover,#s26 .s26__btn--left:hover {
    background: rgba(245, 124, 0, 0.25);
	opacity:0.9;
	transition: 0.5s;
}
/* ===== caption ===== */
#s26 .s26__caption{
  position:absolute;
  left:50%;
  bottom:18px;
  transform: translateX(-50%);
  max-width: min(920px, calc(100vw - 48px));
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(10,12,16,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.92);
  font-size:14px;
  line-height:1.35;
  text-align:center;
}

/* ===== loader ===== */
#s26 .s26__loader{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
  background: rgba(0,0,0,.18);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
}

#s26 .s26__loader.is-on{
  opacity:1;
  pointer-events:auto;
}

#s26 .s26__spinner{
  width:34px; height:34px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.18);
  border-top-color: rgba(245,124,0,.95);
  animation: s26spin .9s linear infinite;
}

#s26 .s26__loaderText{
  color: rgba(255,255,255,.78);
  font-size:13px;
}

@keyframes s26spin{ to{ transform: rotate(360deg); } }

/* ===== toast ===== */
#s26 .s26__toast{
  position:absolute;
  left:50%;
  bottom:24px;
  transform: translateX(-50%);
  background: rgba(180,20,20,.80);
  border:1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.95);
  padding:10px 14px;
  border-radius:14px;
  max-width: min(520px, calc(100vw - 36px));
  text-align:center;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size:14px;
}

@media (max-width: 560px){
  #s26 .s26__btn--left{ left:10px; width:46px; height:46px; font-size:34px; }
  #s26 .s26__btn--right{ right:10px; width:46px; height:46px; font-size:34px; }
  #s26 .s26__btn--close{ top:12px; right:12px; width:42px; height:42px; }
  #s26 .s26__btn--dl{ top:12px; left:12px; width:42px; height:42px; }
  #s26 .s26__caption{ display:none !important; }
}
#s26 .s26__btn--fade{
  transition: opacity 600ms ease;
}
/* iOS Safari: убираем "дыру" из-за прыгающей панели */
#s26,
#s26 .s26__stage{
  position: fixed;
  inset: 0;
  width: 100%;
  /* Fallback */
  height: 100vh;
  /* iOS 15+ / современные: стабильная высота видимой области */
  height: 100svh;
  /* динамическая (когда панель скрывается/появляется) */
  height: 100dvh;

  /* безопасные зоны (чёлка/низ) */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* если у тебя есть внутренний контейнер, который должен занимать всё */
#s26 .s26__track{
  height: 100%;
}