/* ==========================================================================
United Music — Search Overlay 2025 (Fancybox inline)
Prefix:um-search-
========================================================================== */
/**/
@media (min-width:769px){
.fancybox__backdrop{
background:rgba(0, 0, 0, 0.28) !important;
transition:opacity 200ms ease-out;
}
}
@media (max-width:768px){
.fancybox__backdrop{
background:rgba(0, 0, 0, 0.18) !important;
transition:opacity 180ms ease-out;
}
}
/**/
.um-search-trigger{
display:flex;
align-items:center;
gap:10px;
height:42px;
max-width:520px;
width:100%;
background:#fff;
border:1px solid #e6e6e6;
border-radius:3px;
padding:0 10px;
box-sizing:border-box;
}
.um-search-trigger__icon{
width:20px;
height:20px;
flex:0 0 auto;
opacity:0.7;
}
.um-search-trigger__input{
border:0;
outline:0;
width:100%;
height:40px;
font-size:14px;
background:transparent;
color:inherit;
padding:0;
}
.um-search-trigger__input::placeholder{
color:rgba(0,0,0,0.45);
}
.um-search-trigger:focus-within{
border-color:rgba(0, 191, 150, 0.65);
box-shadow:0 0 0 2px rgba(0, 191, 150, 0.12);
}
/**/
#UMSearchBox{
width:min(760px, calc(100vw - 28px));
max-width:760px;
background:#fff;
border-radius:6px;                 /**/
padding:18px 18px 10px;
box-sizing:border-box;
}
@media (max-width:768px){
#UMSearchBox{
width:100vw;
max-width:none;
height:100vh;
border-radius:0;                 /**/
padding:14px 14px 8px;
}
}
/**/
.um-search-modal__top{
display:grid;
grid-template-columns:1fr auto;
gap:10px;
align-items:center;
margin-bottom:12px;
}
.um-search-input{
display:flex;
align-items:center;
gap:10px;
border:1px solid #e6e6e6;
border-radius:3px;
padding:0 12px;
height:44px;
box-sizing:border-box;
background:#fafafa;
}
.um-search-input:focus-within{
border-color:rgba(0, 191, 150, 0.65);
box-shadow:0 0 0 2px rgba(0, 191, 150, 0.12);
background:#fff;
}
.um-search-input__icon{
width:18px;
height:18px;
flex:0 0 auto;
opacity:0.75;
}
.um-search-input__field{
width:100%;
border:0;
outline:0;
height:42px;
font-size:15px;
background:transparent;
padding:0;
}
.um-search-input__clear{
border:0;
background:transparent;
cursor:pointer;
width:34px;
height:34px;
border-radius:6px;
opacity:0.6;
font-size:20px;
line-height:1;
}
.um-search-input__clear:hover{opacity:0.9; background:rgba(0,0,0,0.04)}
.um-search-close{
border:0;
background:transparent;
cursor:pointer;
width:44px;
height:44px;
border-radius:6px;
opacity:0.65;
font-size:22px;
line-height:1;
}
.um-search-close:hover{opacity:0.95; background:rgba(0,0,0,0.04)}
/**/
.um-search-tabs{
display:none;
gap:12px;
border-bottom:1px solid #eee;
padding:0 2px 8px;
margin-bottom:10px;
overflow-x:auto;
}
.um-search-tabs__btn{
border:0;
background:transparent;
cursor:pointer;
font-size:14px;
padding:8px 6px;
white-space:nowrap;
opacity:0.8;
border-bottom:2px solid transparent;
}
.um-search-tabs__btn.is-active{
opacity:1;
border-bottom-color:rgba(0,0,0,0.75);
font-weight:600;
}
@media (max-width:768px){
.um-search-tabs{display:flex}
}
/**/
.um-search-body{
max-height:min(62vh, 520px);
overflow:auto;
padding-right:2px;
}
@media (max-width:768px){
.um-search-body{
max-height:calc(100vh - 120px);
}
}
.um-search-section{
padding:10px 2px;
}
.um-search-section__head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:8px;
}
.um-search-section__title{
font-size:12px;
letter-spacing:0.03em;
text-transform:uppercase;
opacity:0.7;
}
.um-search-section__action{
border:0;
background:transparent;
cursor:pointer;
width:34px;
height:34px;
border-radius:6px;
opacity:0.7;
}
.um-search-section__action:hover{opacity:1; background:rgba(0,0,0,0.04)}
/**/
.um-search-list{
list-style:none;
margin:0;
padding:0;
}
.um-search-item{
display:grid;
grid-template-columns:56px 1fr;
gap:12px;
align-items:center;
padding:10px 8px;
border-bottom:1px solid #eee;
cursor:pointer;
border-radius:3px;                 /**/
}
.um-search-item:hover{
background:rgba(0,0,0,0.03);
}
.um-search-item__thumb{
width:56px;
height:56px;
object-fit:contain;
display:block;
}
.um-search-item__main{
display:grid;
grid-template-columns:1fr auto;
grid-template-areas:
"title price"
"meta  price";
row-gap:6px;
column-gap:14px;
align-items:start;
min-width:0;
}
.um-search-item__title{
grid-area:title;
min-width:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
font-size:14px;
}
.um-search-item__meta{
grid-area:meta;
min-width:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
font-size:12px;
opacity:0.75;
}
.um-search-item__price{
grid-area:price;
justify-self:end;
text-align:right;
white-space:nowrap;
font-size:13px;
font-weight:600;
}
@media (max-width:768px){
.um-search-item{
grid-template-columns:48px 1fr;
}
.um-search-item__thumb{
width:48px;
height:48px;
}
.um-search-item__title{
white-space:normal;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.um-search-item__meta{
white-space:normal;
overflow:visible;
text-overflow:clip;
}
}
/**/
.um-search-textitem{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:10px 8px;
border-bottom:1px solid #eee;
cursor:pointer;
border-radius:3px;
}
.um-search-textitem:hover{background:rgba(0,0,0,0.03)}
.um-search-textitem__label{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.um-search-textitem__count{
opacity:0.6;
font-variant-numeric:tabular-nums;
}
.um-search-divider{
height:1px;
background:#eee;
margin:10px 0;
}
/**/
.um-search-seeall{
padding:12px 8px;
border-bottom:1px solid #eee;
cursor:pointer;
border-radius:3px;
font-weight:600;
}
.um-search-seeall:hover{background:rgba(0,0,0,0.03)}
/**/
.um-search-mark{
font-weight:700;
}
/**/
.um-search-empty,
.um-search-loading,
.um-search-error{
padding:12px 8px;
opacity:0.75;
border-bottom:1px solid #eee;
}
/**/
.um-search-trigger__input::-webkit-search-cancel-button,
.um-search-trigger__input::-webkit-search-decoration,
.um-search-input__field::-webkit-search-cancel-button,
.um-search-input__field::-webkit-search-decoration{
-webkit-appearance:none;
appearance:none;
display:none;
}
/**/
.um-search-trigger__input::-ms-clear,
.um-search-input__field::-ms-clear{
display:none;
width:0;
height:0;
}