#site-controlbar{
  width:100%;
  box-sizing:border-box;
}

.controlbar-spacer{
  display:none;
  width:100%;
}

.controlbar{
  width:100%;
  background:#ffffff;
  border-bottom:1px solid #e5e5e5;
  box-sizing:border-box;
}

.controlbar.is-fixed{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:999;
}

.controlbar-content{
  width:min(100% - 32px, 940px);
  margin:0 auto;
  padding:8px 16px;
  box-sizing:border-box;

  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  column-gap:12px;
  row-gap:8px;

  font-size:14px;
  font-family:system-ui, Arial, sans-serif;
}

.controlbar-content a{
  text-decoration:none;
  color:#1e2a22;
  padding:6px 10px;
  border-radius:6px;
  transition:background .2s;
  white-space:nowrap;
  flex:0 0 auto;
}

.controlbar-content a:hover{
  background:#f0f0f0;
}

.controlbar-content select{
  padding:6px 8px;
  border:1px solid #ddd;
  border-radius:6px;
  background:#fff;
  font-size:14px;
  color:#1e2a22;
  box-sizing:border-box;
  flex:0 0 auto;
}

#surahSelect{
  width:160px;
  max-width:160px;
}

#ayahSelect{
  width:80px;
  max-width:80px;
}

#reciterSelect{
  width:110px;
  max-width:110px;
}

.control-toggle{
  display:flex;
  align-items:center;
  gap:4px;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  flex:0 0 auto;
}

.control-toggle input{
  cursor:pointer;
  margin:0;
}

.control-toggle span{
  font-size:14px;
  color:#1e2a22;
}

@media (max-width:600px){
  .controlbar-content{
    width:min(100% - 20px, 940px);
    padding:8px 12px;
    column-gap:8px;
    row-gap:8px;
  }

  .controlbar-content a,
  .controlbar-content select,
  .control-toggle span{
    font-size:13px;
  }

  #surahSelect{
    width:145px;
    max-width:145px;
  }

  #ayahSelect{
    width:72px;
    max-width:72px;
  }

  #reciterSelect{
    width:100px;
    max-width:100px;
  }
}