.bluegam-store-credit {
	background: #f3f9fd;
	background: color-mix(in srgb, var(--wp--preset--color--blue-100, #dff2ff) 38%, var(--wp--preset--color--surface, #fff));
	border: 1px solid var(--wp--preset--color--border, #c9e2f4);
	border-radius: var(--wp--custom--radius--input, 12px);
	box-sizing: border-box;
	color: var(--wp--preset--color--text-primary, #0d3768);
	inline-size: 100%;
	margin-block: var(--wp--preset--spacing--20, 12px);
	min-inline-size: 0;
	overflow: hidden;
}

.bluegam-credit-preview {
	background: linear-gradient(135deg, #f5fbff, #edf8ff);
	border: 1px solid #c6e2f4;
	border-radius: 12px;
	color: #0d3768;
	display: grid;
	gap: 10px;
	margin: 12px 0;
	padding: 14px;
}

.bluegam-credit-preview__summary {
	align-items: center;
	display: grid;
	gap: 10px;
	grid-template-columns: auto 1fr;
}

.bluegam-credit-preview__summary > div {
	display: grid;
	gap: 3px;
}

.bluegam-credit-preview__icon {
	align-items: center;
	background: #dff5ff;
	border-radius: 50%;
	color: #087bad;
	display: inline-flex;
	font-size: 1.1rem;
	height: 38px;
	justify-content: center;
	width: 38px;
}

.bluegam-credit-preview__amount {
	color: #087844;
	font-size: 1.15rem;
}

.bluegam-credit-preview small {
	color: #60778e;
}

.bluegam-credit-preview__account {
	border-block-start: 1px solid #d7e9f5;
	font-size: .88rem;
	margin: 0;
	padding-block-start: 9px;
}

.bluegam-credit-preview__account a {
	color: #096b9d;
	font-weight: 700;
}

.bluegam-store-credit.is-applied {
	border-color: color-mix(in srgb, var(--wp--preset--color--success, #087844) 38%, var(--wp--preset--color--border, #c9e2f4));
}

.bluegam-store-credit__toggle {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--wp--custom--radius--small, 8px);
	box-sizing: border-box;
	color: inherit;
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: var(--wp--preset--spacing--20, 8px);
	inline-size: 100%;
	justify-content: space-between;
	min-block-size: 48px;
	padding: var(--wp--preset--spacing--20, 10px) var(--wp--preset--spacing--30, 14px);
	text-align: start;
}

.bluegam-store-credit__toggle:hover:not(:disabled) {
	background: color-mix(in srgb, var(--wp--preset--color--primary, #1674aa) 7%, transparent);
}

.bluegam-store-credit__toggle:focus-visible,
.bluegam-store-credit__input:focus-visible,
.bluegam-store-credit__actions button:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary, #1674aa) 20%, transparent);
	outline: 2px solid var(--wp--preset--color--primary, #1674aa);
	outline-offset: 2px;
}

.bluegam-store-credit__toggle-copy {
	display: grid;
	gap: 2px;
	min-inline-size: 0;
}

.bluegam-store-credit__toggle-copy strong {
	font-size: var(--wp--preset--font-size--small, 15px);
	font-weight: 800;
}

.bluegam-store-credit__toggle-copy small {
	color: var(--wp--preset--color--text-muted, #60778e);
	font-size: var(--wp--preset--font-size--caption, 13px);
	font-variant-numeric: tabular-nums;
}

.bluegam-store-credit__chevron {
	color: var(--wp--preset--color--primary, #1674aa);
	flex: 0 0 auto;
	font-size: 1.25rem;
	line-height: 1;
	transform: rotate(0deg);
	transition: transform 160ms ease;
}

.bluegam-store-credit__toggle[aria-expanded="true"] .bluegam-store-credit__chevron {
	transform: rotate(180deg);
}

.bluegam-store-credit__panel {
	border-block-start: 1px solid var(--wp--preset--color--border, #c9e2f4);
	display: grid;
	gap: var(--wp--preset--spacing--20, 10px);
	padding: var(--wp--preset--spacing--30, 14px);
}

.bluegam-store-credit__panel[hidden] {
	display: none;
}

.bluegam-store-credit__applied,
.bluegam-store-credit__error,
.bluegam-store-credit__hint {
	margin: 0;
}

.bluegam-store-credit__label {
	font-weight: 700;
	line-height: 1.4;
}

.bluegam-store-credit__input {
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--border-strong, #a9cce5);
	border-radius: var(--wp--custom--radius--input, 8px);
	box-sizing: border-box;
	color: var(--wp--preset--color--text-primary, #0d3768);
	font: inherit;
	font-variant-numeric: tabular-nums;
	inline-size: 100%;
	min-block-size: 48px;
	padding: 10px 12px;
}

.bluegam-store-credit__hint {
	color: var(--wp--preset--color--text-muted, #60778e);
	font-size: var(--wp--preset--font-size--caption, 13px);
	line-height: 1.45;
}

.bluegam-store-credit__actions {
	display: grid;
	gap: var(--wp--preset--spacing--20, 8px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bluegam-store-credit__actions button {
	background: var(--wp--preset--color--primary, #1674aa);
	border: 1px solid var(--wp--preset--color--primary, #1674aa);
	border-radius: var(--wp--custom--radius--input, 8px);
	box-sizing: border-box;
	color: var(--wp--preset--color--surface, #fff);
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	line-height: 1.35;
	min-block-size: 48px;
	padding: 8px 12px;
}

.bluegam-store-credit__actions button.is-secondary {
	background: var(--wp--preset--color--surface, #fff);
	color: var(--wp--preset--color--primary-active, #0d5f94);
}

.bluegam-store-credit__actions button.is-link {
	background: transparent;
	border-color: transparent;
	color: var(--wp--preset--color--text-muted, #526b83);
	grid-column: 1 / -1;
	text-decoration: underline;
}

.bluegam-store-credit__toggle:disabled,
.bluegam-store-credit__actions button:disabled {
	cursor: wait;
	opacity: .65;
}

.bluegam-store-credit__applied {
	color: var(--wp--preset--color--success, #087844);
	font-size: var(--wp--preset--font-size--caption, 13px);
	font-weight: 700;
}

.bluegam-store-credit__error {
	color: var(--wp--preset--color--error, #b42318);
	font-size: var(--wp--preset--font-size--caption, 13px);
	font-weight: 700;
}

@media (max-width: 640px) {
	.bluegam-store-credit__panel {
		padding: var(--wp--preset--spacing--30, 12px);
	}

	.bluegam-store-credit__actions {
		grid-template-columns: minmax(0, 1fr);
	}

	.bluegam-store-credit__actions button {
		inline-size: 100%;
	}

	.bluegam-store-credit__actions button.is-link {
		grid-column: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bluegam-store-credit__chevron {
		transition: none;
	}
}
