/* Structural helpers so animego.me CSS works with our dynamic pages */

.scroll-snap-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.scroll-snap-slide {
  scroll-snap-align: start;
  flex: 0 0 auto;
}
.scroll-snap-slider__homepage .scroll-snap-slide,
.carousel-section .ani-grid__item {
  width: 150px;
}
@media (min-width: 576px) {
  .scroll-snap-slider__homepage .scroll-snap-slide,
  .carousel-section .ani-grid__item { width: 170px; }
}
@media (min-width: 992px) {
  .scroll-snap-slider__homepage .scroll-snap-slide,
  .carousel-section .ani-grid__item { width: 180px; }
}

.carousel-section { position: relative; }
.scroll-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  border: 0;
  background: color-mix(in srgb, var(--bs-body-bg) 80%, transparent);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
}
@media (min-width: 992px) {
  .carousel-section:hover .scroll-btn { display: inline-flex; }
}
.scroll-btn-prev { left: .25rem; }
.scroll-btn-next { right: .25rem; }

.aw-item {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .35rem;
  border-radius: .5rem;
}
.aw-item:hover { background: rgba(125, 125, 125, .08); }
.aw-cover { width: 48px; flex: 0 0 48px; }
.aw-info { display: flex; flex-direction: column; min-width: 0; }
.aw-day-title.active { font-weight: 600; }

.ani-list__item-picture {
  width: 110px;
  flex: 0 0 110px;
}
@media (min-width: 576px) {
  .ani-list__item-picture { width: 130px; flex-basis: 130px; }
}
.ani-list__item { margin-bottom: 1rem; }
.ani-list__item-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.view-item {
  color: var(--bs-secondary-color);
  padding: .35rem;
  border-radius: .35rem;
  opacity: .7;
}
.view-item.active,
.view-item:hover {
  opacity: 1;
  color: var(--bs-body-color);
}
.view-item.active {
  box-shadow: inset 0 -2px 0 var(--bs-primary);
}

.filter-btn.is-visible { display: inline-flex; }
.filter__list { max-height: 240px; }
.filter-button__reset { text-decoration: none; }

.content-page .content-block { min-width: 0; }
@media (min-width: 992px) {
  #mmenuSidebar.offcanvas-lg {
    position: sticky;
    top: 5rem;
    transform: none !important;
    visibility: visible !important;
    width: 300px;
    flex: 0 0 300px;
    height: auto;
    max-height: none;
    border: 0;
    background: transparent;
  }
  #mmenuSidebar .offcanvas-header { display: none; }
  #mmenuSidebar .offcanvas-body { padding: 0; overflow: visible; }
}

.player-video__online {
  position: relative;
  background: #000;
  min-height: 240px;
}
.player-video__online iframe {
  border: 0;
  background: #000;
}
.player-video__side {
  width: min(320px, 100%);
  max-height: 520px;
  overflow: auto;
  border-left: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 991.98px) {
  .player-video__side {
    max-width: none;
    width: 100%;
    border-left: 0;
  }
}
.player-video-bar__item {
  min-width: 2.25rem;
  text-align: center;
  padding: .35rem .5rem;
  border-radius: .35rem;
  cursor: pointer;
  background: rgba(255,255,255,.06);
}
.player-video-bar__item.active {
  background: var(--bs-primary);
  color: #fff;
}
.player-video-bar__series .scroll-snap-slider {
  gap: .35rem;
  padding-bottom: .25rem;
}
.player-voices .list-group-item {
  cursor: pointer;
}
.player-voices .list-group-item.active {
  background: color-mix(in srgb, var(--bs-primary) 25%, transparent);
  border-color: var(--bs-primary);
  color: inherit;
}

.entity__poster { width: min(220px, 100%); }
.entity__sticky { align-self: flex-start; top: 1rem; }

.entity-field__classification {
  background: color-mix(in srgb, var(--bs-danger) 18%, transparent);
  color: var(--bs-danger-text-emphasis, #ea868f);
  border-radius: .25rem;
}

.description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: var(--lines-to-show, 10);
  white-space: pre-wrap;
}

.screenshots__picture {
  overflow: hidden;
  border-radius: .375rem;
}
.screenshots__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player {
  margin-top: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}
.player .content_second {
  background: var(--bs-body-bg);
}
.player__title {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 992px) {
  .player__title { padding-left: 1.5rem; padding-right: 1.5rem; }
}
.player-video-bar__left .form-control {
  width: 4.5rem;
}
.player-video-bar__separator {
  width: 1px;
  align-self: stretch;
  background: rgba(255,255,255,.12);
}
.player-video-bar__arrow {
  cursor: pointer;
  opacity: .85;
}
.player-video-bar__arrow:hover { opacity: 1; }
.player-video-bar__arrow.disabled {
  opacity: .35;
  pointer-events: none;
}

.episode-info__label {
  flex: 0 0 auto;
}
.episode-info__value {
  min-width: 0;
}

.schedule-episodes__header {
  font-size: 1.35rem;
  margin-bottom: .75rem;
}
.content_third {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

#translation .list-group,
#provider .list-group,
#voiceList,
#providerList {
  max-height: 100%;
  overflow: auto;
}

.text-line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: var(--lines-to-show, 1);
}

.rating-badge {
  position: absolute;
  top: .4rem;
  left: .4rem;
  z-index: 1;
  font-size: .8rem;
  font-weight: 700;
  padding: .15rem .4rem;
  border-radius: .35rem;
  background: #444;
  color: #fff;
}
.rating-badge.positive { background: #2f9e44; }
.rating-badge.neutral { background: #f08c00; }
.rating-badge.negative { background: #e03131; }

/* Screenshot-like accents */
a.link-title,
.ani-grid__item-title a,
.ani-list__item-title a {
  color: var(--bs-primary);
  text-decoration: none;
}
a.link-title:hover,
.ani-grid__item-title a:hover,
.ani-list__item-title a:hover {
  text-decoration: underline;
}

.episode-square {
  min-width: 2.5rem;
  min-height: 2.5rem;
}
.episode-square.active {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

.player-voices .list-group-item.active,
.voice-tab-item.active,
#voiceList .list-group-item.active,
#providerList .list-group-item.active {
  background: color-mix(in srgb, var(--bs-primary) 18%, transparent);
  border-color: var(--bs-primary);
  color: var(--bs-primary);
  font-weight: 600;
}

.button-list-loading {
  width: 100%;
  padding: .85rem 1rem;
}

.aw-day-title.active {
  background: var(--bs-secondary-bg) !important;
}