
/* V42 — dynamic search clear control */
.hero-search{
  max-width:900px!important;
  padding:7px!important;
  gap:8px!important;
}
.search-input-shell{
  flex:1;
  min-width:0;
  height:44px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 8px 0 13px;
  border-radius:11px;
  background:#fff;
  border:1px solid transparent;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.search-input-shell:focus-within{
  border-color:#94bff0;
  box-shadow:0 0 0 4px rgba(23,105,210,.10);
}
.search-leading-icon{
  flex:0 0 auto;
  color:#8193a8;
  font-size:14px;
}
.search-input-shell #globalSearch{
  min-width:0;
  flex:1;
  border:0!important;
  outline:0!important;
  padding:10px 2px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#0f172a!important;
  font:600 12px Inter,sans-serif!important;
}
.search-input-shell #globalSearch::placeholder{
  color:#7f8fa3;
  font-weight:500;
}
.search-input-shell #globalSearch::-webkit-search-cancel-button{
  -webkit-appearance:none;
  appearance:none;
  display:none;
}
.search-clear-btn{
  flex:0 0 auto;
  height:30px;
  border:0;
  border-radius:8px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:#eef4fb;
  color:#47647f;
  font:800 8px Inter,sans-serif;
  cursor:pointer;
  opacity:0;
  transform:translateX(5px) scale(.96);
  pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,background .16s ease,color .16s ease;
}
.search-clear-btn[hidden]{display:none!important}
.search-clear-btn.visible{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.search-clear-btn:hover{
  background:#feeceb;
  color:#c13027;
}
.search-clear-btn i{font-size:9px}
.quick-tags button.active{
  background:#fff!important;
  color:#0e55a7!important;
  border-color:#fff!important;
  box-shadow:0 5px 14px rgba(0,0,0,.12);
}
body.dark .search-input-shell{background:#fff}
@media(max-width:760px){
  .hero-search{flex-wrap:wrap!important}
  .search-input-shell{flex:1 1 100%;width:100%}
  .hero-search>#searchBtn,.hero-search>#advancedSearchBtn{flex:1}
}
@media(max-width:430px){
  .search-clear-btn span{display:none}
  .search-clear-btn{width:30px;padding:0}
}
