/* =============================================================
   PIARNYA — Cart (global + page)
   Зависит от: variables.css, base.css
   ============================================================= */

/* ── ИКОНКА В ХЕДЕРЕ ────────────────────────────────────────── */
.cart-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	border: 1.5px solid var(--color-border);
	background: var(--color-bg);
	color: var(--color-text-muted);
	cursor: pointer;
	text-decoration: none;
	transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
	flex-shrink: 0;
}

.cart-btn:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.cart-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: var(--radius-full);
	background: var(--gradient-brand);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	font-family: var(--font-body);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	pointer-events: none;
}

@keyframes badge-pulse {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.4); }
	100% { transform: scale(1); }
}

.cart-badge--pulse {
	animation: badge-pulse 300ms var(--ease);
}

/* ── КНОПКА «В КОРЗИНУ» ─────────────────────────────────────── */
.btn-add-cart {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 44px;
	padding: 0 var(--sp-5);
	border-radius: var(--radius-md);
	border: 1.5px solid var(--color-border);
	background: var(--color-surface);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text-muted);
	cursor: pointer;
	transition:
		background   var(--dur-base) var(--ease),
		border-color var(--dur-base) var(--ease),
		color        var(--dur-base) var(--ease);
}

.btn-add-cart:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.btn-add-cart--added {
	background: var(--gradient-brand);
	border-color: transparent;
	color: #fff;
}

.btn-add-cart--added:hover {
	opacity: .85;
	color: #fff;
}

/* ── TOAST ───────────────────────────────────────────────────── */
#cart-toast {
	position: fixed;
	bottom: var(--sp-8);
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: var(--_gray-900);
	color: #fff;
	font-size: var(--text-sm);
	font-weight: 600;
	padding: var(--sp-3) var(--sp-6);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-lg);
	z-index: 9999;
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
	pointer-events: none;
	white-space: nowrap;
}

#cart-toast.cart-toast--show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

#cart-toast.cart-toast--hide {
	opacity: 0;
	transform: translateX(-50%) translateY(10px);
}

/* ── СТРАНИЦА КОРЗИНЫ ────────────────────────────────────────── */
.cart-page-hero {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	padding: var(--sp-12) 0 var(--sp-16);
}

.cart-page-hero__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
}

.cart-page-hero__title {
	font-size: clamp(var(--text-4xl), 6vw, var(--text-5xl));
	margin: 0;
}

.cart-page-hero__meta {
	font-size: var(--text-base);
	color: var(--color-text-muted);
	max-width: none;
}

/* CSS display: grid переопределяет [hidden] атрибут — фиксируем явно */
#cart-empty[hidden],
#cart-filled[hidden] { display: none !important; }

/* Layout: список + форма */
.cart-page-body {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: var(--sp-10);
	align-items: start;
}

/* Список услуг */
.cart-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.cart-item {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	padding: var(--sp-6);
	border-radius: var(--radius-xl);
	border: 1.5px solid var(--color-border);
	background: var(--color-bg);
	transition: box-shadow var(--dur-base) var(--ease);
}

.cart-item:hover {
	box-shadow: var(--shadow-sm);
}

.cart-item__info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.cart-item__service {
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.cart-item__title {
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--color-text);
}

.cart-item__price {
	font-size: var(--text-sm);
	font-weight: 700;
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
}

.cart-item__remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-md);
	border: none;
	background: var(--color-surface);
	color: var(--color-text-muted);
	cursor: pointer;
	flex-shrink: 0;
	transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.cart-item__remove:hover {
	background: #FEE2E2;
	color: var(--color-error);
}

/* ── МЕТА / ПАРАМЕТРЫ ПОЗИЦИИ ────────────────────────────────── */
.cart-item__meta {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	font-weight: 500;
}

/* ── УПРАВЛЕНИЕ ПОЗИЦИЕЙ (qty + edit + remove) ───────────────── */
.cart-item__controls {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	flex-shrink: 0;
}

.cart-item__qty {
	display: flex;
	align-items: center;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.cart-item__qty-btn {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-lg);
	font-weight: 400;
	color: var(--color-text-muted);
	background: var(--color-surface);
	border: none;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.cart-item__qty-btn:hover {
	background: var(--color-surface-2);
	color: var(--color-primary);
}

.cart-item__qty-val {
	min-width: 28px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-text);
	border-left: 1.5px solid var(--color-border);
	border-right: 1.5px solid var(--color-border);
}

.cart-item__edit {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 32px;
	padding: 0 var(--sp-3);
	border-radius: var(--radius-md);
	border: 1.5px solid var(--color-border);
	background: var(--color-surface);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-text-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.cart-item__edit:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* ── ИТОГОВАЯ СУММА ──────────────────────────────────────────── */
.cart-total {
	margin-top: var(--sp-5);
	padding: var(--sp-6);
	border-radius: var(--radius-xl);
	background: var(--color-surface);
	border: 1.5px solid var(--color-border);
}

.cart-total[hidden] { display: none !important; }

.cart-total__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	flex-wrap: wrap;
}

.cart-total__label {
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-text-muted);
}

.cart-total__value {
	font-family: var(--font-display);
	font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
	font-weight: 700;
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
}

.cart-total__note {
	font-size: var(--text-xs);
	color: var(--color-text-subtle);
	margin: var(--sp-2) 0 0;
}

/* ── АДАПТИВ CONTROLS ────────────────────────────────────────── */
@media (max-width: 640px) {
	.cart-item {
		flex-direction: column;
		align-items: flex-start;
	}

	.cart-item__controls {
		width: 100%;
		justify-content: flex-end;
	}
}

/* Форма в корзине */
.cart-form-wrap {
	position: sticky;
	top: calc(var(--header-total-h) + var(--sp-8));
	background: var(--color-surface);
	border-radius: var(--radius-xl);
	border: 1.5px solid var(--color-border);
	padding: var(--sp-8);
}

.cart-form-wrap h2 {
	font-size: var(--text-2xl);
	margin-bottom: var(--sp-6);
}

.cart-form {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.cart-form .lead-form__field { display: flex; flex-direction: column; gap: var(--sp-2); }
.cart-form .lead-form__label { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); }
.cart-form .lead-form__input {
	width: 100%; height: 48px; padding: 0 var(--sp-4);
	border-radius: var(--radius-md); border: 1.5px solid var(--color-border);
	background: var(--color-bg); font-family: var(--font-body);
	font-size: var(--text-base); color: var(--color-text); outline: none;
	transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.cart-form .lead-form__input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(204,31,160,.12); }
.cart-form .lead-form__input.is-invalid { border-color: var(--color-error); }
.cart-form .lead-form__textarea { height: auto; padding: var(--sp-3) var(--sp-4); resize: vertical; min-height: 80px; }
.cart-form .lead-form__privacy { font-size: var(--text-xs); color: var(--color-text-subtle); text-align: center; }
.cart-form .lead-form__privacy a { color: var(--color-text-muted); text-decoration: underline; }

.cart-submit {
	width: 100%;
	height: 52px;
	margin-top: var(--sp-2);
}

/* Пустая корзина */
.cart-empty-state {
	text-align: center;
	padding: var(--sp-24) 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-6);
}

.cart-empty-state h2 {
	font-size: var(--text-3xl);
	color: var(--color-text);
}

.cart-empty-state p {
	font-size: var(--text-lg);
	color: var(--color-text-muted);
	max-width: 40ch;
	margin-inline: auto;
}

/* Успех */
.cart-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-5);
	text-align: center;
	padding: var(--sp-20) 0;
}

.cart-success h2 { font-size: var(--text-3xl); margin: 0; }
.cart-success p  { font-size: var(--text-lg); color: var(--color-text-muted); max-width: none; }

/* ── АДАПТИВ ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.cart-page-body {
		grid-template-columns: 1fr;
	}

	.cart-form-wrap {
		position: static;
	}
}

@media (max-width: 640px) {
	#cart-toast { white-space: normal; text-align: center; width: calc(100% - 32px); }
}