.ald-directory-wrapper{

    width:100%;

}

.ald-genre-chip{

    background:#20202b;

    border:none;

    padding:10px 16px;

    border-radius:999px;

    cursor:pointer;

    transition:.2s;

}

.ald-genre-chip.active{

    background:var(--color-accent);

}

/*
|--------------------------------------------------------------------------
| SEARCH
|--------------------------------------------------------------------------
*/

#ald-search{

    background:#18181f;

    color:#ffffff;

    border:1px solid #2e2e3a;

    padding:14px 18px;

    border-radius:14px;

    width:100%;

}

#ald-search::placeholder{

    color:#9ca3af;

}

#ald-search:focus{

    outline:none;

    border-color:#7c3aed;

    box-shadow:0 0 0 2px rgba(124,58,237,.25);

}

/*
|--------------------------------------------------------------------------
| DIRECTORY BUTTONS
|--------------------------------------------------------------------------
*/

.ald-directory-wrapper a{

    text-decoration:none;

}

.ald-directory-wrapper article a{

    color:#ffffff;

}

.ald-directory-wrapper article a:hover{

    color:#ffffff;

}

/* IR AL ANIME */

.ald-directory-wrapper .bg-primary{

    background:#7c3aed;

    color:#ffffff !important;

    transition:.2s;

}

.ald-directory-wrapper .bg-primary:hover{

    background:#8b5cf6;

}

/* BOTONES LINKS */

.ald-directory-wrapper .bg-accent{

    background:#10b981;

    color:#ffffff !important;

    transition:.2s;

}

.ald-directory-wrapper .bg-accent:hover{

    background:#059669;

    color:#ffffff !important;

}

/*
|--------------------------------------------------------------------------
| GENRES
|--------------------------------------------------------------------------
*/

.ald-genre-chip{

    background:#20202b;

    color:#ffffff;

    border:none;

    padding:10px 16px;

    border-radius:999px;

    cursor:pointer;

    transition:.2s;

}

.ald-genre-chip:hover{

    background:#2e2e40;

}

.ald-genre-chip.active{

    background:#7c3aed;

    color:#ffffff;

}

/*
|--------------------------------------------------------------------------
| CARDS
|--------------------------------------------------------------------------
*/

.ald-directory-wrapper article{

    background:#17171f;

    color:#ffffff;

}

.ald-directory-wrapper h3{

    color:#ffffff;

}

/*
|--------------------------------------------------------------------------
| GRID WIDTH
|--------------------------------------------------------------------------
*/

#ald-directory-grid{

    grid-template-columns:
    repeat(
        auto-fill,
        minmax(220px,1fr)
    );

}

.ald-directory-wrapper{

    padding:20px;

}

.ald-report-btn{

    background:#7c3aed;

    color:#fff;

    border:none;

    padding:14px 22px;

    border-radius:14px;

    cursor:pointer;

}

.ald-modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    z-index:99999;

}

.ald-modal-box{

    width:700px;

    max-width:95%;

    background:#16161f;

    margin:8vh auto;

    border-radius:20px;

    padding:30px;

}

#ald-report-search,
#ald-report-comment{

    width:100%;

    margin-bottom:20px;

}

#ald-report-comment{

    min-height:180px;

}

#ald-report-suggestions{

    background:#222230;

    margin-bottom:15px;

}

#ald-report-suggestions li{

    padding:12px;

    cursor:pointer;

}

#ald-report-suggestions li:hover{

    background:#333347;

}


/*
|--------------------------------------------------------------------------
| REPORT MODAL
|--------------------------------------------------------------------------
*/

.ald-modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    z-index:99999;

    padding:20px;

}

.ald-modal-box{

    width:720px;

    max-width:95%;

    background:#16161f;

    margin:7vh auto;

    border-radius:22px;

    padding:35px;

    box-shadow:
    0 25px 60px
    rgba(0,0,0,.45);

}

.ald-modal-box h2{

    color:#fff;

    margin-bottom:25px;

}

/*
|--------------------------------------------------------------------------
| INPUTS
|--------------------------------------------------------------------------
*/

#ald-report-search,
#ald-report-comment{

    width:100%;

    background:#252533;

    color:#ffffff;

    border:1px solid #343448;

    border-radius:14px;

    padding:15px 18px;

    font-size:15px;

    outline:none;

    transition:.2s;

}

#ald-report-search{

    margin-bottom:15px;

}

#ald-report-comment{

    min-height:180px;

    resize:vertical;

    margin-bottom:20px;

}

#ald-report-search::placeholder,
#ald-report-comment::placeholder{

    color:#9ca3af;

}

#ald-report-search:focus,
#ald-report-comment:focus{

    border-color:#5d4fff;

    box-shadow:
    0 0 0 4px
    rgba(93,79,255,.20);

}

/*
|--------------------------------------------------------------------------
| SUGGESTIONS
|--------------------------------------------------------------------------
*/

#ald-report-suggestions{

    background:#252533;

    border-radius:14px;

    overflow:hidden;

    margin-bottom:18px;

}

#ald-report-suggestions li{

    list-style:none;

    color:#fff;

    padding:14px;

    cursor:pointer;

    transition:.15s;

}

#ald-report-suggestions li:hover{

    background:#373750;

}

/*
|--------------------------------------------------------------------------
| BUTTONS
|--------------------------------------------------------------------------
*/

.ald-modal-actions{

    display:flex;

    gap:12px;

    justify-content:flex-end;

}

.ald-report-send,
.ald-report-close{

    border:none;

    padding:14px 22px;

    border-radius:14px;

    color:#fff;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

}

.ald-report-send{

    background:#4f46e5;

}

.ald-report-send:hover{

    background:#5d4fff;

}

.ald-report-close{

    background:#374151;

}

.ald-report-close:hover{

    background:#4b5563;

}

/*
|--------------------------------------------------------------------------
| MESSAGE
|--------------------------------------------------------------------------
*/

#ald-report-message{

    margin-top:18px;

    color:#10b981;

    font-weight:600;

}