
.now_watchin {
  margin:150px 210px 0 182.5px; 
  width:auto;   
  max-width: 800px;
  background-color: #141014;
  position: relative;
  z-index: 2;
}
.now_watchin {
  float:none; 
  width:100%; 
}

/* ✅ СКРЫВАЕМ КОНТЕНТ ДО ПОЛНОЙ ЗАГРУЗКИ */
.now_watchin.owl-loading {
  opacity: 0;
  visibility: hidden;
}

.now_watchin.loaded {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}


.choice {
  font-family: Copperplate;
  font-weight: 300;
  font-size: 13px;
  margin-top: 120px;
  margin-left: 100px;
  position: absolute;
  top: -20px;
  left: 275px;
}



.popularno {
  padding: 7px 10px;
  transition: all 0.2s ease;
  color: #F3EBF0;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  border: none;
  text-align: center;
  line-height: 1;
  background-color: transparent;
  outline: none;
}

.popularno:hover {
  background-color: #ebd0ef;
  color: #000000;
}

.soon {
  text-decoration: none;
  text-align: center;
  display: inline-block;
  border: none;
}

.legends {
  text-decoration: none;
  text-align: center;
  display: inline-block;
  border: none;
}

.now_watching {
	color: #000000;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  border: none;
  background-color: #ebd0ef;
  padding: 7px 8px;
  margin-right: 1px;
}

.now_watching:hover {
  background-color: #ebd0ef;
}

.legends {
  padding: 7px 10px;
  transition: all 0.2s ease;
  color: #F3EBF0;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  border: none;
  text-align: center;
  line-height: 1;
  background-color: transparent;
  outline: none;
}

.legends:hover {
  background-color: #ebd0ef;
}

.soon {
  padding: 7px 10px;
  transition: all 0.2s ease;
  color: #F3EBF0;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  border: none;
  text-align: center;
  line-height: 1;
  background-color: transparent;
  outline: none;
}

.soon:hover {
  background-color: #ebd0ef;
}


.eren3_watch .fa {
  font-size: 38px;
}

.eren3_watch {
  margin:0px 15px 65px 0px !important;
  flex-wrap: wrap;
  float: left
}

.eren3_watch:hover .short-link3_watch a {
 text-decoration: underline;
}

.short-link3_watch {
  overflow:hidden; 
  width: 166px;
  margin: 4px 15px -10px 0;  
}

.short-link3_watch a {
  cursor: pointer;
  font-family: 'Copperplate', serif; 
  font-weight: 300;
  font-style: normal;
  font-size: 12px;
  color: #F3EBF0;
  text-decoration: none;
  text-align:center;
}

.short-link2_watch {
  cursor: pointer;
  color: #C9BFD0;
  text-decoration: none;
  font-family: 'Copperplate';
  font-weight: 300;
  font-size: 9px;
}

.short-link2_watch a {
  cursor: pointer;
  color: #C9BFD0;
  text-decoration: none;
  font-family: 'Copperplate';
  font-style: normal;
  font-weight: 300;
  font-size: 10px;
}

.second_edit_watch {
  cursor: pointer;
  width: 166px;
  height: 250px;
  background-color: #111;
  position: relative;
  border-radius: 3px;
}

.second_edit_watch:hover .first_edit_content_watch {
  opacity: 0.8;
}

.second_edit_watch:hover .first_anime_watch {
  opacity: 0.6;
}

.first_anime_watch {

  transition: all 0.4s ease-out;
  /*margin-left: 225px;
  margin-right: -215px;*/
  cursor: pointer;
  position: relative;

}

.first_anime_watch .short-images-link2_watch {display:inline-block; position:relative; overflow:hidden}

.top_img2_watch {
  width: 166px;
  height: 250px;
  border-radius: 3px;
}

.first_edit_content_watch {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.edit_icon_watch {
  color: white;
  padding-bottom: 8px;
  /*opacity: 0.8;*/
}

.under_anime_name3_watch {
    font-family: Copperplate;
  font-weight: 300;
  font-size: 11px;
  position: absolute;
  color: #F3EBF0;
  text-align: left;
  align-items: center;
  margin-top: 5px;
}

/*.allwtchcontent {
  margin: 15px 0 0 102px;
  max-width: 700px;
}*/


@media screen and (max-width: 810px) {

.page-bg-category {
  width: max(620px, calc(100vw - 120px));
}

.choice {
  left: 350px;
}

.now_watchin {
  margin:150px 210px 0 225px; 
  max-width: 600px;
  background-color: #141014;
  position: relative;
  z-index: 2;
}

.top_img2_watch {
  width: 171px;
  height: 253px;
  border-radius: 3px;
}

.eren3_watch {
  margin:0px 18.5px 65px 0px !important;
  flex-wrap: wrap;
  float: left
}

.short-link3_watch {
  overflow:hidden; 
  width: 171px;
  margin: 7px 15px -10px 0;  
}

}

@media screen and (max-width: 620px) {
.page-bg-category {
  width: max(460px, calc(100vw - 100px)); 
}

.choice {
  font-size: 11px;
  left: 420px;
}

.top_img2_watch {
   width: 126px;
  height: 180px;
  border-radius: 2px;
}

.second_edit_watch {
  cursor: pointer;
  width: 126px;
  height: 180px;
  background-color: #111;
  position: relative;
  border-radius: 2px;
}

.now_watchin {
  margin:150px 210px 0 260px; 
  max-width: 450px;
}

.eren3_watch {
  margin:0px 11px 65px 0px !important;
}

.short-link3_watch a {
  font-size: 11px;
}

.short-link3_watch {
  overflow:hidden; 
  width: 126px;
  margin: 4px 15px -10px 0;  
}


}


@media screen and (max-width: 465px) {
.page-bg-category {
  width: max(400px, calc(100vw - 100px)); 
}

.choice {
  left: 443px;
}

.popularno {
  padding: 7.25px 6px;
}

.now_watching {
  padding: 8px 6px;
}

.legends {
  padding: 8px 5px;
}

.soon {
  padding: 8px 5px;
}


.now_watchin {
  margin:150px 210px 0 272px; 
  max-width: 450px;
}

.eren3_watch {
  margin:0px 8px 65px 0px !important;
}

.top_img2_watch {
  width: 112px;
  height: 163px;
  border-radius: 3px;
}

.second_edit_watch {
  cursor: pointer;
  width: 112px;
  height: 163px;
  background-color: #111;
  position: relative;
  border-radius: 3px;
}

.short-link3_watch {
  overflow:hidden; 
  width: 112px;
  margin:3px 15px -7px 0;
}

.short-link3_watch a {
  cursor: pointer;
  font-family: 'Copperplate', serif; 
  font-weight: 300;
  font-style: normal;
  font-size: 11px;
  color: #F3EBF0;
  text-decoration: none;
  text-align:center;
}



}


@media screen and (max-width: 410px) {

.page-bg-category {
  width: max(370px, calc(100vw - 80px));
}

.choice {
  left: 471.5px;
}

.now_watchin {
  margin:150px 210px 0 286px; 
  max-width: 400px;
}

.eren3_watch {
  margin:0px 13px 65px 0px !important;
}

.top_img2_watch {
  width: 142px;
  height: 212px;
  border-radius: 3px;
}

.second_edit_watch {
  cursor: pointer;
  width: 142px;
  height: 212px;
  background-color: #111;
  position: relative;
  border-radius: 3px;
}

.short-link3_watch {
  overflow:hidden; 
  width: 144px;
  margin:4px 15px -7px 0;
}

.short-link3_watch a {
  cursor: pointer;
  font-family: 'Copperplate', serif; 
  font-weight: 300;
  font-style: normal;
  font-size: 12px;
  color: #F3EBF0;
  text-decoration: none;
  text-align:center;
}

.short-link2_watch a {
  cursor: pointer;
  color: #C9BFD0;
  text-decoration: none;
  font-family: 'Copperplate';
  font-style: normal;
  font-weight: 300;
  font-size: 10px;
}


}


/* ✅ SHIMMER SKELETON АНИМАЦИЯ ДЛЯ СТРАНИЦЫ КАТЕГОРИИ */

/* Применяем анимацию к контейнерам изображений */
.first_anime_watch.image-loading {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #1a1618 0%, #252022 50%, #1a1618 100%);
  background-size: 200% 100%;
  animation: shimmer-watch 1.5s ease-in-out infinite;
  display: block;
}

/* Shimmer анимация */
@keyframes shimmer-watch {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Скрываем изображение пока не загрузилось */
.first_anime_watch.image-loading img {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Показываем изображение после загрузки */
.first_anime_watch.image-loading.loaded img {
  opacity: 1;
}

/* Убираем анимацию после загрузки */
.first_anime_watch.image-loading.loaded {
  animation: none;
  background: transparent;
}

/* Темный фон если изображение не загрузилось */
.first_anime_watch.image-loading.error {
  background: #1a1618;
  animation: none;
}

/* =========================================
   ✅ БАЗОВЫЕ РАЗМЕРЫ
   ========================================= */

.first_anime_watch.image-loading {
  width: 166px;
  height: 250px;
  border-radius: 3px;
}

/* =========================================
   ✅ АДАПТИВНЫЕ РАЗМЕРЫ
   ========================================= */

/* 810px */
@media screen and (max-width: 810px) {
  .first_anime_watch.image-loading {
    width: 171px;
    height: 253px;
  }
}

/* 620px */
@media screen and (max-width: 620px) {
  .first_anime_watch.image-loading {
    width: 126px;
    height: 180px;
    border-radius: 2px;
  }
}

/* 465px */
@media screen and (max-width: 465px) {
  .first_anime_watch.image-loading {
    width: 112px;
    height: 163px;
    border-radius: 3px;
  }
}

/* 410px */
@media screen and (max-width: 410px) {
  .first_anime_watch.image-loading {
    width: 142px;
    height: 212px;
    border-radius: 3px;
  }
}



