/* Final header and search polish for light/dark themes. */

.header-clean,
.header-clean.header-clean--mockup {
    box-shadow: none !important;
}

.header-search,
.header-clean .header-search {
    background: #f4f7fc !important;
    border: 1px solid rgba(17, 26, 54, .12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 8px 18px rgba(17, 26, 54, .08) !important;
    overflow: hidden !important;
}

.header-search input,
.header-clean .header-search input,
.header-search .search-input,
.header-clean input[type="search"] {
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    color: #0f172a !important;
    caret-color: #2358f6 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.header-search input:focus,
.header-clean input[type="search"]:focus {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.header-search input::selection,
.header-clean input[type="search"]::selection {
    background: rgba(35, 88, 246, .22) !important;
    color: #0f172a !important;
}

:root[data-theme="dark"] .header-clean,
:root[data-theme="dark"] .header-clean.header-clean--mockup {
    background: transparent !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
}

:root[data-theme="dark"] .header-clean__topbar,
:root[data-theme="dark"] .header-category-nav {
    background: transparent !important;
    border-color: rgba(148, 163, 184, .14) !important;
    box-shadow: none !important;
}

:root[data-theme="dark"] .header-clean__topbar {
    border: 0 !important;
}

:root[data-theme="dark"] .header-category-nav {
    border-top: 1px solid rgba(148, 163, 184, .12) !important;
}

:root[data-theme="dark"] .header-search,
:root[data-theme="dark"] .header-clean .header-search {
    background: #0b1324 !important;
    border-color: rgba(148, 163, 184, .34) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 24px rgba(0, 0, 0, .24) !important;
}

:root[data-theme="dark"] .header-search input,
:root[data-theme="dark"] .header-clean .header-search input,
:root[data-theme="dark"] .header-search .search-input,
:root[data-theme="dark"] .header-clean input[type="search"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    color: #f8fbff !important;
    caret-color: #6da1ff !important;
}

:root[data-theme="dark"] .header-search input::placeholder,
:root[data-theme="dark"] .header-clean input[type="search"]::placeholder {
    color: rgba(220, 231, 251, .66) !important;
}

:root[data-theme="dark"] .header-search input::selection,
:root[data-theme="dark"] .header-clean input[type="search"]::selection {
    background: rgba(109, 161, 255, .28) !important;
    color: #f8fbff !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .header-clean,
    :root:not([data-theme="light"]) .header-clean.header-clean--mockup {
        background: transparent !important;
        border-color: transparent !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    :root:not([data-theme="light"]) .header-clean__topbar,
    :root:not([data-theme="light"]) .header-category-nav {
        background: transparent !important;
        border-color: rgba(148, 163, 184, .14) !important;
        box-shadow: none !important;
    }

    :root:not([data-theme="light"]) .header-clean__topbar {
        border: 0 !important;
    }

    :root:not([data-theme="light"]) .header-category-nav {
        border-top: 1px solid rgba(148, 163, 184, .12) !important;
    }

    :root:not([data-theme="light"]) .header-search,
    :root:not([data-theme="light"]) .header-clean .header-search {
        background: #0b1324 !important;
        border-color: rgba(148, 163, 184, .34) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 24px rgba(0, 0, 0, .24) !important;
    }

    :root:not([data-theme="light"]) .header-search input,
    :root:not([data-theme="light"]) .header-clean .header-search input,
    :root:not([data-theme="light"]) .header-search .search-input,
    :root:not([data-theme="light"]) .header-clean input[type="search"] {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        color: #f8fbff !important;
        caret-color: #6da1ff !important;
    }
}