/**
 * CourseGlade Checkout Styles
 */

/* ============================================
 * Checkout Form
 * ============================================ */

.courseglade-checkout {
	max-width: 600px;
	margin: 0 auto;
	padding: 40px 20px;
}

/* A way out that is not the browser's back button. Quiet: leaving is not the
   thing this page is for. */
/* The two steps this flow has: pay here, land on the order page. Centred under
   the heading, as in the draft. */
.courseglade-checkout__steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}

.courseglade-checkout__step {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-checkout__step + .courseglade-checkout__step::before {
	content: "";
	width: 24px;
	height: 1px;
	background: var(--courseglade-border);
	margin-right: 4px;
}

.courseglade-checkout__step-num {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--courseglade-surface-low);
	color: var(--courseglade-on-surface-muted);
	font-size: 0.75rem;
	font-weight: 700;
}

.courseglade-checkout__step.is-current {
	color: var(--courseglade-primary);
}

.courseglade-checkout__step.is-current .courseglade-checkout__step-num {
	background: var(--courseglade-primary);
	color: #fff;
}

.courseglade-checkout__step.is-done {
	color: var(--courseglade-success);
}

.courseglade-checkout__step.is-done .courseglade-checkout__step-num {
	background: var(--courseglade-success);
	color: #fff;
}

/* The heading and its steps sit centred; everything below is a column of
   cards. */
.courseglade-checkout__heading,
.courseglade-checkout__steps {
	text-align: center;
}

/* Paragraph reset. The plugin sets its own spacing in this card stack, and a
   theme's `.entry-content p` margin outspecifies a lone class — which is why
   the byline, the covers line and the fine print were all sitting on a margin
   none of their rules asked for. */
.courseglade-checkout p,
.courseglade-checkout-empty p,
.courseglade-order-received p {
	margin: 0;
}

.courseglade-checkout__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--courseglade-on-surface-muted);
	text-decoration: none !important;
}

.courseglade-checkout__back:hover,
.courseglade-checkout__back:focus {
	color: var(--courseglade-primary);
}

.courseglade-checkout__heading {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--courseglade-on-surface);
	letter-spacing: -0.02em;
	margin: 0 0 24px;
}

.courseglade-checkout__message {
	text-align: center;
	padding: 24px;
}

.courseglade-checkout__message p {
	color: var(--courseglade-on-surface-muted);
	margin: 0 0 16px;
}

/* Error / no payment methods state */
.courseglade-checkout-error {
	max-width: 480px;
	margin: 60px auto;
	padding: 48px 40px;
	text-align: center;
	background: var(--courseglade-surface-lowest);
	border-radius: var(--courseglade-radius-lg);
	border: 1px solid var(--courseglade-border);
	box-shadow: var(--courseglade-shadow-sm);
}

/* Buttons side by side, stacking on a narrow screen rather than overflowing. */
.courseglade-checkout-auth__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}

@media (max-width: 400px) {
	.courseglade-checkout-auth__actions .courseglade-btn {
		width: 100%;
	}
}

.courseglade-checkout-error__icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--courseglade-primary) 10%, transparent);
	color: var(--courseglade-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
}

.courseglade-checkout-error__title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--courseglade-on-surface);
	margin: 0 0 12px;
}

.courseglade-checkout-error__message {
	font-size: 0.9375rem;
	color: var(--courseglade-on-surface-muted);
	line-height: 1.6;
	margin: 0 0 28px;
}

/* Course Summary */
.courseglade-checkout__course {
	display: flex;
	gap: 12px;
	background: var(--courseglade-surface-lowest);
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-md);
	padding: 16px;
	margin-bottom: 16px;
}

/* A plan is bought on trust rather than on a picture, so the row leads with
   what it is: a mark, then the kind, then the name and the recurring price. */
.courseglade-checkout__course--recurring {
	background: var(--courseglade-surface-lowest);
}

/* Anchored to the top of the text, not the middle of the block: centred, it
   floats free of the label it belongs to and the row reads as two pieces. */
.courseglade-checkout__course-mark {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-top: 2px;
	border-radius: var(--courseglade-radius);
	background: var(--courseglade-primary-bg);
	color: var(--courseglade-primary);
}

a.courseglade-checkout__course-image {
	display: block;
	text-decoration: none;
}

.courseglade-checkout__course-image {
	flex-shrink: 0;
	width: 56px;
	height: 40px;
	border-radius: 6px;
	overflow: hidden;
}

.courseglade-checkout__course-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.courseglade-checkout__course-details {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Only where the row leads with a mark: the mark is 44px and the text taller,
   so they line up at the top. A course subscription leads with an image and
   centres against it instead. */
.courseglade-checkout__course--recurring:has(.courseglade-checkout__course-mark) .courseglade-checkout__course-details {
	justify-content: flex-start;
}

/* A plan with no picture has a wide empty right half, so the name and the
   price take opposite edges the way a receipt line does. A course
   subscription has an image and a long course title; splitting those into
   columns only narrows the title, so it keeps them stacked. */
@media (min-width: 520px) {
	.courseglade-checkout__course--recurring:has(.courseglade-checkout__course-mark) .courseglade-checkout__course-details {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		/* The rows are shorter than the image beside them, so the block sits in
		   the middle of the row rather than packing against its top. */
		align-content: center;
		column-gap: 20px;
	}

	.courseglade-checkout__course--recurring .courseglade-checkout__course-title,
	.courseglade-checkout__course--recurring .courseglade-checkout__covers {
		grid-column: 1;
	}

	.courseglade-checkout__course--recurring:has(.courseglade-checkout__course-mark) .courseglade-checkout__course-price {
		grid-column: 2;
		grid-row: 1 / -1;
		/* Spanning both rows stretches the box; without this the amount rides
		   the top of it instead of sitting level with the name and the line
		   under it. */
		align-self: center;
		align-items: baseline;
		justify-content: flex-end;
		text-align: right;
	}
}

/* A plan has no picture to carry the row, so the name has to. */
.courseglade-checkout__course--recurring .courseglade-checkout__course-title {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 0;
}

/* Stacked against an image, the title and price are two separate facts and
   want room between them; side by side in a grid they do not. */
.courseglade-checkout__course--recurring:not(:has(.courseglade-checkout__course-mark)) .courseglade-checkout__course-title {
	margin-bottom: 6px;
}

/* The coverage line belongs to the name above it, so it sits close to it. */
.courseglade-checkout__course--recurring .courseglade-checkout__covers {
	margin-top: 2px;
}

.courseglade-checkout__course-title {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--courseglade-on-surface);
	margin: 0 0 2px;
}

.courseglade-checkout__course-byline {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-checkout__course-title a {
	color: inherit;
	text-decoration: none !important;
}

.courseglade-checkout__course-title a:hover {
	color: var(--courseglade-primary);
}

.courseglade-checkout__course-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--courseglade-primary);
}

/* A recurring charge must not read as a one-off: the cadence sits against the
   amount, as it does on the pricing card. */
.courseglade-checkout__cadence {
	font-size: 14px;
	font-weight: 500;
	color: var(--courseglade-on-surface-muted);
}

/* Which plan the amount comes from. Beside the price rather than under the
   title, because it qualifies the number, not the thing being bought — and
   enclosed, or it reads as a word left over from the price. */
/* What the plan includes, under the item it belongs to. */
ul.courseglade-checkout__features {
	list-style: none;
	margin: 14px 0;
	padding: 0;
	border-top: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

ul.courseglade-checkout__features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.875rem;
	color: var(--courseglade-on-surface-secondary);
}

ul.courseglade-checkout__features svg {
	flex: none;
	margin-top: 4px;
	color: var(--courseglade-success);
}

/* What renews, when, and how to stop — the part a subscriber comes back to
   check. A tinted panel rather than a grey sentence trailing off the bottom of
   the card. */
.courseglade-checkout__terms {
	margin-top: 14px;
	padding: 12px 14px;
	border: 1px solid var(--courseglade-primary-border-light);
	border-radius: var(--courseglade-radius);
	background: var(--courseglade-primary-surface);
}

.courseglade-checkout__terms-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 2px 0;
	font-size: 0.8125rem;
	color: var(--courseglade-on-surface-secondary);
}

.courseglade-checkout__terms-row > :last-child {
	color: var(--courseglade-on-surface);
	font-weight: 700;
	text-align: right;
}

.courseglade-checkout__terms-label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--courseglade-primary);
}

/* A fixed term ("12 months") describes the item, so it sits with it. */
.courseglade-checkout__course-term {
	font-size: 0.8125rem;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-checkout .courseglade-checkout__covers {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-checkout .courseglade-checkout__renewal {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--courseglade-on-surface-secondary);
}

/* Order Summary */
.courseglade-checkout__summary,
.courseglade-checkout__card {
	background: var(--courseglade-surface-lowest);
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-md);
	box-shadow: var(--courseglade-shadow-sm);
	padding: 20px;
	margin-bottom: 20px;
}

/* Inside the order card the item is a row, not a card of its own — it already
   has the card's border around it. */
.courseglade-checkout__summary .courseglade-checkout__course {
	border: 0;
	border-radius: 0;
	padding: 0;
	margin-bottom: 14px;
}

.courseglade-checkout__summary .courseglade-checkout__coupon {
	padding: 12px 0;
	margin: 0;
	border-top: 1px solid var(--courseglade-surface-low);
}

.courseglade-checkout__summary-row.courseglade-checkout__summary-row--lead {
	padding-top: 14px;
	border-top: 1px solid var(--courseglade-surface-low);
}


.courseglade-checkout__section-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--courseglade-on-surface);
	margin: 0 0 16px;
}

.courseglade-checkout__summary-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 7px 0;
	font-size: 0.875rem;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-checkout__summary-row > :last-child {
	color: var(--courseglade-on-surface);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.courseglade-checkout__summary-row + .courseglade-checkout__summary-row {
	border-top: 1px solid var(--courseglade-surface-low);
}

.courseglade-checkout__total-row {
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--courseglade-border);
	font-size: 1.0625rem;
	font-weight: 800;
	color: var(--courseglade-on-surface);
}

.courseglade-checkout__total-row > :last-child {
	font-weight: 800;
}

.courseglade-checkout__total-row .free {
	color: var(--courseglade-success);
}

.courseglade-checkout__discount-row,
.courseglade-checkout__discount-row > :last-child {
	color: var(--courseglade-success);
}

#courseglade-checkout-coupon-badge {
	font-size: 12px;
	color: var(--courseglade-on-surface-muted);
}

/* Coupon Section */
.courseglade-checkout__coupon {
	margin-bottom: 16px;
}

/* The wrapper is a flex row so the button sits on its own line without the
   inline-block gap a bare inline child leaves underneath it. */
.courseglade-checkout__coupon-toggle {
	display: flex;
}

.courseglade-checkout__coupon-toggle-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	font-family: inherit;
	color: var(--courseglade-primary);
	cursor: pointer;
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
}

/* Restated on every state: a theme's `button:hover` owns a bare button
   otherwise, which is how the remove-coupon × ended up with a blue square. */
.courseglade-checkout__coupon-toggle-btn:hover,
.courseglade-checkout__coupon-toggle-btn:focus,
.courseglade-checkout__coupon-toggle-btn:active {
	background: none;
	box-shadow: none;
	color: var(--courseglade-primary-dark);
}

.courseglade-checkout__coupon-toggle-btn:focus:not(:focus-visible) {
	outline: none;
}

.courseglade-checkout__coupon-form {
	margin-top: 8px;
}

.courseglade-checkout__coupon-input-wrapper {
	display: flex;
}

input.courseglade-checkout__coupon-input {
	flex: 1;
	min-width: 0;
	height: 40px;
	padding: 0 12px;
	border-right: 0;
	border-radius: var(--courseglade-radius) 0 0 var(--courseglade-radius);
	background: var(--courseglade-surface);
	/* Codes are printed and spoken in capitals, so the field shows them that
	   way whatever gets typed. The placeholder is a sentence, not a code. */
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

input.courseglade-checkout__coupon-input::placeholder {
	text-transform: none;
	letter-spacing: normal;
}

input.courseglade-checkout__coupon-input:focus {
	background: var(--courseglade-surface-lowest);
	border-right: 0;
}

.courseglade-checkout__coupon-input-wrapper .courseglade-btn {
	flex: none;
	height: 40px;
	padding: 0 18px;
	border-radius: 0 var(--courseglade-radius) var(--courseglade-radius) 0;
}

.courseglade-checkout__coupon-message {
	margin-top: 8px;
	font-size: 13px;
}

.courseglade-checkout__coupon-message.error {
	color: var(--courseglade-danger);
}

.courseglade-checkout__coupon-message.success {
	color: var(--courseglade-success);
}

.courseglade-checkout__coupon-code-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	background: var(--courseglade-success-surface);
	border: 1px solid var(--courseglade-success-border);
	border-radius: var(--courseglade-radius);
	font-size: 0.8125rem;
}

.courseglade-checkout__coupon-code {
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--courseglade-success);
}

.courseglade-checkout__coupon-saved {
	color: var(--courseglade-on-surface-secondary);
}

/* A theme styling `button:hover` takes a bare button with it — here that
   painted a blue square over the ×. The ground is restated on every state, not
   just at rest. */
.courseglade-checkout__coupon-remove {
	margin-left: auto;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	background: none;
	border: none;
	border-radius: var(--courseglade-radius-sm);
	box-shadow: none;
	color: var(--courseglade-on-surface-muted);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 0;
}

.courseglade-checkout__coupon-remove:hover,
.courseglade-checkout__coupon-remove:focus,
.courseglade-checkout__coupon-remove:active {
	background: none;
	box-shadow: none;
	color: var(--courseglade-danger);
}

/* Payment Gateways */
.courseglade-checkout__gateways {
	margin-bottom: 16px;
}

.courseglade-checkout__gateway-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.courseglade-checkout__gateway {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius);
	background: var(--courseglade-surface-lowest);
	cursor: pointer;
	transition: all var(--courseglade-transition);
}

.courseglade-checkout__gateway:hover {
	border-color: var(--courseglade-primary-light);
	background: var(--courseglade-primary-bg);
}

.courseglade-checkout__gateway.active {
	border-color: var(--courseglade-primary);
	background: var(--courseglade-primary-bg);
	/* An inset ring rather than a thicker border. Growing the border to 2px on
	   selection moves everything inside the card by a pixel, which is visible
	   as a twitch when someone clicks between payment methods. */
	box-shadow: 0 0 0 1px var(--courseglade-primary);
}

.courseglade-checkout__gateway input[type="radio"] {
	display: none;
}

.courseglade-checkout__gateway-info {
	flex: 1;
}

.courseglade-checkout__gateway-title {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--courseglade-on-surface);
}

.courseglade-checkout__gateway-desc {
	display: block;
	font-size: 0.8125rem;
	color: var(--courseglade-on-surface-muted);
	margin-top: 2px;
}

.courseglade-checkout__gateway-radio {
	order: -1;
	width: 18px;
	height: 18px;
	border: 2px solid var(--courseglade-border);
	border-radius: 50%;
	flex-shrink: 0;
	position: relative;
	transition: all var(--courseglade-transition);
}

.courseglade-checkout__gateway.active .courseglade-checkout__gateway-radio {
	border-color: var(--courseglade-primary);
}

.courseglade-checkout__gateway.active .courseglade-checkout__gateway-radio::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 8px;
	height: 8px;
	background: var(--courseglade-primary);
	border-radius: 50%;
}

/* Submit Button */
.courseglade-checkout__submit {
	margin-bottom: 12px;
}


/* Error */
.courseglade-checkout__error {
	padding: 12px 16px;
	background: var(--courseglade-danger-bg);
	border: 1px solid var(--courseglade-danger-bg);
	border-radius: var(--courseglade-radius);
	color: var(--courseglade-danger);
	font-size: 14px;
}

/* ============================================
 * Order Received
 * ============================================ */

.courseglade-order-received {
	max-width: 700px;
	margin: 0 auto;
	padding: 40px 20px;
}

.courseglade-order-received__header {
	text-align: center;
	margin-bottom: 24px;
}

/* The receipt. Order and date head it on a tinted strip, the money reads as a
   short column underneath, and the total is the line the eye stops on. */
.courseglade-order-received__receipt {
	background: var(--courseglade-surface-lowest);
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-md);
	box-shadow: var(--courseglade-shadow-sm);
	margin-bottom: 20px;
	overflow: hidden;
}

.courseglade-order-received__receipt-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding: 16px 20px;
	background: var(--courseglade-surface);
	border-bottom: 1px solid var(--courseglade-border);
}

.courseglade-order-received__receipt-date {
	text-align: right;
}

.courseglade-order-received__receipt-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--courseglade-on-surface-muted);
	margin-bottom: 2px;
}

.courseglade-order-received__receipt-value {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--courseglade-on-surface);
}

.courseglade-order-received__receipt-body {
	padding: 20px;
}

/* The thing bought, above the money it explains. Same 56×40 as the checkout's
   item so the two pages describe the purchase identically. */
.courseglade-order-received__item {
	display: flex;
	gap: 12px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--courseglade-surface-low);
}

.courseglade-order-received__item-image {
	flex: none;
	width: 56px;
	height: 40px;
	border-radius: 6px;
	overflow: hidden;
}

.courseglade-order-received__item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.courseglade-order-received__item-details {
	min-width: 0;
}

.courseglade-order-received__item-title {
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--courseglade-on-surface);
	text-decoration: none !important;
}

.courseglade-order-received__item-title:hover {
	color: var(--courseglade-primary);
}

.courseglade-order-received__item-byline {
	margin: 2px 0 0;
	font-size: 0.8125rem;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-order-received__kv--discount > :last-child {
	color: var(--courseglade-success);
}

/* Tinted like the head, so the card reads as a receipt with a strip at each
   end rather than a card with a button loose at the bottom. */
.courseglade-order-received__receipt-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 16px 20px;
	border-top: 1px solid var(--courseglade-border);
	background: var(--courseglade-surface);
}

.courseglade-order-received__kv {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 0;
	font-size: 0.875rem;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-order-received__kv > :last-child {
	color: var(--courseglade-on-surface);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.courseglade-order-received__kv--total {
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--courseglade-border);
	font-size: 1.0625rem;
	font-weight: 800;
	color: var(--courseglade-on-surface);
}

.courseglade-order-received__kv--total > :last-child {
	font-weight: 800;
}

.courseglade-order-received__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--courseglade-success-bg);
	color: var(--courseglade-success);
}

.courseglade-order-received__icon svg {
	width: 30px;
	height: 30px;
	color: inherit;
}

.courseglade-order-received__title {
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--courseglade-on-surface);
	margin: 0 0 12px;
}

.courseglade-order-received__message {
	font-size: 0.9375rem;
	color: var(--courseglade-on-surface-muted);
	margin: 0;
}

/* Payment Instructions */
/* These are instructions somebody has to follow — an account number to copy, a
   reference to quote — so they are set as readable body text on a pale ground
   with a warning edge, rather than amber-on-amber. A saturated block the height
   of a screen is a banner; this is the one thing on the page with a task in it. */
.courseglade-order-received__instructions {
	background: var(--courseglade-warning-surface);
	border: 1px solid var(--courseglade-warning-border);
	border-left: 3px solid var(--courseglade-warning);
	border-radius: var(--courseglade-radius-md);
	padding: 18px 20px;
	margin-bottom: 20px;
}

.courseglade-order-received__instructions h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--courseglade-warning-text);
	margin: 0 0 10px;
}

.courseglade-order-received__instructions h3 svg {
	flex: none;
}

.courseglade-order-received__instructions-content {
	font-size: 0.875rem;
	color: var(--courseglade-on-surface-secondary);
	line-height: 1.6;
}

.courseglade-order-received__instructions-content p {
	margin: 0 0 10px;
}

.courseglade-order-received__instructions-content p:last-child {
	margin-bottom: 0;
}

/* Bank details are strings to be copied exactly, so digits are tabular and the
   line does not re-wrap between the label and the value. */
.courseglade-order-received__instructions-content strong,
.courseglade-order-received__instructions-content b {
	color: var(--courseglade-on-surface);
	font-variant-numeric: tabular-nums;
}

.courseglade-order-received__instructions-content ul,
.courseglade-order-received__instructions-content ol {
	margin: 0 0 10px;
	padding-left: 20px;
}

.courseglade-order-received__instructions-content li {
	margin-bottom: 4px;
}

.courseglade-order-received__details {
	background: var(--courseglade-surface);
	border-radius: var(--courseglade-radius-md);
	padding: 20px;
	margin-bottom: 20px;
}

.courseglade-order-received__details h3 {
	font-size: 18px;
	font-weight: 600;
	color: var(--courseglade-on-surface);
	margin: 0 0 16px;
}

/* Something to know before paying — not an error, so amber rather than red. */
.courseglade-checkout__notice {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 20px;
	padding: 14px 16px;
	border: 1px solid var(--courseglade-warning-border);
	border-radius: var(--courseglade-radius-md);
	background: var(--courseglade-warning-surface);
	color: var(--courseglade-warning-text);
}

.courseglade-checkout__notice svg {
	flex-shrink: 0;
	margin-top: 1px;
}

.courseglade-checkout__notice p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
}

/* A note under a receipt table: what happens next, not what was charged.
   Without this it inherits the theme's paragraph size and shouts. */
.courseglade-order-received__note {
	margin: 16px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--courseglade-surface-low);
	font-size: 14px;
	line-height: 1.6;
	color: var(--courseglade-on-surface-muted);
}

/* The cadence sits under the date rather than beside it: "30 August 2027"
   answers when, "$59.00 every year" answers how much, and they are two facts. */
.courseglade-membership-summary__cadence {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 400;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-order-received__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border: none;
}

.courseglade-order-received__table th,
.courseglade-order-received__table td {
	padding: 14px 16px;
	border: none;
	border-bottom: 1px solid var(--courseglade-surface-low);
	text-align: left;
	font-size: 15px;
}

.courseglade-order-received__table tr:last-child th,
.courseglade-order-received__table tr:last-child td {
	border-bottom: none;
}

.courseglade-order-received__table th {
	font-weight: 500;
	color: var(--courseglade-on-surface-muted);
	width: 40%;
}

.courseglade-order-received__table td {
	font-weight: 600;
	color: var(--courseglade-on-surface);
}

.courseglade-order-received__courses {
	margin-bottom: 20px;
}

.courseglade-order-received__courses h3 {
	font-size: 18px;
	font-weight: 600;
	color: var(--courseglade-on-surface);
	margin: 0 0 16px;
}

.courseglade-order-received__course-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.courseglade-order-received__course {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--courseglade-surface-lowest);
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-md);
	padding: 16px;
}

.courseglade-order-received__course-image {
	flex-shrink: 0;
	width: 80px;
	height: 60px;
	border-radius: var(--courseglade-radius);
	overflow: hidden;
}

.courseglade-order-received__course-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.courseglade-order-received__course-info {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.courseglade-order-received__course-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--courseglade-on-surface);
	margin: 0;
}

.courseglade-order-received__receipt-line {
	margin: 8px 0 0;
	font-size: 0.9375rem;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-order-received__receipt-line strong {
	color: var(--courseglade-on-surface);
	font-weight: 600;
}

/* What happens next, side by side under the receipt. */
.courseglade-order-received__next {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 20px;
}

.courseglade-order-received__next-card {
	background: var(--courseglade-surface-lowest);
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-md);
	padding: 16px;
}

.courseglade-order-received__next-card strong {
	display: block;
	margin-bottom: 3px;
	font-size: 0.875rem;
	color: var(--courseglade-on-surface);
}

.courseglade-order-received__next-card span {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--courseglade-on-surface-muted);
}

@media (max-width: 560px) {
	.courseglade-order-received__next {
		grid-template-columns: 1fr;
	}
}

.courseglade-order-received__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* White with an edge, not the shared secondary's grey fill: these sit on the
   page's own grey, where a grey button reads as disabled. Matches the draft's
   secondary and the catalogue's View button. */
.courseglade-order-received .courseglade-btn-secondary {
	background: var(--courseglade-surface-lowest);
	border-color: var(--courseglade-border);
	color: var(--courseglade-on-surface);
}

.courseglade-order-received .courseglade-btn-secondary:hover:not(:disabled),
.courseglade-order-received .courseglade-btn-secondary:focus:not(:disabled),
.courseglade-order-received .courseglade-btn-secondary:active:not(:disabled) {
	background: var(--courseglade-surface-lowest);
	border-color: var(--courseglade-on-surface-muted);
	color: var(--courseglade-on-surface);
	box-shadow: none;
}

/* ============================================
 * Empty State & Fallback
 * ============================================ */

.courseglade-checkout-empty {
	max-width: 480px;
	margin: 60px auto;
	padding: 48px 40px;
	background: var(--courseglade-surface-lowest);
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-lg);
	box-shadow: var(--courseglade-shadow);
	text-align: center;
}

.courseglade-checkout-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--courseglade-primary-bg);
	color: var(--courseglade-primary);
	margin-bottom: 20px;
}

.courseglade-checkout-empty h3 {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 8px;
	color: var(--courseglade-on-surface);
}

.courseglade-checkout-empty p {
	color: var(--courseglade-on-surface-muted);
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0 0 24px;
}

/* ============================================
 * Shared Buttons
 * ============================================ */

/* Prevent theme link styles on checkout buttons */
.courseglade-checkout .courseglade-btn,
.courseglade-order-received .courseglade-btn,
.courseglade-checkout-empty .courseglade-btn {
	text-decoration: none !important;
}
.courseglade-checkout .courseglade-btn:hover,
.courseglade-order-received .courseglade-btn:hover,
.courseglade-checkout-empty .courseglade-btn:hover {
	text-decoration: none !important;
}

/* ============================================
 * Responsive
 * ============================================ */

@media (max-width: 640px) {
	.courseglade-checkout__course {
		flex-direction: column;
		text-align: center;
	}

	.courseglade-checkout__course-image {
		width: 100%;
		height: 160px;
	}

	.courseglade-order-received__course-info {
		flex-direction: column;
		align-items: flex-start;
	}

	.courseglade-order-received__table th {
		width: 50%;
	}
}