/*
 * AnimeFLV redesign: episode page integration.
 * flv-base.css carries the reference rules; this file adds the rules for
 * blocks the reference page did not exercise and styles the theme features
 * (action bar, comments thread, extra sidebar blocks) inside the new layout.
 */

/* Episode range filters and sidebar list toggle (reference stylesheet). */
.widget_categories .widget-cat-item--hidden { display: none; }
.widget_categories ul.is-expanded > .widget-cat-item--hidden { display: list-item; }
.widget_categories .widget-cat-toggle-item { list-style: none !important; margin: 12px 0 0 !important; padding: 0 !important; }
.widget_categories .widget-cat-toggle, .widget_categories .widget-cat-toggle:hover, .widget_categories .widget-cat-toggle:focus, .widget_categories .widget-cat-toggle:active { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 8px 12px !important; line-height: 1.2 !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; cursor: pointer !important; border: 1px solid rgba(1, 188, 243, 0.28) !important; border-radius: 4px !important; background: rgba(1, 188, 243, 0.06) !important; color: #0b7fa5 !important; box-shadow: none !important; opacity: 1 !important; -webkit-appearance: none !important; appearance: none !important; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important; }
.widget_categories .widget-cat-toggle::after { content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; margin-top: 1px; transition: transform 0.2s ease; }
.widget_categories ul.is-expanded .widget-cat-toggle::after { transform: rotate(180deg); }
.widget_categories .widget-cat-toggle:hover, .widget_categories .widget-cat-toggle:focus { background: rgba(1, 188, 243, 0.12) !important; border-color: rgba(1, 188, 243, 0.45) !important; color: var(--afl-primary, #01bcf3) !important; outline: none !important; }
.single .episode-range-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin-bottom: 12px; padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: var(--afl-primary, #01bcf3) #eef1f4; }
.single .episode-range-scroll::-webkit-scrollbar { height: 5px; }
.single .episode-range-scroll::-webkit-scrollbar-thumb { background: var(--afl-primary, #01bcf3); border-radius: 4px; }
.single .episode-range-scroll::-webkit-scrollbar-track { background: #eef1f4; border-radius: 4px; }
.single .episode-range-filters { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; margin: 0; width: max-content; min-width: 100%; }
.single .episode-range-filter { border: 1px solid #e2e6eb; background: #f7f9fb; color: #5c6068; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; border-radius: 4px; line-height: 1; padding: 7px 11px; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; flex-shrink: 0; white-space: nowrap; }
.single .episode-range-filter:hover { border-color: rgba(1, 188, 243, 0.45); color: #0b7fa5; background: rgba(1, 188, 243, 0.08); }
.single .episode-range-filter.active { background: rgba(1, 188, 243, 0.1); color: #0b7fa5; border-color: rgba(1, 188, 243, 0.35); box-shadow: none; }
.single .episodes-empty { color: #5c6068; font-size: 14px; background: #f7f9fb; border: 1px dashed #d5dbe3; border-radius: 6px; padding: 12px; }
.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; }
@media only screen and (max-width: 767px) {
.single .episode-range-filter { font-size: 11px; padding: 5px 8px; }
}

/* Episode label under the title (inline style on the reference page). */
.flv-episode .flv-ep-label { font-size: 14px; line-height: 25px; color: #666; margin-bottom: 15px; }

/* Legacy hooks reused by the scripts must not leak their old styles. */
.flv-episode .iframe_btn_row.server-frames { text-align: start; }
.flv-episode .episode-search-feedback { display: block; }

/* Sidebar search form: neutralise the legacy label / submit styles. */
.flv-episode .sidebar .widget_search label { display: inline; margin: 0; font-weight: inherit; }
.flv-episode .sidebar .widget_search input[type="submit"] { border-radius: 0; margin: 0; width: auto; }
.flv-episode .sidebar .widget_search input[type="search"] { margin: 0; border-radius: 0; box-shadow: none; }

/* Episodes already watched by the signed-in user. */

/* ---- Theme features inside the new layout ---- */

/* Action bar under the player: previous / list / next, report, lights, expand, save. */
.flv-episode .flv-ep-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 12px; padding: 0; font-size: 0; }
.flv-episode .flv-ep-actions > * { margin: 0 !important; flex: 0 0 auto; }
.flv-episode .flv-ep-actions .BtnNw { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); border: 1px solid #e6eaee; }
.flv-episode .flv-ep-actions .CapNv { margin-right: 0; }
.flv-episode .flv-ep-actions a, .flv-episode .flv-ep-actions a:visited { color: inherit; }
.flv-episode .flv-ep-actions a.CapNvPv, .flv-episode .flv-ep-actions a.CapNvNx, .flv-episode .flv-ep-actions a.CapNvPv:visited, .flv-episode .flv-ep-actions a.CapNvNx:visited { color: #fff; }
.flv-episode .flv-ep-actions a.CapNvLs, .flv-episode .flv-ep-actions a.CapNvLs:visited { color: #ffc107; }
.flv-episode .flv-ep-actions .BtnNw.Rprt, .flv-episode .flv-ep-actions .BtnNw.Rprt:visited { color: #333; }

/* Expand: the player column takes the full width, the sidebar moves below. */
#content.flv-episode.show #primary { float: none; width: 100%; }
#content.flv-episode.show #secondary { float: none; width: 100%; margin-top: 20px; column-width: 300px; column-gap: 20px; }
#content.flv-episode.show #secondary > * { break-inside: avoid; }

/* Lights off: the player stays above the dark overlay. */
.lgtbx-on #iframeHolder { z-index: 150; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); }
.lgtbx-on .flv-episode .iframe_btn_row.server-frames { position: relative; z-index: 150; }

/* "No videos" notice inside the 16:9 holder. */
.flv-episode .iframe-container #video_box:empty { display: none; }
.flv-episode .iframe-container #video_box { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #cfd8dc; }
.flv-episode .iframe-container #video_box .alrtmst { margin: 0; background: none; box-shadow: none; }

/* Comments: the thread opens under the dark bar. */
.flv-episode .comments-lazy.is-open { margin-bottom: 20px; }
.flv-episode .comments-lazy-toggle[hidden] { display: none; }
.flv-episode .comments-lazy-target { font-size: 14px; line-height: 1.5; }
.flv-episode .comments-lazy-target[hidden] { display: none; }

/* Extra sidebar blocks (ads, news box, widgets) keep their own styling. */
.flv-episode .flv-ep-side-extra { font-size: 14px; line-height: 1.5; }
.flv-episode .flv-ep-side-extra > * { margin-bottom: 25px; }
.flv-episode.site-content .afl-nosd #primary { width: 100%; }

/* Report modal sits outside the scoped typography. */
.flv-episode .modal { font-size: 14px; line-height: 1.5; }

/* Phones: the reference hides the sidebar; keep the configurable blocks (ads, news, widgets) visible. */
@media screen and (max-width: 768px) {
.single .single-wrap #secondary:has(.flv-ep-side-extra) { display: block; margin-top: 20px; }
.single .single-wrap #secondary:has(.flv-ep-side-extra) > .widget { display: none; }
}

/* The legacy tab hook must not re-enable wrapping of the server tabs on small screens. */
@media only screen and (max-width: 959px) {
.flv-episode .iframe_btn_row.server-frames { flex-wrap: nowrap; }
}