/**
 * The unified checkout page.
 *
 * Deliberately quiet: colours come from the theme's own custom properties
 * where they exist and fall back to the dark palette the rest of the site
 * uses, so the page reads as part of the site rather than as a bolted-on form.
 */

.jws-checkout {
	--jws-checkout-gap: 32px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--jws-checkout-gap);
	align-items: start;
	max-width: 980px;
	margin: 0 auto;
	color: var(--jws-color-text, #d5d5d5);
	padding: 30px 20px 70px;
}

.jws-checkout h5 {
	margin: 0 0 18px;
}

.jws-checkout--notice,
.jws-checkout--done {
	grid-template-columns: minmax(0, 1fr);
	max-width: 560px;
	text-align: center;
}

.jws-checkout-summary,
.jws-checkout-pay {
	background: var(--background-item);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	padding: 28px;
	position: sticky;
	top: 60px;
}



/* Order summary ---------------------------------------------------------- */

.jws-checkout-line {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--jws-border-color, rgba(255, 255, 255, .08));
}

.jws-checkout-thumb img {
	display: block;
	width: 56px;
	height: 76px;
	object-fit: cover;
	border-radius: 6px;
}


.jws-checkout-line-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
}

.jws-checkout-item {
	font-weight: 600;
	color: var(--heading, #fff);
}

.jws-checkout-note {
	font-size: 13px;
	opacity: .7;
}

.jws-checkout-price {
	white-space: nowrap;
	font-weight: 600;
}

.jws-checkout-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: 18px;
}

.jws-checkout-total strong {
	font-size: 22px;
	color: var(--heading, #fff);
}

/* Bullet notices under the total — recurring terms or a one-time-payment
   line, plus the cancel-any-time link for a subscription. */
.jws-checkout-summary .jws-checkout-notices {
	margin: 16px 0 16px;
	padding: 0 0 0 18px;
	font-size: var(--font-size-sm);
	line-height: var(--line-height-sm);
}

.jws-checkout-notices li+li {
	margin-top: 4px;
}

/* The renewal lines are swapped for the WooCommerce one and back as the
   method changes. Spelled out rather than left to the browser's default
   because any author rule setting `display` on these beats a UA [hidden] —
   the same reason the wallet rows and the card panel need it. */
.jws-checkout-notices li[hidden] {
	display: none !important;
}

.jws-checkout-notices a {
	color: inherit;
	text-decoration: underline;
}

.jws-checkout-notices a:hover,
.jws-checkout-notices a:focus {
	color: var(--heading, #fff);
}

/*
 * The card form — lives in the summary panel, not under the "Credit or debit
 * card" row up in Payment, because Pay Now is down here: shown only while
 * that row is the one selected, sitting right above the button that charges
 * it.
 */
.jws-checkout-card-inline {
	margin: 10px 0;
}

.jws-checkout-card-inline[hidden] {
	display: none !important;
}

/* Payment ---------------------------------------------------------------- */

/* Radio list: card, PayPal, the hosted page, WooCommerce, Apple Pay, Google
   Pay — whichever methods are switched on and, for the two wallets, whichever
   the browser actually confirms it can offer. */
.jws-checkout-methods {
	border: 1px solid var(--border-color, rgba(255, 255, 255, .12));
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 14px;
}

.jws-checkout-method {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	cursor: pointer;
}

/* Apple Pay and Google Pay start hidden — see the note on the [hidden]
   attribute in the markup — and `display: flex` above would otherwise
   override the browser's default [hidden] behaviour at equal specificity. */
.jws-checkout-method[hidden] {
	display: none !important;
}

.jws-checkout-method+.jws-checkout-method {
	border-top: 1px solid var(--border-color, rgba(255, 255, 255, .1));
}

/* The native radio still drives state (keyboard, screen readers, form
   semantics) — it is only made invisible, never removed. */
.jws-checkout-method input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.jws-checkout-method-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 28px;
	padding: 0 8px;
	border-radius: 6px;
	background: #fff;
	color: #111;
	font-size: 13px;
	font-weight: 700;
	overflow: hidden;
}

.jws-checkout-method-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Apple Pay, Google Pay, PayPal and the hosted page are real badge art
   (public/assets/images/payment) that already carries its own background and
   rounded corners — the chip underneath only needs to size it, not paint
   behind it. Card has no art of its own, so it keeps the plain white chip
   with its glyph. */
.jws-checkout-method-icon--image {
	padding: 0;
}

/* The WooCommerce art is a bare wordmark rather than a badge, and it is wide
   enough that `contain` sizes it to the chip's full width — leaving it touching
   both edges. A little breathing room, unlike the badges, which are drawn with
   their own. */
.jws-checkout-method-icon--woocommerce {
	padding: 0 5px;
}

.jws-checkout-method-label {
	flex: 1 1 auto;
	font-size: 14px;
	font-weight: 500;
}

.jws-checkout-method-radio {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--jws-border-color, rgba(255, 255, 255, .3));
	transition: border-color .15s ease;
}

.jws-checkout-method input:checked~.jws-checkout-method-radio {
	border-width: 5px;
	border-color: var(--main, #e50914);
}

.jws-checkout-method input:focus-visible~.jws-checkout-method-radio {
	outline: 2px solid var(--main, #e50914);
	outline-offset: 2px;
}

.jws-checkout-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 12px 24px;
	border: 0;
	border-radius: 8px;
	background: var(--main, #e50914);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: opacity .2s ease;
}

.jws-checkout-button:hover,
.jws-checkout-button:focus {
	color: #fff;
	opacity: .88;
}

.jws-checkout-button[disabled] {
	cursor: not-allowed;
	opacity: .55;
}

.jws-checkout-button--alt {
	background: var(--jws-bg-tertiary, rgba(255, 255, 255, .08));
	color: var(--jws-color-text, #eee);
	border: 1px solid var(--jws-border-color, rgba(255, 255, 255, .12));
}

.jws-checkout-button--alt:hover,
.jws-checkout-button--alt:focus {
	color: var(--heading, #fff);
}

/* The one shared "Pay Now" button — a taller pill with room for the small
   method icon JS swaps in as the radio selection changes. */
.jws-checkout-pay-button {
	margin-top: 20px;
	min-height: 56px;
	border-radius: 999px;
	font-size: 16px;
	gap: 8px;
}

.jws-checkout-pay-icon:empty {
	display: none;
}

.jws-checkout-pay-icon svg {
	display: block;
	width: 18px;
	height: 18px;
}

.jws-checkout-pay-icon {
	border-radius: 6px;
	background: #fff;
	min-width: 40px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000000;
}

.jws-checkout-pay-icon img {
	display: block;
	height: 28px;
	width: auto;
	border-radius: 4px;
}

.jws-checkout-error {
	margin: 18px 0 0;
	padding: 12px 14px;
	border-radius: 8px;
	background: rgba(229, 9, 20, .12);
	border: 1px solid rgba(229, 9, 20, .35);
	font-size: 14px;
	color: #ffb3b6;
}

.jws-checkout.is-busy {
	pointer-events: none;
	opacity: .75;
}

/* Receipt ---------------------------------------------------------------- */

/* The receipt reads top to bottom as one column, so the centring the shared
   --done rule applies would leave the detail rows floating. */
.jws-receipt {
	text-align: left;
}

.jws-receipt-head {
	text-align: center;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, .08));
}

.jws-receipt-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: rgb(30 255 125 / 14%);
	border: 1px solid rgb(9 90 43 / 45%);
	color: #1af678;
}


.jws-receipt-sub {
	margin: 0;
	font-size: var(--font-size-sm);
	line-height: var(--line-height-sm);
}

.jws-receipt-sub strong {
	color: var(--heading, #fff);
}

.jws-receipt-granted {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 22px 0;
	padding: 14px 16px;
	border-radius: 10px;
	background: rgba(46, 204, 113, .08);
	border: 1px solid rgba(46, 204, 113, .28);
}

.jws-receipt-granted strong {
	font-size: 15px;
	color: var(--heading, #fff);
}

.jws-receipt-granted span {
	font-size: 13px;
	line-height: 1.6;
	opacity: .75;
}

.jws-receipt-rows {
	margin: 0;
	padding: 0;
}

.jws-receipt-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px solid var(--border-color);
}

.jws-receipt-row dt {
	flex: 0 0 auto;
	font-size: var(--font-size-sm);
}

.jws-receipt-row dd {
	margin: 0;
	min-width: 0;
	font-size: var(--font-size-sm);
	text-align: right;
	/* A Stripe reference is long enough to push the page sideways on a phone
	   if it is allowed to stay on one line. */
	word-break: break-all;
	color: var(--heading);
}

.jws-receipt-row dd code {
	font-size: 12px;
	opacity: .85;
}

.jws-receipt-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-top: 18px;
	font-size: 15px;
}

.jws-receipt-total strong {
	font-size: 24px;
	color: var(--heading, #fff);
}

.jws-receipt-actions {
	display: grid;
	gap: 15px;
	margin-top: 24px;
}

.jws-checkout-error[hidden] {
	display: none !important;
}


@media (max-width: 767px) {
	.jws-checkout {
		grid-template-columns: minmax(0, 1fr);
		--jws-checkout-gap: 20px;
	}

	/* Desktop reads Payment / Purchase summary left to right, matching the
	   design; stacked on a phone that would put the payment methods above
	   the order, asking someone to pick how to pay before they have even
	   seen what it charges. Purchase summary first, Payment after. */
	.jws-checkout-summary {
		order: -1;
	}

	.jws-checkout-summary,
	.jws-checkout-pay {
		position: static;
		--jws-checkout-gap: 20px;
	}

	.jws-checkout-summary,
	.jws-checkout-pay {
		padding: 20px;
	}

	/* Room at the bottom of the panel so its own last content — the card
	   form, the notices above it — never sits behind the bar Pay Now becomes
	   below. Harmless on the rare page that has no Pay Now button to fix at
	   all (wallets are the only method on offer): a little empty space at
	   the foot of the panel, nothing worth a browser-support-sensitive
	   :has() selector to avoid. */


	/* A thumb-reachable bar for the one action this whole page exists to
	   get someone to take, pinned to the viewport rather than the bottom of
	   whichever panel it started in — env(safe-area-inset-bottom) keeps it
	   clear of the home indicator on notched phones. */
	#jws-checkout-submit {
		position: fixed;
		left: 0;
		right: 16px;
		bottom: calc(0px + env(safe-area-inset-bottom));
		z-index: 100;
		margin: 0;
		box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
		border-radius: 0;
	}
}

/* WooCommerce modal --------------------------------------------------------- */

/* The store's checkout, over this page rather than instead of it. Everything
   else on offer keeps the buyer here — the card form is inline, the wallets
   open the browser's own sheet — so sending them away to WooCommerce and back
   was the one method that broke that. */
.jws-wc-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

/* The markup carries [hidden] until the button is pressed, and `display: flex`
   above would otherwise win against the browser's default at equal
   specificity — the same reason the wallet rows need it. */
.jws-wc-modal[hidden] {
	display: none !important;
}

.jws-wc-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .68);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.jws-wc-modal-box {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(720px, 100%);
	height: min(680px, 90vh);
	overflow: hidden;
	border: 1px solid var(--border-color, rgba(255, 255, 255, .12));
	border-radius: 14px;
	background: var(--background-item, #16161a);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
	animation: jws-wc-modal-in .26s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes jws-wc-modal-in {
	from { opacity: 0; transform: translateY(12px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.jws-wc-modal-box { animation: none; }
}

.jws-wc-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex: 0 0 auto;
	padding: 14px 18px;
	border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, .1));
}

.jws-wc-modal-title {
	color: var(--heading, #fff);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.jws-wc-modal-subtitle {
	margin-top: 2px;
	color: var(--jws-color-text, #9a9a9a);
	font-size: 12px;
	line-height: 1.4;
}

.jws-wc-modal-close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: var(--heading, #fff);
	cursor: pointer;
	transition: background .18s;
}

.jws-wc-modal-close:hover,
.jws-wc-modal-close:focus-visible {
	background: rgba(255, 255, 255, .18);
}

.jws-wc-modal-close svg {
	pointer-events: none;
}

.jws-wc-modal-body {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
}

.jws-wc-modal-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Sits over the frame while it loads: an iframe whose src was only just set
   paints white (or nothing) for a beat, which on a dark page reads as a
   broken modal rather than a loading one. */
.jws-wc-modal-loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: var(--background-item, #16161a);
}

.jws-wc-modal-loading[hidden] {
	display: none !important;
}

.jws-wc-modal-loading p {
	margin: 0;
	color: var(--jws-color-text, #9a9a9a);
	font-size: 13px;
}

.jws-wc-modal-spinner {
	width: 38px;
	height: 38px;
	border: 3px solid rgba(255, 255, 255, .12);
	border-top-color: var(--main, #e50914);
	border-radius: 50%;
	animation: jws-wc-spin .7s linear infinite;
}

@keyframes jws-wc-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.jws-wc-modal-spinner { animation-duration: 2s; }
}

/* While the modal is up, the page behind it must not scroll under it. */
body.jws-wc-modal-open {
	overflow: hidden;
}

@media (max-width: 640px) {
	.jws-wc-modal {
		padding: 0;
		align-items: flex-end;
	}

	.jws-wc-modal-box {
		width: 100%;
		height: 94vh;
		border-radius: 16px 16px 0 0;
		border-bottom: 0;
	}
}