/* CENTER CRM 0.12.14 — unified animated search field system */
.center-search {
    --center-search-height: 44px;
    --center-search-radius: 12px;
    position: relative;
    min-width: 0;
    min-height: var(--center-search-height);
    border: 1px solid #383838 !important;
    border-radius: var(--center-search-radius) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,0)),
        #181818 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 0 0 0 rgba(246,197,67,0) !important;
    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
    isolation: isolate;
}

.center-search::before {
    content: none !important;
}

.center-search::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 26%, rgba(246,197,67,.052) 48%, transparent 70%);
    opacity: 0;
    transform: translateX(-13%);
    pointer-events: none;
    transition: opacity .2s ease, transform .34s cubic-bezier(.2,.8,.2,1);
}

.center-search:hover {
    border-color: #4a4432 !important;
    background:
        linear-gradient(180deg, rgba(246,197,67,.032), rgba(255,255,255,0)),
        #1b1b1b !important;
}

.center-search:hover::after {
    opacity: 1;
    transform: translateX(10%);
}

.center-search:focus-within,
.center-search.is-focused {
    border-color: rgba(246,197,67,.7) !important;
    background:
        linear-gradient(180deg, rgba(246,197,67,.055), rgba(246,197,67,.012)),
        #1b1b1b !important;
    box-shadow:
        0 0 0 3px rgba(246,197,67,.085),
        0 12px 30px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.035) !important;
    transform: translateY(-1px);
}

.center-search.is-invalid,
.center-search:has(.center-search__input[aria-invalid="true"]) {
    border-color: rgba(221,93,93,.72) !important;
    box-shadow: 0 0 0 3px rgba(221,93,93,.07) !important;
}

.center-search.is-disabled {
    border-color: #2d2d2d !important;
    background: #151515 !important;
    box-shadow: none !important;
    opacity: .68;
    transform: none !important;
}

.center-search__input,
.center-search input[type="search"],
.center-search input[inputmode="search"] {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: calc(var(--center-search-height) - 2px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 44px 0 43px !important;
    border: 0 !important;
    border-radius: calc(var(--center-search-radius) - 1px) !important;
    outline: 0 !important;
    background: transparent !important;
    color: #f1f1f1 !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: .82rem !important;
    font-weight: 680 !important;
    line-height: 1.2 !important;
    letter-spacing: -.006em !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    caret-color: #f6c543;
    transition: color .18s ease, opacity .18s ease !important;
}

.center-search__input::placeholder,
.center-search input[type="search"]::placeholder,
.center-search input[inputmode="search"]::placeholder {
    color: #707070 !important;
    opacity: 1 !important;
    font: inherit !important;
    font-size: .79rem !important;
    font-weight: 620 !important;
    letter-spacing: -.006em !important;
    transition: color .18s ease, opacity .18s ease !important;
}

.center-search:hover .center-search__input::placeholder,
.center-search:focus-within .center-search__input::placeholder {
    color: #8a8a8a !important;
}

.center-search:focus-within .center-search__input::placeholder {
    opacity: .78 !important;
}

.center-search__input:disabled {
    color: #777 !important;
    cursor: not-allowed;
}

.center-search__input::-webkit-search-decoration,
.center-search__input::-webkit-search-cancel-button,
.center-search__input::-webkit-search-results-button,
.center-search__input::-webkit-search-results-decoration,
.center-search input[type="search"]::-webkit-search-decoration,
.center-search input[type="search"]::-webkit-search-cancel-button,
.center-search input[type="search"]::-webkit-search-results-button,
.center-search input[type="search"]::-webkit-search-results-decoration {
    display: none !important;
    -webkit-appearance: none !important;
}

.center-search__icon {
    position: absolute !important;
    z-index: 3 !important;
    top: 50% !important;
    left: 14px !important;
    display: grid !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    color: #7c7c7c !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    transition: color .18s ease, transform .2s cubic-bezier(.2,.8,.2,1), filter .18s ease !important;
}

.center-search__icon svg {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    transform: none !important;
}

.center-search:hover .center-search__icon {
    color: #aaa !important;
}

.center-search:focus-within .center-search__icon,
.center-search.is-filled .center-search__icon {
    color: #e3ba45 !important;
}

.center-search:focus-within .center-search__icon {
    transform: translateY(-50%) scale(1.045) !important;
    filter: drop-shadow(0 0 7px rgba(246,197,67,.12));
}

.center-search__clear {
    position: absolute !important;
    z-index: 4 !important;
    top: 50% !important;
    right: 8px !important;
    display: grid !important;
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    min-height: 29px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    outline: 0 !important;
    background: transparent !important;
    color: #747474 !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transform: translateY(-50%) scale(1) !important;
    transition:
        color .16s ease,
        background .16s ease,
        border-color .16s ease,
        transform .16s cubic-bezier(.2,.8,.2,1),
        opacity .16s ease !important;
}

.center-search__clear::before,
.center-search__clear::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 1.6px;
    border-radius: 999px;
    background: currentColor;
}

.center-search__clear::before { transform: rotate(45deg); }
.center-search__clear::after { transform: rotate(-45deg); }

.center-search__clear:hover {
    border-color: #3a3528 !important;
    background: rgba(246,197,67,.075) !important;
    color: #f0c64a !important;
    transform: translateY(-50%) scale(1.04) !important;
}

.center-search__clear:focus-visible {
    border-color: rgba(246,197,67,.58) !important;
    color: #f6c543 !important;
    box-shadow: 0 0 0 3px rgba(246,197,67,.08) !important;
}

.center-search__clear:active {
    transform: translateY(-50%) scale(.94) !important;
}

.center-search__clear[hidden] {
    display: none !important;
}

.center-search.is-filled .center-search__clear:not([hidden]) {
    animation: center-search-clear-in .18s cubic-bezier(.2,.8,.2,1) both;
}

.center-search__legacy-icon {
    display: none !important;
}

@keyframes center-search-clear-in {
    from { opacity: 0; transform: translateY(-50%) scale(.76) rotate(-12deg); }
    to { opacity: 1; transform: translateY(-50%) scale(1) rotate(0deg); }
}

/* Search fields inside tight popovers stay compact but use the same visual language. */
.center-search.is-compact {
    --center-search-radius: 11px;
}
.center-search.is-compact .center-search__input {
    padding-left: 40px !important;
    padding-right: 40px !important;
    font-size: .76rem !important;
}
.center-search.is-compact .center-search__input::placeholder { font-size: .74rem !important; }
.center-search.is-compact .center-search__icon { left: 12px !important; }
.center-search.is-compact .center-search__clear { right: 6px !important; width: 27px !important; height: 27px !important; min-width: 27px !important; min-height: 27px !important; }

/* Keep original layout widths/grids, only replace their visual skin. */
.center-search.avito-global-search-box,
.center-search.delivery-search,
.center-search.schedule-toolbar-search,
.center-search.schedule-roster-search {
    gap: 0 !important;
    padding: 0 !important;
}

.center-search.avito-quick-reply-search,
.center-search.avito-quick-library-search,
.center-search.avito-inquiries-search,
.center-search.avito-api-search,
.center-search.client-db-search,
.center-search.admin-search-field,
.center-search.avito-blacklist-search-box {
    padding: 0 !important;
}

/* The old admin-search pseudo icon is replaced by the common SVG icon. */
.center-search.admin-search-field::before { content: none !important; }

@media (max-width: 720px) {
    .center-search {
        --center-search-radius: 11px;
    }
    .center-search__input,
    .center-search input[type="search"],
    .center-search input[inputmode="search"] {
        padding-left: 41px !important;
        padding-right: 41px !important;
        font-size: .8rem !important;
    }
    .center-search__icon { left: 12px !important; }
    .center-search__clear { right: 6px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .center-search,
    .center-search::after,
    .center-search__input,
    .center-search__input::placeholder,
    .center-search__icon,
    .center-search__clear {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}