/*
 * animeunity-watch.css — the player block of the anime / episode template
 * (partials/watch/player, controls, servers, episodes, download-rows,
 * report-modal). Owned by the ANIME+WATCH area; loaded on every page, so
 * every rule sits under `#anime` (animeunity's page root) or a CMS-only id.
 *
 * animeunity's VideoPlayer CSS (#video-top, #main, .box-16x9, #video-bottom,
 * .prev/.next, .report, .switch-player, #episode-nav .btn-episode-nav,
 * .episode-wrapper, .episode-item, .active, .seen) comes from
 * animeunity-components.css through `.au-v-video-player` on div.au-player.
 * This file adapts it to the CMS engine's DOM (tmp/watch/SPEC.md):
 *   1. #player inside .box-16x9 (cover, play button, engine loading / message)
 *   2. #video-bottom: prev/next dead ends, the centre tools, the settings menu
 *   3. range buttons that are also Bootstrap .dropdown-item (main.js hook)
 *   4. the grid as ul > li > a with the state classes on the a
 *   5. servers + languages (CMS) as range pills
 *   6. the download table (CMS)
 *   7. the report dialog
 * Tokens only; fixed colours are animeunity's own (#007bff, #95c3f5, #e3c000).
 */

/* 1 ─ player box ─────────────────────────────────────────────────────── */

#anime .au-player #player-wrapper { position: relative; width: 100%; }
#anime .au-player .box-16x9 #player { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; }
#anime .au-player .box-16x9 #player iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; border: 0; }
#anime .au-player .au-cover {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
    background-color: #000; background-position: center; background-size: cover; opacity: .55;
}
#anime .au-player .au-play {
    position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0;
    border: 0; border-radius: 50%; background: #007bff; color: #fff; font-size: 22px; line-height: 64px;
    text-align: center; cursor: pointer; box-shadow: 0 0 18px rgba(16, 16, 16, .3); transition: background .2s, transform .2s;
}
#anime .au-player .au-play i { margin-left: 4px; }
#anime .au-player .au-play:hover { background: #0069d9; transform: scale(1.05); }
#anime .au-player .au-play:focus { outline: none; }
/* main.js writes its states into #player: <div class="loading"> / <div class="message">text. */
#anime .au-player #player > .loading { position: absolute; top: 50%; left: 50%; margin: -20px 0 0 -20px; }
#anime .au-player #player > .message {
    position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); padding: 0 20px;
    color: #fff; font-size: 15px; font-weight: 600; text-align: center; text-shadow: 0 1px 2px #000;
}
#anime .au-player .au-novideo { display: none; }
#anime .au-player .au-noservers .au-novideo {
    display: block; position: absolute; top: 50%; left: 0; right: 0; z-index: 3; transform: translateY(-50%);
    color: #fff; font-size: 15px; text-align: center; text-shadow: 0 1px 2px #000;
}
#anime .au-player .au-noservers .au-play { display: none !important; }
#anime .au-player #main .background-image { display: block; }
#anime .au-player .player-youtube { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#anime .au-player .player-youtube iframe { width: 100%; height: 100%; border: 0; }

/* 2 ─ #video-bottom ──────────────────────────────────────────────────── */

/* ForwardEpisodeControl .show()s prev / next inline; the dead end is hidden
   by class (animeunity draws only the ones that exist). */
#anime .au-player .au-none { display: none !important; }
#anime .au-player #video-bottom .episode { outline: none; }

/* The CMS tools in the centre, drawn like animeunity's .switch-player link. */
#anime .au-player .au-vb-tools { display: inline-block; height: 32px; vertical-align: top; white-space: nowrap; }
#anime .au-player .au-vb-tools .switch-player { float: none; display: inline-block; height: 36px; line-height: 21px; text-decoration: none; color: var(--color-text-0); }
#anime .au-player .au-vb-tools .switch-player i { font-size: 11px; margin-left: 0; margin-right: 3px; color: var(--color-text-0); }
#anime .au-player .au-vb-tools .au-seen-toggle.au-on i { color: #95c3f5; }
#anime .au-player .au-vb-tools .au-dl-toggle[aria-expanded="true"] i { color: #007bff; }
#anime .au-player .au-vb-tools .dropdown { display: inline-block; position: relative; }
#anime .au-player .au-vb-tools .au-cfg-btn span { margin-left: 0; }
@media (max-width: 500px) {
    #anime .au-player .au-vb-tools .switch-player { padding-left: 7px; padding-right: 7px; }
    #anime .au-player .au-vb-tools .switch-player i { margin-right: 0; }
}

/* Player settings menu (main.js dropdown plugin: .show on .au-cfg). */
#anime .au-player .au-cfg-menu {
    min-width: 250px; padding: 7px 0; margin-top: 2px; border: 1px solid var(--color-divider); border-radius: 3.5px;
    background: var(--color-background-1); color: var(--color-text-0); font-size: 13px; font-weight: 600; text-align: left;
    box-shadow: 0 0 18px rgba(16, 16, 16, .3);
}
#anime .au-player .au-cfg-title { padding: 4px 15px 8px; color: var(--color-text); font-size: 11.2px; text-transform: uppercase; letter-spacing: .3px; }
#anime .au-player .au-cfg-row { display: flex; align-items: center; gap: 10px; padding: 7px 15px; cursor: pointer; user-select: none; color: var(--color-text-0); }
#anime .au-player .au-cfg-row:hover { background: var(--color-background); }
#anime .au-player .au-cfg-row i { width: 14px; color: var(--color-text); font-size: 12px; text-align: center; }
#anime .au-player .au-cfg-label { flex: 1; }
#anime .au-player .au-sw { position: relative; flex: none; width: 28px; height: 16px; border-radius: 8px; background: var(--color-divider); transition: background .2s; }
#anime .au-player .au-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .2s; }
#anime .au-player .au-sw.au-on { background: #007bff; }
#anime .au-player .au-sw.au-on::after { left: 14px; }

/* 3 ─ range buttons (#episode-nav) are also main.js's .dropdown-item ───── */

#anime .au-player #episode-nav { margin-top: 21px; text-align: left; }
#anime .au-player #episode-nav .btn-episode-nav.dropdown-item {
    display: inline-block; width: auto; clear: none; padding: 5px 10px; margin: 5px; white-space: nowrap;
    background: var(--color-background-1); color: var(--color-text-0); font-weight: 400; line-height: inherit;
}
#anime .au-player #episode-nav .btn-episode-nav.dropdown-item:hover,
#anime .au-player #episode-nav .btn-episode-nav.dropdown-item:focus,
#anime .au-player #episode-nav .btn-episode-nav.dropdown-item.active { background: #007bff; color: #fff; }
#anime .au-player #episode-nav .btn-episode-nav.dropdown-item:focus:not(.active):not(:hover) { background: var(--color-background-1); color: var(--color-text-0); }
#anime .au-player .au-ep-type { margin-top: 10px; }
#anime .au-player .au-ep-type .btn-episode-nav.dropdown-item { display: inline-block; width: auto; padding: 5px 10px; margin: 5px; font-weight: 400; background: var(--color-background-1); color: var(--color-text-0); }
#anime .au-player .au-ep-type .btn-episode-nav.dropdown-item.active,
#anime .au-player .au-ep-type .btn-episode-nav.dropdown-item:hover { background: #007bff; color: #fff; }

/* 4 ─ the grid: ul.ep-range.episode-wrapper > li.episode.episode-item > a ─ */

#anime .au-player ul.episode-wrapper { padding: 0; list-style: none; }
#anime .au-player ul.episode-wrapper li.episode-item { padding: 0; }
#anime .au-player ul.episode-wrapper li.episode-item > a {
    display: block; width: 100%; height: 100%; margin: 0; padding: 7px 5px; border-radius: 6px;
    background: var(--color-background-1); color: var(--color-text-0) !important; line-height: 1.2; text-decoration: none;
}
#anime .au-player ul.episode-wrapper li.episode-item > a.au-seen { background-color: #95c3f5; color: #fff !important; }
#anime .au-player ul.episode-wrapper li.episode-item > a.active { background-color: #007bff !important; color: #fff !important; }
#anime .au-player ul.episode-wrapper li.episode-item > a.highlight { box-shadow: inset 0 0 0 2px #007bff; }
/* The SUB ITA / ITA filter hides episodes by inline display on the link. */
#anime .au-player ul.episode-wrapper li.episode-item:has(> a[style*="display: none"]) { display: none; }
#anime .au-player .au-ep-none { margin: 21px 0; color: var(--color-text); text-align: center; }

/* 5 ─ servers + languages (CMS) in the range pills' look ─────────────── */

#anime .au-player .au-srv { margin-top: 21px; }
#anime .au-player .au-srv-row { display: flex; flex-wrap: wrap; align-items: center; }
#anime .au-player .au-srv-row + .au-srv-row { margin-top: 2px; }
#anime .au-player .au-srv-lang { display: inline-block; min-width: 62px; margin: 5px 5px 5px 0; color: var(--color-text-0); font-size: 13px; font-weight: 900; }
#anime .au-player .au-srv-list { display: inline-flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
#anime .au-player .au-srv-list li.btn-episode-nav { display: inline-block; padding: 0; font-weight: 400; }
#anime .au-player .au-srv-list li.btn-episode-nav > a { display: block; padding: 5px 10px; color: inherit; text-decoration: none; }
#anime .au-player .au-srv-list li.btn-episode-nav.active { background: #007bff; color: #fff; }
#anime .layout-page-watchtv.au-svloading .au-srv { opacity: .6; pointer-events: none; }

/* 6 ─ downloads (CMS) ────────────────────────────────────────────────── */

#anime .au-player .au-dl { margin-top: 21px; }
#anime .au-player .au-dl-box { padding: 14px 15px; margin-bottom: 0; }
#anime .au-player .au-dl-table { margin: 0; color: var(--color-text); font-size: 13px; font-weight: 600; background: none; }
#anime .au-player .au-dl-table th { border-top: 0; border-bottom: 1px solid var(--color-divider); color: var(--color-text-0); font-weight: 900; }
#anime .au-player .au-dl-table td { border-top: 1px solid var(--color-divider); vertical-align: middle; }
#anime .au-player .au-dl-table tbody tr:first-child td { border-top: 0; }
#anime .au-player .au-dl-table .btn { font-size: 12px; font-weight: 400; }
#anime .au-player .au-dl-empty td { text-align: center; color: var(--color-text); }

/* 7 ─ the report dialog (#w-report, after the wrapper) ───────────────── */

#w-report.au-report { font-family: Overpass, sans-serif; font-size: 14px; }
#w-report .modal-content { max-width: 560px; }
#w-report .modal-header { padding: 20px 25px 0; border: 0; align-items: center; }
#w-report .modal-title { color: var(--color-text-0); font-size: 18px; font-weight: 700; }
#w-report .modal-title i { margin-right: 4px; color: #e3c000; font-size: 15px; }
#w-report .close { color: var(--color-text-0); opacity: 1; text-shadow: none; font-size: 26px; font-weight: 400; }
#w-report .modal-body { padding: 15px 25px 25px; font-size: 14px; color: var(--color-text); }
#w-report .au-report-ep { margin-bottom: 15px; color: var(--color-text-0); font-weight: 700; }
#w-report label { color: var(--color-text); font-size: 12px; margin-bottom: 4px; }
#w-report .form-control { font-family: Overpass, sans-serif; font-size: 14px; }
#w-report textarea.form-control { min-height: 90px; resize: vertical; }
#w-report .btn-primary { font-size: 14px; font-weight: 400; }