.tgpt-search{
position:relative;
max-width:760px;
margin:auto;
border-radius:999px;
padding:2px;
background:linear-gradient(135deg,#1C39FF,#B131FA,#FD59CA);
box-sizing:border-box;
}

.tgpt-search-border{
position:absolute;
inset:-2px;
border-radius:999px;
background:linear-gradient(135deg,#1C39FF,#B131FA,#FD59CA);
filter:blur(22px);
opacity:.25;
z-index:0;
transition:opacity .35s ease;
pointer-events:none;
}

.tgpt-search:hover .tgpt-search-border{
opacity:.45;
}

.tgpt-search-inner{
position:relative;
z-index:2;
display:flex;
align-items:center;
height:55px;
padding:0 22px;
border-radius:999px;
background:#0f1118;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
box-sizing:border-box;
transition:.3s;
}

.tgpt-search:focus-within .tgpt-search-inner{
box-shadow:0 0 0 1px rgba(255,255,255,.08);
}

.tgpt-search-icon{
width:22px;
height:22px;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
opacity:.7;
margin-right:16px;
flex-shrink:0;
transition:.3s;
}

.tgpt-search:focus-within .tgpt-search-icon{
opacity:1;
color:#FCA4E1;
}

.tgpt-search-icon svg{
width:22px;
height:22px;
display:block;
fill:currentColor;
stroke:currentColor;
}

.tgpt-search-input,
.tgpt-search-input:focus{
flex:1;
width:100%;
background:transparent !important;
border:none !important;
outline:none !important;
box-shadow:none !important;
appearance:none;
-webkit-appearance:none;
color:#fff !important;
font-size:16px;
font-weight:400;
line-height:1.2;
padding:0 !important;
margin:0 !important;
min-height:auto !important;
}

.tgpt-search-input::placeholder{
color:#9ca3af;
opacity:1;
}

.tgpt-search-clear{
display:none !important;
align-items:center;
justify-content:center;
width:34px !important;
height:34px !important;
padding:0 !important;
margin:0 !important;
border:none !important;
outline:none !important;
border-radius:50% !important;
background:rgba(255,255,255,.08) !important;
color:#fff !important;
cursor:pointer;
flex-shrink:0;
transition:.25s;
}

.tgpt-search-clear:hover{
background:rgba(255,255,255,.15) !important;
}

.tgpt-search.show-clear .tgpt-search-clear{
display:flex !important;
}

.tgpt-search *,
.tgpt-search *:before,
.tgpt-search *:after{
box-sizing:border-box;
}

@media(max-width:767px){

.tgpt-search{
max-width:100%;
}

.tgpt-search-inner{
height:56px;
padding:0 18px;
}

.tgpt-search-input{
font-size:15px;
}

.tgpt-search-icon{
margin-right:14px;
}

}