/*
 * Hei Aurora — Canlı Yazı Önizlemesi
 * Soft White kart + Charcoal yazı. Marka token'ları (--hei-*) woodmart-child
 * style.css içinde :root'ta tanımlı; burada güvenli fallback'lerle kullanıyoruz.
 *
 * .hei-preview-stage SABİT yükseklikli; auto-fit JS, yazıyı bu alanı dolduracak
 * şekilde ölçekler. Bu yüzden yüksekliği px ile veriyoruz (yüzde değil).
 */

.hei-preview-box {
	margin: 16px 0 8px;
	padding: 16px 18px 18px;
	background: var(--hei-soft-white, #FAFAF7);
	border: 1px solid var(--hei-border, rgba(43, 42, 42, 0.08));
	border-radius: var(--hei-radius, 14px);
	box-shadow: var(--hei-shadow-sm, 0 1px 3px rgba(28, 28, 28, 0.04), 0 2px 8px rgba(28, 28, 28, 0.04));
	box-sizing: border-box;
	/* Her zaman tam genişlikte, kendi alt satırında dursun — PPOM'un kolon/grid/float
	   düzeninde kaymasın. Bu kurallar yalnız ilgili düzende etkilidir, diğerlerinde zararsız. */
	width: 100%;
	flex-basis: 100%;    /* flex satırında tam satır kapla */
	order: 99;           /* flex'te en sona */
	grid-column: 1 / -1; /* grid'de tam satır */
	clear: both;         /* float düzeninde alta in */
}

.hei-preview-label {
	display: block;
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--hei-aurora-green, #2D6A4F);
}

.hei-preview-stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 190px;          /* auto-fit'in dolduracağı sabit alan */
	overflow: hidden;
	border-radius: var(--hei-radius-sm, 8px);
}

.hei-preview-text {
	display: inline-block;  /* içeriğe göre boyutlansın → genişlik gerçek bir auto-fit kısıtı olsun */
	max-width: 100%;        /* stage'i aşmasın (aşınca büyütmeyi durdururuz) */
	margin: 0;
	text-align: center;
	line-height: 1.18;
	color: var(--hei-charcoal, #2C2C2C);
	white-space: pre-wrap;  /* textarea satır sonlarını koru; boşluktan satır kaydır */
	/* Bilerek word-break YOK: tek kelime ortadan bölünmesin (büyürken genişlik dolar, bölmez).
	   font-size JS ile (auto-fit) ayarlanır; font-family seçilen fonttan gelir. */
}

/* Eklentinin kendi mesaj (yazı) alanı — PPOM'suz */
.hei-msg-field {
	margin: 14px 0 6px;
}
.hei-msg-label {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
	color: var(--hei-charcoal, #2C2C2C);
}

/* Eklentinin kendi font menüsü (JS ile yazının yanına taşınır) */
.hei-font-field {
	margin: 14px 0 6px;
}
.hei-font-label {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
	color: var(--hei-charcoal, #2C2C2C);
}
.hei-font-field select.hei-preview-font {
	width: 100%;
	/* Sağda ok (caret) için yer aç */
	padding: 10px 38px 10px 12px;
	border: 1px solid var(--hei-border, rgba(43, 42, 42, 0.18));
	border-radius: var(--hei-radius-sm, 8px);
	color: var(--hei-charcoal, #2C2C2C); /* seçili değer koyu görünsün (placeholder gri hissi gitsin) */
	font-size: 15px;
	cursor: pointer;
	/* Tema okunu kaldır, kontrolü al → kendi okumuzu çizelim (Woodmart'tan bağımsız) */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* Aurora Green chevron (inline SVG, dış istek yok) */
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%232D6A4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px;
}
.hei-font-field select.hei-preview-font::-ms-expand {
	display: none; /* eski Edge/IE yerleşik oku */
}
.hei-font-field select.hei-preview-font:hover {
	border-color: var(--hei-aurora-green, #2D6A4F);
}
.hei-font-field select.hei-preview-font:focus {
	outline: none;
	border-color: var(--hei-aurora-green, #2D6A4F);
	box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.15); /* tıklanabilir/aktif halka */
}

/* PPOM yazı alanını ~3 satıra indir + font menüsüyle aynı görünüm (uyumlu ikili) */
textarea.hei-preview {
	width: 100%;
	box-sizing: border-box;
	min-height: 0 !important;  /* Woodmart/PPOM min-height'ini ez */
	height: 4.6em !important;  /* ~3 satır */
	padding: 9px 12px;
	border: 1px solid var(--hei-border, rgba(43, 42, 42, 0.18));
	border-radius: var(--hei-radius-sm, 8px);
	font-size: 15px;
	line-height: 1.4;
	resize: vertical;         /* müşteri isterse uzatabilir */
}

/* Boş durumda marka adı, seçili fontta örnek olarak görünür (soluk → gerçek yazı değil).
   NOT: font-style:italic bilerek YOK — script fontlarda faux-italic çirkin durur. */
.hei-preview-box.is-empty .hei-preview-text {
	color: var(--hei-muted, #6E6E6E);
	opacity: 0.45;
}

@media (max-width: 575px) {
	.hei-preview-stage {
		height: 150px;
	}
}