/*
Theme Name: AnikotoTV
Description: A modern and sleek WordPress theme designed for anime streaming websites. Features a dark color scheme with responsive design and comprehensive anime-focused functionality including video players, episode listings, and user watchlists. Built on scalable custom tables with full page-cache and SEO plugin compatibility.
Version: 1.0.4
Author: OtakuThemes
Author URI: https://otakuthemes.com
Text Domain: anikototv
Tags: anime, streaming, entertainment, dark, responsive, video, media
License: Commercial
License URI: https://otakuthemes.com/product/anikototv-wordpress-theme

*/

.alignnone { margin: 5px 20px 20px 0; }
.aligncenter, div.aligncenter { display: block; margin: 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
img.alignnone, img.alignright, img.alignleft { max-width: 100%; height: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { color: #8097b2; font-size: .9em; }
.screen-reader-text {
    border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
    height: 1px; margin: -1px; overflow: hidden; padding: 0;
    position: absolute !important; width: 1px; word-wrap: normal !important;
}
.sticky, .gallery-caption, .bypostauthor { display: inherit; }

/* Admin bar offset for the fixed header */
body.admin-bar header { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar header { top: 46px; }
}
#watch-main.extend .aside-wrapper { flex-direction: column; }
#watch-main.extend aside.main { width: 100%; }
#watch-main.extend aside.sidebar { display: none; }
#servers-content,
#episodes-content { display: contents; }

#mask-overlay { display: none; position: fixed; inset: 0; background: #000; opacity: .92; z-index: 90; }
#mask-overlay.active { display: block; }
#watch-main.active #w-player { position: relative; z-index: 95; }
#controls .ctrl.check .tb-name::before,
#controls .ctrl.light .tb-name::before { content: "\f14a"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 5px; }
#controls .ctrl.check.off .tb-name::before { content: "\f0c8"; font-weight: 400; }
#controls .ctrl.light .tb-name::before { display: none; }
#controls .ctrl.check:not(.off) { color: var(--ak-accent, #26a3d6); }
#controls .ctrl .tb-result { display: none; }

#totop { position: fixed; right: 20px; bottom: -60px; width: 40px; height: 40px; line-height: 40px; text-align: center; background: var(--ak-accent, #26a3d6); color: #fff; border-radius: 5px; cursor: pointer; z-index: 60; transition: bottom .3s ease; }
#totop.active { bottom: 20px; }

@media (max-width: 991.98px) {
    #search.active { display: block !important; position: absolute; left: 10px; right: 10px; top: 5rem; z-index: 60; }
}

.genres-widget .genre-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.genres-widget .genre-chips a { display: inline-block; padding: 4px 12px; border-radius: 50rem; background: #172537; color: #6d87a6; font-weight: 600; }
.genres-widget .genre-chips a:hover { background: var(--ak-accent, #26a3d6); color: #fff; }

.user-body .container { max-width: 100%; padding: 0; }
.user-body .profile-box { background: transparent; padding: 0; }
.user-body .h2-heading { color: #ddd; font-size: 1.7rem; font-weight: 700; }
.user-body .pre-tabs .nav-link { color: #515f75; font-weight: 600; border: 0; padding: 6px 12px; border-radius: 5px; }
.user-body .pre-tabs .nav-link.active { background: var(--ak-accent, #26a3d6); color: #eee; }
.user-body .setting-label, .user-body .prelabel { color: #8097b2; font-weight: 600; }
.user-body .toggle-onoff { width: 40px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.12); position: relative; cursor: pointer; transition: background .2s; }
.user-body .toggle-onoff span, .user-body .toggle-onoff .on { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #8097b2; transition: all .2s; }
.user-body .toggle-onoff.on { background: rgba(38,163,214,.4); }
.user-body .toggle-onoff.on span, .user-body .toggle-onoff.on .on { left: 22px; background: var(--ak-accent, #26a3d6); }
.user-nav-folders { display: flex; flex-wrap: wrap; gap: 6px; }
.user-nav-folders .folder { padding: 5px 14px; border-radius: 5px; background: #172537; color: #8097b2; font-weight: 600; }
.user-nav-folders .folder.active, .user-nav-folders .folder:hover { background: var(--ak-accent, #26a3d6); color: #eee; }

/* Static pages & news */
.page-wrap .news-article, .layout-news .news-article { background: var(--ak-bg-2, #142030); border-radius: 5px; padding: 25px; }
.news-article .news-title { color: #ddd; font-size: 2rem; font-weight: 700; margin-bottom: 15px; }
.news-article .article-content { color: #a0b1c5; line-height: 1.7; }
.news-article .article-content a { color: var(--ak-accent, #26a3d6); }
.news-article .article-content h1, .news-article .article-content h2, .news-article .article-content h3 { color: #ddd; }
.news-article .time-posted, .news-article > .description { color: #515f75; margin-bottom: 12px; }
.layout-news .zr-news .item { display: flex; gap: 15px; background: var(--ak-bg-2, #142030); border-radius: 5px; padding: 15px; margin-bottom: 10px; }
.layout-news .zr-news .zr-news-thumb { flex-shrink: 0; width: 180px; }
.layout-news .zr-news .zr-news-thumb img { width: 100%; border-radius: 5px; }
.layout-news .zr-news .zrn-title h4 { color: #ddd; font-size: 1.4rem; font-weight: 700; }
.layout-news .zr-news .zrn-title:hover h4 { color: var(--ak-accent, #26a3d6); }
.layout-news .zr-news .description { color: #8097b2; }
.layout-news .zr-news .time-posted { color: #515f75; font-size: .95rem; }
.layout-news .stx-title { color: #ddd; font-weight: 700; }
.prebreadcrumb .breadcrumb { background: transparent; padding: 10px 0; margin: 0 0 10px; }
.prebreadcrumb .breadcrumb-item a { color: #8097b2; }
.prebreadcrumb .breadcrumb-item.active { color: #515f75; }

/* Misc */
.ad-section { text-align: center; }
#w-servers .servers .no-server { color: #515f75; padding: 5px 0; list-style: none; }
#player { position: relative; }
#player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
#w-rating .stars > span { cursor: pointer; }

/* Hero slider — Swiper core layout (the bundled Swiper ships no CSS, so slides stacked vertically) */
#hotest.swiper-container { position: relative; overflow: hidden; z-index: 1; }
#hotest .swiper-wrapper { position: relative; display: flex; width: 100%; box-sizing: content-box; transition-property: transform; z-index: 1; }
#hotest .swiper-slide { flex-shrink: 0; width: 100%; position: relative; transition-property: transform; }
#hotest .swiper-pagination { position: absolute; left: 3.5rem; bottom: 1.5rem; z-index: 10; }
#hotest .swiper-pagination-bullet { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: #fff; opacity: .4; cursor: pointer; }
#hotest .swiper-pagination-bullet-active { opacity: 1; background: var(--ak-accent, #26a3d6); }

/* Mega-menu: Genre / Types flyouts open via li.active (desktop flies out, mobile expands inline) */
@media (max-width: 1199.98px) {
    header #menu > ul > li.active > ul { display: flow-root; }
}

/* Watch page episode rail: type + range dropdowns, search takes the remaining width */
#w-episodes .head .filter.name { flex: 1; min-width: 0; }
#w-episodes .head .dropdown-toggle { white-space: nowrap; }

/* Quote lines produced by the comment composer's quote button */
.block_area-comment .cm-quote { display: block; padding: 2px 10px; margin: 2px 0; border-left: 3px solid rgba(124, 77, 255, .6); background: rgba(255, 255, 255, .04); border-radius: 0 6px 6px 0; color: rgba(255, 255, 255, .75); }