/* ===== Background ===== */

body {
background: linear-gradient(145deg,#f3f8ff,#e6eeff,#ffffff);
font-family:"Poppins",sans-serif;
background-attachment:fixed;
}

/* ===== Browse Box ===== */

.browse-box{
background:#fff;
padding:25px 30px;
border-radius:16px;
box-shadow:0 8px 24px rgba(0,0,0,0.05);
}

/* ===== Genres ===== */

.genres-list{
background:#f9fbfd;
border-radius:12px;
padding:15px;
border:1px solid #e0e6ed;
max-height:260px;
overflow-y:auto;
}

/* responsive genre grid */

.genres-checkbox{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:6px;
}

/* tablet */

@media(max-width:992px){
.genres-checkbox{
grid-template-columns:repeat(4,1fr);
}
}

/* mobile */

@media(max-width:768px){
.genres-checkbox{
grid-template-columns:repeat(3,1fr);
}
}

/* small mobile */

@media(max-width:480px){
.genres-checkbox{
grid-template-columns:repeat(2,1fr);
}
}

.form-check input[type=checkbox]{
display:none;
}

.form-check label{
display:block;
background:#e8f0fe;
padding:6px 10px;
border-radius:20px;
font-size:.85rem;
text-align:center;
cursor:pointer;
}

.form-check input[type=checkbox]:checked + label{
background:linear-gradient(135deg,#74b9ff,#0984e3);
color:white;
}

/* ===== Comic Card ===== */

.comic-card{
background:#fff;
border-radius:14px;
padding:12px;
display:flex;
gap:12px;
min-height:150px;
box-shadow:0 4px 14px rgba(0,0,0,.05);
}

.comic-card img{
width:110px;
height:150px;
border-radius:10px;
object-fit:cover;
}

.comic-info{
flex:1;
display:flex;
flex-direction:column;
}

.comic-title{
font-size:1.05rem;
font-weight:700;
margin-bottom:4px;
}

.comic-meta{
font-size:.9rem;
margin-bottom:3px;
}

.comic-desc{
font-size:.85rem;
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
}

/* ===== MOBILE ===== */

@media(max-width:768px){

.browse-box{
padding:15px;
}

.comic-card img{
width:90px;
height:120px;
}

.comic-title{
font-size:.95rem;
}

.comic-meta{
font-size:.8rem;
}

.comic-desc{
display:none;
}

}

/* ===== Genres ===== */

.genres-list {
    background: #f9fbfd;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #e0e6ed;
    max-height: 260px;
    overflow-y: auto;
}

/* GRID */

.genres-checkbox {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 10px;
}

/* tablet */

@media(max-width:992px) {
    .genres-checkbox {
        grid-template-columns: repeat(4,1fr);
    }
}

/* mobile */

@media(max-width:768px) {
    .genres-checkbox {
        grid-template-columns: repeat(3,1fr);
    }
}

/* item */

.genres-checkbox .form-check {
    margin: 0;
}

.genres-checkbox input[type=checkbox] {
    display: none;
}

.genres-checkbox label {
    display: block;
    background: #e8f0fe;
    padding: 8px 10px;
    border-radius: 20px;
    font-size: .85rem;
    text-align: center;
    cursor: pointer;
    transition: all .15s;
}

    .genres-checkbox label:hover {
        background: #dbe8ff;
    }

.genres-checkbox input[type=checkbox]:checked + label {
    background: linear-gradient(135deg,#74b9ff,#0984e3);
    color: white;
}