/**
 * Cars Catalog — тёмная тема (главная AB Korea / meet-the-team стиль)
 * Подключается при [cars_catalog theme="dark"]
 */

/* Атмосферный фон: чёрный + несколько красных пятен */
.cars-catalog-shell{
  position:relative;
  isolation:isolate;
  width:100%;
  overflow:visible;
  background:#000
}
.cars-catalog-ambience{
  --mx:50%;
  --my:42%;
  position:absolute;
  top:0;bottom:0;
  left:50%;
  width:100vw;
  margin-left:-50vw;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:#000;
  opacity:1;
  transition:opacity .45s ease
}
/* Пока сетка короткая (загрузка), крупные красные пятна заливают весь блок — прячем */
.cars-catalog-shell:has(.cars-loading) .cars-catalog-ambience,
.cars-catalog-shell:has(.cars-empty) .cars-catalog-ambience,
.cars-catalog-shell:has(.cars-error) .cars-catalog-ambience{
  opacity:0;
  transition:none
}
.cars-catalog-ambience-defs{position:absolute;width:0;height:0;overflow:hidden}
.cars-catalog-ambience-fluid{
  position:absolute;inset:8% -8%;
  filter:blur(110px);
  transform:translate3d(calc((var(--mx) - 50%) * .08),calc((var(--my) - 42%) * .06),0);
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
  will-change:transform
}
.cars-catalog-blob{
  position:absolute;
  display:block;
  border-radius:50%;
  opacity:.42;
  filter:blur(56px);
  will-change:transform,border-radius;
  animation:cars-catalog-liquid-drift 40s ease-in-out infinite alternate;
  background:radial-gradient(circle at 42% 40%,rgba(208,0,16,.75) 0%,rgba(208,0,16,.24) 48%,transparent 74%);
  margin-top:0
}
@keyframes cars-catalog-liquid-drift{
  0%{transform:translate3d(0,-50%,0) scale(1);border-radius:58% 42% 54% 46% / 48% 56% 44% 52%}
  50%{transform:translate3d(3%,calc(-50% + 2%),0) scale(1.08);border-radius:42% 58% 48% 52% / 55% 45% 58% 42%}
  100%{transform:translate3d(-2%,calc(-50% - 2%),0) scale(1.03);border-radius:50% 50% 42% 58% / 46% 54% 48% 52%}
}
@media (prefers-reduced-motion:reduce){
  .cars-catalog-blob,
  .cars-catalog-ambience-fluid{animation:none!important;transition:none!important;transform:none!important}
}
@media (max-width:860px){
  .cars-catalog-ambience-fluid{filter:blur(90px);inset:10% -6%}
  .cars-catalog-blob{opacity:.36;filter:blur(40px)}
}

.cars-catalog-container.cars-catalog--dark {
    position:relative;z-index:1;
    background: transparent;
    color: #ffffff;
    font-family: "Hanken Grotesk", sans-serif;
}

.cars-catalog--dark .cars-catalog-title {
    color: #ffffff;
    font-weight: 600;
}

.cars-catalog--dark .cars-catalog-filters {
    background-color: #1a1a1a;
    border: 1px solid #2c2c2c;
    border-radius: 14px;
    color: #ffffff;
}

.cars-catalog--dark .filter-label,
.cars-catalog--dark .sorting-label,
.cars-catalog--dark .cars-count {
    color: #fff;
}

.cars-catalog--dark .cars-count span {
    color: #ef4444;
    font-weight: 700;
}

.cars-catalog--dark .filter-group select,
.cars-catalog--dark .filter-group input[type="text"],
.cars-catalog--dark .filter-group input[type="number"],
.cars-catalog--dark .date-input,
.cars-catalog--dark .sorting-select,
.cars-catalog--dark .year-select,
.cars-catalog--dark .month-select {
    background-color: #111111 !important;
    border: 1px solid #2c2c2c !important;
    color: #ffffff !important;
    border-radius: 10px;
}

.cars-catalog--dark .filter-group select:focus,
.cars-catalog--dark .filter-group input:focus,
.cars-catalog--dark .sorting-select:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px #ef4444;
    background-color: #161616 !important;
}

/* Кастомный селект марки с логотипами */
.cars-catalog--dark .brand-select-selected {
    background-color: #111111 !important;
    border: 1px solid #2c2c2c !important;
    color: #ffffff !important;
    min-height: 36px;
    height: 36px;
    padding: 0 32px 0 10px;
    border-radius: 8px;
    gap: 8px;
}
.cars-catalog--dark .brand-select-selected:after {
    color: #fff;
}
.cars-catalog--dark .brand-select-selected:hover {
    border-color: #3a3a3a !important;
}
.cars-catalog--dark .brand-select-selected:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px #ef4444;
}
.cars-catalog--dark .brand-select-dropdown {
    background-color: #1a1a1a !important;
    border: 1px solid #2c2c2c !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.cars-catalog--dark .brand-select-item {
    border-bottom-color: #2c2c2c;
    color: #ffffff;
}
.cars-catalog--dark .brand-select-item:hover {
    background-color: #222222 !important;
}
.cars-catalog--dark .brand-select-item.selected {
    background-color: rgba(239,68,68, 0.18) !important;
}
.cars-catalog--dark .brand-name {
    color: #ffffff !important;
    font-size: 13px;
}
.cars-catalog--dark .brand-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
    display: block !important;
    max-width: 22px !important;
    height: 22px !important;
    background: #ffffff;
    border-radius: 4px;
    padding: 2px;
    box-sizing: border-box;
}

.cars-catalog--dark .filter-button,
.cars-catalog--dark .toggle-button,
.cars-catalog--dark .center-expand-button {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    border-radius: 10px;
}

.cars-catalog--dark .filter-button:hover,
.cars-catalog--dark .toggle-button:hover {
    background-color: #dc2626 !important;
}

.cars-catalog--dark .reset-button {
    background-color: transparent !important;
    color: #fff !important;
    border: 1px solid #2c2c2c !important;
}

.cars-catalog--dark .reset-button:hover {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.cars-catalog--dark .fuel-list-container,
.cars-catalog--dark .options-hint {
    color: #fff;
}

.cars-catalog--dark .view-toggle-btn {
    background: #1a1a1a;
    border: 1px solid #2c2c2c;
    color: #fff;
    border-radius: 10px;
}

.cars-catalog--dark .view-toggle-btn.active,
.cars-catalog--dark .view-toggle-btn:hover {
    border-color: #ef4444;
    color: #ffffff;
    background: rgba(239,68,68, 0.14);
}

/* Карточки */
.cars-catalog--dark .car-card {
    background-color: #1a1a1a !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    border-radius: 14px !important;
    color: #ffffff;
}

.cars-catalog--dark .car-card:hover {
    border-color: rgba(239,68,68, 0.55) !important;
    background-color: #222222 !important;
    box-shadow: none !important;
}

.cars-catalog--dark .car-image {
    background-color: #0d0d0d !important;
}

.cars-catalog--dark .car-title,
.cars-catalog--dark .car-title-link {
    color: #ffffff !important;
    font-family: inherit !important;
}

.cars-catalog--dark .car-title-link:hover,
.cars-catalog--dark .car-title-link:focus {
    color: #ef4444 !important;
}

.cars-catalog--dark .car-price {
    color: #ffffff !important;
    border-bottom-color: #2c2c2c !important;
    font-family: inherit !important;
    justify-content: flex-start !important;
}

.cars-catalog--dark .car-price-secondary,
.cars-catalog--dark .car-price-secondary-value,
.cars-catalog--dark .car-price-secondary-label {
    color: #fff !important;
}

.cars-catalog--dark .car-meta,
.cars-catalog--dark .car-power-info,
.cars-catalog--dark .car-year,
.cars-catalog--dark .car-mileage,
.cars-catalog--dark .car-drive {
    color: #fff !important;
}

.cars-catalog--dark .price-info-icon {
    border-color: #2c2c2c;
    color: #fff;
}

.cars-catalog--dark .cars-empty,
.cars-catalog--dark .cars-loading {
    color: #fff;
    background: transparent;
    border-radius: 14px;
    border: 0;
}
/* Резервируем высоту сетки на время загрузки — секция сразу «как с карточками» */
.cars-catalog--dark .cars-catalog-grid:has(> .cars-loading),
.cars-catalog--dark #cars-catalog-grid:has(> .cars-loading){
  min-height:min(70vh, 880px)
}
.cars-catalog--dark .cars-catalog-grid > .cars-loading{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:inherit;
  width:100%;
  margin:0;
  padding:32px 16px;
  color:rgba(255,255,255,.55);
  font-size:.95rem;
  letter-spacing:.01em
}

.cars-catalog--dark .cars-catalog-pagination button,
.cars-catalog--dark .cars-catalog-pagination a {
    background: #1a1a1a;
    border: 1px solid #2c2c2c;
    color: #ffffff;
    border-radius: 8px;
}

.cars-catalog--dark .cars-catalog-pagination .active,
.cars-catalog--dark .cars-catalog-pagination button:hover {
    border-color: #ef4444;
    background: rgba(239,68,68, 0.14);
}

.cars-catalog--dark .select2-container--default .select2-selection--multiple {
    background: #111;
    border-color: #2c2c2c;
}

.cars-catalog--dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #ef4444;
    border-color: #ef4444;
}

/* Preview-режим на главной */
.cars-catalog--preview .cars-catalog-filters,
.cars-catalog--preview #toggle-filters-top,
.cars-catalog--preview .expand-filters-container {
    display: none !important;
}

.cars-catalog--preview .catalog-layout {
    display: block;
}

.cars-catalog--preview .cars-catalog-content {
    width: 100%;
}

.cars-catalog--preview .cars-catalog-pagination {
    display: none !important;
}

.cars-catalog-preview-more {
    margin-top: 24px;
    text-align: center;
}

.cars-catalog-preview-more .cars-catalog-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 10px;
    background: #ef4444;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
    transition: background 0.2s ease;
}

.cars-catalog-preview-more .cars-catalog-more-btn:hover {
    background: #dc2626;
    color: #fff !important;
}

/* Сетка в preview — карточки вертикально на главной */
.cars-catalog--preview.cars-catalog--dark .cars-catalog-grid.grid-view {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    align-items: start;
}

.cars-catalog--preview.cars-catalog--dark .cars-catalog-grid.grid-view .car-card {
    flex-direction: column;
    min-height: 0;
    height: auto;
    align-self: start;
}

.cars-catalog--preview.cars-catalog--dark .cars-catalog-grid.grid-view .car-image {
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 11;
}

@media (max-width: 1100px) {
    .cars-catalog--preview.cars-catalog--dark .cars-catalog-grid.grid-view {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 860px) {
    .cars-catalog--preview.cars-catalog--dark .cars-catalog-grid.grid-view {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .cars-catalog--preview.cars-catalog--dark .cars-catalog-grid.grid-view {
        grid-template-columns: 1fr;
    }
}

/* === Yarakiri: раскладка фильтров/карточек как на encar.ab-korea.ru === */
.cars-catalog--dark .catalog-layout{
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
  align-items:stretch !important;
}
.cars-catalog--dark .cars-catalog-filters{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  flex:none !important;
  box-sizing:border-box !important;
  padding:14px 16px !important;
  border-radius:14px !important;
  background:#1a1a1a !important;
  border:1px solid #2c2c2c !important;
}
.cars-catalog--dark .cars-catalog-content{
  width:100% !important;
  max-width:100% !important;
  flex:none !important;
  min-width:0 !important;
}
.cars-catalog--dark #cars-catalog-filters-form{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:12px 14px !important;
  align-items:start !important;
}
.cars-catalog--dark #cars-catalog-filters-form > .filter-row,
.cars-catalog--dark .filter-row{
  display:contents !important;
  margin:0 !important;
  width:auto !important;
  flex-direction:unset !important;
}
.cars-catalog--dark .filter-group,
.cars-catalog--dark .range-group,
.cars-catalog--dark .date-filter,
.cars-catalog--dark .filter-group.options-filter{
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
}
.cars-catalog--dark .cars-catalog-grid.grid-view{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:12px !important;
  align-items:stretch !important;
}
.cars-catalog--dark .cars-catalog-grid.grid-view .car-card,
.cars-catalog--dark .car-card{
  height:auto !important;
  min-height:0 !important;
  align-self:stretch !important;
}
.cars-catalog--dark .car-image{
  position:relative !important;
  width:100% !important;
  height:200px !important;
  min-height:200px !important;
  max-height:200px !important;
}
.cars-catalog--dark .car-price-secondary{display:none !important}
.cars-catalog--dark .cars-catalog-shell{
  background:#000 !important;
}
.cars-catalog--dark .cars-catalog-container{
  background:transparent !important;
  padding:0 0 24px !important;
}
@media (max-width:1200px){
  .cars-catalog--dark #cars-catalog-filters-form{grid-template-columns:repeat(3, minmax(0, 1fr)) !important}
  .cars-catalog--dark .cars-catalog-grid.grid-view{grid-template-columns:repeat(3, minmax(0, 1fr)) !important}
}
@media (max-width:900px){
  .cars-catalog--dark #cars-catalog-filters-form{grid-template-columns:repeat(2, minmax(0, 1fr)) !important}
  .cars-catalog--dark .cars-catalog-grid.grid-view{grid-template-columns:repeat(2, minmax(0, 1fr)) !important}
}
@media (max-width:580px){
  .cars-catalog--dark #cars-catalog-filters-form{grid-template-columns:1fr !important}
  .cars-catalog--dark .cars-catalog-grid.grid-view{grid-template-columns:1fr !important}
}