/* Stabilno220 — кастомні стилі.
   Бренд: жовто-блакитний (український). Дилер стабілізаторів «Укртехнологія». */

:root {
	/* Бренд-палітра */
	--stb-blue:       #0b63ce;  /* основний синій */
	--stb-blue-dark:  #0a4f9e;  /* синій hover / темніший */
	--stb-blue-soft:  #eaf2fc;  /* світлий фон-акцент */
	--stb-yellow:     #ffd400;  /* акцент жовтий */
	--stb-yellow-dark:#e6be00;  /* жовтий hover */
	--stb-ink:        #14212e;  /* основний текст */
	--stb-muted:      #5b6b7a;  /* приглушений текст */
	--stb-line:       #e3e8ee;  /* лінії/межі */

	/* Перекриваємо глобальну палітру Astra (accent = синій) */
	--ast-global-color-0: #0b63ce; /* акцент / посилання */
	--ast-global-color-1: #0a4f9e; /* акцент hover */
	--ast-global-color-2: #14212e; /* заголовки */
	--ast-global-color-3: #14212e; /* текст */
}

/* --- Кнопки-контакти (Telegram / Viber / Подзвонити) --- */
.stb-contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.stb-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
	transition: background-color .15s ease, transform .05s ease;
}
.stb-btn:active { transform: translateY(1px); }

.stb-btn--call     { background: var(--stb-blue);   color: #fff; }
.stb-btn--call:hover { background: var(--stb-blue-dark); color: #fff; }
.stb-btn--tg       { background: #229ed9; color: #fff; }
.stb-btn--tg:hover { background: #1c86b8; color: #fff; }
.stb-btn--viber    { background: #7360f2; color: #fff; }
.stb-btn--viber:hover { background: #5e4fd0; color: #fff; }
.stb-btn--accent   { background: var(--stb-yellow); color: var(--stb-ink); }
.stb-btn--accent:hover { background: var(--stb-yellow-dark); color: var(--stb-ink); }

/* --- Hero (перший екран головної) --- */
.stb-hero {
	background: linear-gradient(135deg, var(--stb-blue) 0%, var(--stb-blue-dark) 100%);
	color: #fff;
	padding: 56px 24px;
	border-radius: 16px;
	text-align: center;
}
.stb-hero h1 { color: #fff; margin: 0 0 12px; }
.stb-hero__lead { font-size: 1.15rem; opacity: .95; max-width: 720px; margin: 0 auto 24px; }
.stb-hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.stb-hero__accent { color: var(--stb-yellow); }

/* --- Сітка категорій / переваг --- */
.stb-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin: 28px 0;
}
.stb-card {
	border: 1px solid var(--stb-line);
	border-radius: 12px;
	padding: 22px;
	background: #fff;
	transition: box-shadow .15s ease, border-color .15s ease;
}
.stb-card:hover { box-shadow: 0 6px 20px rgba(11,99,206,.10); border-color: var(--stb-blue); }
.stb-card h3 { margin: 0 0 8px; color: var(--stb-blue-dark); }
.stb-card p  { margin: 0; color: var(--stb-muted); }

/* --- Переваги (чек-список) --- */
.stb-benefits { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 12px; }
.stb-benefits li { position: relative; padding-left: 30px; color: var(--stb-ink); }
.stb-benefits li::before {
	content: "✓";
	position: absolute; left: 0; top: 0;
	width: 22px; height: 22px;
	background: var(--stb-yellow); color: var(--stb-ink);
	border-radius: 50%; display: grid; place-items: center;
	font-size: 13px; font-weight: 700;
}

/* --- WooCommerce: ціна «Уточнити ціну» + акцент кнопки --- */
.stb-price-ask { color: var(--stb-blue-dark); font-weight: 600; }
.woocommerce ul.products li.product .price { color: var(--stb-ink); }

/* --- Підбір стабілізатора (шорткод [stabilno_pidbir]) --- */
.stb-pidbir {
	max-width: 640px;
	margin: 0 auto;
	padding: 24px;
	border: 1px solid var(--stb-line);
	border-radius: 12px;
	background: #fff;
}
.stb-pidbir__group { margin-bottom: 20px; }
.stb-pidbir__legend { font-weight: 600; margin-bottom: 10px; color: var(--stb-ink); }
.stb-pidbir__options { display: flex; flex-wrap: wrap; gap: 8px; }
.stb-pidbir__options label {
	padding: 8px 14px;
	border: 1px solid #cfd8e3;
	border-radius: 8px;
	cursor: pointer;
	user-select: none;
	transition: border-color .12s ease, background-color .12s ease;
}
.stb-pidbir__options label:hover { border-color: var(--stb-blue); background: var(--stb-blue-soft); }
.stb-pidbir__options input { margin-right: 6px; accent-color: var(--stb-blue); }
.stb-pidbir__btn {
	background: var(--stb-blue);
	color: #fff;
	border: 0;
	padding: 12px 24px;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}
.stb-pidbir__btn:hover { background: var(--stb-blue-dark); color: #fff; }
.stb-pidbir__result {
	margin-top: 20px;
	padding: 18px;
	background: var(--stb-blue-soft);
	border-radius: 10px;
}
.stb-pidbir__result ul { margin: 8px 0 14px; padding-left: 18px; }