/*
 * Volsever Connect: player ID checker.
 * Inherits the theme's fonts and colours. Override the custom properties to restyle.
 */

.vsc-checker {
	--vsc-border: color-mix(in srgb, currentColor 25%, transparent);
	--vsc-ok: #13795b;
	--vsc-error: #b42318;
	--vsc-radius: 6px;
	--vsc-gap: 0.75rem;

	display: grid;
	gap: var(--vsc-gap);
	max-width: 30rem;
	margin: 1.5rem 0;
}

.vsc-checker--product {
	margin: 0 0 1.25rem;
}

.vsc-checker__title {
	margin: 0;
	font-weight: 600;
	font-size: 1.1em;
}

.vsc-checker__field,
.vsc-checker__actions {
	display: grid;
	gap: 0.35rem;
	margin: 0;
}

.vsc-checker__field[hidden] {
	display: none;
}

.vsc-checker label {
	font-weight: 600;
	font-size: 0.95em;
}

.vsc-checker input[type="text"],
.vsc-checker select {
	width: 100%;
	box-sizing: border-box;
	min-height: 2.75rem;
	font: inherit;
}

.vsc-checker__button {
	justify-self: start;
	min-height: 2.75rem;
	cursor: pointer;
}

.vsc-checker__button:disabled {
	opacity: 0.6;
	cursor: progress;
}

.vsc-checker__result:empty {
	display: none;
}

.vsc-checker__result {
	border: 1px solid var(--vsc-border);
	border-left-width: 4px;
	border-radius: var(--vsc-radius);
	padding: 0.75rem 1rem;
}

.vsc-checker__result p {
	margin: 0;
}

.vsc-checker__result[data-state="ok"] {
	border-left-color: var(--vsc-ok);
}

.vsc-checker__result[data-state="error"] {
	border-left-color: var(--vsc-error);
	color: var(--vsc-error);
}

.vsc-checker__name {
	font-weight: 700;
	font-size: 1.15em;
	overflow-wrap: anywhere;
}

.vsc-checker__result dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.15rem 0.75rem;
	margin: 0.5rem 0 0;
	font-size: 0.9em;
}

.vsc-checker__result dt {
	opacity: 0.7;
}

.vsc-checker__result dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.vsc-admin-hint {
	padding: 0.75rem 1rem;
	border: 1px dashed currentColor;
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.vsc-checker {
		--vsc-border: rgba(127, 127, 127, 0.4);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.vsc-checker__result[data-state="ok"] {
		animation: vsc-in 180ms ease-out;
	}
}

@keyframes vsc-in {
	from {
		opacity: 0;
		transform: translateY(2px);
	}
}

/* Pagostore price list: [volsever_pagostore_prices] */

.vsc-prices {
	--vsc-border: color-mix(in srgb, currentColor 18%, transparent);
	--vsc-tag: #b54708;

	max-width: 34rem;
	margin: 1.5rem 0;
}

.vsc-prices__title {
	margin: 0 0 0.5rem;
	font-weight: 600;
	font-size: 1.1em;
}

.vsc-prices__table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.vsc-prices__table th,
.vsc-prices__table td {
	padding: 0.6rem 0.5rem;
	border-bottom: 1px solid var(--vsc-border);
	text-align: left;
	vertical-align: middle;
}

.vsc-prices__table thead th {
	font-size: 0.85em;
	opacity: 0.75;
	font-weight: 600;
}

.vsc-prices__table tbody th {
	font-weight: 500;
}

.vsc-prices__table .vsc-num {
	text-align: right;
	white-space: nowrap;
}

.vsc-prices__table del {
	opacity: 0.6;
	margin-right: 0.35rem;
}

.vsc-prices__tag {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0 0.4rem;
	font-size: 0.75em;
	line-height: 1.6;
	border: 1px solid var(--vsc-tag);
	color: var(--vsc-tag);
	border-radius: 3px;
	vertical-align: middle;
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.vsc-prices {
		--vsc-border: rgba(127, 127, 127, 0.3);
	}
}