/*
 * AnimeFLV redesign: integration layer.
 * Neutralises legacy/bootstrap rules inside the redesigned regions and styles
 * the theme features the reference layout does not have (account box, live
 * search results, extra sidebar boxes).
 */

/* ---- Page shell ------------------------------------------------------- */
html, body { font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; }
@media only screen and (min-width: 960px) {
	.flv .container, .flv.container { padding-left: 0; padding-right: 0; }
}
@media only screen and (max-width: 767px) {
	#masthead.site-header { line-height: 1.7em !important; }
}
.flv .container::before, .flv .container::after, .flv.container::before, .flv.container::after { content: none; }
#site-page > .Body { padding-top: 0; }

/* ---- Header ----------------------------------------------------------- */
#primary-nav > .container { display: flex; justify-content: space-between; }
.flv-header-side { display: flex; align-items: flex-start; flex: 0 0 auto; }
.flv-header-side .header-search, .flv-header-side .header-search.no-top-menu { float: none; flex: 0 0 auto; width: 228px; margin-left: 0; }

/* ---- Legacy element rules that leak into the redesigned regions ------- */
:where(.flv) button, :where(.flv) input, :where(.flv) select, :where(.flv) textarea { margin-bottom: 0; border-radius: 0; }
:where(.flv) input { display: inline-block; }
:where(.flv) label { font-weight: 400; max-width: none; margin-bottom: 0; }
:where(.flv) img { display: inline; vertical-align: baseline; }
:where(.flv) figure > img { display: block; }
:where(.flv) i[class*="fa-"] { line-height: 1; font-style: normal; }
.flv .pagination { display: block; border-radius: 0; padding-left: 0; }
.flv .AnflvTl { background-image: none; }
.AnflvTl .AnflvTl-desc { margin: 0 0 15px; font-size: 14px; color: #999; line-height: 1.6; }

/* ---- Home layout ------------------------------------------------------ */
.flv-side-col { flex: 0 0 300px; width: 300px; min-width: 0; }
.flv-side-col .left-sidebar { float: none; width: 100%; display: flex; flex-direction: column; overflow: hidden; }
.flv-side-col .left-sidebar + .left-sidebar, .flv-side-col .left-sidebar + * { margin-top: 0; }
#left-menu .sidebar-cat-item--deferred { display: none; }
#left-menu.is-expanded .sidebar-cat-item--deferred { display: list-item; }
@media screen and (min-width: 769px) and (max-width: 1179px) {
	.flv-side-col { flex-basis: 196px; width: 196px; }
}
:where(.flv) h1, :where(.flv) h2, :where(.flv) h3, :where(.flv) h4 { line-height: inherit; }
.flv .List-Episodes .Description { font-size: inherit; }
.flv .List-Episodes .Description .Button.Vrnmlk { font-weight: 400; text-align: start; }
.flv .List-Episodes .Episode .Title { color: rgb(51, 51, 51); }
.flv .List-Episodes .Episode .Image img { vertical-align: baseline; }

/* ---- Footer ----------------------------------------------------------- */
.flv-footer-social { display: flex; justify-content: center; gap: 10px; margin: 0 0 15px; padding: 0; list-style: none; float: none; }
.flv-footer-social li { margin: 0; }

/* Legacy `.Body > div { width: 100% }` must not stretch the redesigned containers. */
.Body > .flv.container { width: 1140px; }
@media only screen and (min-width: 959px) and (max-width: 1179px) {
	.Body > .flv.container { width: 950px; }
}
@media only screen and (max-width: 959px) {
	.Body > .flv.container { width: 100%; }
}

/* ---- Header: account box and social buttons (theme features) ---------- */
.flv-account.Header { position: relative; flex: 0 0 auto; width: auto; height: auto; margin: 0 0 0 10px; padding: 0; background: none; box-shadow: none; line-height: 20px; font-size: 14px; z-index: 1000; }
.flv-account.Header > .Mid { position: static; height: auto; padding: 0; border: 0; background: none; box-shadow: none; }
.flv-account.Header > .Mid .Login { padding: 16px 0 0; }
.flv-account.Header > .Mid .Login .DpdwCnt { position: absolute; left: auto; right: 0; top: 100%; width: 270px; margin-top: 8px; }
.flv-account.Header > .Mid .Login > .Button { margin: 0; white-space: nowrap; }
.flv-account.Header > .Mid .Login.Online > .Button { display: block; width: 40px; min-width: 0; height: 40px; padding: 0; border-radius: 50%; overflow: hidden; cursor: pointer; }
.flv-account.Header > .Mid .Login.Online > .Button img { position: static; display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.flv-account.Header > .Mid .Login.Online > .Button > span.screen-reader-text { width: 1px; height: 1px; padding: 0; }
.flv-account.Header > .Mid .Login.Online #DpdwLnk-Login:checked + .Button { box-shadow: 0 0 0 2px var(--afl-primary, #01bcf3); }
#primary-menu li.afl-social-li { display: flex; align-items: center; height: 71px; margin-left: 15px; }
#primary-menu li.afl-social-li a { display: inline-flex; margin: 0; line-height: 1; }
#primary-menu li.afl-social-li a::before { content: none; }
#primary-menu li.afl-social-li .afl-social__btn { width: 30px; height: 30px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.12); color: #fff; opacity: 1; }
#primary-menu li.afl-social-li .afl-social__btn:hover, #primary-menu li.afl-social-li .afl-social__btn:focus-visible { background-color: var(--afl-primary, #01bcf3); color: #fff; }

/* Live search results under the header search box. */
.header-search .DpdwCnt.TtCn { left: auto; right: 0; top: 100%; width: 270px; margin-top: 12px; line-height: 20px; font-size: 13px; text-align: left; z-index: 1001; }
.header-search .DpdwCnt.TtCn::before { left: auto; right: 15px; }
.header-search .ListResult { margin: 0; padding: 0; list-style: none; }
.header-search .ListResult a { color: #3b4248; }

/* ---- Extra sidebar lists (most viewed): same rules as the airing list ---- */
ul.flv-left-menu.sf-menu { float: none; z-index: 999; }
ul.flv-left-menu.sf-menu li { float: none; }
ul.flv-left-menu.sf-menu li a:hover, ul.flv-left-menu.sf-menu li a:hover i { color: var(--afl-primary, rgb(1, 188, 243)); }
ul.flv-left-menu.sf-menu li a { border-radius: 4px; color: rgb(59, 66, 72); line-height: 2; font-size: 13px; padding: 5px; margin: 0px 10px; }
ul.flv-left-menu.sf-menu li a i { margin-right: 2px; min-width: 18px; text-align: center; }
ul.flv-left-menu.sf-menu li.sfHover a, ul.flv-left-menu.sf-menu li a:hover { color: var(--afl-primary, rgb(1, 188, 243)); }
@media only screen and (min-width: 959px) and (max-width: 1179px) {
	ul.flv-left-menu.sf-menu li a { font-size: 14px; }
}
ul.flv-left-menu.sf-menu .sidebar-cat-toggle-item { list-style: none; margin: 0px; padding: 0px; }
ul.flv-left-menu.sf-menu .sidebar-cat-toggle { width: calc(100% - 20px); margin: 4px 10px 8px; text-align: center; font-size: 12px; padding: 9px 10px; border: 1px solid rgb(236, 239, 241); border-radius: 4px; background: rgb(247, 249, 250); color: rgb(59, 66, 72); }
ul.flv-left-menu.sf-menu .sidebar-cat-toggle:hover, ul.flv-left-menu.sf-menu .sidebar-cat-toggle:focus { color: var(--afl-primary, rgb(1, 188, 243)); border-color: rgba(1, 188, 243, 0.35); background: rgb(243, 248, 251); }
ul.flv-left-menu.sf-menu li.sidebar-cat-item a { display: flex; align-items: flex-start; gap: 7px; position: relative; margin: 0px 8px 4px; padding: 8px; line-height: 1.35; border-radius: 6px; transition: background 0.15s, color 0.15s; }
ul.flv-left-menu.sf-menu li.sidebar-cat-item a:hover { background: rgb(247, 249, 251); }
ul.flv-left-menu.sf-menu li.sidebar-cat-item a .playf { flex-shrink: 0; margin-top: 2px; min-width: 14px; font-size: 13px; opacity: 0.35; transition: opacity 0.15s, color 0.15s; }
ul.flv-left-menu.sf-menu li.sidebar-cat-item a:hover .playf { opacity: 0.85; }
ul.flv-left-menu.sf-menu .sidebar-cat-name { flex: 1 1 auto; min-width: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; font-size: 12px; font-weight: 600; line-height: 1.35; }
ul.flv-left-menu.sf-menu li.sidebar-cat-item .Type { position: static; top: auto; bottom: auto; right: auto; flex-shrink: 0; align-self: flex-start; margin: 1px 0px 0px; opacity: 1; width: auto; height: auto; line-height: 1; padding: 3px 6px; font-size: 8px; font-weight: 700; letter-spacing: 0.05em; border-radius: 999px; background: rgba(1, 188, 243, 0.1); color: var(--afl-primary, rgb(1, 188, 243)); border: 1px solid rgba(1, 188, 243, 0.32); }
ul.flv-left-menu.sf-menu li.sidebar-cat-item .Type.tv { background: rgba(1, 188, 243, 0.1); border-color: rgba(1, 188, 243, 0.32); }
ul.flv-left-menu.sf-menu li.sidebar-cat-item a:hover .Type { background: rgba(1, 188, 243, 0.16); border-color: rgba(1, 188, 243, 0.55); color: rgb(1, 168, 219); }
@media screen and (min-width: 769px) and (max-width: 1179px) {
	ul.flv-left-menu.sf-menu li.sidebar-cat-item a { gap: 6px; margin: 0px 6px 3px; padding: 7px 6px; }
	ul.flv-left-menu.sf-menu .sidebar-cat-name { font-size: 11px; -webkit-line-clamp: 2; }
	ul.flv-left-menu.sf-menu li.sidebar-cat-item .Type { padding: 2px 5px; font-size: 7px; letter-spacing: 0.04em; }
}
.flv-side-col .left-sidebar { margin-bottom: 0; }
.flv-side-col .left-sidebar:last-child { margin-bottom: 20px; }
.flv-side-col > .Wdgt, .flv-side-col > .widget { margin-top: 20px; }

/* ---- Mobile drawer ---------------------------------------------------- */
.toggle-aside.is-open { display: block; }
.toggle-aside .modal-menu { margin: 0; padding: 0; list-style: none; }

/* On the reference this top margin collapses into the header's bottom margin; ours sits in a flex child, so drop it. */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.home .Body > .site-content { margin-top: 0; }
}