/* Roberto Sound V15 — single clear control, shifted to the LEFT.
   Native browser cancel icons are removed so each search box has exactly one clear button. */

/* Normalize search controls and remove UA/native clear icons (Chrome/Edge/Safari). */
#searchInput,
#youtubeSearchInput{
  -webkit-appearance:textfield!important;
  appearance:textfield!important;
}
#searchInput::-webkit-search-cancel-button,
#searchInput::-webkit-search-decoration,
#youtubeSearchInput::-webkit-search-cancel-button,
#youtubeSearchInput::-webkit-search-decoration{
  -webkit-appearance:none!important;
  appearance:none!important;
  display:none!important;
}
#searchInput::-ms-clear,
#youtubeSearchInput::-ms-clear{
  display:none!important;
  width:0!important;
  height:0!important;
}

/* Main catalog search: clear button becomes the LEFT utility cell. */
.search-control{
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr) auto!important;
  align-items:stretch!important;
  gap:0!important;
  overflow:hidden!important;
}
.search-control #searchInput{
  grid-column:2!important;
  min-width:0!important;
  padding-left:.7rem!important;
}
.search-control button[type="submit"]{
  grid-column:3!important;
  white-space:nowrap!important;
}

/* YouTube search: icon -> one clear button -> input -> submit. */
.youtube-search-control{
  display:grid!important;
  grid-template-columns:48px 46px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:0!important;
}
.youtube-search-icon{grid-column:1!important}
.youtube-search-control .rs-search-clear--youtube{grid-column:2!important}
.youtube-search-control #youtubeSearchInput{grid-column:3!important}
.youtube-search-control button[type="submit"]{grid-column:4!important}

/* One consistent clear treatment. It is intentionally NOT beside the submit button. */
.rs-search-clear,
.search-control .rs-search-clear,
.youtube-search-control .rs-search-clear{
  width:100%!important;
  min-width:0!important;
  height:54px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  border-right:1px solid rgba(255,255,255,.17)!important;
  border-left:0!important;
  border-radius:0!important;
  background:#17161b!important;
  color:#d8d2dc!important;
  font:500 1.45rem/1 system-ui,-apple-system,"Segoe UI",sans-serif!important;
  letter-spacing:0!important;
  opacity:.52!important;
  cursor:pointer!important;
  box-shadow:none!important;
  transform:none;
  transition:opacity .18s ease,color .18s ease,background .18s ease,border-color .18s ease!important;
}
.rs-search-clear:hover,
.rs-search-clear:focus-visible{
  opacity:1!important;
  color:#fff!important;
  background:#2a2630!important;
  border-right-color:rgba(255,255,255,.38)!important;
  outline:none!important;
}
.rs-search-clear:focus-visible{box-shadow:inset 0 0 0 2px #fff!important}
.rs-search-clear.is-empty{opacity:.18!important;color:#8f8995!important}
.rs-search-clear.is-empty:hover{opacity:.45!important}

/* Keep the light submit button visually separated from the input utilities. */
.search-control button[type="submit"],
.youtube-search-control button[type="submit"]{
  border-left:1px solid rgba(255,255,255,.18)!important;
}

/* Mobile: keep clear on the left even when submit drops to its own row. */
@media(max-width:680px){
  .youtube-search-control{
    grid-template-columns:42px 42px minmax(0,1fr)!important;
  }
  .youtube-search-control button[type="submit"]{
    grid-column:1/-1!important;
    grid-row:2!important;
  }
  .youtube-search-control #youtubeSearchInput{grid-column:3!important;grid-row:1!important}
  .youtube-search-control .rs-search-clear--youtube{grid-column:2!important;grid-row:1!important}
  .youtube-search-icon{grid-column:1!important;grid-row:1!important}
}
@media(max-width:560px){
  .search-control{
    grid-template-columns:44px minmax(0,1fr)!important;
  }
  .search-control .rs-search-clear--music{grid-column:1!important;grid-row:1!important}
  .search-control #searchInput{grid-column:2!important;grid-row:1!important}
  .search-control button[type="submit"]{
    grid-column:1/-1!important;
    grid-row:2!important;
    margin-top:.35rem!important;
  }
}
