﻿/* Parts Finder — стили в духе product-group / pc_configurator */

.parts-finder-widget {
  --pf-bg: #eef6fc;
  --pf-bg-input: #fff;
  --pf-border: #d7ebf5;
  --pf-border-focus: rgba(0, 165, 212, 0.45);
  --pf-primary: #00a5d4;
  --pf-primary-hover: #0088b3;
  --pf-text: #000;
  --pf-text-accent: #003459;
  --pf-text-muted: #666;
  --pf-radius: 12px;
  --pf-radius-input: 8px;
  --pf-shadow: 0 1px 6px rgba(0, 52, 89, 0.06);
  --pf-shadow-dropdown: 0 8px 24px rgba(15, 23, 42, 0.1);
  --pf-option-hover-bg: #d7ebf5;
  --pf-option-hover-text: #003459;
  --pf-btn-bg: #1060C1;
  --pf-btn-hover: #1A6FD7;

  position: relative;
  margin: 20px 0;
  padding: 24px 28px;
  background: var(--pf-bg);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  box-shadow: var(--pf-shadow);
  overflow: visible;
}

.parts-finder-widget.container {
  width: 100%;
  max-width: 100%;
}

.parts-finder-widget[data-is-page="1"] {
  padding: 28px 32px;
  margin-bottom: 28px;
}

.parts-finder-widget[data-is-page="0"] {
  padding: 20px 24px;
  margin: 0 0 20px;
}

#column-left .parts-finder-widget,
#column-right .parts-finder-widget {
  padding: 18px 16px;
}

.parts-finder-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--pf-text-accent);
}

.parts-finder-widget[data-is-page="1"] .parts-finder-title {
  font-size: 22px;
  margin-bottom: 8px;
}

.parts-finder-subtitle {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--pf-text-muted);
}

.parts-finder-widget[data-is-page="0"] .parts-finder-subtitle {
  margin-bottom: 16px;
  font-size: 13px;
}

#column-left .parts-finder-widget .parts-finder-subtitle,
#column-right .parts-finder-widget .parts-finder-subtitle {
  margin-bottom: 14px;
}

/* Grid layout — wide block defaults to 2 columns, sidebar always 1 */
.parts-finder-widget .select-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

#column-left .parts-finder-widget .select-container,
#column-right .parts-finder-widget .select-container {
  grid-template-columns: 1fr;
  gap: 12px;
}

.parts-finder-widget .select-option label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pf-text-accent);
  line-height: 1.2;
}

.parts-finder-widget .select-option label strong {
  font-weight: 600;
}

.parts-finder-widget .select-option > span {
  display: block;
}

.parts-finder-widget .select-option select {
  width: 100%;
  min-height: 44px;
}

/* Select2 */
.parts-finder-widget .select2-container {
  width: 100% !important;
}

.parts-finder-widget .select2-container--default .select2-selection--single {
  background-color: var(--pf-bg-input);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-input);
  height: 44px;
  box-shadow: var(--pf-shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.parts-finder-widget .select2-container--default:not(.select2-container--disabled) .select2-selection--single:hover {
  border-color: var(--pf-primary);
  box-shadow: 0 2px 10px rgba(0, 165, 212, 0.12);
}

.parts-finder-widget .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 28px;
  padding: 8px 28px 8px 12px;
  color: var(--pf-text);
  font-size: 14px;
}

.parts-finder-widget .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--pf-text-muted);
}

.parts-finder-widget .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px;
  right: 0;
  width: 25px;
  top: 1px;
}

.parts-finder-widget .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border: 0;
  background-image: url("../image/sprite.svg#icon-select-arrow-down");
  background-position: right 5px center;
  background-repeat: no-repeat;
  background-size: 9px 5px;
  width: 15px;
  height: 42px;
  margin: 0;
  left: 0;
  top: 0;
}

.parts-finder-widget .select2-container--default.select2-container--focus .select2-selection--single,
.parts-finder-widget .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--pf-primary);
  box-shadow: 0 0 0 3px rgba(0, 165, 212, 0.3), 0 2px 10px rgba(0, 165, 212, 0.12);
  background-color: #fff;
}

.parts-finder-widget .select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: #f0f2f6;
  border-color: var(--pf-border);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.9;
}

.parts-finder-widget .select2-container--default.select2-container--disabled .select2-selection__rendered {
  color: #888;
}

/* Выпадающее меню */
.parts-finder-widget .select2-dropdown,
.parts-finder-select2-dropdown {
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-input);
  padding: 10px;
  box-shadow: var(--pf-shadow-dropdown);
  z-index: 1050;
  background: #fff;
}

.parts-finder-select2-dropdown.parts-finder-select2-drop-enter-active {
  animation: parts-finder-select2-drop-in 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform-origin: top center;
}

@keyframes parts-finder-select2-drop-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .parts-finder-select2-dropdown.parts-finder-select2-drop-enter-active {
    animation: none;
  }
}

.parts-finder-widget .select2-search--dropdown,
.parts-finder-select2-dropdown .select2-search--dropdown {
  padding: 0 2px 8px;
}

.parts-finder-widget .select2-container--default .select2-search--dropdown .select2-search__field,
.parts-finder-select2-dropdown .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-input);
  height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  background: #fff;
  box-shadow: none;
}

.parts-finder-widget .select2-container--default .select2-search--dropdown .select2-search__field:focus,
.parts-finder-select2-dropdown .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--pf-primary);
  box-shadow: 0 0 0 2px var(--pf-border-focus);
  outline: none;
}

.parts-finder-widget .select2-container--default .select2-results > .select2-results__options,
.parts-finder-select2-dropdown .select2-results > .select2-results__options {
  max-height: 260px;
  margin: 4px 2px 0;
  font-size: 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.parts-finder-widget .select2-results__option--selectable,
.parts-finder-select2-dropdown .select2-results__option--selectable {
  border-radius: 4px;
  padding: 8px 10px;
  line-height: 1.35;
}

.parts-finder-widget .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.parts-finder-select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--pf-option-hover-bg);
  color: var(--pf-option-hover-text);
}

.parts-finder-widget .select2-container--default .select2-results__option--selected,
.parts-finder-select2-dropdown .select2-results__option--selected {
  background-color: #e8f7fc;
  color: var(--pf-text-accent);
}

.parts-finder-widget .select2-container--default .select2-results__option--highlighted.select2-results__option--selected,
.parts-finder-select2-dropdown .select2-results__option--highlighted.select2-results__option--selected {
  background-color: var(--pf-option-hover-bg);
  color: var(--pf-option-hover-text);
  box-shadow: inset 3px 0 0 var(--pf-primary);
}

.parts-finder-widget .select2-container--default .select2-results__option--disabled,
.parts-finder-select2-dropdown .select2-results__option--disabled {
  color: #999;
}

/* Кнопка и валидация */
.parts-finder-widget .button-wrapper {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

#column-left .parts-finder-widget .button-wrapper,
#column-right .parts-finder-widget .button-wrapper {
  margin-top: 14px;
}

.parts-finder-widget .validation-message {
  color: #e72121;
  font-size: 13px;
  line-height: 1.4;
}

.parts-finder-widget .parts-finder-submit {
  min-width: 140px;
  height: 44px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 44px;
  background-color: var(--pf-btn-bg);
  border-color: var(--pf-btn-bg);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.parts-finder-widget .parts-finder-submit:hover,
.parts-finder-widget .parts-finder-submit:focus {
  background-color: var(--pf-btn-hover);
  border-color: var(--pf-btn-hover);
  box-shadow: 0 2px 10px rgba(16, 96, 193, 0.25);
}

#column-left .parts-finder-widget .parts-finder-submit,
#column-right .parts-finder-widget .parts-finder-submit {
  width: 100%;
}

@media (max-width: 1199px) {
  .parts-finder-widget .parts-finder-submit {
    width: 100%;
  }
}

/* Wide block: 4 selects + button in one row (desktop) */
@media (min-width: 1200px) {
  .parts-finder-widget .select-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 16px;
  }

  #column-left .parts-finder-widget .select-container,
  #column-right .parts-finder-widget .select-container {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .parts-finder-widget .parts-finder-form {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: nowrap;
  }

  #column-left .parts-finder-widget .parts-finder-form,
  #column-right .parts-finder-widget .parts-finder-form {
    display: block;
  }

  .parts-finder-widget .parts-finder-form .select-container {
    flex: 1;
    min-width: 0;
  }

  .parts-finder-widget .button-wrapper {
    margin-top: 0;
    flex-shrink: 0;
    flex-direction: column;
    align-items: stretch;
  }

  #column-left .parts-finder-widget .button-wrapper,
  #column-right .parts-finder-widget .button-wrapper {
    margin-top: 14px;
  }

  .parts-finder-widget .parts-finder-submit {
    width: auto;
    min-width: 120px;
  }

  #column-left .parts-finder-widget .parts-finder-submit,
  #column-right .parts-finder-widget .parts-finder-submit {
    width: 100%;
  }
}

/* Результаты поиска */
.parts-finder-results {
  margin-top: 32px;
}

.parts-finder-results-meta {
  margin-bottom: 16px;
  font-size: 18px;
}

.parts-finder-page .category-title-desc h1 {
  margin-bottom: 12px;
}

/* Hover-атрибуты карточки (catalogCard-extra) не должны обрезаться content_bottom / footer */
main:has(.parts-finder-page) {
  overflow: visible;
}

.parts-finder-page,
.parts-finder-page .container,
.parts-finder-page .container > .row,
.parts-finder-page #content {
  overflow: visible;
}

.parts-finder-page .category-page {
  overflow: visible;
  padding-bottom: 24px;
}

.parts-finder-page .category-page .product-grid.product-layout {
  position: relative;
}

.parts-finder-page .category-page .product-grid.product-layout:hover {
  z-index: 120;
}

.parts-finder-page #content {
  padding-bottom: 120px;
}

@media (max-width: 767px) {
  .parts-finder-widget {
    padding: 18px 16px;
  }

  .parts-finder-widget[data-is-page="1"] {
    padding: 20px 16px;
  }

  .parts-finder-widget .select-container {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .parts-finder-widget .parts-finder-form {
    display: block;
  }

  .parts-finder-widget .button-wrapper {
    margin-top: 16px;
  }

  .parts-finder-widget .parts-finder-submit {
    width: 100%;
  }
}
