/* Theme-aware colors: inherit from WC/theme if available, fallback to defaults */
:root {
	--scicg-primary:    var(--theme-palette-color-1, var(--flavor-primary, var(--flavor-accent, var(--wp--preset--color--primary, var(--wc-primary, #0A6EB1)))));
	--scicg-primary-dk: var(--theme-palette-color-2, var(--flavor-primary-dark, var(--wp--preset--color--primary, var(--wc-primary, #0960a0))));
	--scicg-text:       var(--wp--preset--color--contrast, #28333B);
	--scicg-text-muted: rgba(40,51,59,0.5);
	--scicg-border:     rgba(40,51,59,0.12);
	--scicg-success:    #0d7a4e;
	--scicg-success-bg: rgba(16,153,96,0.05);
	--scicg-danger:     #C4392A;
}

/* SC-ICG Points — Checkout UI Styles */

.scicg-points-box {
	background:    #fff;
	border:        1px solid var(--scicg-border);
	border-radius: 8px;
	padding:       18px 20px;
	margin-bottom: 20px;
}

.scicg-points-box h4 {
	font-size:   15px;
	font-weight: 600;
	color:       var(--scicg-text);
	margin:      0 0 6px;
}

.scicg-points-balance {
	font-size:   13px;
	color:       var(--scicg-text-muted);
	margin-bottom: 14px;
}

.scicg-points-balance strong {
	color:       var(--scicg-primary);
	font-weight: 600;
}

.scicg-points-input-row {
	display:     flex;
	gap:         10px;
	align-items: center;
	flex-wrap:   wrap;
}

.scicg-points-input-row input[type="number"] {
	height:        38px;
	padding:       0 12px;
	border:        1px solid rgba(40,51,59,0.15);
	border-radius: 6px;
	font-size:     14px;
	width:         130px;
	color:         #333;
}

.scicg-points-input-row input[type="number"]:focus {
	border-color: var(--scicg-primary);
	outline:      none;
	box-shadow:   0 0 0 3px color-mix(in srgb, var(--scicg-primary) 10%, transparent);
}

.scicg-points-useall-btn {
	height:        38px;
	padding:       0 12px;
	background:    #fff;
	color:         var(--scicg-primary);
	border:        1px solid color-mix(in srgb, var(--scicg-primary) 30%, transparent);
	border-radius: 6px;
	font-size:     13px;
	font-weight:   500;
	cursor:        pointer;
	transition:    background 0.2s, border-color 0.2s;
	white-space:   nowrap;
}

.scicg-points-useall-btn:hover {
	background:   color-mix(in srgb, var(--scicg-primary) 6%, transparent);
	border-color: var(--scicg-primary);
}

.scicg-points-apply-btn {
	height:        38px;
	padding:       0 16px;
	background:    var(--scicg-primary);
	color:         #fff;
	border:        none;
	border-radius: 6px;
	font-size:     13.5px;
	font-weight:   500;
	cursor:        pointer;
	transition:    background 0.2s;
}

.scicg-points-apply-btn:hover {
	background: var(--scicg-primary-dk);
}

.scicg-points-apply-btn:disabled {
	opacity: 0.6;
	cursor:  default;
}

.scicg-points-hint {
	font-size: 12px;
	color:     rgba(40,51,59,0.4);
	margin-top: 8px;
}

.scicg-pts-notice {
	margin-top:    10px;
	padding:       10px 14px;
	border-radius: 6px;
	font-size:     13px;
	display:       none;
}

.scicg-pts-notice.success {
	background:   rgba(16,153,96,0.08);
	color:        var(--scicg-success);
	border:       1px solid rgba(16,153,96,0.15);
	display:      block;
}

.scicg-pts-notice.error {
	background:   rgba(196,57,42,0.08);
	color:        var(--scicg-danger);
	border:       1px solid rgba(196,57,42,0.15);
	display:      block;
}

/* Applied state */
.scicg-points-applied {
	background:    var(--scicg-success-bg);
	border:        1px solid rgba(16,153,96,0.15);
	border-radius: 6px;
	padding:       12px 16px;
}

.scicg-applied-info {
	font-size:     14px;
	color:         var(--scicg-success);
	margin:        0 0 10px;
}

.scicg-applied-info strong {
	font-weight: 700;
}

.scicg-applied-actions {
	display: flex;
	gap:     8px;
}

.scicg-points-remove-btn {
	height:        38px;
	padding:       0 12px;
	background:    #fff;
	color:         var(--scicg-danger);
	border:        1px solid rgba(196,57,42,0.3);
	border-radius: 5px;
	font-size:     13px;
	font-weight:   500;
	cursor:        pointer;
	transition:    background 0.2s;
}

.scicg-points-remove-btn:hover {
	background: rgba(196,57,42,0.06);
}

.scicg-pts-remove {
	font-size:   12px;
	color:       var(--scicg-danger);
	cursor:      pointer;
	text-decoration: underline;
}

.scicg-pts-discount {
	font-weight: 600;
}

/* Empty / muted state — 餘額為 0 時精簡顯示 */
.scicg-points-box-muted {
	background:    rgba(40,51,59,0.02);
	border-color:  rgba(40,51,59,0.08);
	padding:       12px 16px;
}

.scicg-points-empty {
	font-size:   13px;
	color:       rgba(40,51,59,0.45);
	margin:      0;
	display:     flex;
	align-items: center;
	gap:         6px;
}

.scicg-points-empty-icon {
	display:     inline-flex;
	align-items: center;
	opacity:     0.5;
}