/*
 * Карточка модели (box_model) в выпадашке поиска.
 * Цвет — кружок со средним цветом фото устройства (kv_get_avg_color в
 * inc/ajax.php; у pa_cvet нет hex в term meta, поэтому цвет считаем по фото).
 * Память — текстовые чипсы. Клик по цвету/памяти только выбирает вариант
 * (см. js/search-model-card.js), переход — отдельной кнопкой .card_go.
 * Тултип на кружке — сайтовый .box_tooltip как есть.
 */

.search_result .inner_body .col_right .box_row .box.box_model {
	position: relative;
}

/* .card_link раньше был пустым <a>, растянутым сайтовым правилом
   ".box a{position:absolute;inset:0}" на всю карточку — из-за этого клики по
   свотчам/чипсам ниже перехватывались им. Теперь это настоящая ссылка,
   оборачивающая только фото+название+цену, и мы явно отменяем тот inset:0. */
.search_result .inner_body .col_right .box_row .box.box_model a.card_link {
	position: static;
	display: block;
}

/* Цвет — кружки */

.search_result .inner_body .col_right .box_row .box.box_model .card_swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
	position: relative;
	/* выше .card_chips и .card_go: тултип цвета вылезает за пределы кружка
	   вниз и не должен прятаться под тем, что рисуется после него в DOM */
	z-index: 4;
}

.search_result .inner_body .col_right .box_row .box.box_model .card_swatches .swatch_color {
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.12);
	cursor: pointer;
	transition: 0.2s;
	box-sizing: border-box;
}

.search_result .inner_body .col_right .box_row .box.box_model .card_swatches .swatch_color:hover {
	transform: scale(1.15);
	border-color: var(--main-color);
}

/* Выбранный (не означает переход — переход только через .card_go) */
.search_result .inner_body .col_right .box_row .box.box_model .card_swatches .swatch_color.is-selected {
	transform: scale(1.2);
	border: 2px solid var(--main-color);
	box-shadow: 0 0 0 2px #FFFFFF inset;
}

/* Память — чипсы */

.search_result .inner_body .col_right .box_row .box.box_model .card_chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
	position: relative;
	z-index: 2;
}

.search_result .inner_body .col_right .box_row .box.box_model .card_chips .chip {
	font-size: 12px;
	line-height: 1;
	color: #4A4F57;
	background: #F2F4FA;
	border: 1px solid #E3E3E3;
	border-radius: 4px;
	padding: 5px 8px;
	cursor: pointer;
	transition: 0.2s;
}

.search_result .inner_body .col_right .box_row .box.box_model .card_chips .chip:hover {
	border-color: var(--main-color);
	color: #1B1B1B;
}

.search_result .inner_body .col_right .box_row .box.box_model .card_chips .chip.is-selected {
	border-color: var(--main-color);
	background: var(--main-color);
	color: #FFFFFF;
}

/* Кнопка перехода — единственное, что реально уводит с этой карточки:
   кружок со стрелкой + подпись "Перейти" рядом */

.search_result .inner_body .col_right .box_row .box.box_model .card_go {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	cursor: pointer;
	position: relative;
	z-index: 3;
}

.search_result .inner_body .col_right .box_row .box.box_model .card_go_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--main-color);
	flex-shrink: 0;
	transition: 0.2s;
}

.search_result .inner_body .col_right .box_row .box.box_model .card_go_label {
	font-size: 13px;
	font-weight: 600;
	color: var(--main-color);
	transition: 0.2s;
}

.search_result .inner_body .col_right .box_row .box.box_model .card_go:hover .card_go_icon {
	transform: translateX(3px);
}

.search_result .inner_body .col_right .box_row .box.box_model .card_go:hover .card_go_label {
	color: #1B1B1B;
}

[data-theme=dark_theme] .search_result .inner_body .col_right .box_row .box.box_model .card_go:hover .card_go_label {
	color: #FFFFFF;
}

[data-theme=dark_theme] .search_result .inner_body .col_right .box_row .box.box_model .card_chips .chip {
	background: #2A2C32;
	border-color: #3A3D45;
	color: #C7CAD1;
}

[data-theme=dark_theme] .search_result .inner_body .col_right .box_row .box.box_model .card_swatches .swatch_color {
	border-color: rgba(255, 255, 255, 0.2);
}

[data-theme=dark_theme] .search_result .inner_body .col_right .box_row .box.box_model .card_swatches .swatch_color.is-selected {
	box-shadow: 0 0 0 2px #1E1F24 inset;
}