/**
 * Homepage Search Styles
 * Version: 1.0.0
 */

/* CSS Variables */
:root {
    --search-bg: #2d2d2d;
    --search-card-bg: #1a1a1a;
    --search-border: #3d3d3d;
    --search-text: #ffffff;
    --search-text-muted: #9ca3af;
    --search-button: #ff6b35;
    --search-button-hover: #f72c00;
    --search-input-bg: #2d2d2d;
    --search-radius: 12px;
    --search-spacing: 1.5rem;
}

/* Main Wrapper */
.homepage-search-wrapper {
    background: var(--search-bg);
    padding: 3rem 0;
    margin: 2rem 0;
    border-radius: var(--search-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--search-border);
}

.homepage-search-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Header Section */
.search-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.search-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--search-text);
    margin: 0 0 0.5rem;
    line-height: 1.2;
}

.search-subtitle {
    font-size: 1.125rem;
    color: var(--search-text-muted);
    margin: 0;
}

/* Filters Wrapper */
.search-filters-wrapper {
    background: var(--search-card-bg);
    border-radius: var(--search-radius);
    padding: 2rem;
    border: 1px solid var(--search-border);
}

/* Search Filters Grid */
.search-filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Filter Group */
.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-label {
    font-size: 0.9375rem;
    color: var(--search-text-muted);
    margin-bottom: 0.5rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.filter-select {
    background: var(--search-input-bg);
    border: 1px solid var(--search-border);
    border-radius: 8px;
    color: var(--search-text);
    padding: 1rem 1.125rem;
    font-size: 1.375rem;
    transition: all 0.3s ease;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 9L2 5h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.125rem center;
    padding-right: 2.5rem;
}

.filter-select:hover:not(:disabled) {
    border-color: var(--search-button);
    background-color: rgba(255, 107, 53, 0.05);
}

.filter-select:focus {
    outline: none;
    border-color: var(--search-button);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

.filter-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.filter-select option {
    background: var(--search-bg);
    color: var(--search-text);
    padding: 0.5rem;
    font-size: 1.25rem;
}

/* Search Button */
.search-button {
    background: var(--search-button);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.search-button:hover:not(:disabled) {
    background: var(--search-button-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.search-button:active {
    transform: translateY(0);
}

.search-button:disabled,
.search-button.loading {
    opacity: 0.7;
    cursor: not-allowed;
}

.button-icon {
    width: 20px;
    height: 20px;
}

/* Loading State */
.search-loading {
    text-align: center;
    padding: 2rem;
    color: var(--search-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--search-border);
    border-top-color: var(--search-button);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .search-filters {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .homepage-search-wrapper {
        padding: 2rem 0;
        margin: 1rem 0;
        border-radius: 0;
    }
    
    .homepage-search-container {
        padding: 0 1rem;
    }
    
    .search-title {
        font-size: 2rem;
    }
    
    .search-subtitle {
        font-size: 1rem;
    }
    
    .search-filters-wrapper {
        padding: 1.5rem;
    }
    
    .search-filters {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .filter-select {
        padding: 1.125rem 1rem;
        font-size: 1.5rem;
    }
    
    .search-button {
        padding: 1.125rem 1.5rem;
        font-size: 1.0625rem;
    }
}

@media (max-width: 480px) {
    .homepage-search-wrapper {
        padding: 1.5rem 0;
    }
    
    .search-header {
        margin-bottom: 1.5rem;
    }
    
    .search-title {
        font-size: 1.75rem;
    }
    
    .search-filters-wrapper {
        padding: 1rem;
        border-radius: 8px;
    }
    
    .search-button {
        padding: 1rem 1.25rem;
    }
}

/* Dark mode enhancement */
@media (prefers-color-scheme: dark) {
    .filter-select {
        background-color: rgba(0, 0, 0, 0.3);
    }
    
    .filter-select:hover:not(:disabled) {
        background-color: rgba(255, 107, 53, 0.08);
    }
}

/* Animation for dropdown appearance */
.filter-select {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Focus visible for accessibility */
.filter-select:focus-visible,
.search-button:focus-visible {
    outline: 2px solid var(--search-button);
    outline-offset: 2px;
}

/* Hover effects for better UX */
.filter-group:hover .filter-label {
    color: var(--search-text);
    transition: color 0.2s ease;
}

/* Custom scrollbar for dropdowns */
.filter-select::-webkit-scrollbar {
    width: 8px;
}

.filter-select::-webkit-scrollbar-track {
    background: var(--search-card-bg);
}

.filter-select::-webkit-scrollbar-thumb {
    background: var(--search-border);
    border-radius: 4px;
}

.filter-select::-webkit-scrollbar-thumb:hover {
    background: var(--search-button);
}

/* ==========================================================================
   Former leak from car-catalog.css (shim)
   Until the catalog redesign car-catalog.css loaded on every page, and three of its generic rules also styled
   this block. It now loads on the catalog page only, so their effect is kept here, scoped to the block:
   the computed values the homepage got from it, measured by tests/frontend/leak-audit.mjs (the page is
   identical without car-catalog.css with these rules; re-run the audit before changing them).
     .filter-group { margin-bottom: 1rem }            (10px at the site's 10px root)
     .filter-group label { font-size: 13px }          (12px up to 480px; it outranks .filter-label)
     .filter-select:disabled { background: #0d0d0d }  (the shorthand also drops the chevron while disabled)
   ========================================================================== */

.homepage-search-wrapper .filter-group {
    margin-bottom: 10px;
}

.homepage-search-wrapper .filter-group label {
    font-size: 13px;
}

.homepage-search-wrapper .filter-select:disabled {
    background: #0d0d0d;
}

@media (max-width: 480px) {
    .homepage-search-wrapper .filter-group label {
        font-size: 12px;
    }
}

/* ==========================================================================
   UI v6 R6d: homepage-search restyle (task 6)
   Gated by [data-cz-ui="6"], so production is unchanged until launch. The :root --search-* variables and the OS-dark
   block above stay until R10; under v6 the variables are re-pointed at the --cz-* tokens, which follow the site theme
   (light / dark) instead of the OS. The element's inline colours (background, text, button) come from Bricks controls;
   under v6 the tokens win (!important), so the section matches the rest of the redesigned page.
   ========================================================================== */

/* «Популярные марки»: hidden unless v6 is on */
.search-popular {
    display: none;
}

[data-cz-ui="6"] .homepage-search-wrapper {
    --search-bg: var(--cz-surface);
    --search-card-bg: var(--cz-page);
    --search-border: var(--cz-line);
    --search-text: var(--cz-text);
    --search-text-muted: var(--cz-text-2);
    --search-button: var(--cz-red);
    --search-button-hover: var(--cz-red-hover);
    --search-input-bg: var(--cz-raised);
    --search-radius: var(--cz-r-card);
    background: var(--cz-surface) !important;
    border-radius: var(--cz-r-card);
    box-shadow: none;
    margin: 0;
    padding: var(--cz-sp-8) 0;
    font-family: var(--cz-font);
}

[data-cz-ui="6"] .homepage-search-wrapper .homepage-search-container {
    padding: 0 var(--cz-gutter-v6);
}

[data-cz-ui="6"] .homepage-search-wrapper .search-header {
    color: var(--cz-text) !important;
    margin-bottom: var(--cz-sp-6);
}

[data-cz-ui="6"] .homepage-search-wrapper .search-title {
    font-family: var(--cz-display);
    font-weight: var(--cz-display-weight);
    letter-spacing: var(--cz-display-track);
    text-transform: var(--cz-display-case);
    font-size: var(--cz-h2);
    line-height: 1.15;
    color: var(--cz-text);
}

[data-cz-ui="6"] .homepage-search-wrapper .search-subtitle {
    font-size: 16px;
    line-height: 1.5;
    color: var(--cz-text-2);
}

[data-cz-ui="6"] .homepage-search-wrapper .search-filters-wrapper {
    background: var(--cz-page);
    border: 1px solid var(--cz-line);
    border-radius: var(--cz-r-card);
    padding: var(--cz-sp-6);
}

[data-cz-ui="6"] .homepage-search-wrapper .search-filters {
    gap: var(--cz-sp-4);
    margin-bottom: var(--cz-sp-5);
}

[data-cz-ui="6"] .homepage-search-wrapper .filter-group {
    margin-bottom: 0;
}

[data-cz-ui="6"] .homepage-search-wrapper .filter-label,
[data-cz-ui="6"] .homepage-search-wrapper .filter-group label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--cz-text-2);
}

[data-cz-ui="6"] .homepage-search-wrapper .filter-group:hover .filter-label {
    color: var(--cz-text);
}

[data-cz-ui="6"] .homepage-search-wrapper .filter-select {
    min-height: 52px;
    padding: 0 var(--cz-sp-8) 0 var(--cz-sp-4);
    background-color: var(--cz-raised);
    border: 1px solid var(--cz-field-line);
    border-radius: var(--cz-r-ctl);
    color: var(--cz-text);
    font-family: var(--cz-font);
    font-size: 16px;
    animation: none;
}

[data-cz-ui="6"] .homepage-search-wrapper .filter-select:hover:not(:disabled) {
    background-color: var(--cz-pressed);
    border-color: var(--cz-line-strong);
}

[data-cz-ui="6"] .homepage-search-wrapper .filter-select:focus {
    border-color: var(--cz-line-strong);
    box-shadow: none;
}

[data-cz-ui="6"] .homepage-search-wrapper .filter-select:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--cz-focus);
}

[data-cz-ui="6"] .homepage-search-wrapper .filter-select:disabled {
    background-color: var(--cz-chip-fill);
    opacity: 0.6;
}

[data-cz-ui="6"] .homepage-search-wrapper .filter-select option {
    background: var(--cz-raised);
    color: var(--cz-text);
    font-size: 16px;
}

[data-cz-ui="6"] .homepage-search-wrapper .search-button {
    min-height: 52px;
    padding: 0 var(--cz-sp-6);
    background: var(--cz-red) !important;
    color: var(--cz-on-red);
    border-radius: var(--cz-r-btn);
    font-family: var(--cz-font);
    font-size: 16px;
    box-shadow: none;
    transition: background-color var(--cz-dur-1) var(--cz-ease), transform var(--cz-dur-1) var(--cz-ease);
}

[data-cz-ui="6"] .homepage-search-wrapper .search-button:hover:not(:disabled) {
    background: var(--cz-red-hover) !important;
    transform: none;
    box-shadow: none;
}

[data-cz-ui="6"] .homepage-search-wrapper .search-button:active {
    transform: translateY(1px);
}

[data-cz-ui="6"] .homepage-search-wrapper .search-button:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--cz-focus);
}

[data-cz-ui="6"] .homepage-search-wrapper .loading-spinner {
    border-color: var(--cz-line);
    border-top-color: var(--cz-red);
}

/* Chip row «Популярные марки» */
[data-cz-ui="6"] .homepage-search-wrapper .search-popular {
    display: block;
    margin-top: var(--cz-sp-6);
}

[data-cz-ui="6"] .homepage-search-wrapper .search-popular__title {
    margin: 0 0 var(--cz-sp-3);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cz-text-2);
}

[data-cz-ui="6"] .homepage-search-wrapper .search-popular__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cz-sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-cz-ui="6"] .homepage-search-wrapper .search-popular__item {
    margin: 0;
    padding: 0;
}

[data-cz-ui="6"] .homepage-search-wrapper .search-popular__chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--cz-sp-4);
    border: 1px solid var(--cz-chip-line);
    border-radius: var(--cz-r-pill);
    background: var(--cz-chip-fill);
    color: var(--cz-text);
    font-family: var(--cz-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color var(--cz-dur-1) var(--cz-ease), border-color var(--cz-dur-1) var(--cz-ease);
}

[data-cz-ui="6"] .homepage-search-wrapper .search-popular__chip:hover {
    background: var(--cz-pressed);
    border-color: var(--cz-line-strong);
}

[data-cz-ui="6"] .homepage-search-wrapper .search-popular__chip:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--cz-focus);
}

@media (max-width: 768px) {
    [data-cz-ui="6"] .homepage-search-wrapper {
        padding: var(--cz-sp-6) 0;
        border-radius: var(--cz-r-card);
    }

    [data-cz-ui="6"] .homepage-search-wrapper .search-filters-wrapper {
        padding: var(--cz-sp-4);
    }

    [data-cz-ui="6"] .homepage-search-wrapper .filter-select {
        padding: 0 var(--cz-sp-8) 0 var(--cz-sp-4);
        font-size: 16px;
    }

    [data-cz-ui="6"] .homepage-search-wrapper .search-button {
        padding: 0 var(--cz-sp-5);
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    [data-cz-ui="6"] .homepage-search-wrapper .filter-group label {
        font-size: 13px;
    }

    [data-cz-ui="6"] .homepage-search-wrapper .search-filters-wrapper {
        border-radius: var(--cz-r-card);
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-cz-ui="6"] .homepage-search-wrapper .search-button,
    [data-cz-ui="6"] .homepage-search-wrapper .search-popular__chip {
        transition: none;
    }
}