.search-header {
background: var(--dark);
padding: 28px 0;
}
.search-header__label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.35);
margin-bottom: 8px;
}
.search-header__bar {
display: flex;
gap: 0;
max-width: 600px;
}
.search-header__input {
flex: 1;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-right: none;
border-radius: 5px 0 0 5px;
padding: 10px 14px;
font-size: 14px;
color: #fff;
font-family: var(--font);
outline: none;
}
.search-header__input::placeholder {
color: rgba(255, 255, 255, 0.25);
}
.search-header__input:focus {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
}
.search-header__submit {
background: var(--orange);
border: none;
border-radius: 0 5px 5px 0;
padding: 0 18px;
cursor: pointer;
color: #fff;
font-size: 14px;
}
.search-header__meta {
margin-top: 10px;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
}
.search-header__meta strong {
color: rgba(255, 255, 255, 0.6);
} .search-body {
padding: 32px 0 56px;
} .zero-state {
text-align: center;
padding: 64px 0;
}
.zero-state i {
font-size: 40px;
color: var(--g2);
margin-bottom: 16px;
display: block;
}
.zero-state h2 {
font-size: 20px;
font-weight: 700;
color: var(--black);
margin-bottom: 8px;
}
.zero-state p {
font-size: 13px;
color: var(--g4);
}
@media (max-width: 767px) {
.search-header__input { font-size: 13px; padding: 9px 12px; }
.search-header__submit { padding: 0 14px; }
}