/*
 * nineanime-characters.css — owned by the characters area.
 *
 * Characters & Voice Actors: the block on the watch and detail pages
 * (partials/detail/characters), its list modal (frontend/characters/list),
 * the character page and the people page (frontend/characters/*). 9animetv.to
 * never had any of it, so everything is 9anime's own vocabulary from
 * styles.css — `.block_area` panels, the sidebar-list rows
 * (`.cbox.cbox-list .anime-block-ul li`: 46×60 poster, #ababab name → #fff,
 * #525252 meta), `.btn-showmore` + `.cbox-collapse`/`.no-limit`, the white
 * `.premodal.premodal-large`, `.anime-pagination`, the watch page's
 * `.block_area-detail > .anime-detail` and the `.flw-item` grid. This file
 * only lays two list halves side by side and recolours for the white modal.
 * Tokens: tmp/visual/GUIDE.md §1.
 */

/* ── Rows: two halves (character | voice actor), mirrored ─────────────── */
.na-cast .ulclear { display: flex; flex-wrap: wrap; }
.anime-block-ul.na-cast li.na-cast-item {
    width: 50%; min-height: 60px; margin: 0 0 20px; padding: 0;
    background: none !important; overflow: hidden;
}
.cbox.cbox-list .anime-block-ul.na-cast li.na-cast-item { padding: 0; margin: 0 0 20px; }
.cbox.cbox-list .anime-block-ul.na-cast li.na-cast-item:nth-of-type(odd) { padding-right: 15px; }
.cbox.cbox-list .anime-block-ul.na-cast li.na-cast-item:nth-of-type(even) { padding-left: 15px; }
.cbox.cbox-list .anime-block-ul.na-cast .ulclear { margin-bottom: -10px; }

.na-cast-half { position: relative; float: left; width: 50%; min-height: 60px; padding: 0 8px 0 60px; }
.na-cast-half.na-cast-right { float: right; padding: 0 60px 0 8px; text-align: right; }
.cbox.cbox-list .anime-block-ul.na-cast li .na-cast-half .film-poster,
.anime-block-ul.na-cast li .na-cast-half .film-poster { top: 0; left: 0; right: auto; }
.cbox.cbox-list .anime-block-ul.na-cast li .na-cast-right .film-poster,
.anime-block-ul.na-cast li .na-cast-right .film-poster { left: auto; right: 0; }
.anime-block-ul.na-cast .na-cast-half .film-poster > a { display: block; }
/* styles.css gives the img no top/left: in the right-aligned half its static
   position would sit past the poster's right edge (clipped). */
.anime-block-ul.na-cast .na-cast-half .film-poster .film-poster-img { top: 0; left: 0; }
.anime-block-ul.na-cast .na-cast-half .film-detail .fd-infor { font-size: 13px; line-height: 1.4em; }
.anime-block-ul.na-cast .na-cast-half .film-detail .film-name { margin-bottom: 3px; word-break: break-word; }

/* Single-half rows (the character page's voice actors): four across. */
.anime-block-ul.na-cast.na-cast-single li.na-cast-item { width: 25%; }
.cbox.cbox-list .anime-block-ul.na-cast.na-cast-single li.na-cast-item:nth-of-type(n) { padding: 0 15px 0 0; }
.na-cast-single .na-cast-half { width: 100%; float: none; }

@media screen and (max-width: 989px) {
    .anime-block-ul.na-cast.na-cast-single li.na-cast-item { width: 33.333%; }
}
@media screen and (max-width: 639px) {
    .anime-block-ul.na-cast li.na-cast-item { width: 100%; }
    .cbox.cbox-list .anime-block-ul.na-cast li.na-cast-item:nth-of-type(odd),
    .cbox.cbox-list .anime-block-ul.na-cast li.na-cast-item:nth-of-type(even) { padding: 0; }
    .anime-block-ul.na-cast.na-cast-single li.na-cast-item { width: 50%; }
}
@media screen and (max-width: 479px) {
    .na-cast-half { padding-left: 54px; }
    .na-cast-half.na-cast-right { padding-right: 54px; }
    .anime-block-ul.na-cast.na-cast-single li.na-cast-item { width: 100%; }
}

/* ── The list modal (#modalcharacters): white premodal-large ──────────── */
.na-cast-modal .modal-content { overflow: hidden; }
.na-cast-modal .modal-content .modal-header { padding: 20px 45px 10px; }
.na-cast-modal .modal-content .modal-header .modal-title { font-size: 26px; line-height: 1.2em; }
.na-cast-modal .modal-content .modal-body { padding: 5px 20px 20px; }
.na-cast-modal #characters-content { position: relative; min-height: 120px; }
.na-cast-modal #characters-content > .loading-relative:only-child { height: 120px; }

.na-cast-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 10px; }
.na-cast-lang {
    display: inline-block; padding: 4px 10px; border-radius: 3px;
    font-size: 12px; line-height: 18px; font-weight: 500;
    background: #ebe3f6; color: #713abf; cursor: pointer;
}
.na-cast-lang:hover { background: #e5dbf4; color: #5a2e98; text-decoration: none; }
.na-cast-lang.active, .na-cast-lang.active:hover { background: #5a2e98; color: #fff; cursor: default; }
.na-cast-count { text-align: center; font-size: 12px; color: #666; margin: 0 0 10px; }

.anime-block-ul.na-cast.na-cast-modal-list li.na-cast-item {
    width: 100%; margin: 0; padding: 10px 0; border-bottom: 1px solid #eee;
}
.anime-block-ul.na-cast.na-cast-modal-list li.na-cast-item:last-child { border-bottom: 0; }
.na-cast-modal-list li .film-detail { color: #666; }
.na-cast-modal-list li .film-detail .film-name a { color: #111; }
.na-cast-modal-list li .film-detail .film-name a:hover { color: #5a2e98; }

.na-cast-avatars {
    display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: center; gap: 4px;
    padding: 0 0 0 8px !important;
}
.na-cast-avatar { display: block; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: #eee; }
.na-cast-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.na-cast-avatar:hover { box-shadow: 0 0 0 2px #5a2e98; }
.na-cast-avatar-more { background: #ebe3f6; color: #713abf; font-size: 11px; font-weight: 500; line-height: 30px; text-align: center; }
.na-cast-avatar-more:hover { background: #5a2e98; color: #fff; text-decoration: none; }

.na-cast-tip .tooltip-inner { background-color: #111 !important; color: #fff; font-size: 12px; }
.na-cast-tip.bs-tooltip-top .arrow::before { border-top-color: #111; }
.na-cast-tip.bs-tooltip-bottom .arrow::before { border-bottom-color: #111; }

.na-cast-pager { margin: 15px 0 0; }
.na-cast-pager .ap_-nav .ap__-input .form-control { color: #111; border-color: #ddd; }
.na-cast-pager .ap_-nav .ap__-btn .btn.disabled { pointer-events: none; }

.na-cast-busy {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .7);
}
.na-cast-none { color: #666; font-size: 13px; padding: 15px 0; text-align: center; }
.anime-block-ul li.na-cast-none { width: 100%; padding: 15px 0; background: none; }

/* ── Character / people page ──────────────────────────────────────────── */
/* The profile block is the watch page's .anime-detail; the name is the h1. */
.na-cast-profile .anime-detail .anime-poster .film-poster { border-radius: 6px; background: #262626; }
.na-cast-profile .anime-detail .anime-poster .film-poster-img { object-position: center top; }
.na-cast-profile .anime-detail .film-name { font-size: 18px; font-weight: 300; }
.na-cast-kind {
    font-size: 11px; line-height: 1.4em; text-transform: uppercase; letter-spacing: 1px;
    color: #927daf; margin-bottom: 4px;
}
.na-cast-bio { margin-bottom: 16px; }
.na-cast-bio .na-cast-bio-text { margin-bottom: 0; line-height: 1.6em; word-break: break-word; }
.na-cast-bio.is-clamped .na-cast-bio-text { max-height: 8em; overflow: hidden; }
.na-cast-bio.is-clamped.is-open .na-cast-bio-text { max-height: none; }
.na-cast-bio-more { display: inline-block; margin-top: 5px; font-size: 13px; color: #927daf; }
.na-cast-bio-more:hover { color: #fff; text-decoration: none; }
.na-cast-empty { color: #666; font-size: 13px; font-style: italic; }
.na-cast-profile .anime-detail .meta { margin-bottom: 0; }

@media screen and (max-width: 639px) {
    /* styles.css hides the detail poster on phones; a profile needs its face. */
    .na-cast-profile .anime-detail .anime-poster { display: block; position: relative; width: 140px; margin: 0 auto 15px; }
    .na-cast-profile .anime-detail .film-infor-top { text-align: center; }
}

/* A breadcrumb step with no page of its own ("Voice Actors"): link grey, not a link. */
.breadcrumb-item.na-cast-crumb { color: #525252; }

/* 9anime's pager inside the modal: `.premodal .btn` (14px, .5rem .75rem) would
   inflate it and wrap the go box over the buttons on phones — back to .btn-sm. */
.premodal .na-cast-pager .btn { font-size: 13px; line-height: 1.5; padding: 6px 10px; }
.premodal .na-cast-pager .ap__-btn .btn.more-padding { padding-left: 40px; padding-right: 40px; }
.premodal .na-cast-pager .ap__-input .btn-blank { padding-left: 6px; padding-right: 6px; }
@media screen and (max-width: 639px) {
    .premodal .na-cast-pager .ap__-btn .btn.more-padding { padding: 6px 10px; }
}
@media screen and (max-width: 480px) {
    .na-cast-modal .modal-content .modal-header .modal-title { font-size: 22px; }
    .na-cast-modal .modal-content .modal-body { padding: 5px 15px 15px; }
}

/* The character page's middle crumb is a title: one line, ellipsised. */
.breadcrumb .na-cast-crumb-anime { min-width: 0; max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb .na-cast-crumb-anime + .breadcrumb-item { min-width: 0; }