/* SC Stock Alerts — кнопка + попап, палитра сайта.
   Критичные свойства попапа с !important — глушат стили темы Woodmart. */

/* ---------- Кнопка плагина: везде тот же серый вид с колокольчиком
   (каталог, страница скачивания, стандартные страницы Woo) ---------- */
.sc-stock-alert-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px;
	padding: 14px 20px;
	border: none !important;
	border-radius: 12px !important;
	background: #eef1f5 !important;
	background-color: #eef1f5 !important;
	color: #475569 !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1 !important;
	text-transform: none !important;
	cursor: pointer;
	user-select: none;
	box-sizing: border-box;
	transition: box-shadow .18s ease;
	-webkit-tap-highlight-color: transparent;
}

.sc-stock-alert-btn::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>') center / contain no-repeat;
}

.sc-stock-alert-btn:hover {
	box-shadow: 0 6px 14px rgba(15, 23, 42, .14);
}

/* вставленная JS-ом на место «В корзину» — на всю ширину виджета */
.sc-stock-alert-btn.sc-sa-injected {
	display: flex !important;
	width: 100%;
	margin: 0 0 12px !important;
}

.sc-stock-alert-btn.sc-sa-loop {
	padding: 10px 16px;
	font-size: 13px;
	width: 100%;
}

/* ---------- Легаси-кнопки шаблона page_product.php ----------
   Скрыты по умолчанию; показ управляет apply_stock_state() в
   page_product.js (инлайновый display:flex). Серая кнопка с
   колокольчиком на месте кнопок покупки. Ховер — только тень снизу. */
#outofstock_button,
#outofstock_button_top {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 24px;
	border: none;
	border-radius: 12px;
	background: #eef1f5;
	color: #475569;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	transition: box-shadow .18s ease;
	-webkit-tap-highlight-color: transparent;
}

/* колокольчик */
#outofstock_button::before,
#outofstock_button_top::before {
	content: "";
	width: 19px;
	height: 19px;
	flex: 0 0 19px;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>') center / contain no-repeat;
}

#outofstock_button:hover,
#outofstock_button_top:hover {
	box-shadow: 0 6px 14px rgba(15, 23, 42, .14);
}

/* основной виджет — на всю ширину, как «Добавить в корзину» */
#outofstock_button {
	width: 100%;
}

/* верхняя закреплённая панель — компактнее */
#outofstock_button_top {
	padding: 12px 20px;
	font-size: 14px;
}

/* Легаси-попап из шаблона больше не используется — глушим на случай,
   если его CSS потерялся и он торчит внизу страницы */
#outofstock_popup {
	display: none !important;
}

/* Спрятанные кнопки покупки out-of-stock товара: перебивает
   инлайновый display:flex, который ставят скрипты страницы */
.sc-sa-hidden {
	display: none !important;
}

/* ---------- Оверлей ---------- */
.sc-sa-overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: 100000 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 16px;
	margin: 0 !important;
	background: rgba(15, 23, 42, .55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .22s ease, visibility .22s ease;
}

.sc-sa-overlay.sc-sa-open {
	opacity: 1;
	visibility: visible;
}

body.sc-sa-lock {
	overflow: hidden;
}

/* ---------- Карточка ---------- */
.sc-sa-card {
	position: relative !important;
	width: 100% !important;
	max-width: 400px !important;
	margin: 0 !important;
	background: #ffffff !important;
	border-radius: 20px !important;
	padding: 28px !important;
	box-shadow: 0 24px 64px rgba(15, 23, 42, .25) !important;
	transform: translateY(12px) scale(.97);
	transition: transform .22s ease;
}

.sc-sa-overlay.sc-sa-open .sc-sa-card {
	transform: translateY(0) scale(1);
}

/* ---------- Крестик: справа сверху, круглый ---------- */
.sc-sa-close {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	left: auto !important;
	bottom: auto !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: #f1f5f9 !important;
	background-color: #f1f5f9 !important;
	color: #64748b !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 36px !important;
	text-align: center !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	transform: none !important;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.sc-sa-close:hover {
	background: #e2e8f0 !important;
	background-color: #e2e8f0 !important;
	color: #0f172a !important;
}

/* ---------- Тексты ---------- */
.sc-sa-title {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	margin: 0 0 8px !important;
	padding: 0 44px 0 0 !important;
	text-transform: none !important;
	line-height: 1.35 !important;
}

.sc-sa-subtitle {
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #475569 !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
}

/* ---------- Поле email ---------- */
.sc-sa-email {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 13px 16px !important;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 12px !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	color: #0f172a !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	outline: none !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	transition: border-color .15s ease;
}

.sc-sa-email::placeholder {
	color: #94a3b8 !important;
}

.sc-sa-email:focus {
	border-color: var(--brand-blue, #2196f3) !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Honeypot — вне экрана, но в DOM для ботов */
.sc-sa-site {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.sc-sa-error {
	margin: 10px 0 0 !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	color: #dc2626 !important;
}

/* ---------- Кнопка «Отправить»: синяя, скруглённая, без ховера ---------- */
.sc-sa-submit {
	display: block !important;
	width: 100% !important;
	margin: 16px 0 0 !important;
	padding: 14px !important;
	border: none !important;
	border-radius: 12px !important;
	background: var(--brand-blue, #2196f3) !important;
	background-color: var(--brand-blue, #2196f3) !important;
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	transform: none !important;
	cursor: pointer;
}

/* ховер намеренно отсутствует — фиксируем состояние против стилей темы */
.sc-sa-submit:hover,
.sc-sa-submit:focus,
.sc-sa-submit:active {
	background: var(--brand-blue, #2196f3) !important;
	background-color: var(--brand-blue, #2196f3) !important;
	color: #ffffff !important;
	box-shadow: none !important;
	transform: none !important;
	outline: none !important;
}

.sc-sa-submit:disabled {
	opacity: .65 !important;
	cursor: default;
}

/* ---------- Успех ---------- */
.sc-sa-success-state {
	text-align: center;
	padding: 8px 0 4px;
}

.sc-sa-check {
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #ecfdf5;
	color: #10b981;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sc-sa-check svg {
	width: 28px;
	height: 28px;
}

.sc-sa-success-title {
	padding: 0 !important;
	font-size: 16px !important;
}

/* ---------- Мобилка ---------- */
@media (max-width: 480px) {
	.sc-sa-overlay {
		align-items: flex-end !important;
		padding: 0;
	}
	.sc-sa-card {
		max-width: 100% !important;
		border-radius: 20px 20px 0 0 !important;
		padding: 24px 20px calc(24px + env(safe-area-inset-bottom)) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-sa-overlay,
	.sc-sa-card,
	.sc-stock-alert-btn,
	#outofstock_button,
	#outofstock_button_top {
		transition: none;
	}
}