/**
 * Sepet / ödeme sayfasındaki puan kullanım kutusu.
 * Marka rengi wp-config CLOIDEA_BRAND_COLOR'dan gelir (bkz. templates/layout.php --brand).
 * Bağımsız çalışabilmesi için kendi değişkenlerini de tanımlar.
 */
.clc-box {
	--clc-brand: var(--brand, #2563eb);
	margin: 16px 0;
	padding: 16px;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	background: #f8fafc;
}

@media (prefers-color-scheme: dark) {
	.clc-box { background: #131c30; border-color: #26324a; color: #e8eefc; }
}

.clc-box__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 15px;
}

.clc-box__icon {
	display: grid;
	place-items: center;
	width: 26px; height: 26px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--clc-brand) 15%, transparent);
	color: var(--clc-brand);
	flex: none;
}

.clc-box__icon svg { width: 15px; height: 15px; fill: currentColor; }

.clc-box__text { margin: 0 0 10px; font-size: 13.5px; color: #475569; }

@media (prefers-color-scheme: dark) {
	.clc-box__text { color: #a5b3cc; }
}

.clc-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.clc-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #fff;
}

@media (prefers-color-scheme: dark) {
	.clc-list__item { background: #1a2438; border-color: #26324a; }
}

.clc-list__text { font-size: 13px; color: #334155; }

@media (prefers-color-scheme: dark) {
	.clc-list__text { color: #cbd5e1; }
}

.clc-iconbtn {
	flex: none;
	display: grid;
	place-items: center;
	width: 26px; height: 26px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #64748b;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.clc-iconbtn:hover { background: #f1f5f9; color: #334155; }

@media (prefers-color-scheme: dark) {
	.clc-iconbtn { color: #94a3b8; }
	.clc-iconbtn:hover { background: #26324a; color: #e8eefc; }
}

.clc-field { display: block; margin: 0 0 10px; }

.clc-field span {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
}

@media (prefers-color-scheme: dark) {
	.clc-field span { color: #cbd5e1; }
}

.clc-field select {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	border: 1.5px solid #cbd5e1;
	border-radius: 10px;
	background: #fff;
	color: #0f172a;
	font-size: 14px;
}

@media (prefers-color-scheme: dark) {
	.clc-field select { background: #1a2438; border-color: #26324a; color: #e8eefc; }
}

.clc-row { display: flex; gap: 8px; }

.clc-row input[type="number"] {
	flex: 1;
	min-width: 0;
	height: 42px;
	padding: 0 12px;
	border: 1.5px solid #cbd5e1;
	border-radius: 10px;
	font-size: 15px;
}

.clc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.clc-btn--primary { background: var(--clc-brand); color: #fff; }
.clc-btn--ghost { background: #fff; border-color: #cbd5e1; color: #334155; }