.cf-search-form {
position: relative;
width: 360px;
height: 45px;
max-width: 100%;
}
@media (max-width: 767px) {
.cf-search-form { width: 90%; }
}
.cf-search-box {
display: flex;
align-items: center;
height: 100%;
background-color: #ffffff;
border: 1px solid #3c3c3c;
border-radius: 30px;
padding: 0 15px;
box-sizing: border-box;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
} .cf-search-box:focus-within {
border-color: #000000;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
}
.cf-search-icon {
width: 14px;
height: 14px;
fill: #888888;
flex-shrink: 0;
margin-right: 10px;
}
.cf-search-input {
flex-grow: 1;
min-width: 0;
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
font-size: 14px;
padding: 0;
color: #888888;
}
.cf-search-input::placeholder { color: #c8c8c8; }
.cf-search-input::-webkit-search-decoration,
.cf-search-input::-webkit-search-cancel-button { display: none; } .cf-search-submit { display: none; } .cf-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
} .cf-search-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 100%;
min-width: 260px;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
padding: 14px 0;
z-index: 999999;
display: none;
box-sizing: border-box;
}
.cf-search-dropdown.is-active { display: block; }
.cf-dropdown-header {
padding: 2px 18px 8px;
font-size: 13px;
font-weight: 700;
color: #1a1a1a;
}
.cf-dropdown-list {
list-style: none;
margin: 0;
padding: 0;
}
.cf-dropdown-item {
display: flex;
align-items: center;
padding: 8px 18px;
font-size: 15px;
color: #333333;
text-decoration: none;
transition: background-color 0.15s ease;
cursor: pointer;
} .cf-dropdown-item span {
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.cf-dropdown-item:hover,
.cf-dropdown-item.is-focused {
background-color: #f4f7f9;
color: #000000;
}
.cf-dropdown-icon {
width: 14px;
height: 14px;
fill: none;
stroke: #666666;
stroke-width: 2;
margin-right: 12px;
flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
.cf-search-box,
.cf-dropdown-item { transition: none; }
} @media (max-width: 767px) {
.cf-search-input {
font-size: 16px;
}
}
html, body {
overflow-x: hidden;
} .cf-search-form {
position: relative;
width: 360px;
height: 45px;
max-width: 100%;
}
@media (max-width: 767px) {
.cf-search-form { width: 90%; }
}
.cf-search-box {
display: flex;
align-items: center;
height: 100%;
background-color: #ffffff;
border: 1px solid #3c3c3c;
border-radius: 30px;
padding: 0 15px;
box-sizing: border-box;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
} .cf-search-box:focus-within {
border-color: #000000;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
}
.cf-search-icon {
width: 14px;
height: 14px;
fill: #888888;
flex-shrink: 0;
margin-right: 10px;
}
.cf-search-input {
flex-grow: 1;
min-width: 0;
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
font-size: 14px;
padding: 0;
color: #888888;
}
.cf-search-input::placeholder { color: #c8c8c8; }
.cf-search-input::-webkit-search-decoration,
.cf-search-input::-webkit-search-cancel-button { display: none; } .cf-search-submit { display: none; } .cf-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
} .cf-search-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 100%;
min-width: 260px;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
padding: 14px 0;
z-index: 999999;
display: none;
box-sizing: border-box;
}
.cf-search-dropdown.is-active { display: block; }
.cf-dropdown-header {
padding: 2px 18px 8px;
font-size: 13px;
font-weight: 700;
color: #1a1a1a;
}
.cf-dropdown-list {
list-style: none;
margin: 0;
padding: 0;
}
.cf-dropdown-item {
display: flex;
align-items: center;
padding: 8px 18px;
font-size: 15px;
color: #333333;
text-decoration: none;
transition: background-color 0.15s ease;
cursor: pointer;
} .cf-dropdown-item span {
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.cf-dropdown-item:hover,
.cf-dropdown-item.is-focused {
background-color: #f4f7f9;
color: #000000;
}
.cf-dropdown-icon {
width: 14px;
height: 14px;
fill: none;
stroke: #666666;
stroke-width: 2;
margin-right: 12px;
flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
.cf-search-box,
.cf-dropdown-item { transition: none; }
} @media (max-width: 767px) {
.cf-search-input {
font-size: 16px;
}
}
html, body {
overflow-x: hidden;
}