/* ==========================================================================
   Make a Payment page (page-templates/template-payment.php) — loaded on
   this page only (inc/payment.php).
   Hover colours: steps — green · saffron · gold · terracotta. Payment
   tabs — QR saffron · Bank green · International dusk blue. Wallet chips
   rotate olive / mauve / terracotta / green. "Before You Pay" cards —
   green · saffron · mauve.
   ========================================================================== */
#pay-methods { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ---- Hero badges ---- */
.pay-hero-badges { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pay-hero-badges li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 0.84rem;
	font-weight: 500;
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.pay-hero-badges svg { width: 17px; height: 17px; color: #f0d9a4; transition: color var(--transition); }
.pay-hero-badges li:hover { background: var(--color-secondary); border-color: var(--color-secondary); transform: translateY(-2px); }
.pay-hero-badges li:hover svg { color: #fff; }

/* ---- How Payment Works ---- */
.pay-steps {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}
/* Dashed line joining the steps (wide screens only). */
.pay-steps::before {
	content: '';
	position: absolute;
	top: 60px;
	left: 12%;
	right: 12%;
	border-top: 2px dashed var(--color-border);
}
.pay-step {
	--step: var(--color-primary);
	--step-tint: rgba(47, 93, 80, 0.1);
	position: relative;
	padding: 28px 22px 26px;
	text-align: center;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.pay-step:nth-child(4n+2) { --step: var(--color-secondary);    --step-tint: rgba(217, 138, 61, 0.12); }
.pay-step:nth-child(4n+3) { --step: var(--color-gold);         --step-tint: rgba(201, 162, 75, 0.15); }
.pay-step:nth-child(4n+4) { --step: var(--accent-terracotta);  --step-tint: rgba(201, 120, 79, 0.13); }
.pay-step-num {
	position: absolute;
	top: 12px;
	right: 18px;
	font-family: var(--font-heading);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--step);
	opacity: 0.25;
	transition: opacity var(--transition);
}
.pay-step-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 14px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--step);
	background: var(--step-tint);
	transition: background var(--transition), color var(--transition), transform 450ms ease, border-radius 450ms ease;
}
.pay-step-icon svg { width: 28px; height: 28px; }
.pay-step h3 { margin: 0 0 8px; font-size: 1.1rem; }
.pay-step p { margin: 0; font-size: 0.9rem; color: var(--color-text-light); }
.pay-step:hover { transform: translateY(-8px); border-color: var(--step); box-shadow: 0 20px 40px rgba(43, 38, 32, 0.14); }
.pay-step:hover .pay-step-icon { background: var(--step); color: #fff; border-radius: 50%; transform: rotate(-8deg) scale(1.06); }
.pay-step:hover .pay-step-num { opacity: 0.7; }

/* ---- "Sample details" notice ---- */
.pay-sample-note {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	max-width: 980px;
	margin: -18px auto 28px;
	padding: 14px 18px;
	border-radius: var(--radius-md);
	background: #fff8ec;
	border: 1px dashed var(--accent-ochre);
	font-size: 0.9rem;
}
.pay-sample-note svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; color: var(--color-secondary-dark); }
.pay-sample-note p { margin: 0; }
.pay-sample-note em { display: block; margin-top: 4px; font-size: 0.82rem; color: var(--color-text-light); }
.pay-sample {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a5a14;
	background: #fbe8c8;
}

/* ---- Payment method tabs ---- */
.pay-methods { max-width: 980px; margin: 0 auto; }
.pay-tablist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.pay-tablist[hidden] { display: none; }
.pay-tab {
	--tab: var(--color-secondary);
	--tab-tint: rgba(217, 138, 61, 0.12);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	text-align: left;
	font: inherit;
	color: var(--color-primary-dark);
	background: var(--color-surface);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.pay-tab--bank { --tab: var(--color-primary);    --tab-tint: rgba(47, 93, 80, 0.1); }
.pay-tab--intl { --tab: var(--accent-dusk-blue); --tab-tint: rgba(107, 127, 158, 0.14); }
.pay-tab::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: var(--tab);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 350ms ease;
}
.pay-tab-icon {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--tab);
	background: var(--tab-tint);
	transition: background var(--transition), color var(--transition), transform 400ms ease;
}
.pay-tab-icon svg { width: 22px; height: 22px; }
.pay-tab-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pay-tab-text strong { font-size: 0.98rem; }
.pay-tab-text small { font-size: 0.76rem; color: var(--color-text-light); }
.pay-tab:hover { border-color: var(--tab); background: var(--tab-tint); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.pay-tab:hover .pay-tab-icon { background: var(--tab); color: #fff; transform: rotate(-8deg); }
.pay-tab.is-active { border-color: var(--tab); background: var(--tab-tint); box-shadow: 0 0 0 3px var(--tab-tint); }
.pay-tab.is-active::after { transform: scaleX(1); }
.pay-tab.is-active .pay-tab-icon { background: var(--tab); color: #fff; }
.pay-tab:focus-visible { outline: 2px solid var(--tab); outline-offset: 3px; }

/* ---- Panels (without JavaScript they all show, one under another) ---- */
.pay-panel {
	padding: 36px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}
.pay-panel + .pay-panel { margin-top: 22px; }
/* No fill-mode, so a panel is never held invisible if the animation can't run. */
.pay-methods.is-tabbed .pay-panel { margin-top: 0; animation: pay-fade 400ms ease; }
.pay-panel:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 4px; }
.pay-panel-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; font-size: 1.35rem; }
.pay-panel-title svg { width: 26px; height: 26px; color: var(--color-secondary); }
.pay-panel--bank .pay-panel-title svg { color: var(--color-primary); }
.pay-panel--intl .pay-panel-title svg { color: var(--accent-dusk-blue); }
.pay-panel-intro { margin: 0 0 20px; color: var(--color-text-light); }

/* ---- QR card: gold corner brackets, moving scan line, "Sample" ribbon ---- */
.pay-qr-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: center; }
.pay-qr-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: 0;
	padding: 26px 24px 22px;
	text-align: center;
	color: #fff;
	background: linear-gradient(160deg, var(--color-primary-dark), var(--color-primary));
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	transition: transform 350ms ease, box-shadow 350ms ease;
}
.pay-qr-card::before {
	content: '';
	position: absolute;
	right: -70px;
	bottom: -70px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 30px solid rgba(201, 162, 75, 0.16);
	z-index: -1;
}
.pay-qr-frame { position: relative; padding: 14px; background: #fff; border-radius: 18px; }
.pay-qr-frame::before {
	--c: var(--color-gold);
	content: '';
	position: absolute;
	inset: 5px;
	pointer-events: none;
	background:
		linear-gradient(var(--c), var(--c)) left top / 28px 4px,
		linear-gradient(var(--c), var(--c)) left top / 4px 28px,
		linear-gradient(var(--c), var(--c)) right top / 28px 4px,
		linear-gradient(var(--c), var(--c)) right top / 4px 28px,
		linear-gradient(var(--c), var(--c)) left bottom / 28px 4px,
		linear-gradient(var(--c), var(--c)) left bottom / 4px 28px,
		linear-gradient(var(--c), var(--c)) right bottom / 28px 4px,
		linear-gradient(var(--c), var(--c)) right bottom / 4px 28px;
	background-repeat: no-repeat;
	transition: inset 350ms ease;
}
.pay-qr-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }

/* "QR code coming soon" card — shown in the frame until the real QR image
   is in the theme (sty_payment_details() in inc/payment.php). */
.pay-qr-frame--soon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	aspect-ratio: 1;
	text-align: center;
	color: var(--color-primary-dark);
}
.pay-qr-soon-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 6px;
	border-radius: 50%;
	background: rgba(217, 138, 61, 0.14);
	color: var(--color-secondary-dark);
}
.pay-qr-soon-icon svg { width: 32px; height: 32px; }
.pay-qr-frame--soon strong { font-family: var(--font-heading); font-size: 1.1rem; }
.pay-qr-frame--soon > span:not(.pay-qr-soon-icon) { font-size: 0.85rem; color: var(--color-text-light); }
.pay-qr-frame--soon em { font-size: 0.72rem; color: var(--color-error); overflow-wrap: anywhere; }
.pay-scan-line {
	position: absolute;
	left: 14px;
	right: 14px;
	top: 14px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
	box-shadow: 0 0 12px rgba(217, 138, 61, 0.8);
	opacity: 0.85;
	animation: pay-scan 2.6s ease-in-out infinite;
}
.pay-ribbon {
	position: absolute;
	top: 18px;
	left: -40px;
	z-index: 2;
	width: 150px;
	padding: 4px 0;
	transform: rotate(-45deg);
	text-align: center;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	background: var(--color-secondary);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.pay-qr-card figcaption { display: flex; flex-direction: column; gap: 2px; margin: 16px 0 14px; }
.pay-qr-card figcaption strong { font-family: var(--font-heading); font-size: 1.15rem; }
.pay-qr-card figcaption span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.75); }
.pay-download svg { width: 16px; height: 16px; transition: transform var(--transition); }
.pay-download:hover svg { transform: translateY(2px); }
.pay-qr-card:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 26px 50px rgba(30, 63, 54, 0.35); }
.pay-qr-card:hover .pay-qr-frame::before { inset: 1px; }

/* Numbered "how to" steps beside the QR. */
.pay-howto { list-style: none; counter-reset: pay-howto; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.pay-howto li {
	counter-increment: pay-howto;
	position: relative;
	padding: 10px 14px 10px 52px;
	font-size: 0.93rem;
	background: var(--color-bg);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.pay-howto li::before {
	content: counter(pay-howto);
	position: absolute;
	top: 50%;
	left: 12px;
	width: 28px;
	height: 28px;
	margin-top: -14px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	font-weight: 700;
	color: #fff;
	background: var(--color-secondary);
	transition: background var(--transition), transform var(--transition);
}
.pay-howto li:hover { background: var(--color-surface); border-color: var(--color-secondary); transform: translateX(6px); }
.pay-howto li:hover::before { background: var(--color-secondary-dark); transform: scale(1.12) rotate(-10deg); }

/* Wallet / app chips. */
.pay-apps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pay-apps-label { margin-right: 4px; font-size: 0.8rem; font-weight: 600; color: var(--color-text-light); }
.pay-app {
	--app: var(--accent-olive);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-primary-dark);
	background: var(--color-surface);
	border: 1.5px solid var(--color-border);
	border-radius: 999px;
	cursor: default;
	transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.pay-app--2 { --app: var(--accent-mauve); }
.pay-app--3 { --app: var(--accent-terracotta); }
.pay-app--4 { --app: var(--color-primary); }
.pay-app::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--app); transition: background var(--transition); }
.pay-app:hover { color: #fff; background: var(--app); border-color: var(--app); transform: translateY(-2px); }
.pay-app:hover::before { background: #fff; }

/* ---- Account details + Copy buttons ---- */
.pay-details { margin: 0; display: grid; gap: 10px; }
.pay-row {
	--row: var(--color-primary);
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	padding: 14px 16px;
	background: var(--color-bg);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.pay-panel--intl .pay-row { --row: var(--accent-dusk-blue); }
.pay-row::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	background: var(--row);
	transform: scaleY(0);
	transition: transform 300ms ease;
}
.pay-row dt { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-light); }
.pay-row dd { margin: 0; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pay-value { font-weight: 600; color: var(--color-primary-dark); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pay-row:hover { background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-sm); transform: translateX(4px); }
.pay-row:hover::before { transform: scaleY(1); }
.pay-copy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	padding: 6px 12px;
	font: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--color-primary-dark);
	background: var(--color-surface);
	border: 1.5px solid var(--color-border);
	border-radius: 999px;
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.pay-copy[hidden] { display: none; }
.pay-copy svg { width: 15px; height: 15px; }
.pay-copy:hover,
.pay-copy:focus-visible { color: #fff; background: var(--row); border-color: var(--row); transform: translateY(-1px); }
.pay-copy.is-copied { color: #fff; background: var(--color-secondary); border-color: var(--color-secondary); }

.pay-tip {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 18px 0 0;
	padding: 12px 14px;
	font-size: 0.86rem;
	color: var(--color-primary-dark);
	background: rgba(201, 162, 75, 0.12);
	border: 1px dashed rgba(201, 162, 75, 0.6);
	border-radius: var(--radius-sm);
}
.pay-tip svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--color-gold); }

/* ---- "Paid? Send Us Your Receipt" banner ---- */
.pay-receipt {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 28px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px 44px;
	color: #fff;
	background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary) 60%, #3d6f60);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}
.pay-receipt::before {
	content: '';
	position: absolute;
	top: -80px;
	right: -60px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(217, 138, 61, 0.35), transparent 70%);
	z-index: -1;
}
.pay-receipt-icon {
	width: 76px;
	height: 76px;
	border-radius: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #f0d9a4;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	animation: pay-float 3.5s ease-in-out infinite;
}
.pay-receipt-icon svg { width: 36px; height: 36px; }
.pay-receipt h2 { margin: 0 0 6px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: #fff; }
.pay-receipt p { margin: 0; color: rgba(255, 255, 255, 0.82); }
.pay-receipt-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pay-receipt-actions svg { width: 18px; height: 18px; }
.pay-receipt .pay-receipt-wa:hover { color: #fff; background: #25d366; }
.pay-receipt .pay-receipt-mail { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.pay-receipt .pay-receipt-mail:hover { color: var(--color-primary-dark); background: var(--color-gold); border-color: var(--color-gold); }

/* ---- "Before You Pay" cards ---- */
.pay-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pay-note {
	--note: var(--color-primary);
	position: relative;
	overflow: hidden;
	padding: 28px 26px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.pay-note:nth-child(3n+2) { --note: var(--color-secondary); }
.pay-note:nth-child(3n+3) { --note: var(--accent-mauve); }
.pay-note::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--note);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 350ms ease;
}
.pay-note-icon {
	width: 50px;
	height: 50px;
	margin-bottom: 14px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--note);
	background: var(--color-bg-alt);
	transition: background var(--transition), color var(--transition), transform 450ms ease;
}
.pay-note-icon svg { width: 24px; height: 24px; }
.pay-note h3 { margin: 0 0 6px; font-size: 1.1rem; }
.pay-note p { margin: 0; font-size: 0.92rem; color: var(--color-text-light); }
.pay-note a {
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-color: var(--color-secondary);
	text-underline-offset: 3px;
}
.pay-note a:hover { color: var(--color-secondary-dark); }
.pay-note:hover { transform: translateY(-6px); border-color: var(--note); box-shadow: 0 18px 40px rgba(43, 38, 32, 0.14); }
.pay-note:hover::before { transform: scaleX(1); }
.pay-note:hover .pay-note-icon { color: #fff; background: var(--note); transform: rotate(-8deg) scale(1.06); }

@keyframes pay-fade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}
@keyframes pay-scan {
	0%, 100% { top: 14px; }
	50%      { top: calc(100% - 17px); }
}
@keyframes pay-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

/* ---- Tablet & mobile ---- */
@media (max-width: 1024px) {
	.pay-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pay-steps::before { display: none; }
	.pay-receipt { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.pay-receipt-actions { justify-content: center; }
}
@media (max-width: 860px) {
	.pay-qr-layout { grid-template-columns: 1fr; gap: 28px; }
	.pay-qr-card { width: 100%; max-width: 320px; margin: 0 auto; }
	.pay-notes { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.pay-steps,
	.pay-tablist { grid-template-columns: 1fr; }
	.pay-tablist { gap: 10px; }
	.pay-panel { padding: 24px 18px; }
	.pay-row { grid-template-columns: 1fr; gap: 6px; }
	.pay-receipt { padding: 30px 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.pay-scan-line, .pay-receipt-icon, .pay-methods.is-tabbed .pay-panel { animation: none; }
	.pay-hero-badges li, .pay-step, .pay-step-icon, .pay-tab, .pay-tab-icon, .pay-qr-card,
	.pay-howto li, .pay-app, .pay-row, .pay-copy, .pay-note, .pay-note-icon { transition: none; }
	.pay-hero-badges li:hover, .pay-step:hover, .pay-step:hover .pay-step-icon, .pay-tab:hover,
	.pay-tab:hover .pay-tab-icon, .pay-qr-card:hover, .pay-howto li:hover, .pay-app:hover,
	.pay-row:hover, .pay-copy:hover, .pay-note:hover, .pay-note:hover .pay-note-icon { transform: none; }
}