/*
 * Bayramoto Suite — Son Adet Uyarısı görünümü.
 *
 * Renk ve ölçüler buraya gömülü DEĞİLDİR: Module::css_variables() bunları
 * wp_add_inline_style ile :root üzerine CSS özel değişkeni olarak basar.
 * Böylece ayar değişince bu dosya değişmez ve tarayıcı önbelleğinde kalır.
 *
 * Her var() çağrısının bir yedeği vardır; satır içi değişkenler herhangi bir
 * nedenle basılamazsa kutu biçimsiz kalmak yerine uyarı kırmızısıyla çıkar.
 *
 * Kurallar `bos-lowstock` önekiyle kapsanmıştır; kapsamsız tek bir seçici
 * yoktur — tema bağlantılarına ya da başka eklentilerin kutularına sızmaz.
 */

/* ---------------------------------------------------------------- Kutu */

.bos-lowstock {
	box-sizing: border-box;
	margin: 16px 0;
	padding: 14px 16px;
	border: 1px solid var(--bos-ls-line, #d63638);
	/* Sol kenardaki kalın şerit kutuyu tema uyarılarından ayırır. */
	border-left-width: 4px;
	border-radius: var(--bos-ls-radius, 10px);
	background: var(--bos-ls-bg, #fdf2f2);
	font-size: 15px;
	line-height: 1.5;
}

.bos-lowstock__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bos-ls-line, #d63638);
}

/*
 * Simge saf CSS ile çizilir: ünlem işaretli bir üçgen için ayrı bir SVG
 * dosyası ya da yazı tipi yüklemek, tek bir uyarı kutusu için ağır kaçardı.
 */
.bos-lowstock__icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--bos-ls-line, #d63638);
	position: relative;
}

.bos-lowstock__icon::before {
	content: "!";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

/*
 * Açıklama metni temanın yazı rengini miras alır. Sabit koyu bir renk
 * yazsaydık koyu temalarda okunmaz hale gelirdi; başlık zaten vurgu
 * rengiyle ayrışıyor.
 */
.bos-lowstock__text {
	margin: 6px 0 0;
	color: inherit;
	opacity: 0.85;
}

/*
 * Başlık tek başınaysa (açıklama boş bırakılmışsa) kutu daha dar durur;
 * iki satırlık bir kutu için 14 piksel dolgu fazla geliyordu.
 */
.bos-lowstock__title:only-child {
	margin: 0;
}

/* ---------------------------------------------------------------- Dar ekran */

@media screen and (max-width: 600px) {
	.bos-lowstock {
		padding: 12px 14px;
		font-size: 14px;
	}
}