/*
 * AnimeFLV redesign: single anime page.
 * Part 1 mirrors the page-level rules of the reference design.
 * Part 2 fits the theme's own features (rating votes, library, followers...) into that layout.
 */

/* ---- Part 1: page layout ---- */
.site-header { margin-bottom: 0px; }
.Body { flex: 1 0 auto; overflow-x: hidden; padding-top: 0px; width: 100%; }
.hero-banner { position: relative; height: 200px; overflow: hidden; margin-bottom: 0px; pointer-events: none; }
.hero-bg { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; pointer-events: none; }
.anime-detail-section { background: rgb(255, 255, 255); padding: 40px 0px; min-height: 100vh; }
.anime-layout { display: flex; gap: 40px; align-items: flex-start; min-width: 0px; }
.anime-sidebar { flex: 0 0 280px; }
.anime-poster { margin-bottom: 20px; }
.poster-image { width: 100%; height: auto; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 25px; display: block; }
.anime-rating { text-align: center; color: rgb(26, 26, 26); padding: 2px 0px 6px; }
.rating-score { font-size: 34px; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 10px; color: rgb(22, 22, 26); text-shadow: rgba(255, 255, 255, 0.8) 0px 1px 0px; }
.rating-stars { display: inline-flex; justify-content: center; align-items: center; gap: 5px; line-height: 1; }
.star { font-size: 17px; color: rgb(221, 214, 200); line-height: 1; letter-spacing: 0px; text-shadow: none; }
.star.filled { color: rgb(201, 150, 26); background: linear-gradient(rgb(242, 201, 76) 0%, rgb(196, 138, 10) 55%, rgb(166, 116, 8) 100%) text; -webkit-text-fill-color: transparent; filter: drop-shadow(rgba(140, 90, 0, 0.28) 0px 1px 1px); }
.star.half { opacity: 1; background: linear-gradient(90deg, rgb(242, 201, 76) 0%, rgb(196, 138, 10) 48%, rgb(221, 214, 200) 52%, rgb(221, 214, 200) 100%) text; -webkit-text-fill-color: transparent; filter: drop-shadow(rgba(140, 90, 0, 0.18) 0px 1px 1px); }
.anime-main-content { flex: 1 1 0%; color: rgb(42, 42, 46); min-width: 0px; max-width: 100%; }
.anime-header { margin-bottom: 28px; }
.anime-title { font-size: 34px; font-weight: 700; color: rgb(18, 18, 22); margin: 0px 0px 14px; line-height: 1.25; letter-spacing: -0.025em; }
.anime-description { font-size: 15px; color: rgb(107, 111, 118); line-height: 1.75; margin-bottom: 18px; letter-spacing: 0.01em; max-width: 62ch; }
.anime-keywords { color: rgb(122, 126, 134); font-size: 13px; line-height: 1.7; letter-spacing: 0.01em; }
.anime-genres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.genre-tag { display: inline-block; background: rgba(1, 188, 243, 0.08); color: rgb(11, 127, 165); border: 1px solid rgba(1, 188, 243, 0.18); padding: 7px 14px; border-radius: 3px; font-size: 11px; margin: 0px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.08em; line-height: 1; }
.anime-synopsis { margin-bottom: 40px; padding-top: 4px; }
.anime-synopsis h3 { color: rgb(18, 18, 22); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0px 0px 12px; line-height: 1.3; }
.anime-synopsis p { color: rgb(92, 96, 104); line-height: 1.8; font-size: 15px; letter-spacing: 0.01em; margin: 0px; max-width: 68ch; }
@media (max-width: 768px) { .hero-banner { display: none; } }
@media (max-width: 768px) { .anime-detail-section { padding-top: 0px; overflow: visible; } }
@media (max-width: 768px) { .anime-layout { flex-direction: column; gap: 20px; overflow: visible; } }
@media (max-width: 768px) { .anime-sidebar { flex: 0 0 auto; width: 100%; max-width: none; margin: 0px; overflow: visible; } }
@media (max-width: 768px) { .anime-poster { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100vw; height: 150px; min-height: 150px; margin: 0px calc(50% - 50vw) 11rem; padding: 0px 24px; overflow: visible; background-color: rgb(233, 238, 242); background-image: linear-gradient(180deg, rgba(233, 238, 242, 0.72) 0%, rgba(233, 238, 242, 0.58) 100%), var(--cover-image); background-size: cover; background-position: center center; background-repeat: no-repeat; pointer-events: none; } }
@media (max-width: 768px) { .poster-image { position: relative; z-index: 1; width: 46%; max-width: 190px; border-radius: 2px; border: 2px solid rgb(26, 26, 26); box-shadow: rgba(0, 0, 0, 0.35) 0px 10px 28px; transform: translateY(58%); } }
@media (max-width: 768px) { .anime-rating { position: relative; z-index: 2; } }
@media (max-width: 768px) { .anime-title { font-size: 26px; letter-spacing: -0.02em; } }
@media (max-width: 480px) { .anime-detail-section { padding: 20px 0px; } }
@media (max-width: 480px) { .anime-poster { height: 130px; min-height: 130px; margin-bottom: 10rem; } }
@media (max-width: 480px) { .poster-image { width: 52%; max-width: 170px; transform: translateY(60%); } }
@media (max-width: 480px) { .anime-title { font-size: 22px; } }
@media (max-width: 480px) { .anime-description, .anime-synopsis p { font-size: 14px; } }

/* Episode range tabs (long series) */
.animeflv-episodes .episode-range-scroll { overflow-x: auto !important; overflow-y: hidden !important; margin-bottom: 12px !important; padding-bottom: 6px !important; max-width: 100% !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; scrollbar-color: var(--afl-primary, #01bcf3) #eef1f4 !important; }
.animeflv-episodes .episode-range-scroll::-webkit-scrollbar { height: 6px !important; }
.animeflv-episodes .episode-range-scroll::-webkit-scrollbar-thumb { background: var(--afl-primary, #01bcf3) !important; border-radius: 999px !important; }
.animeflv-episodes .episode-range-scroll::-webkit-scrollbar-thumb:hover { background: #03a8d9 !important; }
.animeflv-episodes .episode-range-scroll::-webkit-scrollbar-track { background: #eef1f4 !important; border-radius: 999px !important; }
.animeflv-episodes .episode-range-filters { display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; margin: 0 !important; width: max-content !important; min-width: 100% !important; }
.animeflv-episodes .episode-range-filter { border: 1px solid #e2e6eb !important; background: #f7f9fb !important; color: #5c6068 !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; border-radius: 4px !important; padding: 7px 11px !important; line-height: 1 !important; flex-shrink: 0 !important; white-space: nowrap !important; }
.animeflv-episodes .episode-range-filter.active { background: rgba(1, 188, 243, 0.1) !important; color: #0b7fa5 !important; border-color: rgba(1, 188, 243, 0.35) !important; }
.animeflv-episodes .episodes-empty { color: #5c6068 !important; font-size: 14px !important; background: #f7f9fb !important; border: 1px dashed #d5dbe3 !important; border-radius: 6px !important; padding: 12px !important; grid-column: 1 / -1 !important; }

/* ---- Part 2: theme features inside the layout ---- */

/* Legacy wrapper: no top gap / pattern between the header and the banner. */
.single-anime .Body { padding-top: 0; }
.single-anime .site-header { margin-bottom: 0; }

/* Type badge next to the title. */
.anime-title .Type { vertical-align: middle; margin-left: 6px; letter-spacing: 0; position: relative; top: -3px; font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; }
.anime-keywords .TxtAlt { margin-top: 0; padding: 0; background: none; opacity: 1; border-radius: 0; font-size: 13px; }
a.genre-tag, a.genre-tag:visited { color: rgb(11, 127, 165); text-decoration: none; transition: background 0.15s, border-color 0.15s; }
a.genre-tag:hover { background: rgba(1, 188, 243, 0.16); border-color: rgba(1, 188, 243, 0.45); color: rgb(11, 127, 165); }
.anime-synopsis p + p { margin-top: 12px; }
.anime-synopsis .ListAnmRel { margin: 16px 0 0; font-size: 14px; line-height: 1.8; color: rgb(92, 96, 104); }

/* Rating: the voting stars (.RateIt > a, 5..1 in the DOM) drawn like the reference stars. */
.anime-rating .rating-stars.Strs { position: static; direction: ltr; unicode-bidi: normal; flex-direction: row-reverse; height: auto; font-size: 17px; }
.anime-rating .Strs > a { font-family: inherit; font-size: 17px; line-height: 1; padding: 0; color: rgb(221, 214, 200); text-decoration: none; cursor: pointer; }
.anime-rating .Strs > a::before { content: "\2605"; font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; }
.anime-rating .Strs > a.On, .anime-rating .Strs > a:hover, .anime-rating .Strs > a:hover ~ a { color: rgb(201, 150, 26); background: linear-gradient(rgb(242, 201, 76) 0%, rgb(196, 138, 10) 55%, rgb(166, 116, 8) 100%) text; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(rgba(140, 90, 0, 0.28) 0px 1px 1px); }
.anime-rating .Strs > a.Hf { background: linear-gradient(90deg, rgb(242, 201, 76) 0%, rgb(196, 138, 10) 48%, rgb(221, 214, 200) 52%, rgb(221, 214, 200) 100%) text; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(rgba(140, 90, 0, 0.18) 0px 1px 1px); }

/* Status, totals, favorites, library, followers and share under the rating. */
.flv-anime-extras { margin-top: 18px; font-size: 14px; line-height: 20px; }
.flv-anime-extras > * { margin-bottom: 10px; }
.flv-anime-extras > :last-child { margin-bottom: 0; }
.flv-anime-extras .AnmStts { border-radius: 8px; }
.flv-anime-extras .AnmStts span { border-radius: 8px; }
.flv-anime-extras .BxSdw, .flv-anime-extras .WdgtCn { box-shadow: none; border: 1px solid rgb(230, 234, 238); border-radius: 8px; }
.flv-anime-extras .ListAnmBnts { margin-bottom: 10px; }
.flv-anime-extras .ListAnmBnts > li { margin-bottom: 0; }
.flv-anime-extras a, .flv-anime-extras a:visited { color: inherit; }
.flv-anime-extras .afl-lib-studios-line a { color: rgb(11, 127, 165); }

/* Episode grid extras. */
.animeflv-episodes .flv-next-episode { margin: 0 0 12px; font-size: 13px; line-height: 1.4; color: rgb(92, 96, 104); }
.animeflv-episodes .flv-next-episode::before { margin-right: 6px; color: var(--afl-primary, rgb(1, 188, 243)); }
.animeflv-episodes .episode-search-btn i, .animeflv-episodes .episode-sort-btn i { font-style: normal; line-height: 1; pointer-events: none; }

/* Phones: poster, rating, then the title block; the action widgets follow the episode list. */
@media (max-width: 768px) {
	.anime-layout > .anime-sidebar { display: contents; }
	.anime-layout > .anime-sidebar > .anime-rating { order: 1; width: 100%; margin-top: -20px; }
	.anime-layout > .anime-main-content { order: 2; width: 100%; }
	.anime-layout > .anime-sidebar > .flv-anime-extras { order: 3; width: 100%; margin-top: 0; }
}
.anime-main-content .animeflv-episodes { margin-top: 20px !important; }
.flv-anime-extras .afl-save .afl-save__btn { box-shadow: none; border: 1px solid rgb(230, 234, 238); border-radius: 8px; }