/* ===============================
   RANDOM PAGE TITLE
================================ */
.page-title{
  border-radius: 1rem;
  background: linear-gradient(135deg, #ff6a00, #ff9800);
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  margin: 15px 0 20px;
  color: #222;
}

body.dark .page-title{
  color: #f1f1f1;
}

/* ===============================
   RANDOM FILTER BAR
================================ */
.random-filters{
  display: flex;
  gap: 10px;
  align-items: center;
  overflow-x: auto;
  padding: 10px;
  margin-bottom: 20px;
  scrollbar-width: none;
}

.random-filters::-webkit-scrollbar{
  display: none;
}


.random-filters select{
  flex: 1;
  padding: 10px 5px;
  border-radius: 8px;
  border: 1px solid #333;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
  transition: all .2s ease;
}


.random-filters select:hover{
  border-color: #ff6a00;
}

.random-filters select:focus{
  outline: none;
  border-color: #ff6a00;
  box-shadow: 0 0 0 2px rgba(255,106,0,.15);
}

body.dark .random-filters select{
  background: #1f1f1f;
  color: #fff;
  border-color: #333;
}

/* ===============================
   REFRESH BOX
================================ */
.refresh-box{
  text-align: center;
  margin: 25px 0 40px;
}

.refresh-box button{
  background: linear-gradient(135deg,#ff6a00,#ff9800);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s ease;
  box-shadow: 0 8px 18px rgba(255,106,0,.35);
}

.refresh-box button:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(255,106,0,.45);
}

.refresh-box button:active{
  transform: scale(.96);
}

/* ===============================
   MOBILE OPTIMIZATION
================================ */
@media(max-width:600px){
  .page-title{
    font-size: 22px;
  }

  .random-filters select{
    width: 100%;
    max-width: 320px;
  }

  .refresh-box button{
    width: 90%;
    max-width: 320px;
  }
}


.genre-dropdown{
/*
position:relative; 
z-index: 1001; */

flex:1;


}

.genre-btn{
font-size: 14px;

width:100%;

padding:10px;

border:1px solid #333;

background:#fff;

border-radius:8px;

cursor:pointer;

text-align:left;

}

.genre-menu{

display: none;

position:absolute;



max-width:350px;


max-height:300px;

overflow:auto;
background:#fff;

border:1px solid #ddd;

border-radius:10px;

padding:10px;

z-index:999;

box-shadow:0 10px 20px rgba(0,0,0,.15);

}

@media(max-width:600px){
    .genre-menu {
        left: 0;
    }
}

.genre-menu.show{

display:block;

}

.genre-menu label{
color: #000;

display:block;

padding:6px;

cursor:pointer;

}

.genre-menu label:hover{

background:#f5f5f5;

}

body.dark .genre-btn,
body.dark .genre-menu{

background:#1f1f1f;

color:#fff;

border-color:#444;

}

body.dark .genre-menu label:hover{
    background:#333;
}

.genre-menu::-webkit-scrollbar{
    width:8px;
}

.genre-menu::-webkit-scrollbar-thumb{
    background:#ff9800;
    border-radius:10px;
}