/*
 * PART 60 — карточка «вы заказываете для работы».
 *
 * 30 сентября, вечер: синюю всплывающую полосу владелец забраковал —
 * нужно светлое, чистое сообщение в самой странице, заметное, без кнопки
 * «закрыть». Вид здесь, место — у хозяина страницы: тема ставит карточку
 * на главной, в карточке магазина и в корзине, касса печатает её сама.
 *
 * Цвета — токенами темы с запасными значениями: у темы они переключаются
 * в тёмный режим сами, без второй таблицы здесь. Всё помечено `!important`:
 * карточка стоит в чужой разметке (касса WooCommerce, шапки темы),
 * и правило ссылки или жирного шрифта той же силы спорило бы с нашим
 * порядком файлов — этим проект обжигался трижды.
 */
.bm-company {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	margin: 0 0 16px;
	padding: 14px !important;
	border-radius: 20px !important;
	border: 1px solid color-mix(in srgb, var(--bm-blue, #517dfc) 20%, transparent) !important;
	background: color-mix(in srgb, var(--bm-blue, #517dfc) 6%, var(--ba-surface, #fff)) !important;
	color: var(--ba-ink, #101216) !important;
	font-family: var(--ba-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif) !important;
	text-align: left !important;
	box-sizing: border-box;
	animation: bm-company-in .35s cubic-bezier(.2, .8, .2, 1) both;
}
.bm-company[hidden] { display: none !important; }
.bm-company *, .bm-company *::before, .bm-company *::after { box-sizing: border-box; }
@keyframes bm-company-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bm-company { animation: none; } }

/* Значок — белая плитка на светлой подложке: на подложке одного тона
   с ним синий знак терял бы край. */
.bm-company__i {
	flex: none !important;
	display: grid !important;
	place-items: center !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	border-radius: 14px !important;
	background: var(--ba-surface, #fff) !important;
	color: var(--bm-blue, #517dfc) !important;
	box-shadow: 0 1px 2px rgba(16, 18, 22, .06), 0 0 0 1px color-mix(in srgb, var(--bm-blue, #517dfc) 12%, transparent) !important;
}
.bm-company__i svg { width: 22px !important; height: 22px !important; }

.bm-company__t {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: grid !important;
	gap: 4px !important;
}
.bm-company__title {
	margin: 0 0 2px !important;
	font-size: 15px !important;
	font-weight: 750 !important;
	line-height: 1.25 !important;
	color: var(--ba-ink, #101216) !important;
	overflow-wrap: anywhere;
}
.bm-company__free,
.bm-company__row {
	display: flex !important;
	align-items: flex-start !important;
	gap: 6px !important;
	font-size: 13px !important;
	line-height: 1.35 !important;
}
/* Главное обещание — зелёным: деньги, которые человек не платит. */
.bm-company__free {
	color: color-mix(in srgb, var(--ba-ok, #2fbf71) 72%, var(--ba-ink, #101216)) !important;
	font-weight: 650 !important;
}
/* Первый в окне: платит сейчас, вернём позже. Не зелёным — это пока
   не бесплатно, и зелёный пообещал бы больше, чем есть. */
.bm-company__free--wait { color: var(--ba-ink, #101216) !important; font-weight: 600 !important; }
.bm-company__free--wait svg { color: var(--ba-ink-3, #8a909d) !important; }
.bm-company__row { color: var(--ba-ink-2, #555c6b) !important; font-weight: 500 !important; }
.bm-company__free svg,
.bm-company__row svg { flex: none !important; width: 15px !important; height: 15px !important; margin-top: 1px !important; }
.bm-company__row svg { color: var(--ba-ink-3, #8a909d) !important; }
.bm-company__row span { min-width: 0; overflow-wrap: anywhere; }

/* Выход из режима — не «закрыть сообщение», а «я заказываю домой».
   Тихой ссылкой последней строкой: нужна редко и не должна спорить
   с сутью. В углу справа она отнимала ширину у текста. */
.bm-company__x {
	justify-self: start !important;
	margin-top: 4px !important;
	padding: 2px 0 !important;
	background: none !important;
	color: var(--ba-ink-3, #8a909d) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
	white-space: nowrap !important;
}
.bm-company__x:hover { color: var(--ba-ink-2, #555c6b) !important; }

/* Место, которое ставит сам скрипт, когда тема его не оставила. */
.bm-company-host { padding: 12px 16px 0; }
.bm-company-host .bm-company { margin: 0; }