/*
 * AnimeKAI skin — styles for the Laravel pieces AnimeKAI's own stylesheet never
 * had to draw (the notification bell's tabs, the account menu items, social
 * sign-in buttons, footer friends, …), in AnimeKAI's palette:
 *   backgrounds #0c1116 / #11161b / #181d22, accent #e45f3a, green #36cb68.
 * Loaded after styles.css, anikai-extra.css and anikai-aliases.css.
 */

/* ---------------------------------------------------------------- header */

header .nav-wrapper .community-btn { font-size: 1.1rem; }

/* The search results come from the Laravel partial; .item is the keyboard target. */
#search .suggestion .aitem.item.active { background: rgba(255, 255, 255, .055); color: #36cb68; }

#search .suggestion .aitem .info i { color: #fbc02d; font-size: .7rem; }
#search .suggestion .suggestion-empty { padding: .9rem 1rem; color: rgba(255, 255, 255, .55); }

/* ------------------------------------------------------ account corner */

.acc-wrap.top-profile { gap: .25rem; }
.acc-wrap .notify > .btn.toggler { color: rgba(255, 255, 255, .8); font-size: 1.15rem; background: transparent; }
.acc-wrap .notify > .btn.toggler:hover { color: #fff; }
.acc-wrap .notify > .btn.active { position: relative; }
.acc-wrap .notify > .btn.active:after { content: ""; background-color: #e45f3a; border-radius: 1rem; width: .35rem; height: .35rem; display: block; position: absolute; top: 0; right: -.2rem; }

.acc-wrap .dropdown-menu {
    background: #11161b;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .85rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .35);
    color: rgba(255, 255, 255, .78);
}

/* Account menu: AnimeKAI's .pathway menu (styles.css draws .head and the
   .dropdown-item > span rows); only the colours Bootstrap would change. */
.acc-wrap .pathway .user-menu { padding-bottom: .5rem; border: 0; border-radius: 1.2rem; }
.acc-wrap .pathway .user-menu .head { color: #fff; }
.acc-wrap .pathway .user-menu .head > div span { font-size: .85rem; }
.acc-wrap .pathway .user-menu .dropdown-item { color: #fff; }
.acc-wrap .pathway .user-menu .dropdown-item:focus,
.acc-wrap .pathway .user-menu .dropdown-item:active { background: none; color: #fff; }
.acc-wrap .pathway .user-menu .dropdown-item i { display: inline-block; text-align: left; }

/* Notification bell: notifications-bell.css keeps the pane mechanics; these are the colours. */
.acc-wrap .notify .user-notification { width: min(92vw, 380px); padding: 0; overflow: hidden; }
.acc-wrap .notify .noti-bell-head { background: #181d22; border-bottom: 1px solid rgba(255, 255, 255, .06); padding: .7rem .9rem; }
.acc-wrap .notify .noti-bell-tabs > span { color: rgba(255, 255, 255, .55); font-weight: 600; cursor: pointer; }
.acc-wrap .notify .noti-bell-tabs > span.active { color: #fff; }
.acc-wrap .notify .noti-bell-tabs .badge { background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; }
.acc-wrap .notify .noti-bell-tabs > span.active .badge { background: #e45f3a; }
.acc-wrap .notify .noti-bell-actions a { color: #36cb68; }
.acc-wrap .notify .body-box { background: #11161b; }
.acc-wrap .notify .no-result { color: rgba(255, 255, 255, .5); padding: 1.2rem; text-align: center; }

/* Guest sign-in button: AnimeKAI's round .pathway button. */
.acc-wrap .pathway .sign-in { display: inline-flex; align-items: center; justify-content: center; color: #fff; }

/* ------------------------------------------------------------ sign modal */

#sign .remember { display: flex; align-items: center; gap: .5rem; justify-content: flex-start; padding-left: 0; }
#sign .remember .form-check-input { position: static; opacity: 1; display: inline-block; width: 1rem; height: 1rem; margin: 0; float: none; flex: 0 0 auto; background-color: #181d22; border: 1px solid rgba(255, 255, 255, .3); border-radius: .25rem; }
#sign .remember .form-check-input:checked { background-color: #e45f3a; border-color: #e45f3a; }
#sign .remember label { color: rgba(255, 255, 255, .7); }
#sign .social-sign { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .25rem; }
#sign .social-sign .social-btn { display: inline-flex; align-items: center; gap: .45rem; border-radius: .6rem; padding: .5rem .9rem; font-weight: 600; font-size: .9rem; }
#sign .modal-content .alert-danger { font-size: .9rem; }

/* ----------------------------------------------------------------- footer */

footer .bot-footer .footer-friends { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .6rem; align-items: center; }
footer .bot-footer .footer-friends span { color: rgba(255, 255, 255, .5); }
footer .bot-footer .footer-friends a { color: rgba(255, 255, 255, .75); }
footer .bot-footer .footer-friends a:hover { color: #36cb68; }
footer .top-footer .menu-footer { flex-wrap: wrap; }
/* Laravel has five footer links (AnimeKAI two): keep each on one line and,
   where AnimeKAI centres the footer, centre the wrapped rows too. */
footer .top-footer .menu-footer a { white-space: nowrap; }
@media (max-width: 767.98px) {
    footer .top-footer .menu-footer { justify-content: center; row-gap: .5rem; }
}

/* ------------------------------------------------------------------ toast */

#toast .alert { background: #181d22; color: #fff; border: 1px solid rgba(255, 255, 255, .08); border-radius: .7rem; }
#toast .alert-success i { color: #36cb68; }
#toast .alert-danger i { color: #e45f3a; }
#toast .close { background: transparent; border: 0; color: rgba(255, 255, 255, .6); font-size: 1.3rem; line-height: 1; }

/* ------------------------------------------------------------------- home */

/* AnimeKAI floats its grid cards; titles of different lengths then stagger the
   rows. A wrapping flex row keeps every row aligned. */
.aitem-wrapper.regular { display: flex; flex-wrap: wrap; align-items: stretch; }
.aitem-wrapper.regular::after { content: none; }
.aitem-wrapper.regular > .no-result { width: 100%; padding: 1.5rem .8rem; color: rgba(255, 255, 255, .5); }
.aitem .genres { font-size: .8rem; color: rgba(255, 255, 255, .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .15rem; }
.aitem .genres a { color: rgba(255, 255, 255, .55); }
.aitem .genres a:hover { color: #36cb68; }
.aitem .info .score i { color: #fbc02d; font-size: .7rem; }

/* Latest Updates: AnimeKAI's .shead.lg (.snav tabs + .tab-nav arrows) holding
   Laravel's five tabs and the page arrows (spans, as main.js wants them). */
#recent-update .shead-r { min-width: 0; }
#recent-update .snav.text-tabs { display: flex; flex-wrap: wrap; justify-content: center; }
#recent-update .paging > span { font-size: 1.5rem; line-height: 1; color: #fff; cursor: pointer; display: inline-flex; transition: color .2s, opacity .2s; }
#recent-update .paging > span + span { margin-left: .5rem; }
#recent-update .paging > span:hover { color: #36cb68; }
#recent-update .paging > span.disabled { opacity: .35; cursor: default; color: #fff; }
#recent-update .body { transition: opacity .2s; }
@media (max-width: 991.98px) {
    #recent-update .paging { justify-content: center; width: 100%; margin: 0 auto; display: flex; position: absolute; bottom: 0; left: 0; right: 0; }
    #recent-update .paging > span { font-size: 1.8rem; }
    #recent-update .paging > span + span { margin-left: 4rem; }
}

/* notifications-bell.js fills #community-pinned only when something is
   pinned; empty, it must not push the share bar off AnimeKAI's line. */
#community-pinned:empty { margin: 0; }

/* Pinned strip (notifications-bell.js markup, notifications-bell.css layout)
   in AnimeKAI's palette instead of Anikoto's blue: #11161b panel, #181d22
   pills, orange accent, Poppins weights. */
#community-pinned .cpin-bar,
#community-pinned .cpin-spot { background: #11161b; border: 0; border-radius: .6rem; padding: .7rem 1rem; }
#community-pinned .cpin-badge,
#community-pinned .cpin-spot-kicker { color: #e45f3a; font-weight: 600; }
#community-pinned .cpin-spot-icon { background: #e45f3a; color: #fff; border-radius: 50%; }
#community-pinned .cpin-item { background: #181d22; border: 0; border-radius: .5rem; font-weight: 500; color: rgba(255, 255, 255, .85); padding: .4rem .8rem; }
#community-pinned .cpin-item:hover { background: #1c2228; color: #36cb68; border: 0; }
#community-pinned .cpin-item .c { color: rgba(255, 255, 255, .45); }
#community-pinned .cpin-tag { font-weight: 600; }
#community-pinned .cpin-spot-name { font-weight: 500; color: #fff; }
#community-pinned .cpin-spot-body:hover .cpin-spot-name { color: #36cb68; }
#community-pinned .cpin-hide { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .5); border-radius: 50%; }
#community-pinned .cpin-hide:hover { background: #e45f3a; color: #fff; }
#community-pinned .cpin-spot-dots span.on { background: #e45f3a; }

/* Share bar: the five icons stay on one row beside the text (the Laravel
   sentence is longer than AnimeKAI's, so the text wraps instead). */
.social-sharing { gap: 1.5rem; }
.social-sharing .anikai-share-buttons { flex-wrap: nowrap; flex-shrink: 0; }

/* Home sidebar. AnimeKAI's sections (.sidebar-section, .shead/.stitle with the
   round orange icon) carrying Laravel's extra controls. */
.sidebar-section .shead.justify { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.sidebar-section .shead .stitle { white-space: nowrap; display: inline-flex; align-items: center; }

/* Below 1300 px AnimeKAI's sidebar drops under the content and each section
   takes a full row (its long titles force it); ours are shorter, so say it. */
@media (max-width: 1299.9px) {
    #wrapper.home .dual-col .sidebar > * { flex: 1 1 100%; width: 100%; }
}

/* Top Trending: Laravel's Day/Week/Month in AnimeKAI's orange period dropdown
   (.shead .dropdown .dropdown-arrow is styled by styles.css). Bootstrap 4 puts
   .show on the .dropdown, not on the button, so turn the chevron from there. */
#trending-anime .trend-period { flex-shrink: 0; }
#trending-anime .trend-period .dropdown-arrow { text-transform: uppercase; font-size: .85rem; line-height: 1.6; }
#trending-anime .trend-period.show .dropdown-arrow:after { transform: rotate(180deg); }
#trending-anime .trend-period { position: relative; }
#trending-anime .trend-period .dropdown-menu { min-width: 7rem; top: calc(100% + .3rem) !important; right: 0 !important; left: auto !important; transform: none !important; z-index: 20; }
#trending-anime .trend-period .dropdown-item { cursor: pointer; }
#trending-anime .no-result { color: rgba(255, 255, 255, .5); padding: .5rem 0; }

/* Schedule: AnimeKAI's #schedule. main.js wraps each day in .inner (its click
   target), so the day box styles move one level down. */
#schedule { position: relative; overflow: hidden; }
#schedule .swiper.schedule .swiper-wrapper .swiper-slide > .inner { background: none; width: auto; height: auto; border-radius: 0; font-size: inherit; font-weight: inherit; display: flex; flex-direction: column; align-items: center; gap: .38rem; cursor: pointer; }
#schedule .swiper.schedule .swiper-wrapper .swiper-slide > .inner > span { text-transform: uppercase; font-size: 1.12rem; line-height: 1; font-weight: 400; color: currentColor; opacity: 1; }
#schedule .swiper.schedule .swiper-wrapper .swiper-slide > .inner > div { width: 2.8rem; height: 2rem; border-radius: .6rem; background: rgba(255, 255, 255, .3); color: #fff; font-size: 1.25rem; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: background-color .2s; }
#schedule .swiper.schedule .swiper-wrapper .swiper-slide.active > .inner { background: none; }
/* Three days per view at every width, as the AnimeKAI reference shows them
   (styles.css steps 20/25/12.5/16.7 % by width with !important; main.js's
   Swiper is slidesPerView "auto", so the slide width decides). */
#schedule .swiper.schedule .swiper-wrapper .swiper-slide { color: #fff; width: 33.3333% !important; }
/* styles.css lights up any direct div child of a hovered slide
   (.swiper-slide:hover > div) — here that is .inner, which drew a grey square
   behind the whole day. Only the number box reacts, as on AnimeKAI. */
#schedule .swiper.schedule .swiper-wrapper .swiper-slide:hover > .inner { background-color: transparent; }
#schedule .swiper.schedule .swiper-wrapper .swiper-slide > .inner > span { opacity: .7; transition: opacity .2s; }
#schedule .swiper.schedule .swiper-wrapper .swiper-slide:hover > .inner > span,
#schedule .swiper.schedule .swiper-wrapper .swiper-slide.active > .inner > span { opacity: 1; }
#schedule .swiper.schedule .swiper-wrapper .swiper-slide:hover > .inner > div { background-color: rgba(255, 255, 255, .2); }
#schedule .swiper.schedule .swiper-wrapper .swiper-slide.active > .inner > div { background-color: #e45f3a; }
#schedule .schedule-prev.swiper-button-disabled, #schedule .schedule-next.swiper-button-disabled { opacity: .35; pointer-events: none !important; }
#schedule .body { transition: opacity .2s; }
#schedule .body ul li .no-result { color: rgba(255, 255, 255, .5) !important; }
#schedule .body ul li a.old { opacity: .5; }
#schedule .body ul li a.old:hover { opacity: 1; }
#schedule .body:not(.expand) ul li:nth-child(n+8) { display: none; }
/* main.js looks for .more inside .body (it is re-rendered per day); it sits
   in the footer row on the right, as AnimeKAI's "More" does. */
#schedule .body .more { position: absolute; right: 1.5rem; bottom: 1rem; z-index: 1; color: rgba(255, 255, 255, .5); background: none; border: 0; padding: 0; font-size: .9rem; line-height: 1.5; }
#schedule .body .more:before { content: "More "; }
#schedule .body .more:after { content: "\f078"; font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: .75rem; display: inline-block; transition: transform .2s; }
#schedule .body.expand .more:before { content: "Less "; }
#schedule .body.expand .more:after { transform: rotate(180deg); }
#schedule .body .more:hover { color: #36cb68; }

/* Discussion (notifications-bell.js): a sidebar section like Schedule, its
   Newest/Top tabs and the show/hide switch beside the title. */
.dual-col .sidebar #home-discussion { padding: 0; margin: 0; font-family: inherit; overflow: hidden; }
.dual-col .sidebar #home-discussion .shead { padding: 1.5rem 1.5rem 1rem; margin: 0; }
#home-discussion .hd-tools { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
#home-discussion .hd-tabs { display: inline-flex; gap: .7rem; }
#home-discussion .hd-tab { background: none; border: 0; padding: 0; font-size: .95rem; font-weight: 400; color: rgba(255, 255, 255, .55); cursor: pointer; }
#home-discussion .hd-tab:hover { color: #fff; }
#home-discussion .hd-tab.active { color: #36cb68; }
#home-discussion .hd-tab.active::after { content: none; }
#home-discussion .hd-switch { width: 2.3rem; height: 1.3rem; border-radius: 1rem; border: 0; background: rgba(255, 255, 255, .2); position: relative; cursor: pointer; flex-shrink: 0; }
#home-discussion .hd-switch span { width: .95rem; height: .95rem; left: .18rem; background: #fff; }
#home-discussion.is-on .hd-switch { background: #36cb68; border: 0; }
#home-discussion.is-on .hd-switch span { left: calc(100% - 1.13rem); }
#home-discussion .hd-list { border: 0; background: #181d22; padding: .25rem 0; border-radius: .8rem; overflow: hidden; }
#home-discussion .hd-list:empty { min-height: 4rem; }
#home-discussion .hd-list-empty { padding: .8rem 1.5rem; font-size: .95rem; color: rgba(255, 255, 255, .5); }
/* One comment per row: a hairline between rows, a green edge on hover. */
#home-discussion a.hd-row { position: relative; display: flex; align-items: flex-start; gap: .8rem; padding: .85rem 1.25rem; border: 0; color: rgba(255, 255, 255, .9); transition: background .15s; }
#home-discussion a.hd-row + a.hd-row { border-top: 1px solid rgba(255, 255, 255, .05); }
#home-discussion a.hd-row::before { content: ""; position: absolute; left: 0; top: .6rem; bottom: .6rem; width: 3px; border-radius: 0 3px 3px 0; background: #36cb68; opacity: 0; transition: opacity .15s; }
#home-discussion a.hd-row:hover { background: rgba(255, 255, 255, .03); }
#home-discussion a.hd-row:hover::before { opacity: 1; }
#home-discussion a.hd-row:hover .hd-row-show { color: #36cb68; }
#home-discussion .hd-row-avatar { width: 2.6rem; height: 2.6rem; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: #11161b; box-shadow: 0 0 0 2px rgba(255, 255, 255, .08); }
#home-discussion .hd-row-avatar img { width: 100%; height: 100%; object-fit: cover; }
#home-discussion .hd-row-main { display: flex; flex-direction: column; gap: .3rem; min-width: 0; flex: 1; }
#home-discussion .hd-row-meta { display: flex; align-items: center; gap: .45rem; font-size: .85rem; margin: 0; min-width: 0; }
#home-discussion .hd-row-user { font-weight: 500; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#home-discussion .hd-row-badge { flex-shrink: 0; font-size: .62rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; line-height: 1; padding: .22rem .45rem; border-radius: .35rem; color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .07); }
#home-discussion .hd-row-badge.is-staff { color: #e45f3a; background: rgba(228, 95, 58, .14); }
#home-discussion .hd-row-badge:empty { display: none; }
#home-discussion .hd-row-time { margin-left: auto; flex-shrink: 0; font-size: .75rem; color: rgba(255, 255, 255, .4); }
/* The comment itself: at most two lines, the rest is one click away. */
#home-discussion .hd-row-text { font-size: .92rem; line-height: 1.45; color: rgba(255, 255, 255, .82); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#home-discussion .hd-row-foot { display: flex; align-items: center; gap: .45rem; min-width: 0; font-size: .8rem; color: rgba(255, 255, 255, .45); }
#home-discussion .hd-row-foot > i { flex-shrink: 0; font-size: .8rem; color: rgba(255, 255, 255, .35); }
#home-discussion .hd-row-show { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: rgba(255, 255, 255, .5); transition: color .15s; }
#home-discussion .hd-row-ep { flex-shrink: 0; font-size: .68rem; font-weight: 600; line-height: 1; padding: .2rem .4rem; border-radius: .3rem; color: #e45f3a; border: 1px solid rgba(228, 95, 58, .55); }
#home-discussion .hd-off { display: none; color: rgba(255, 255, 255, .5); font-size: .9rem; text-align: left; padding: 0 1.5rem 1.5rem; }
#home-discussion.is-off .hd-off { display: block; }


/* The .mb menu entries (Home, Random, Watch2gether, Community) are for phones:
   below 640 px AnimeKAI hides the W2G/shuffle icons (and the aliases hide
   the community icon with them). */
@media (min-width: 640px) {
    .nav-menu li.mb { display: none; }
}

/* Regular cards keep AnimeKAI's own poster box (styles.css `.poster div`: 72% + 72%
   padding = 1:1.44, which already reserves the space for lazy images); only the
   placeholder colour is added here. */
.aitem-wrapper.regular .aitem .inner .poster > div { background: #181d22; }
.aitem-wrapper.regular .aitem .inner .poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aitem-wrapper.mini .aitem .poster > div { aspect-ratio: 2 / 3; background: #181d22; overflow: hidden; }
.aitem-wrapper.mini .aitem .poster img { width: 100%; height: 100%; object-fit: cover; }

/* Account menus open under their button, flush right (Bootstrap 4's Popper
   placement fights AnimeKAI's Bootstrap 5 dropdown rules otherwise). */
.acc-wrap .dropdown { position: relative; }
.acc-wrap .dropdown > .dropdown-menu { position: absolute; top: 100% !important; right: 0 !important; left: auto !important; transform: none !important; margin-top: .75rem !important; }
.acc-wrap .notify > .dropdown-menu { right: -3.2rem !important; }
@media (max-width: 575.98px) {
    .acc-wrap .notify > .dropdown-menu { position: fixed; top: 5rem !important; left: .75rem !important; right: .75rem !important; width: auto; }
}

/* Phone hero: AnimeKAI sizes the art to 150% of the width, which suits its 16:9
   backdrops; Laravel's featured art is the wide banner (≈19:4), which came out
   as a thin strip. Cover the slide instead — the bottom fades out as before. */
@media (max-width: 666.9px) {
    #featured .swiper.featured .swiper-wrapper .swiper-slide { background-size: cover; background-position: center top; }
    /* the green bookmark button carries the solid icon, as AnimeKAI's does */
    #featured .swiper.featured .swiper-wrapper .swiper-slide .detail .swiper-ctrl .dropdown button .fa-light { --fa-style: 900; font-weight: 900; }
}

/* Landing (#wrapper.index-page, as anikai.to's landing wrapper is classed): its
   search box stays open in the artwork at every width. AnimeKAI's phone rules
   fold every #search into the header toggle, which left the landing without
   a search on phones; the Laravel front page's search must always be there. */
#wrapper.index-page .index-head #search { position: relative; margin: 2rem auto !important; }
#wrapper.index-page .index-head #search-btn { display: none; }
#wrapper.index-page .index-head #search .inner { opacity: 1; pointer-events: auto; position: relative; top: auto; left: auto; right: auto; width: 100%; border: 0; margin: 0; align-self: flex-start; }
/* anikai.to's white box is 46 px tall and overhangs the 2.5rem #search row by its padding (there it is absolutely placed); as a flex item it was squeezed to 35 px. */
#wrapper.index-page .index-head #search .inner form { margin: 0; }
/* Up to 800 px the landing's menu is a panel under its button; styles.css only
   opens `ul.active` outside .index-page (anikai.to slides it open by script),
   so open the panel anikai.js marks active here too. */
@media (max-width: 800px) {
    #wrapper.index-page .nav-menu > ul.active { display: block; }
}

/* Hero "wide art" (owner's call): AnimeKAI stretches the slide art to 85% × 100%,
   made for 16:9 backdrops. Most Laravel titles only have AniList's 1900×400
   banner strip, which that stretch pulls several times taller than it is.
   anikai.js marks such slides .wide-art; from tablet up they show the strip at
   its own shape on the right, over a blurred, darkened copy of it, under
   AnimeKAI's usual left and bottom fades. Phones keep the cover crop above. */
#featured .swiper.featured .swiper-wrapper .swiper-slide { isolation: isolate; }
#featured .swiper-slide .hero-art { display: none; }
@media (min-width: 667px) {
    #featured .swiper.featured .swiper-wrapper .swiper-slide.wide-art { background-image: none !important; }
    #featured .swiper-slide.wide-art .hero-art { display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; }
    #featured .swiper-slide.wide-art .hero-art-blur { position: absolute; inset: -2rem; background: var(--hero-art) center / cover no-repeat; filter: blur(.9rem) brightness(.55) saturate(1.1); }
    #featured .swiper-slide.wide-art .hero-art-strip {
        position: absolute; right: 0; top: 50%; width: 85%; aspect-ratio: 19 / 4; transform: translateY(-62%);
        background: var(--hero-art) center / cover no-repeat;
        -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
        mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
    }
}

/* The anime tooltip opens only from the ⓘ (owner). In sidebar rows and mini
   lists the ⓘ is a small span in the row's top-right corner, shown on hover
   like the card's .ctrl button. */
.aitem .side-ttip { position: absolute; top: .45rem; right: .45rem; z-index: 6; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: #e45f3a; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; opacity: 0; transition: opacity .2s, transform .2s; cursor: help; }
.aitem:hover .side-ttip, .aitem .side-ttip:focus { opacity: 1; }
.aitem .side-ttip:hover { transform: scale(1.1); }
.aitem-col .aitem, .aitem-wrapper.mini .aitem { position: relative; }
@media (max-width: 1023.98px) { .aitem .side-ttip { display: none; } }

/* Phones (owner): a 19:4 banner strip covering the tall mobile hero is zoomed
   several times over; wide-art slides show the anime's poster there instead,
   which fits the phone's frame and reads naturally. */
@media (max-width: 666.9px) {
    #featured .swiper.featured .swiper-wrapper .swiper-slide.wide-art { background-image: var(--hero-poster) !important; background-size: cover; background-position: center 22%; }
}

/* Home list group (New Release / Newly Added / ...): styles.css pulls the
   swiper out by -1rem each side so the slides' 1rem gutters line up with the
   column edges, but swiper-bundle.css (loaded later) resets .swiper to
   margin:auto, which left every list 2rem too narrow (worst on mobile). */
.alist-group.swiper{margin-left:-1rem;margin-right:-1rem}
/* The rows carry Laravel's date after AnimeKAI's sub/dub/type badges, which
   overflowed the 3-column width ("Sep 18, 202"). Tighter gaps keep the row on
   one line; if it still can't fit (3-digit counts) it wraps rather than clips,
   so the badges and the date always stay whole. Only the title truncates. */
.alist-group .aitem-wrapper.mini .aitem .info { flex-wrap: wrap; column-gap: .6rem; row-gap: .15rem; }
.alist-group .aitem-wrapper.mini .aitem .info span + span { margin-left: 0; }
/* Search box: the input is type="search" (Laravel form), anikai.to's is plain
   text — drop the browser's blue clear cross and search decorations. */
#search input[type="search"] { -webkit-appearance: none; appearance: none; }
#search input[type="search"]::-webkit-search-cancel-button,
#search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }

/* Home site alert (partials/site-alert): anikai.to's .alert.alert-secondary
   notice, plus Laravel's dismiss button. */
.kai-site-alert { position: relative; padding-right: 2.8rem; }
.kai-site-alert > .fas:first-child { margin-right: .35rem; }
.kai-site-alert a { color: var(--bs-primary, #e45f3a); }
.kai-site-alert a:hover { text-decoration: underline; }
.kai-site-alert-close { position: absolute; top: .55rem; right: .6rem; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border: 0; border-radius: .5rem; background: transparent; color: inherit; opacity: .6; cursor: pointer; transition: opacity .2s, background-color .2s; }
.kai-site-alert-close:hover { opacity: 1; background: rgba(0, 0, 0, .08); }
.kai-site-alert-raw { margin-bottom: 1rem; }

/* The hero's folder menu is a dropup in the markup, but it was opening
   downwards — out of the slider (overflow:hidden) and under the pinned strip.
   Opening it upwards keeps it inside the hero, so nothing else has to move. */
#featured .swiper-ctrl .dropdown.dropup .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: .5rem;
    max-height: 14rem;
    overflow-y: auto;
    box-shadow: 0 -.5rem 2rem rgba(0, 0, 0, .45);
}

/* Front-page SEO block — section headings.
   The stock skin sets these to 1.1rem, which on this copy sits barely above the
   body text and reads as a caption rather than a heading. Overridden here
   rather than in styles.css so the vendored skin stays untouched. */
.index-content h2,
.container.index-content .h2 {
    font-size: clamp(1.6rem, 2.5vw, 2rem);
    line-height: 1.35;
    margin-top: 2rem;
}

/* Provider mark on a social sign-in button. The button is already a flex row
   with a gap, so this only has to hold the box square and stop a wide SVG from
   stretching; it sits where the Font Awesome glyph used to. */
.social-btn-img {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    object-fit: contain;
    display: block;
}