@font-face {
	font-family:'AA_Stetica';
	src: url('fonts/AA_Stetica/AA_Stetica.ttf');
}

@font-face {
	font-family:'RobotoLight';
	src: url('fonts/Roboto/Light/Roboto-Light.ttf');
}

@font-face {
	font-family:'RobotoRegular';
	src: url('fonts/Roboto/Regular/Roboto-Regular.ttf');
}

@font-face {
	font-family:'RobotoMedium';
	src: url('fonts/Roboto/Medium/Roboto-Medium.ttf');
}

@font-face {
	font-family:'RobotoBold';
	src: url('fonts/Roboto/Bold/Roboto-Bold.ttf');
}

@font-face {
	font-family:'RobotoBlack';
	src: url('fonts/Roboto/Black/Roboto-Black.ttf');
}
* {box-sizing:border-box; margin:0; padding:0; border-radius:0;}
input:-webkit-autofill,
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
input:focus, 
input:active{
    outline: inherit !important;
}
html, body {}
html {height: 100%;}
body {font-family: AA_Stetica, RobotoLight, Segoi UI, Arial;
  position:relative;
  --hue: 0deg;
  /* background-color:#1C262B;  */
  /* background-image: radial-gradient(circle farthest-corner at center, #3C4B57 0%, #1C262B 100%); */
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, #536573 0%, #1C262B 100%);
  filter: hue-rotate(var(--hue)) saturate(90%);
  will-change: filter;
}
#search_wrap.fixed {position:fixed; top:0px;}
#search_wrap.out {position: absolute; top: 100%;}
#about_screen{display:flex; justify-content:center; align-items:center; font-size:50px; color:#fff;}
#infinity_loading {display:none!important;}
.loading #infinity_loading {display: flex!important;}

/* #infinity_loading {display:none!important; position: relative; height: 100vh; overflow: hidden; justify-content: center; align-items: center;}
.loading #infinity_loading {display: flex!important;} */
/* 
#infinity_loading {
  position: relative; 
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
} */

#instamain #form_search{
  display: flex;
      align-items: center;
      justify-content: center;
      padding: 15px 0;
      width: 90vw;
      max-width: 700px;
      min-width: 300px;
      position: relative;
}
#instamain #form_search input[type=text] {color:#ccc; width:100%; height:80px; line-height:80px; border-radius:40px; padding:0 65px 0 25px; font-size:30px; font-family: AA_Stetica; border:1px solid #ccc; background:rgba(0,0,0,0.5);}
#instamain #form_search input[type=text]:hover,
#instamain #form_search input[type=text]:focus {color:#fff; border:1px solid #fff;}
#instamain #form_search .btn_search {
  width: 80px;
  height: 80px;
  position: absolute;
  right: 0;
  padding: 20px;
  cursor:pointer;
}
#instamain #form_search .btn_search img {width:100%; filter: brightness(0) saturate(100%) invert(92%) sepia(0%) saturate(1%) hue-rotate(141deg) brightness(94%) contrast(83%);}

#instamain table.post{ border:1px solid #777; margin-bottom:15px; width:100%;}
#instamain table.post td{padding:10px;}
#instamain table.post .stats td{font-weight:bold;}
#instamain #result .content{display: flex; flex-direction: column; align-items: center;}

#instamain #coverVideo { position: relative; min-height: 100vh; display: flex; justify-content: center; align-items: center; color: white; background:#c3f2ff;}
#instamain #contentVideo {object-fit: cover; width: 100%; height: 100%; position: absolute;}
#instamain .first_wrap {z-index: 9; position: absolute;  /* backdrop-filter: blur(2px);  background: rgba(0, 0, 0, 0.6); */ width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center;}

/* #instamain #result .content .img_wrap {display: block; margin-top:80px; box-shadow: 5px 9px 29px -3px rgba(0,0,0,1); background:url(../img/loading.gif) center center no-repeat #ccc;}
#instamain #result .content .img_wrap img{display: block; opacity:0; transition: opacity 1s; } */

#instamain .img_wrap {
  display: flex; 
  /* background:url(../img/loading.gif) center center no-repeat; */
  align-items: center;
  justify-content: center;
  width:100%;
  height:100%;
  z-index: 2;
  position: relative;
}
#instamain .img_wrap img{
  display: block;
  object-fit: contain;
  width: 80%;
  height: 80%;
  transition: opacity 1s;
  opacity: 0;

  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* transition: all 0.7s; */
  transition: all var(--speed, 0.5s);
}

/* 
#instamain .next .img_wrap img{
  left: 5%;
  width: 25%;
}
#instamain .prev .img_wrap img{
  left: 95%;
  width: 25%;
}
#instamain slide.active .img_wrap img{
  left: 50%;
  width: 80%;
} */
#instamain slide[position=next],
#instamain slide[position=prev]{
  z-index:9;
}
#instamain slide[position=next] .img_wrap img{
  left: 5%;
  width: 25%;
  cursor: pointer;
}
#instamain slide[position=prev] .img_wrap img{
  left: 95%;
  width: 25%;
  cursor: pointer;
}

    #scroller {
      width: 100vw;
      height: 100vh;
      height: 100lvh;
      /* height: 100dvh; */
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
    }

    #scroller section {
      scroll-snap-align: start;
      scroll-snap-stop: always;
      width: 100vw;
      height: 100vh;
      height: 100lvh;
      height: 100dvh;
      display: flex;
      position:relative;
    }

    #scroller section .scroll_wrap{
      overflow-x: scroll;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain; 
      scroll-padding: 0; 
      width: 100vw;
      height: 100vh;
      height: 100lvh;
      height: 100dvh;
      display: flex;
      position:relative;
    }

    #scroller section slide{
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      flex: 0 0 100vw;
      /* padding: 10px; */
      scroll-snap-align: start;
      scroll-snap-stop: always;
      overscroll-behavior-x: contain;
      scroll-padding: 0; 
      /* outline: 1px solid #fff; */
      /* z-index: 1; */
      position: relative;
    } 

	#scroller::-webkit-scrollbar,
	#scroller section .scroll_wrap::-webkit-scrollbar {
		display: none;
	}







  /* Кнопка */
  .buybox_wrap {
      position:absolute;
      bottom:2%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9;
  } 
  .slider-controls {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .arrow-btn {
    background: white;
    border: 1px solid #d1d5db;
    color: #1f2937;
    font-size: 26px; /* slightly larger for better optical centering */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    font-weight: 400;
  }

  .arrow-btn span {
    display: block;
    transform: translateY(-1px); /* optical vertical alignment fix */
  }

  .arrow-btn:hover { background: #f1f5f9; }
  .arrow-btn:active { transform: scale(0.95); }

  /* Main Buy Button */
  .buy-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #2b7cff 0%, #1f6feb 40%, #0b57d0 100%);
    color: #fff;
    padding: 18px 52px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    text-align: center;
    transition: all 0.2s ease;
    box-shadow: var(--shadow);
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    text-decoration:none;
  }

  .buy-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    pointer-events: none;
  }

  .buy-btn:hover {
    box-shadow: 0 12px 36px rgba(15, 55, 120, 0.22);
    transform: translateY(-1px);
  }

  .buy-btn:active {
    transform: translateY(1px) scale(0.98);
  }

  .buy-btn:focus {
    outline: 3px solid rgba(31, 111, 235, 0.14);
    outline-offset: 3px;
  }

  .buy-btn .label {
    font-size: 18px;
    margin-bottom: 4px;
  }

  .buy-btn .price {
    font-size: 14px;
    opacity: 0.95;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 10px;
    border-radius: 9999px;
  }

  /* Dots navigation */
  .dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
  }

  .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d1d5db;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }

  .dot.active {
    background: #1f6feb;
    transform: scale(1.2);
  }

  @media (max-width: 420px) {
    .buy-btn {
      padding: 14px 36px;
    }
  }

  section.error{
    display:flex;
    align-items:center;
    justify-content: center;
  }

  .warn_wrap {
    max-width: 550px;
  }

  .warn_wrap .icon_wrap {
    display:flex;
    justify-content: center;
  }

  .warn_wrap .icon_wrap img{width:250px;}

  .warn_wrap .line1 {
    color:#fff; 
    font-size:24px;
    display:flex;
    justify-content: center;
  }
  .warn_wrap .line2 {
    color:#fff;
    display:flex;
    justify-content: center;
    text-align:center;
    padding:0 20px;
  }
  .warn_wrap .line3 {
    display:flex;
    justify-content: center;
    padding-top:10px;
  }
  .warn_wrap .line3 .button{
    cursor:pointer;
    background:#4a5ef9; 
    color:#fff; 
    border-radius:12px; 
    padding:10px;
  }