/* Pay Offline: accepted methods with a copy button, numbered steps and a notice. */

.vsk-pay__methods {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--vsk-space-4);
}

.vsk-pay__method {
	display: flex;
	align-items: flex-start;
	gap: var(--vsk-space-4);
	padding: var(--vsk-space-5);
	border-radius: var(--vsk-radius);
	background: var(--vsk-surface);
}

.vsk-pay__icon {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--vsk-radius-pill);
	background: color-mix(in srgb, var(--vsk-color-accent) 14%, var(--vsk-surface));
	color: var(--vsk-color-accent);
	font-size: 1.25rem;
}

.vsk-pay__icon svg {
	width: 1.25em;
	height: 1.25em;
	fill: currentcolor;
}

.vsk-pay__main {
	min-width: 0;
}

.vsk-pay__label {
	margin: 0;
	color: var(--vsk-color-primary);
	font-family: var(--vsk-font-heading);
	font-weight: var(--vsk-weight-heading);
	font-size: 1.15rem;
	line-height: 1.3;
}

.vsk-pay__line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vsk-space-2);
	margin: var(--vsk-space-2) 0 0;
}

.vsk-pay__detail {
	color: var(--vsk-color-primary);
	font-weight: 600;
	overflow-wrap: anywhere;
}

a.vsk-pay__detail {
	color: var(--vsk-color-accent);
}

.vsk-pay__copy {
	padding: 0.2rem 0.7rem;
	border: 1px solid var(--vsk-border);
	border-radius: var(--vsk-radius-pill);
	background: var(--vsk-surface);
	color: var(--vsk-color-primary);
	font-family: var(--vsk-font-button);
	font-size: 0.8rem;
	cursor: pointer;
}

.vsk-pay__copy:hover,
.vsk-pay__copy.is-done {
	border-color: var(--vsk-color-accent);
	color: var(--vsk-color-accent);
}

.vsk-pay__copy:focus-visible {
	outline: 2px solid var(--vsk-color-accent);
	outline-offset: 2px;
}

.vsk-pay__note {
	margin: var(--vsk-space-2) 0 0;
	color: var(--vsk-color-secondary);
	font-size: 0.95rem;
	line-height: 1.5;
}

.vsk-pay__steps-wrap {
	margin-top: var(--vsk-space-6);
}

.vsk-pay__steps-title {
	margin: 0 0 var(--vsk-space-3);
	color: var(--vsk-color-primary);
	font-family: var(--vsk-font-heading);
	font-weight: var(--vsk-weight-heading);
	font-size: 1.3rem;
}

.vsk-pay__steps {
	display: grid;
	gap: var(--vsk-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: vsk-pay;
}

.vsk-pay__steps li {
	position: relative;
	padding-left: 2.5rem;
	line-height: 1.5;
	counter-increment: vsk-pay;
}

.vsk-pay__steps li::before {
	content: counter(vsk-pay);
	position: absolute;
	top: -0.1rem;
	left: 0;
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: var(--vsk-radius-pill);
	background: var(--vsk-color-accent);
	color: var(--vsk-color-on-accent);
	font-weight: 700;
	font-size: 0.9rem;
}

.vsk-pay__notice {
	margin-top: var(--vsk-space-5);
	padding: var(--vsk-space-4) var(--vsk-space-5);
	border-radius: var(--vsk-radius);
	background: color-mix(in srgb, var(--vsk-color-highlight) 14%, var(--vsk-surface));
}

.vsk-pay__notice > :first-child {
	margin-top: 0;
}

.vsk-pay__notice > :last-child {
	margin-bottom: 0;
}

/* List layout: full-width rows, no boxes. */
.vsk-pay-offline--list .vsk-pay__methods {
	grid-template-columns: 1fr;
	gap: 0;
}

.vsk-pay-offline--list .vsk-pay__method {
	padding: var(--vsk-space-4) 0;
	border-bottom: 1px solid var(--vsk-border);
	border-radius: 0;
	background: transparent;
}

.vsk-pay-offline.vsk-preset--theme.vsk-pay-offline--cards .vsk-pay__method,
.vsk-pay-offline.vsk-preset--outline.vsk-pay-offline--cards .vsk-pay__method {
	border: 1px solid var(--vsk-border);
}

.vsk-pay-offline.vsk-preset--elevated.vsk-pay-offline--cards .vsk-pay__method {
	box-shadow: var(--vsk-shadow-sm);
}

.vsk-pay-offline.vsk-preset--tinted.vsk-pay-offline--cards .vsk-pay__method {
	background: var(--vsk-surface-muted);
}