/* ==========================
   ANIME PAGE LAYOUT
========================== */

.anime-layout{
    display:grid;
    grid-template-columns:320px 1fr 320px;
    gap:45px;
    align-items:start;

    margin-top:35px;   /* Adds spacing below header */
}

/* ==========================
   LEFT COLUMN
========================== */

.anime-left{
    width:320px;
}

/* ==========================
   CONTENT
========================== */

.anime-content{
    min-width:0;
}

/* ==========================
   TITLE
========================== */

.anime-title{

    font-size:48px;

    line-height:1.2;

    font-weight:700;

    letter-spacing:-1px;

    margin:0 0 20px;

    color:#fff;
}

/* ==========================
   DESCRIPTION
========================== */

.anime-content p{

    font-size:18px;

    line-height:1.9;

    color:#d2d5df;

    margin-bottom:22px;
}

/* ==========================
   COVER
========================== */

.anime-cover,
.character-cover{

    width:320px;

    height:460px;

    overflow:hidden;

    border-radius:20px;

    transition:.35s;
}

.anime-cover img,
.character-cover img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:20px;
}

.anime-cover:hover{

    transform:translateY(-5px);

    box-shadow:0 25px 60px rgba(124,92,255,.35);
}

/* ==========================
   INFO BOX
========================== */

.anime-infobox{

    background:#171B26;

    border:1px solid rgba(124,92,255,.25);

    border-radius:20px;

    overflow:hidden;

    position:sticky;

    top:100px;

    box-shadow:
        0 0 20px rgba(124,92,255,.12),
        0 15px 40px rgba(124,92,255,.20);

    transition:.3s;
}

.anime-infobox:hover{

    box-shadow:
        0 0 35px rgba(124,92,255,.28),
        0 20px 55px rgba(124,92,255,.35);
}
.infobox-header{

    padding:22px;

    border-bottom:1px solid var(--border);

    font-size:22px;

    font-weight:700;
}

.infobox-row{

    display:flex;

    justify-content:space-between;

    gap:20px;

    padding:18px 22px;

    border-bottom:1px solid var(--border);
}

.infobox-label{

    color:#9aa0b5;

    font-weight:500;
}

.infobox-value{

    text-align:right;

    font-weight:600;

    color:#fff;
}

/* ==========================
   RATING CARD
========================== */

.rating-card{

    margin-top:20px;

    background:#171B26;

    border:1px solid rgba(124,92,255,.25);

    border-radius:20px;

    padding:22px;

    text-align:center;

    box-shadow:
        0 0 20px rgba(124,92,255,.12),
        0 10px 35px rgba(124,92,255,.18);

    transition:.3s;
}

.rating-card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 0 30px rgba(124,92,255,.25),
        0 20px 50px rgba(124,92,255,.35);
}
.rating-stars{

    font-size:24px;

    color:#FFD54A;

    letter-spacing:4px;

    margin-bottom:10px;
}

.rating-score{

    font-size:42px;

    font-weight:700;

    color:#fff;
}

.rating-score span{

    font-size:18px;

    color:#9aa0b5;
}

.rating-label{

    margin-top:8px;

    color:#9aa0b5;

    font-size:15px;
}

/* ==========================
   WATCH CARD
========================== */

.watch-card{

    margin-top:20px;

    background:#171B26;

    border:1px solid rgba(124,92,255,.25);

    border-radius:20px;

    padding:22px;

    box-shadow:
        0 0 20px rgba(124,92,255,.12),
        0 10px 35px rgba(124,92,255,.18);

    transition:.3s;
}

.watch-card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 0 30px rgba(124,92,255,.25),
        0 20px 50px rgba(124,92,255,.35);
}
.watch-title{

    font-size:18px;

    font-weight:700;

    margin-bottom:18px;
}

.watch-link{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 16px;

    border-radius:12px;

    background:#202637;

    color:#fff;

    text-decoration:none;

    margin-bottom:12px;

    transition:.25s;
}

.watch-link:hover{

    background:#7C5CFF;

    transform:translateX(5px);
}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:1024px){

    .anime-layout{

        grid-template-columns:1fr;
    }

    .anime-left{

        width:100%;
    }

    .anime-right{

        width:100%;
    }

    .anime-cover{

        width:100%;

        max-width:350px;

        margin:auto;
    }

}
/* ==========================
   Anime Badges
========================== */

.anime-badges{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:18px 0 28px;

}

.anime-badge{

    display:inline-flex;

    align-items:center;

    padding:8px 16px;

    background:#1B2030;

    border:1px solid #2d3345;

    border-radius:999px;

    color:#ffffff;

    font-size:14px;

    font-weight:600;

    transition:.25s ease;
}

.anime-badge:hover{

    background:#7C5CFF;

    border-color:#7C5CFF;

    transform:translateY(-2px);

}
.status-finished{

    background:#163322;

    border-color:#22c55e;

    color:#7CFFA2;
}

.status-releasing{

    background:#3d2d08;

    border-color:#f59e0b;

    color:#ffd166;
}

.status-not-yet-released{

    background:#13273b;

    border-color:#3b82f6;

    color:#7ec3ff;
}
/* ==========================
   BREADCRUMBS
========================== */

.breadcrumbs{

    display:flex;
    align-items:center;
    gap:8px;
    margin-top:24px;
    font-size:14px;
    color:#7d8295;
}

.breadcrumbs a{
    color:#9aa0b5;
}

.breadcrumbs a:hover{
    color:var(--accent);
}

.breadcrumbs span:last-child{
    color:#fff;
}

/* ==========================
   TITLE ROW / ADD TO LIST
========================== */

.anime-title-row{

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.anime-title-japanese{

    font-size:16px;
    color:#9aa0b5;
    margin-top:-12px;
    margin-bottom:20px;
}

.add-to-list-btn{

    flex-shrink:0;
    padding:12px 22px;
    border-radius:12px;
    border:1px solid rgba(124,92,255,.4);
    background:transparent;
    color:#fff;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}

.add-to-list-btn:hover{
    background:var(--accent);
    border-color:var(--accent);
}

/* ==========================
   DESCRIPTION READ MORE (CSS-only toggle)
========================== */

.desc-toggle-checkbox{
    display:none;
}

.anime-description-section{
    margin-bottom:30px;
}

.anime-description{

    max-height:165px;
    overflow:hidden;
    position:relative;
    transition:max-height .3s ease;
}

.anime-description::after{

    content:"";
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:50px;
    background:linear-gradient(transparent, var(--bg));
}

.desc-toggle-checkbox:checked ~ .anime-description{
    max-height:none;
}

.desc-toggle-checkbox:checked ~ .anime-description::after{
    display:none;
}

.desc-toggle-label{

    display:inline-flex;
    margin-top:14px;
    padding:10px 20px;
    border-radius:10px;
    background:#1B2030;
    border:1px solid #2d3345;
    color:#fff;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}

.desc-toggle-label .show-less-text{
    display:none;
}

.desc-toggle-checkbox:checked ~ .desc-toggle-label .show-more-text{
    display:none;
}

.desc-toggle-checkbox:checked ~ .desc-toggle-label .show-less-text{
    display:inline;
}

/* ==========================
   CONTENT SECTIONS (shared by trailer / characters / arcs / episodes / etc.)
========================== */

.content-section{
    margin-bottom:40px;
}

.content-section-header{

    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}

.content-section-title{

    font-size:24px;
    font-weight:700;
    color:#fff;
    margin-bottom:18px;
}

.content-section-header .content-section-title{
    margin-bottom:0;
}

.section-viewall{

    font-size:14px;
    font-weight:600;
    color:var(--accent);
}

/* ==========================
   TRAILER
========================== */

.trailer-embed{

    position:relative;
    width:100%;
    padding-top:56.25%;
    border-radius:20px;
    overflow:hidden;
    border:1px solid var(--border);
}

.trailer-embed iframe{

    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
}

/* ==========================
   MAIN CHARACTERS ROW
========================== */

.characters-row{

    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
    gap:18px;
}

.mini-character-card{

    display:block;
    color:#fff;
    transition:.25s;
}

.mini-character-card:hover{
    transform:translateY(-4px);
}

.mini-character-thumb{

    width:100%;
    aspect-ratio:3/4;
    border-radius:14px;
    overflow:hidden;
    background:#171B26;
    margin-bottom:10px;
}

.mini-character-thumb img{

    width:100%;
    height:100%;
    object-fit:cover;
}

.mini-character-name{

    font-size:14px;
    font-weight:600;
    line-height:1.3;
}

.mini-character-role{

    font-size:12px;
    color:var(--accent);
    margin-top:2px;
}

/* ==========================
   STORY ARCS ROW
========================== */

.arcs-row{

    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:18px;
}

.arc-card{

    display:block;
    background:#171B26;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    color:#fff;
    transition:.25s;
}

.arc-card:hover{
    border-color:var(--accent);
    transform:translateY(-4px);
}

.arc-card-thumb{
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
}

.arc-card-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.arc-card-title{

    padding:14px 16px 4px;
    font-size:15px;
    font-weight:600;
}

.arc-card-meta{

    padding:0 16px 14px;
    font-size:13px;
    color:#9aa0b5;
}

/* ==========================
   EPISODES TABLE
========================== */

.episodes-table{

    background:#171B26;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
}

.episodes-table-head{

    display:grid;
    grid-template-columns:60px 1fr 160px;
    padding:14px 20px;
    font-size:13px;
    font-weight:700;
    color:#7d8295;
    text-transform:uppercase;
    letter-spacing:.5px;
    border-bottom:1px solid var(--border);
}

.episodes-table-row{

    display:grid;
    grid-template-columns:60px 1fr 160px;
    align-items:center;
    padding:16px 20px;
    color:#fff;
    border-bottom:1px solid var(--border);
    transition:.2s;
}

.episodes-table-row:last-child{
    border-bottom:none;
}

.episodes-table-row:hover{
    background:#1B2030;
}

.ep-number{
    color:#9aa0b5;
    font-weight:600;
}

.ep-title{
    font-weight:500;
}

.ep-filler-tag{

    display:inline-flex;
    margin-left:10px;
    padding:3px 10px;
    border-radius:999px;
    background:#3d2d08;
    border:1px solid #f59e0b;
    color:#ffd166;
    font-size:11px;
    font-weight:700;
}

.ep-date{
    color:#9aa0b5;
    font-size:14px;
}

.view-all-episodes-btn{

    display:block;
    text-align:center;
    margin-top:16px;
    padding:14px;
    border-radius:14px;
    background:#1B2030;
    border:1px solid #2d3345;
    color:#fff;
    font-weight:600;
    transition:.2s;
}

.view-all-episodes-btn:hover{
    background:var(--accent);
    border-color:var(--accent);
}

/* ==========================
   WATCH ORDER ROW
========================== */

.watch-order-row{

    display:flex;
    align-items:center;
    gap:14px;
    overflow-x:auto;
    padding-bottom:6px;
}

.mini-anime-card{

    flex-shrink:0;
    width:140px;
    display:block;
    color:#fff;
    border-radius:16px;
    transition:.25s;
}

.mini-anime-card:hover{
    transform:translateY(-4px);
}

.mini-anime-card.is-current{
    outline:2px solid var(--accent);
    border-radius:18px;
}

.mini-anime-thumb{

    width:100%;
    aspect-ratio:3/4;
    border-radius:14px;
    overflow:hidden;
    background:#171B26;
    margin-bottom:8px;
}

.mini-anime-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.mini-anime-title{

    font-size:13px;
    font-weight:600;
    line-height:1.3;
}

.mini-anime-rating{

    font-size:12px;
    color:#FFD54A;
    margin-top:2px;
}

.watch-order-arrow{

    flex-shrink:0;
    color:var(--accent);
    font-size:20px;
}

/* ==========================
   FAQ ACCORDION
========================== */

.faq-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.faq-item{

    background:#171B26;
    border:1px solid var(--border);
    border-radius:14px;
    padding:16px 20px;
}

.faq-item summary{

    cursor:pointer;
    font-weight:600;
    color:#fff;
    list-style:none;
}

.faq-item summary::-webkit-details-marker{
    display:none;
}

.faq-item summary::after{

    content:"+";
    float:right;
    color:var(--accent);
    font-size:18px;
}

.faq-item[open] summary::after{
    content:"−";
}

.faq-answer{

    margin-top:12px;
    color:#d2d5df;
    font-size:15px;
    line-height:1.7;
}

/* ==========================
   RELATED ANIME (FULL WIDTH STRIP)
========================== */

.related-anime-section{
    margin-top:10px;
}

.related-anime-row{

    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:18px;
}

/* ==========================
   WATCH LINK EXTRAS
========================== */

.watch-link{
    position:relative;
}

.watch-link-tag{

    margin-left:8px;
    font-size:11px;
    color:#9aa0b5;
}

.watch-link-arrow{
    margin-left:auto;
}

.badge-type{

    background:rgba(124,92,255,.15);
    border-color:rgba(124,92,255,.5);
    color:#c7baff;
}