/* Shared clear (×) button for all type="search" inputs.
   Injected wrapper takes over the flex slot the input used to occupy, so
   toggling the button never shifts surrounding layout (icon, Search
   button, etc). Padding-right on the input is reserved at all times for
   the same reason. */
.tgb-search-clear-wrap{
  position:relative;display:flex;align-items:center;
  flex:1;min-width:0;
}
.tgb-search-clear-wrap input{
  padding-right:28px !important;
}
.tgb-search-clear-btn{
  display:none;
  position:absolute;right:6px;top:50%;
  transform:translateY(-50%);
  width:18px;height:18px;border-radius:50%;border:none;padding:0;
  background:rgba(0,0,0,.22);color:#fff;
  font-family:Arial,sans-serif;font-size:13px;line-height:1;
  align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
}
.tgb-search-clear-btn.show{display:flex;}
.tgb-search-clear-btn:hover{background:rgba(0,0,0,.38);}
.tgb-search-clear-btn:active{background:rgba(0,0,0,.5);}

@media (min-width:901px){
  .tgb-search-clear-btn{width:20px;height:20px;font-size:14px;right:8px;}
  .tgb-search-clear-wrap input{padding-right:32px !important;}
}