/*
 * animeflv-home.css — the CMS pieces on the animeflv home
 * (frontend/home.blade.php) that animeflv's css.css never drew: "Seguir
 * viendo", the "LO MÁS VISTO" view counts, the "COMUNIDAD" posts widget and
 * the "Comentarios" widget. Owned by the foundation. Everything else on the
 * home is css.css verbatim.
 */

/* ── Seguir viendo (partials/continue-watching-widget + the guest row) ──
   animeflv episode cards, one row only: the grid's Rows A06 C04 D03 put 4
   cards a row ≥1200px, 3 at 1020–1199px and 2 below, so the rest hide.
   (css.css's `.LsEpsdsCn` has the same row rule but is a hidden hover
   pop-up — never put that class on this section.) */
.af-cw { position: relative; }
.af-cw .ListEpisodios { margin-bottom: 20px; }
@media all and (min-width: 1200px) {
    .af-cw .ListEpisodios > li:nth-child(n+5) { display: none; }
}
@media all and (min-width: 1020px) and (max-width: 1199px) {
    .af-cw .ListEpisodios > li:nth-child(n+4) { display: none; }
}
@media all and (max-width: 1019px) {
    .af-cw .ListEpisodios > li:nth-child(n+3) { display: none; }
}
/* Phones: css.css puts one episode card a row below 468px. */
@media all and (max-width: 467px) {
    .af-cw .ListEpisodios > li:nth-child(n+2) { display: none; }
}
.af-cw .ListEpisodios > li { position: relative; }
.af-cw .ListEpisodios .Capi { white-space: nowrap; }
.af-cw .af-cw-rule { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 4; background-color: rgba(255, 255, 255, .3); }
.af-cw .af-cw-rule > span { display: block; height: 100%; background-color: #01bcf3; }
/* The ✕ (main.js UserPlayingRemove / the guest row's own remove), top left
   of the picture, where animeflv's play ring is not. */
.af-cw .af-cw-remove { position: absolute; left: 20px; top: 30px; z-index: 5; width: 24px; height: 24px; padding: 0; border-radius: 12px; line-height: 24px; font-size: 12px; text-align: center; color: #fff; background-color: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .2s; }
.af-cw .af-cw-remove:before { margin-right: 0; line-height: 24px; vertical-align: top; }
.af-cw .ListEpisodios > li:hover .af-cw-remove, .af-cw .af-cw-remove:focus { opacity: 1; }
.af-cw .af-cw-remove:hover { background-color: #fb3447; }
@media (hover: none) { .af-cw .af-cw-remove { opacity: 1; } }
.af-cw .Title.Page .Order > a.playing-clear:hover, .af-cw .Title.Page .Order > a[data-af-continue-clear]:hover { background-color: #fb3447; }

/* ── LO MÁS VISTO: the view count at the right of each row ─────────────── */
.LoMasVisto .ListSdbr li a .af-views { position: absolute; right: 15px; top: 0; bottom: 0; margin: auto; height: 20px; line-height: 20px; font-size: 11px; color: #9da1a4; }
.LoMasVisto .ListSdbr li a .af-views:before { margin-right: 4px; vertical-align: top; opacity: .6; }
.LoMasVisto .ListSdbr > li > a { color: #3b4248; }
.LoMasVisto .ListSdbr > li > a:hover { color: #01bcf3; }

/* ── COMUNIDAD (trending community posts), a `.Wdgt` ───────────────────── */
.Wdgt.af-posts > .Top[class*=fa-]:before { color: #01bcf3; }
.Wdgt.af-posts .Bod { padding: 5px 0 15px; }
.af-post-list > li { padding: 10px 15px; border-bottom: 1px solid #f3f3f3; }
.af-post-list > li:last-child { border-bottom: 0; }
.af-post-list .af-post-title { display: block; color: #3b4248; font-weight: 700; font-size: 13px; line-height: 18px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.af-post-list .af-post-title:hover { color: #01bcf3; }
.af-post-list .af-post-meta { margin-top: 4px; font-size: 11px; line-height: 16px; color: #9da1a4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-post-list .af-post-tag { color: #ff7e00; font-weight: 700; margin-right: 6px; }
.af-post-list .af-post-user { color: #9da1a4; margin-right: 6px; }
.af-post-list .af-post-user:hover { color: #01bcf3; }
.af-post-list .af-post-count:before { margin-right: 3px; vertical-align: baseline; }
.Wdgt.af-posts .af-post-more { margin-top: 10px; }

/* ── Comentarios (#home-discussion, notifications-bell.js) ──────────────
   animeflv's `.WdgtCn` box with its 20px bold title; the Newest / Top
   switch as animeflv's `.Order` pills, the on/off switch as a small pill. */
.af-home-discussion .Top { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.af-home-discussion .af-hd-tools { display: flex; align-items: center; }
.af-home-discussion .af-hd-tabs { font-size: 0; margin-right: 10px; }
.af-home-discussion .hd-tab { display: inline-block; vertical-align: top; min-width: 65px; height: 30px; padding: 0 15px; line-height: 30px; text-align: center; font-size: 12px; font-weight: 700; color: #fff; background-color: #3b4248; }
.af-home-discussion .hd-tab:first-child { border-radius: 15px 0 0 15px; }
.af-home-discussion .hd-tab:last-child { border-radius: 0 15px 15px 0; }
.af-home-discussion .hd-tab:hover, .af-home-discussion .hd-tab.active { background-color: #01bcf3; color: #fff; }
.af-home-discussion .af-hd-switch { position: relative; display: inline-block; width: 40px; height: 22px; border-radius: 11px; background-color: #01bcf3; cursor: pointer; transition: background-color .2s; }
.af-home-discussion .af-hd-switch > span { position: absolute; left: 20px; top: 2px; width: 18px; height: 18px; border-radius: 9px; background-color: #fff; transition: left .2s; }
.af-home-discussion .af-hd-switch.af-off { background-color: #cfd8dc; }
.af-home-discussion .af-hd-switch.af-off > span { left: 2px; }
#home-discussion.is-off .hd-body, #home-discussion.is-off .af-hd-tabs { display: none; }
#home-discussion .af-hd-loading { margin: 20px 0; }
#home-discussion .hd-body:has(.af-hd-list > li) .af-hd-loading, #home-discussion:not(.is-loading) .hd-body:has(.af-hd-list > li) .af-hd-loading { display: none; }
#home-discussion.is-loading .af-hd-list { opacity: .5; }
.af-hd-list { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
@media all and (min-width: 767px) { .af-hd-list { grid-template-columns: 1fr 1fr; } }
.af-hd-row { display: flex; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid #eceff1; min-width: 0; }
.af-hd-row .af-hd-avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 20px; object-fit: cover; margin-right: 10px; }
.af-hd-row .af-hd-body { flex: 1; min-width: 0; font-size: 12px; line-height: 18px; }
.af-hd-row .af-hd-about { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-hd-row .af-hd-user { color: #3b4248; font-size: 13px; margin-right: 6px; }
.af-hd-row .af-hd-user.is-staff { color: #01bcf3; }
.af-hd-row .af-hd-time { color: #9da1a4; font-size: 11px; }
.af-hd-row .af-hd-text { margin: 3px 0 4px; color: #666; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; }
.af-hd-row .af-hd-on { display: block; color: #01bcf3; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-hd-row .af-hd-on:before { margin-right: 5px; }
.af-hd-list > .af-empty { grid-column: 1 / -1; }

/* ── Landing (frontend/front-page.blade.php, show_frontpage = 1) ──────────
   animeflv had no landing: the home's `.AnflvTl` band holding the logo, the
   h1 and a round search box; blue buttons; the article in a `.WdgtCn`
   (tmp/misc/SPEC.md §6). */
.af-land .AnflvTl { padding: 30px 20px; }
.af-land .AnflvTl img { display: block; margin: 0 auto 15px; height: 46px; width: auto; }
.af-land .af-land-search { position: relative; max-width: 600px; margin: 15px auto 0; }
.af-land .af-land-search input { height: 50px; border-radius: 25px; border: 0; background-color: #fff; color: #3b4248; padding: 5px 60px 5px 25px; margin-bottom: 0; }
.af-land .af-land-search button { position: absolute; right: 5px; top: 5px; width: 40px; height: 40px; padding: 0; border-radius: 20px; background-color: #01bcf3; margin: 0; }
.af-land .af-land-search button:hover { background-color: #3b4248; }
.af-land .af-land-search button i:before { margin-right: 0; }
.af-land .af-land-social { margin: 15px 0 0; font-size: 0; }
.af-land .af-land-social > li { display: inline-block; margin: 0 3px; }
.af-land .af-land-social a { display: block; color: #fff; }
.af-land .af-land-social a:before { margin-right: 0; line-height: 40px; vertical-align: top; }
.af-land .af-land-go { text-align: center; margin-bottom: 20px; }
.af-land .af-land-go .Button { border-radius: 20px; min-width: 270px; }
.af-land .af-land-text h1 { font-size: 25px; font-weight: 300; line-height: 30px; color: #3b4248; margin-bottom: 15px; }
.af-land .af-land-text h2 { font-size: 20px; font-weight: 700; line-height: 30px; letter-spacing: -1px; color: #3b4248; margin-bottom: 10px; }
.af-land .af-land-text p, .af-land .af-land-text li { font-size: 12px; line-height: 20px; color: #666; }
.af-land .af-land-text ul { list-style-type: disc; margin-left: 20px; }
.af-land .af-land-text a { color: #01bcf3; }

/* ── Phones (<767px): animeflv's single column is Emisión (collapsed) then
   the episode grid. The CMS sidebar widgets (ad, LO MÁS VISTO, COMUNIDAD)
   move below the main column so that first screen stays animeflv's: the
   aside dissolves (display:contents) and the row orders its pieces. */
@media all and (max-width: 766px) {
    .af-home-row { display: flex; flex-direction: column; }
    .af-home-row > .af-home-aside { display: contents; }
    .af-home-row > .af-home-aside > * { order: 2; margin: 20px 10px 0; }
    .af-home-row > .af-home-aside > .Wdgt.Emision { order: 0; }
    .af-home-row > .Main { order: 1; }
}