/* ============================================================================
   Редизайн правой колонки карточки товара (.product__layout--info):
   цена, выбор цвета/памяти/SIM/процессора/портов/размера/Wi-Fi, корзина.

   Форма оборачивается в видимую «карточку покупки» (рамка + мягкая тень),
   цена вынесена в отдельную светлую зону, выбор параметров и кнопка
   «В корзину» разделены линией — единая, предсказуемая структура блока.
   ----------------------------------------------------------------------------
   Файл подключается ПОСЛЕ main.min.css на странице товара (product.blade.php)
   и только дополняет/переопределяет внешний вид — структура формы, имена
   полей (color/memory/sim/...), id и JS-логика выбора вариации не затронуты.

   ОТКАТ: удалите строку с подключением этого файла в product.blade.php —
   верстка вернётся к прежнему виду main.min.css.
   ============================================================================ */

:root {
	--info-accent: #593c6d;
	--info-accent-mid: #6c537b;
	--info-accent-soft: #b584d3;
	--info-label-color: rgba(0, 0, 0, 0.5);
	--info-border: rgba(0, 0, 0, 0.65);
	--info-border-soft: rgba(0, 0, 0, 0.15);
	--info-card-border: rgba(0, 0, 0, 0.08);
}

/* ---------------------------------------------------------------------------
   «Карточка покупки» — у формы уже был белый фон и скруглённые углы,
   но не было ни рамки, ни тени, поэтому на белой странице она визуально
   не читалась как отдельный блок. Добавляем видимую границу карточки.
--------------------------------------------------------------------------- */
.product-info {
	border: 0.0625rem solid var(--info-card-border);
	box-shadow: 0 1.5rem 3rem rgba(17, 17, 17, 0.05);
}

/* Раньше это искусственно сужало выбор параметров и кнопку до ~492px,
   хотя блок цены занимал всю ширину карточки — расширяем до полной
   ширины карточки, чтобы колонка выглядела цельной на любом экране. */
.product__layout--info .product-info__wrapper {
	max-width: none;
}

/* ---------------------------------------------------------------------------
   Единый ритм отступов между блоками формы
--------------------------------------------------------------------------- */
.product__layout--info .product-info__section {
	margin-bottom: 1.75rem;
}

@media (min-width: 768px) {
	.product__layout--info .product-info__section {
		margin-bottom: 2rem;
	}
}

@media (min-width: 1200px) {
	.product__layout--info .product-info__section {
		margin-bottom: 2.25rem;
	}
}

/* Заголовки групп («Цвет», «Объём памяти» и т.д.) — лёгкие, приглушённые */
.product__layout--info .product-info__title {
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--info-label-color);
}

/* ---------------------------------------------------------------------------
   Цена — отдельная светлая зона, крупнее и увереннее, цифры не «прыгают»
   при переключении вариаций.

   На мобильной версии цена была мелкой (1.25rem = 20px) и не менялась
   вплоть до планшетного разрешения — на телефоне это главная цифра на
   странице, она должна быть заметна сразу, без всматривания.
--------------------------------------------------------------------------- */
.product-info__price {
	padding: 1.125rem 1.25rem;
	background: #f6f6f6;
	border-radius: 1rem;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.product-info__price {
		padding: 1.25rem 1.5rem;
	}
}

.product-info__price-current {
	flex-wrap: wrap;
	row-gap: 0.5rem;
}

.product-info__price-new,
.product-info__price-old {
	font-variant-numeric: tabular-nums;
}

/* Новая цена — крупная и жирная на любом экране */
.product-info__price-new {
	font-weight: 800;
	font-size: 1.875rem;
	color: var(--info-accent-mid);
}

/* Старая цена — заметно меньше новой и приглушённая, но не теряется */
.product-info__price-old {
	font-size: 1.125rem;
	font-weight: 500;
}

.product-info__price-badge {
	font-size: 0.8125rem;
	height: 1.75rem;
	padding: 0 1.125rem;
	box-shadow: 0 0.375rem 1rem rgba(181, 132, 211, 0.35);
}

@media (min-width: 480px) {
	.product-info__price-new {
		font-size: 2.125rem;
	}

	.product-info__price-old {
		font-size: 1.25rem;
	}

	.product-info__price-badge {
		font-size: 0.875rem;
		height: 1.875rem;
	}
}

@media (min-width: 820px) {
	.product-info__price-new {
		font-size: 2.375rem;
	}

	.product-info__price-old {
		font-size: 1.5rem;
	}

	.product-info__price-badge {
		font-size: 1rem;
		height: 2.125rem;
		padding: 0 1.5rem;
	}
}

@media (min-width: 1400px) {
	.product-info__price-new {
		font-size: 3rem;
	}

	.product-info__price-old {
		font-size: 1.75rem;
	}

	.product-info__price-badge {
		font-size: 1.25rem;
		height: 2.5rem;
	}
}

/* ---------------------------------------------------------------------------
   Цветовые сэмплы — hover, аккуратное выделение выбранного,
   понятные состояния «недоступно» / «недоступно с текущим выбором»
--------------------------------------------------------------------------- */
.product-info__color-item {
	display: block;
}

.product-info__color-swatch {
	box-shadow: 0 0 0 0 rgba(89, 60, 109, 0);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.product-info__color-item:not(.is-disabled):hover .product-info__color-swatch {
	transform: scale(1.08);
	border-color: var(--info-accent);
}

.product-info__color-item input:checked + .product-info__color-swatch {
	box-shadow: 0 0 0 0.1875rem rgba(89, 60, 109, 0.18);
}

.product-info__color-item.is-disabled .product-info__color-swatch {
	opacity: 0.3;
	filter: grayscale(1);
	cursor: not-allowed;
}

.product-info__color-item.is-disabled:hover .product-info__color-swatch {
	transform: none;
}

.product-info__color-item.is-soft-disabled .product-info__color-swatch {
	opacity: 0.4;
}

/* ---------------------------------------------------------------------------
   Плашки-опции (память, SIM, процессор, порты, размер, Wi-Fi)
--------------------------------------------------------------------------- */
.product-info__option-label {
	/* Плашка подстраивается под текст и не вылезает из карточки
	   (перенесено сюда из точечного инлайн-фикса на странице товара) */
	width: auto;
	min-width: 6.4375rem;
	max-width: 100%;
	padding: 0 1rem;
	box-sizing: border-box;
	white-space: normal;
	overflow-wrap: anywhere;
	line-height: 1.15;
	text-align: center;

	box-shadow: 0 0 0 0 rgba(89, 60, 109, 0);
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.product-info__option:not(.is-disabled):hover .product-info__option-label {
	border-color: var(--info-accent);
}

.product-info__option input:checked + .product-info__option-label {
	box-shadow: 0 0 0 0.1875rem rgba(89, 60, 109, 0.12);
}

.product-info__option.is-disabled .product-info__option-label {
	opacity: 0.35;
	cursor: not-allowed;
	border-style: solid;
}

.product-info__option.is-disabled:hover .product-info__option-label {
	border-color: var(--info-border);
}

.product-info__option.is-soft-disabled .product-info__option-label {
	opacity: 0.5;
	border-style: dashed;
}

/* ---------------------------------------------------------------------------
   Количество и кнопка «В корзину» — визуально отделены от выбора
   параметров тонкой линией, чтобы блок действия читался отдельно
--------------------------------------------------------------------------- */
.product-info__actions {
	flex-wrap: wrap;
	row-gap: 0.625rem;
	padding-top: 1.5rem;
	margin-top: -0.25rem;
	border-top: 0.0625rem solid var(--info-card-border);
}

.product-info__quantity-btn {
	border-radius: 50%;
	transition: background-color 0.15s ease;
}

.product-info__quantity-btn:hover {
	background-color: rgba(0, 0, 0, 0.06);
}

.btn--info {
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}

.btn--info:not(:disabled):hover {
	transform: translateY(-0.0625rem);
	box-shadow: 0 0.625rem 1.5rem rgba(108, 83, 123, 0.28);
}

/* ---------------------------------------------------------------------------
   «Запросить наличие товара»
--------------------------------------------------------------------------- */
.product-info__request-btn {
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.product-info__request-btn:hover {
	border-color: var(--info-accent);
}