/*
 * AnimeKAI skin — listing pages. Owned by the listing re-skin; loaded on every page by
 * layouts/anikoto.blade.php after anikai-bridge.css, so scope every rule to the
 * pages it is for.
 *
 * Covers: frontend/listing (all browse pages), partials/filter-form (form#filters),
 * components anime-card (display modes), az-filters, pagination (site-wide),
 * side-item (sidebar rows), ep-status, and the anime tooltip popover.
 */

/* ── Page frame ─────────────────────────────────────────────────────────── */

.listing-page .listing-section { margin-bottom: 2rem; }
.listing-page .shead .stitle { margin: 0; font-size: 1.5rem; font-weight: 500; line-height: 1.3; }
.listing-page .shead { gap: 1rem; }
.listing-page .shead .shead-r { gap: 1.2rem; flex-shrink: 0; }
.listing-page .list-count { color: rgba(255, 255, 255, .85); white-space: nowrap; }

/* Laravel's grid / cards / list switch (main.js DisplayModes). */
.display-modes { display: flex; align-items: center; gap: .2rem; background: #11161b; border-radius: .6rem; padding: .2rem; }
.display-modes .mode { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .45rem; color: rgba(255, 255, 255, .5); cursor: pointer; transition: color .2s, background-color .2s; }
.display-modes .mode:hover { color: #fff; }
.display-modes .mode.active { color: #fff; background: #e45f3a; }

/* Laravel's sidebar blocks (ad slot + Top rated) follow the grid as a full-width band:
   anikai.to's browse pages have no right column. The rows run in columns there. */
.listing-page .listing-extra { margin-bottom: 3rem; }
/* styles.css only panels .sidebar-section inside .dual-col .sidebar. */
.listing-page .listing-extra #top-rated-anime { background-color: #11161b; border-radius: 1.2rem; padding: 1.5rem; }
.listing-page .listing-extra #top-rated-anime .aitem-col { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .6rem; }
.listing-page .listing-extra #top-rated-anime .aitem-col .aitem + .aitem { margin-top: 0; }
@media (max-width: 575.98px) {
    .listing-page .listing-extra #top-rated-anime { padding: 1rem; }
    .listing-page .listing-extra #top-rated-anime .aitem-col { grid-template-columns: 1fr; }
}

/* ── A-Z bar: AnimeKAI's 28 cells plus Laravel's "#" bucket ─────────────── */

.listing-page ul#az-filters { margin-bottom: .9rem; }
.listing-page ul#az-filters li { width: 3.4483%; }
.listing-page ul#az-filters li a { font-size: .95rem; }
/* Tablets and phones keep AnimeKAI's own cell widths (14 / 7 per row, styles.css). */
@media (max-width: 991.98px) { .listing-page ul#az-filters li { width: 7.14286%; } }
@media (max-width: 575.98px) { .listing-page ul#az-filters li { width: 14.2857%; } }

/* ── form#filters ───────────────────────────────────────────────────────── */

#filters .main-filters > div > .dropdown,
#filters .dropdown-wrap > div > .dropdown { position: relative; }
#filters .search .form-control { color: #fff; border: 0; box-shadow: none; }
#filters .search .form-control::placeholder { color: rgba(255, 255, 255, .45); }
#filters .dropdown > .dropdown-toggle { border: 0; }
#filters .dropdown .dropdown-menu { z-index: 60; background: #1c2228; border: 0; border-radius: .8rem; box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .4); max-height: 22rem; overflow-y: auto; }
#filters .dropdown .dropdown-menu:after { content: ""; display: block; clear: both; }
#filters .dropdown .dropdown-menu label { cursor: pointer; }
#filters .dropdown .dropdown-menu li > input + label:hover { background: rgba(255, 255, 255, .05); color: #fff; }
#filters .dropdown .dropdown-menu .genres { margin: 0; padding: 0; }
/* ListFilter's exclude state (input.exclude, negative value) uses AnimeKAI's own
   exclude style from styles.css (minus box, dimmed label). */
#filters .submit-more-btn .btn-more-filter { flex-shrink: 0; justify-content: center; width: 2.9rem; color: #fff; border: 0; }
#filters .submit-more-btn .btn-more-filter:hover,
#filters .submit-more-btn .btn-more-filter.active { background: #36cb68; color: #0c1116; }
#filters .submit-more-btn .btn-submit { border: 0; }

/* More filters: five dropdowns (two rows) + Language + members' Extra Options. */
#filters .more-filters .dropdown-wrap { flex-wrap: wrap; }
#filters .more-filters > .dropdown-wrap > div { width: 33.3333%; }
#filters .more-filters .form-check { display: inline-flex; align-items: center; gap: .45rem; margin-right: 1.2rem; padding-left: 0; }
#filters .more-filters .form-check-input { float: none; margin: 0; width: 1.15rem; height: 1.15rem; border: 0; cursor: pointer; }
#filters .more-filters .form-check label { cursor: pointer; }
#filters .more-filters .form-label { display: block; margin-bottom: .45rem; }
#filters .more-filters ul.filter-extra { float: left; margin: 0; padding: 0; list-style: none; }
#filters .more-filters ul.filter-extra > li { margin-right: 0; }

/* Episode range: two number fields in a dropdown. */
#filters .dropdown .filter-ep-range-menu { min-width: 15rem; }
#filters .dropdown .dropdown-menu li.filter-ep-range-fields { display: block; overflow: visible; width: 100%; }
#filters .filter-ep-range-row { margin-bottom: .6rem; }
#filters .dropdown .dropdown-menu li.filter-ep-range-fields label { display: block; padding: 0 0 .3rem; color: rgba(255, 255, 255, .7); }
#filters .dropdown .dropdown-menu li.filter-ep-range-fields label:hover { background: none; }
#filters .filter-ep-range-row .form-control { height: 2.4rem; color: #fff; background: #11161b; border: 0; border-radius: .5rem; padding: .4rem .8rem; }
#filters .filter-ep-range-hint { color: rgba(255, 255, 255, .45); font-size: .8rem; }

/* Phones: AnimeKAI turns each menu into a centred sheet over a dimmed page, keyed
   off Bootstrap 5's .show on the toggle/menu; main.js's plugin puts .show on the
   .dropdown instead, so restate those two rules for it. */
@media (max-width: 767.98px) {
    #filters .dropdown.responsive.show > .dropdown-toggle:before { content: ""; z-index: 49; background: rgba(0, 0, 0, .4); width: 100%; height: 100%; position: fixed; top: 0; left: 0; }
    #filters .dropdown.responsive.show > .dropdown-menu { border: 5px solid rgba(255, 255, 255, .4); box-shadow: 0 0 60px 20px #000; max-height: 55vh; }
}
@media (max-width: 799.98px) {
    #filters .more-filters > .dropdown-wrap > div { width: 50%; }
}

/* ── Cards: AnimeKAI grid + Laravel's display modes ─────────────────────── */

/* The type pill sits at the right end whether or not the score follows it. */
.aitem-wrapper.regular .aitem .inner .info .type { margin-left: auto; }
.aitem-wrapper.regular .aitem .inner .info .score { color: #ffc107; }
.aitem-wrapper.regular .aitem .inner .info .score i { font-size: .8rem; margin-right: .2rem; }
.aitem-wrapper .aitem .genres { color: rgba(255, 255, 255, .45); font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.aitem-wrapper .aitem .genres a { color: rgba(255, 255, 255, .55); }
.aitem-wrapper .aitem .genres a:hover { color: #36cb68; }

/* Grid (default mode) is AnimeKAI's card: genres and score only in mode2 / mode3,
   as Laravel hid them in its grid too. */
.aitem-wrapper:not(.mode2) .aitem .genres,
.aitem-wrapper:not(.mode2) .aitem .info .score { display: none; }

/* mode2: two columns of horizontal cards. */
.aitem-wrapper.regular.mode2 .aitem { width: 50%; margin-bottom: 0; }
.aitem-wrapper.regular.mode2 .aitem .inner {
    display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 1rem;
    align-items: start; margin: .5rem .8rem; padding: .8rem; width: calc(100% - 1.6rem);
    background: #11161b; border-radius: 1rem;
}
.aitem-wrapper.regular.mode2 .aitem .inner .poster { grid-column: 1; grid-row: 1 / span 3; }
.aitem-wrapper.regular.mode2 .aitem .inner .poster div { border-radius: .7rem; }
.aitem-wrapper.regular.mode2 .aitem .inner .title { grid-column: 2; height: auto; max-height: 2.6rem; margin: .2rem 0 .4rem; font-size: 1.05rem; font-weight: 500; padding-right: 2.2rem; }
.aitem-wrapper.regular.mode2 .aitem .inner .genres { grid-column: 2; }
.aitem-wrapper.regular.mode2 .aitem .inner .info { grid-column: 2; align-self: end; flex-wrap: wrap; row-gap: .3rem; }
.aitem-wrapper.regular.mode2 .aitem .inner .info .type { margin-left: .5rem; }
.aitem-wrapper.regular.mode2 .aitem .inner .info span:last-child:not(.score) { margin-left: .5rem; }
.aitem-wrapper.regular.mode2 .aitem .inner .info .score { margin-left: auto; }
.aitem-wrapper.regular.mode2 .aitem .inner .tags { top: 1.3rem; left: 1.3rem; font-size: .75rem; }
.aitem-wrapper.regular.mode2 .aitem .inner .tags > div { padding: .1rem .4rem; }
.aitem-wrapper.regular.mode2 .aitem .inner .ctrl { top: 1rem; right: 1rem; }
.aitem-wrapper.regular.mode2 .aitem:hover .inner .poster,
.aitem-wrapper.regular.mode2 .aitem:hover .inner .title { transform: none; }
.aitem-wrapper.regular.mode2 .aitem:hover .inner { background: #181d22; }

/* mode3: one row per title. */
.aitem-wrapper.regular.mode2.mode3 .aitem { width: 100%; margin-bottom: 0; }
.aitem-wrapper.regular.mode2.mode3 .aitem .inner { grid-template-columns: 3.6rem minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; margin-top: .3rem; margin-bottom: .3rem; padding: .6rem .8rem; }
.aitem-wrapper.regular.mode2.mode3 .aitem .inner .poster { grid-row: 1 / span 2; }
.aitem-wrapper.regular.mode2.mode3 .aitem .inner .poster div { border-radius: .5rem; }
.aitem-wrapper.regular.mode2.mode3 .aitem .inner .title { grid-row: 1; margin: 0 0 .2rem; -webkit-line-clamp: 1; max-height: 1.3rem; }
.aitem-wrapper.regular.mode2.mode3 .aitem .inner .genres { grid-row: 2; }
.aitem-wrapper.regular.mode2.mode3 .aitem .inner .info { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin: 0; flex-wrap: nowrap; }
.aitem-wrapper.regular.mode2.mode3 .aitem .inner .info .score { margin-left: .8rem; }
.aitem-wrapper.regular.mode2.mode3 .aitem .inner .tags { display: none; }
.aitem-wrapper.regular.mode2.mode3 .aitem .inner .ctrl { position: static; grid-column: 3; display: none; }

@media (max-width: 991.98px) {
    .aitem-wrapper.regular.mode2 .aitem { width: 100%; }
}
@media (max-width: 575.98px) {
    .aitem-wrapper.regular.mode2.mode3 .aitem .inner { grid-template-columns: 3.2rem minmax(0, 1fr); grid-template-rows: auto auto auto; }
    .aitem-wrapper.regular.mode2.mode3 .aitem .inner .poster { grid-row: 1 / span 3; }
    .aitem-wrapper.regular.mode2.mode3 .aitem .inner .info { grid-column: 2; grid-row: 3; margin-top: .3rem; }
}

.listing-page .no-result { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; padding: 4rem 1rem; color: rgba(255, 255, 255, .55); text-align: center; }

/* ── Pagination (site-wide component) ───────────────────────────────────── */

.pre-pagination { display: flex; justify-content: center; margin: 2.5rem 0; }
.pre-pagination .navigation .pagination { flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; }
.pre-pagination .page-item .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; height: 2.6rem; padding: 0 .8rem; color: #fff; background: #181d22; border: 0; border-radius: .5rem !important; box-shadow: none; }
.pre-pagination .page-item a.page-link:hover { color: #fff; background: #36cb68; }
.pre-pagination .page-item.active .page-link { color: #fff; background: #e45f3a; }
.pre-pagination .page-item.disabled .page-link { color: rgba(255, 255, 255, .4); background: transparent; }

/* ── Sidebar rows (side-item inside .aitem-col, styled by styles.css) ─────── */

/* Laravel's score on a side-item row (the Top rated panel). */
.aitem.side-item .detail .info .score { color: #ffc107 !important; }
.aitem.side-item .detail .info .score i { font-size: .8rem; margin-right: .25rem; }

/* ── Anime tooltip (main.js Tooltip → tooltipster) ──────────────────────── */

/* tooltipster's sidetip theme (.tooltipster-sidetip .tooltipster-box) outranks
   AnimeKAI's .tooltipster-box rules; restate AnimeKAI's popover on top of it. */
.tooltipster-sidetip .tooltipster-box { background: linear-gradient(#e45f3a 100%, #b83c19 0%); border: 0; border-radius: 1rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); }
.tooltipster-sidetip .tooltipster-content { overflow: unset; color: #fff; background-color: rgba(0, 0, 0, .04); border-radius: 1rem; padding: 1.5rem; font-size: .95rem; line-height: 1.5; position: relative; }
.tooltipster-sidetip.tooltipster-base { pointer-events: auto; }
.tooltipster-box .tooltipster-content .status .status-r { gap: .6rem; }
.tooltipster-box .tooltipster-content .status .status-r .tt-status { font-size: .9rem; padding: 0 .4rem; white-space: nowrap; }
.tooltipster-box .tooltipster-content .status .status-r .favourite > .btn { color: #fff; border: 0; padding: 0 .5rem 0 0; font-size: 1.1rem; }
.tooltipster-box .tooltipster-content .status .status-r .favourite > .btn:hover { color: #0c1116; }
.tooltipster-box .tooltipster-content .status .status-r .favourite .dropdown-menu { min-width: 11rem; background: #181d22; border: 0; border-radius: .8rem; padding: .35rem; bottom: 100%; top: auto; right: 0; left: auto; margin-bottom: .4rem; }
.tooltipster-box .tooltipster-content .status .status-r .favourite .dropdown-menu .dropdown-item { color: rgba(255, 255, 255, .8); border-radius: .5rem; padding: .5rem .8rem; font-size: .95rem; cursor: pointer; }
.tooltipster-box .tooltipster-content .status .status-r .favourite .dropdown-menu .dropdown-item:hover,
.tooltipster-box .tooltipster-content .status .status-r .favourite .dropdown-menu .dropdown-item.active { color: #36cb68; background: rgba(54, 203, 104, .12); }
.tooltipster-box .tooltipster-content .info { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.tooltipster-box .tooltipster-content .info .sub,
.tooltipster-box .tooltipster-content .info .dub { color: #fff; background: rgba(0, 0, 0, .25); border-color: rgba(0, 0, 0, .35); }
.tooltipster-box .tooltipster-content .info .sub svg,
.tooltipster-box .tooltipster-content .info .dub svg { fill: #fff; width: 1rem; height: 1rem; margin-right: .2rem; }
.tooltipster-box .tooltipster-content .info span:not(.sub):not(.dub) { font-size: .9rem; }
.tooltipster-box .tooltipster-content .desc { opacity: .8; }
.tooltipster-box .tooltipster-content .detail > div { line-height: 1.5rem; }
.tooltipster-box .tooltipster-content .detail > div > span { opacity: .6; margin-right: .2rem; }
.tooltipster-box .tooltipster-content .detail a { color: #fff; }
.tooltipster-box .tooltipster-content .detail a:hover { color: #0c1116; }
.tooltipster-box .tooltipster-content .watch-btn { color: #fff; }

/* Filter dropdowns: on anikai.to Bootstrap 5's Popper places them with an inline
   `margin: 0` and a 2 px offset, so styles.css's .5rem margin-top never shows
   there. Bootstrap 4 here leaves that margin on (8 px gap); restate the 2 px. */
#filters .main-filters > div .dropdown .dropdown-menu,
#filters .more-filters > div:not(:is(.dropdown-wrap, .no-dropdown)) .dropdown .dropdown-menu,
#filters .dropdown-wrap > div .dropdown .dropdown-menu { margin-top: .125rem; }