/**
 * Credit Purchase — Block Styles.
 *
 * @package WBListoraPro
 */

/* ---- Wrapper ---- */

.listora-credits {
	max-width: 960px;
	margin-inline: auto;
}

/* ---- Login Prompt ---- */

.listora-credits__login {
	text-align: center;
	padding: var(--listora-space-12, 2.5rem);
	background: var(--listora-card-bg, var(--listora-bg-elevated));
	border: var(--listora-card-border, 1px solid var(--listora-border-default));
	border-radius: var(--listora-radius-xl, 1rem);
}

.listora-credits__login h2 {
	margin: 0 0 0.5rem;
	font-size: var(--listora-text-xl, 1.25rem);
	font-weight: var(--listora-weight-bold, 700);
}

.listora-credits__login p {
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	margin: 0 0 var(--listora-space-4, 1rem);
}

/* ---- Balance Display ---- */

.listora-credits__balance {
	text-align: center;
	font-size: var(--listora-text-lg, 1.125rem);
	color: var(--listora-text, var(--listora-wp-admin-text));
	margin-block-end: var(--listora-space-6, 1.5rem);
	padding: var(--listora-space-4, 1rem);
	background: var(--listora-card-bg, var(--listora-bg-elevated));
	border: var(--listora-card-border, 1px solid var(--listora-border-default));
	border-radius: var(--listora-radius-md, 0.5rem);
}

.listora-credits__balance strong {
	font-size: var(--listora-text-2xl, 1.5rem);
	font-weight: var(--listora-weight-bold, 700);
	color: var(--listora-primary, var(--listora-info));
}

/* ---- Pack Grid ---- */

.listora-credits__grid {
	display: grid;
	grid-template-columns: repeat(var(--listora-credits-columns, 3), minmax(0, 1fr));
	gap: var(--listora-space-6, 1.5rem);
}

/* ---- Pack Card ---- */

.listora-credits__pack {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--listora-space-6, 1.5rem);
	background: var(--listora-card-bg, var(--listora-bg-elevated));
	border: var(--listora-card-border, 1px solid var(--listora-border-default));
	border-radius: var(--listora-radius-xl, 1rem);
	box-shadow: var(--listora-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
	transition: transform var(--listora-transition-fast, 0.15s),
		box-shadow var(--listora-transition-fast, 0.15s);
}

.listora-credits__pack:hover {
	transform: translateY(-2px);
	box-shadow: var(--listora-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
}

/* ---- Pack Name ---- */

.listora-credits__pack-name {
	margin: 0 0 var(--listora-space-2, 0.75rem);
	font-size: var(--listora-text-lg, 1.125rem);
	font-weight: var(--listora-weight-bold, 700);
	color: var(--listora-text, var(--listora-wp-admin-text));
}

/* ---- Pack Credits ---- */

.listora-credits__pack-credits {
	font-size: var(--listora-text-2xl, 1.5rem);
	font-weight: var(--listora-weight-bold, 700);
	color: var(--listora-primary, var(--listora-info));
	margin-block-end: var(--listora-space-1, 0.5rem);
}

/* ---- Pack Price ---- */

.listora-credits__pack-price {
	font-size: var(--listora-text-base, 1rem);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	margin-block-end: var(--listora-space-4, 1rem);
}

/* ---- Buy Button ---- */

.listora-credits__pack-buy {
	display: block;
	width: 100%;
	padding: 0.75rem 1.5rem;
	background: var(--listora-primary, var(--listora-info));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	font-size: var(--listora-text-base, 1rem);
	font-weight: var(--listora-weight-semibold, 600);
	border: none;
	border-radius: var(--listora-radius-md, 0.5rem);
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background var(--listora-transition-fast, 0.15s);
	box-sizing: border-box;
	margin-block-start: auto;
}

.listora-credits__pack-buy:hover {
	filter: brightness(0.9);
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
}

.listora-credits__pack-buy:focus-visible {
	outline: 2px solid var(--listora-primary, var(--listora-info));
	outline-offset: 2px;
}

.listora-credits__pack-buy[disabled],
.listora-credits__pack-buy.is-busy {
	opacity: 0.65;
	cursor: progress;
}

/* ---- Pack Buttons (multi-gateway) ---- */

.listora-credits__pack-buttons {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-1, 0.5rem);
	width: 100%;
	margin-block-start: auto;
}

.listora-credits__pack-buttons .listora-credits__pack-buy {
	margin-block-start: 0;
}

.listora-credits__pack-error {
	margin: var(--listora-space-1, 0.5rem) 0 0;
	font-size: var(--listora-text-sm, 0.875rem);
	color: var(--listora-danger, var(--listora-danger-fg));
	text-align: center;
}

.listora-credits__pack-unavailable {
	margin: var(--listora-space-1, 0.5rem) 0 0;
	font-size: var(--listora-text-sm, 0.875rem);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	font-style: italic;
}

/* ---- Empty State ---- */

.listora-credits__empty {
	text-align: center;
	padding: var(--listora-space-12, 2.5rem);
	background: var(--listora-card-bg, var(--listora-bg-elevated));
	border: var(--listora-card-border, 1px solid var(--listora-border-default));
	border-radius: var(--listora-radius-xl, 1rem);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
}

.listora-credits__empty a {
	color: var(--listora-primary, var(--listora-info));
	text-decoration: underline;
}

/* ---- Responsive ---- */

@media (max-width: 1024px) {
	.listora-credits__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.listora-credits__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}