/**
 * MyCosmetic Core — стили режимов цен A/B/C.
 * Использует токены темы (--wp--preset--color--*) с безопасными фолбэками.
 */

:root {
	--mc-navy: var(--wp--preset--color--navy, #1C235B);
	--mc-sky: var(--wp--preset--color--sky, #EAF3FC);
	--mc-gray: var(--wp--preset--color--gray, #6B7280);
	--mc-tg: var(--wp--preset--color--telegram, #229ED9);
}

/* ---- Плашка-пояснение в каталоге ---- */
.mc-price-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 20px;
	padding: 14px 16px;
	background: var(--mc-sky);
	border: 1px solid rgba(28, 35, 91, 0.12);
	border-radius: 14px;
	color: var(--mc-navy);
}

.mc-price-note .mc-ico-lock {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--mc-navy);
}

.mc-price-note p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.45;
}

/* ---- Вуаль вместо цены ---- */
.mc-veil {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 700;
	line-height: 1.2;
	border-radius: 8px;
	padding: 4px 10px;
}

.mc-veil .mc-ico-lock {
	flex: 0 0 auto;
}

.mc-veil--cart {
	color: var(--mc-navy);
	background: var(--mc-sky);
}

.mc-veil--request {
	color: var(--mc-tg);
	background: rgba(34, 158, 217, 0.10);
}

/* ---- Кнопка Telegram ---- */
.mc-tg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 18px;
	border-radius: 40px;
	background: var(--mc-tg);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.2;
	transition: filter 0.15s ease, transform 0.05s ease;
}

.mc-tg-btn:hover {
	filter: brightness(0.94);
	color: #fff;
}

.mc-tg-btn:active {
	transform: translateY(1px);
}

.mc-tg-btn .mc-ico-tg {
	flex: 0 0 auto;
}

/* Призрачный вариант — для доп-кнопки при режиме B */
.mc-tg-btn--ghost {
	background: transparent;
	color: var(--mc-tg);
	border: 1.5px solid var(--mc-tg);
	margin-top: 8px;
	padding: 10px 18px;
}

.mc-tg-btn--ghost:hover {
	background: rgba(34, 158, 217, 0.08);
	color: var(--mc-tg);
	filter: none;
}

/* На странице товара блок Telegram-кнопки */
.mc-single-tg {
	margin: 16px 0 4px;
	max-width: 360px;
}

/* В карточке каталога вуаль-цена выравнивается как обычная цена */
.mc-card .mc-veil,
ul.products li.product .mc-veil {
	margin: 2px 0 6px;
}

/* ---- «Добавить в комментарий» (режим C) ---- */
.mc-req-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 18px;
	border: 0;
	border-radius: 40px;
	background: var(--wp--preset--color--blue, #5B86D6);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: filter .15s ease, transform .05s ease;
}

.mc-req-btn:hover { filter: brightness(.94); }
.mc-req-btn:active { transform: translateY(1px); }

/* Кружок слева: пустой до нажатия, с галочкой после. Рисуем разметкой, а не
   картинкой — кнопка живёт в карточке каталога, лишний запрос там не нужен. */
.mc-req-btn__ico {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	position: relative;
}

.mc-req-btn.is-added .mc-req-btn__ico::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Отмечено — кнопка гасится: действие уже сделано, звать больше не нужно. */
.mc-req-btn.is-added {
	background: var(--wp--preset--color--pink-soft, #FBEEF3);
	color: var(--wp--preset--color--ink, #16161A);
}

.mc-req-btn.is-added:hover { filter: none; background: #f6dfe8; }

/* Пояснение под кнопкой — только на странице товара */
.mc-req-hint {
	margin: 12px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--mc-gray);
	font-weight: 400;
}

/* Строка над примечанием на оформлении заказа */
.mc-req-checkout {
	margin: 0 0 10px;
	padding: 11px 14px;
	border-radius: 14px;
	background: var(--mc-sky);
	color: var(--mc-navy);
	font-size: 14px;
	line-height: 1.45;
}

/* Блок кнопки на странице товара */
.mc-req-single { margin: 16px 0 4px; max-width: 360px; }

/* В мобильной плитке каталога карточка ~165 px: надпись всё равно ложится
   в две строки, поэтому уменьшаем кегль и поля, чтобы кнопка не была
   вдвое выше соседних. На странице товара размеры остаются прежними. */
@media (max-width: 600px) {
	ul.products .mc-req-btn {
		padding: 9px 12px;
		font-size: 13.5px;
		gap: 6px;
	}
	ul.products .mc-req-btn__ico { width: 15px; height: 15px; }
	ul.products .mc-req-btn.is-added .mc-req-btn__ico::after { left: 3px; width: 4px; height: 7px; }
}

/* ---- Список отмеченного в корзине и боковой панели ---- */
.mc-req-list {
	margin: 18px 0 0;
	padding: 16px 18px;
	border: 1px solid var(--mc-line, #F0E6EC);
	border-radius: 18px;
	background: #fff;
}

.mc-req-list__title {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--ink, #16161A);
}

.mc-req-list__items { list-style: none; margin: 0; padding: 0; }

.mc-req-list__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 0;
	border-top: 1px solid var(--mc-line, #F0E6EC);
}

.mc-req-list__item:first-child { border-top: 0; padding-top: 0; }

.mc-req-list__name {
	flex: 1 1 auto;
	font-size: 14px;
	line-height: 1.4;
	color: var(--wp--preset--color--ink, #16161A);
}

/* Крестик тот же, что у строк корзины: одинаковое действие — одинаковый вид. */
.mc-req-list__remove {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--mc-line, #F0E6EC);
	color: var(--mc-gray);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

.mc-req-list__remove:hover {
	background: var(--wp--preset--color--pink, #C76A8A);
	color: #fff;
}

.mc-req-list__note {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--mc-gray);
}

/* В боковой панели блок идёт после товаров и прижат к их отступам */
.mc-drawer .mc-req-list { margin: 14px 16px 0; }

/* Подсветка блока при добавлении товара в комментарий: короткая пульсация
   рамкой и фоном бренда, чтобы покупатель заметил, куда попал товар. */
@keyframes mc-req-flash {
	0%   { box-shadow: 0 0 0 0 rgba(91, 134, 214, 0);   border-color: var(--mc-line, #F0E6EC); background: #fff; }
	20%  { box-shadow: 0 0 0 4px rgba(91, 134, 214, .45); border-color: var(--mc-blue, #5B86D6); background: #F3F7FE; }
	100% { box-shadow: 0 0 0 0 rgba(91, 134, 214, 0);   border-color: var(--mc-line, #F0E6EC); background: #fff; }
}
.mc-req-list--flash {
	animation: mc-req-flash 1.3s ease-in-out 2;
}
@media (prefers-reduced-motion: reduce) {
	.mc-req-list--flash { animation: none; border-color: var(--mc-blue, #5B86D6); background: #F3F7FE; }
}

/* ---- Кнопка «Оформить заявку» (пустая корзина, только товары по запросу) ---- */
.mc-req-cta { margin: 18px 0 0; }
.mc-req-cta__btn { width: 100%; }
.mc-req-cta__btn.is-loading { opacity: .7; pointer-events: none; }
.mc-req-cta__note {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--mc-gray);
	text-align: center;
}
/* «по запросу» вместо 0,00 у служебной позиции */
.mc-req-ph-price { color: var(--mc-gray); }