/* ==========================================================================
   Faturatik Kademeli Kargo — Frontend Stilleri
   Renkler CSS özel değişkenleriyle yönetilir; PHP tarafında üretilen
   <style id="faturatik-kargo-color-vars"> bloğu bu değişkenleri ayarlar.
   ========================================================================== */

/* Varsayılan renk değerleri — admin'den seçim yapılmamışsa devreye girer. */
:root {
	--kfm-primary:    #007cba;
	--kfm-primary-bg: rgba(0, 124, 186, 0.07);
	--kfm-success:    #00a32a;
	--kfm-success-bg: rgba(0, 163, 42, 0.07);
}

.kfm-notice {
	background:    var(--kfm-primary-bg);
	border:        1px solid rgba(0, 0, 0, 0.08);
	border-left:   4px solid var(--kfm-primary);
	border-radius: 0 4px 4px 0;
	padding:       14px 18px;
	margin-bottom: 20px;
	font-size:     14px;
	line-height:   1.5;
}

.kfm-notice--success {
	border-left-color: var(--kfm-success);
	background:        var(--kfm-success-bg);
}

/* Üst satır: kamyon ikonu + mesaj */
.kfm-notice__text {
	display:     flex;
	align-items: center;
	gap:         8px;
	flex-wrap:   wrap;
}

.kfm-truck {
	font-size:  20px;
	line-height: 1;
	flex-shrink: 0;
}

/* İlerleme çubuğu */
.kfm-progress {
	margin-top:    10px;
	background:    rgba(0, 0, 0, 0.08);
	border-radius: 99px;
	height:        8px;
	overflow:      hidden;
}

.kfm-progress__bar {
	height:        100%;
	border-radius: 99px;
	background:    var(--kfm-primary);
	transition:    width 0.4s ease;
	min-width:     4px;
}

.kfm-notice--success .kfm-progress__bar {
	background: var(--kfm-success);
}

/* Sonraki kademe ipucu */
.kfm-notice__tier-hint {
	margin-top:  8px;
	font-size:   13px;
	color:       #646970;
	padding-left: 28px; /* kamyon ikonu genişliğiyle hizalama */
}

.kfm-notice__tier-hint strong {
	color: #2c3338;
}