.cfbp-selector {
	--cfbp-f-primary: #6d28d9;
	--cfbp-f-success: #10b981;
	--cfbp-f-danger: #ef4444;
	--cfbp-f-border: #e5e7eb;
	--cfbp-f-bg: #f6f7fb;

	max-width: 560px;
	font-family: inherit;
}

.cfbp-selector-group { margin-bottom: 16px; }
.cfbp-selector-label { display: block; font-weight: 600; margin-bottom: 8px; }

.cfbp-card-list { display: flex; flex-wrap: wrap; gap: 10px; }

.cfbp-card {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--cfbp-f-border);
	background: #fff;
	border-radius: 10px;
	padding: 8px 16px;
	cursor: pointer;
	font-size: 14px;
	transition: all 0.15s ease;
}
.cfbp-card:hover { border-color: var(--cfbp-f-primary); }
.cfbp-card:has(.cfbp-toggle:checked) { background: rgba(109, 40, 217, 0.06); border-color: var(--cfbp-f-primary); }
.cfbp-card .cfbp-toggle { width: 16px; height: 16px; accent-color: var(--cfbp-f-primary); cursor: pointer; }

.cfbp-minqty-message {
	color: var(--cfbp-f-danger);
	font-size: 13px;
	margin: 6px 0 0;
	min-height: 1em;
}

.cfbp-price-box {
	background: var(--cfbp-f-bg);
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.cfbp-total-price { font-weight: 700; color: var(--cfbp-f-primary); font-size: 18px; }
.cfbp-free-delivery-badge {
	background: rgba(16,185,129,0.12); color: var(--cfbp-f-success); font-size: 12px; font-weight: 600;
	padding: 3px 10px; border-radius: 999px;
}

@media (max-width: 480px) {
	.cfbp-card { padding: 6px 12px; font-size: 13px; }
}

/* --- Tier / savings messages --- */
.cfbp-tier-message,
.cfbp-savings-message {
	font-size: 14px;
	margin: 8px 0 0;
	padding: 8px 12px;
	border-radius: 8px;
	line-height: 1.5;
}
.cfbp-tier-message {
	background: rgba(109, 40, 217, 0.08);
	color: var(--cfbp-f-primary);
	font-weight: 600;
}
.cfbp-savings-message {
	background: rgba(16, 185, 129, 0.10);
	color: #047857;
	font-weight: 600;
}
.cfbp-tier-message[hidden],
.cfbp-savings-message[hidden] {
	display: none !important;
}

/* Non-blocking loading state while a sync is in flight. */
.cfbp-selector.cfbp-loading .cfbp-price-box {
	opacity: 0.6;
	transition: opacity 0.15s ease;
}
.cfbp-selector.cfbp-loading .cfbp-card {
	pointer-events: none;
}

/* --- Tier Message boxes ---
   Inline styles come from the admin config; these rules only guarantee the
   responsive/containment behaviour so the CartFlows layout can't be broken. */
.cfbp-msg {
	width: 100%;
	box-sizing: border-box;
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
	line-height: 1.55;
}
.cfbp-msg .cfbp-msg-icon {
	margin-inline-end: 6px;
}
@media (max-width: 480px) {
	.cfbp-msg {
		font-size: 14px !important;
	}
}