/*
 * Built on the site's own tokens — --an-bg, --an-text, --an-accent, the spacing
 * scale — because a second visual identity inside one site is a bug. Same
 * decision as an-mushroom, and the fallbacks after each var() are there so that
 * these pages still look deliberate if the theme's stylesheet fails to load,
 * which on a checkout page is worth the extra bytes.
 *
 * The one place this raises its voice is the leading product card, and only in
 * the market where that product is genuinely the better buy.
 */

.an-pay { max-width: 1100px; margin: 0 auto; padding: var(--an-space-7, 48px) var(--an-gutter, 24px) var(--an-space-10, 128px); }

.an-pay-head { margin-bottom: var(--an-space-6, 32px); }
.an-pay-head h1 { font: 600 var(--an-t-h1, 3rem)/1.05 var(--an-font-editorial, Georgia, serif); letter-spacing: -.02em; margin: .2em 0 .4em; }
.an-pay-sub { color: var(--an-text-2, #A2A9A6); max-width: 68ch; font-size: var(--an-t-small, .9375rem); line-height: 1.65; }
.an-pay-hint { color: var(--an-text-2, #A2A9A6); font-size: .8125rem; line-height: 1.6; margin: 8px 0 0; }
.an-pay-caveat { color: var(--an-text-2, #A2A9A6); font-size: .8125rem; margin-top: var(--an-space-7, 48px); }

/* ── currency control ─────────────────────────────────────────────── */

.an-pay-cur {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	padding: 12px var(--an-space-4, 16px);
	border: 1px solid var(--an-line, #262B2E); border-radius: var(--an-radius-lg, 16px);
	background: var(--an-surface, #15181A);
	margin-bottom: var(--an-space-6, 32px);
}
.an-pay-cur-label { font: 600 .75rem/1 var(--an-font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--an-text-2, #A2A9A6); }
.an-pay-cur-btn {
	font: 600 .8125rem/1 var(--an-font-ui, system-ui);
	padding: 8px 14px; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--an-line, #262B2E);
	background: transparent; color: var(--an-text, #E6E9E7);
}
.an-pay-cur-btn:hover { border-color: var(--an-accent, #E8763F); }
.an-pay-cur-btn.is-on { background: var(--an-accent, #E8763F); border-color: var(--an-accent, #E8763F); color: #1a1206; }
.an-pay-cur-note { color: var(--an-text-2, #A2A9A6); font-size: .75rem; margin-left: auto; }

/* ── product cards ────────────────────────────────────────────────── */

.an-pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--an-space-5, 24px); margin-bottom: var(--an-space-8, 64px); }
.an-pay-card {
	position: relative; display: flex; flex-direction: column;
	border: 1px solid var(--an-line, #262B2E); border-radius: var(--an-radius-lg, 16px);
	background: var(--an-surface, #15181A); padding: var(--an-space-5, 24px);
}
.an-pay-card.is-lead { border-color: rgba(232,118,63,.44); box-shadow: 0 6px 26px -12px rgba(232,118,63,.5); }
.an-pay-card.is-free { border-style: dashed; }
.an-pay-flag {
	position: absolute; top: -10px; left: var(--an-space-5, 24px);
	font: 700 .6875rem/1 var(--an-font-mono, monospace); letter-spacing: .08em; text-transform: uppercase;
	background: linear-gradient(92deg,#E8763F,#F0B429); color: #1a1206;
	padding: 5px 10px; border-radius: 999px;
}
.an-pay-card h3 { font: 600 1.0625rem/1.3 var(--an-font-ui, system-ui); margin: 0 0 10px; }
.an-pay-price { margin: 0 0 12px; display: flex; align-items: baseline; gap: 8px; }
.an-pay-price b { font: 700 1.75rem/1 var(--an-font-ui, system-ui); letter-spacing: -.02em; }
.an-pay-price span { color: var(--an-text-2, #A2A9A6); font-size: .75rem; }
.an-pay-blurb { font-size: .875rem; line-height: 1.6; color: var(--an-text-2, #A2A9A6); margin: 0 0 14px; flex: 1; }
.an-pay-ent { margin: 0 0 14px; }
.an-pay-ent code, .an-pay-table code, .an-pay-files code { font: .75rem/1.4 var(--an-font-mono, monospace); color: var(--an-text-2, #A2A9A6); }

.an-pay-btn {
	display: inline-block; text-decoration: none; text-align: center; cursor: pointer;
	font: 600 .875rem/1 var(--an-font-ui, system-ui);
	padding: 12px 20px; border-radius: var(--an-radius-sm, 8px);
	background: var(--an-accent, #E8763F); border: 1px solid var(--an-accent, #E8763F); color: #1a1206;
}
.an-pay-btn:hover { filter: brightness(1.08); }
.an-pay-btn:disabled { opacity: .55; cursor: progress; }
.an-pay-btn.is-quiet { background: transparent; color: var(--an-text, #E6E9E7); border-color: var(--an-line, #262B2E); }
.an-pay-btn.is-quiet:hover { border-color: var(--an-accent, #E8763F); filter: none; }

/* ── panels, sections, tables ─────────────────────────────────────── */

.an-pay-arch {
	border: 1px solid var(--an-line, #262B2E); border-left: 3px solid var(--an-accent, #E8763F);
	border-radius: var(--an-radius-lg, 16px); background: var(--an-surface, #15181A);
	padding: var(--an-space-5, 24px); margin-bottom: var(--an-space-7, 48px);
}
.an-pay-arch h2 { font: 600 1.15rem/1.3 var(--an-font-ui, system-ui); margin: 0 0 var(--an-space-4, 16px); }
.an-pay-arch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--an-space-5, 24px); }
.an-pay-arch-grid h3 { font: 600 .75rem/1 var(--an-font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--an-accent, #E8763F); margin: 0 0 8px; }
.an-pay-arch-grid p, .an-pay-arch p { font-size: .875rem; line-height: 1.6; color: var(--an-text-2, #A2A9A6); margin: 0 0 10px; }

.an-pay-sec { margin-bottom: var(--an-space-7, 48px); }
.an-pay-sec h2 { font: 600 1.25rem/1.3 var(--an-font-ui, system-ui); margin: 0 0 var(--an-space-4, 16px); }
.an-pay-sec p { font-size: .9375rem; line-height: 1.7; color: var(--an-text-2, #A2A9A6); max-width: 70ch; }

.an-pay-scroll { overflow-x: auto; }
.an-pay-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.an-pay-table th, .an-pay-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--an-line, #262B2E); white-space: nowrap; }
.an-pay-table th { font: 600 .6875rem/1 var(--an-font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--an-text-2, #A2A9A6); }

.an-pay-files { list-style: none; margin: 0; padding: 0; }
.an-pay-files li {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
	padding: 12px 0; border-bottom: 1px solid var(--an-line, #262B2E);
}
.an-pay-files a { font-weight: 600; }
.an-pay-files span { color: var(--an-text-2, #A2A9A6); font-size: .8125rem; }
.an-pay-files code { margin-left: auto; }

/* ── forms ────────────────────────────────────────────────────────── */

.an-pay-check { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--an-space-5, 24px); align-items: start; }
.an-pay-check-sum, .an-pay-form {
	border: 1px solid var(--an-line, #262B2E); border-radius: var(--an-radius-lg, 16px);
	background: var(--an-surface, #15181A); padding: var(--an-space-5, 24px);
}
.an-pay-check-sum div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--an-line, #262B2E); font-size: .875rem; }
.an-pay-check-sum div:last-child { border-bottom: 0; }
.an-pay-check-sum span { color: var(--an-text-2, #A2A9A6); }
.an-pay-check-sum b { text-align: right; }

.an-pay-lookup { margin-bottom: var(--an-space-6, 32px); max-width: 34rem; }
.an-pay-field { margin-bottom: var(--an-space-4, 16px); }
.an-pay-field label { display: block; font: 600 .75rem/1 var(--an-font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--an-text-2, #A2A9A6); margin-bottom: 8px; }
.an-pay-field input {
	width: 100%; box-sizing: border-box; padding: 11px 13px;
	font: 400 .9375rem/1.3 var(--an-font-ui, system-ui);
	color: var(--an-text, #E6E9E7); background: var(--an-bg, #0E1113);
	border: 1px solid var(--an-line, #262B2E); border-radius: var(--an-radius-sm, 8px);
}
.an-pay-field input:focus { outline: 2px solid var(--an-accent, #E8763F); outline-offset: 1px; }

.an-pay-status { min-height: 1.4em; margin: 12px 0 0; font-size: .8125rem; color: var(--an-text-2, #A2A9A6); }
.an-pay-status.is-bad { color: #E8763F; }

.an-pay-warn {
	border: 1px solid rgba(232,118,63,.4); border-radius: var(--an-radius-sm, 8px);
	background: rgba(232,118,63,.08); padding: 14px 16px;
	font-size: .875rem; line-height: 1.6; max-width: 70ch;
}

@media (max-width: 640px) {
	.an-pay-cur-note { margin-left: 0; width: 100%; }
	.an-pay-files code { margin-left: 0; width: 100%; }
}