/**
 * citelayer® Theme — EDD Page Styles
 *
 * Customizes the appearance of all Easy Digital Downloads frontend pages:
 * Checkout, Cart, Receipt/Confirmation, Purchase History (Account).
 *
 * Targets EDD's native HTML output with MD3 design system.
 * CSS variables from theme.css are used throughout.
 *
 * @package CiteLayer_Theme
 */

/* ══════════════════════════════════════════════════════════════════
	SUCCESS COLOR TOKENS (receipt page needs these)
══════════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
	--md-success: #2E7D32;
	--md-on-success: #FFFFFF;
	--md-success-container: #E8F5E9;
	--md-on-success-container: #1B5E20;
}

[data-theme="dark"] {
	--md-success: #81C784;
	--md-on-success: #003300;
	--md-success-container: #1B5E20;
	--md-on-success-container: #E8F5E9;
}

/* ══════════════════════════════════════════════════════════════════
	CHECKOUT PAGE — LAYOUT
══════════════════════════════════════════════════════════════════ */

/*
 * Fix #1: Inhaltsbereich wird vom fixed header (64px) verdeckt.
 * theme.css hat `.wp-site-blocks { padding-top: 0 !important; }`,
 * daher brauchen wir hier ebenfalls !important.
 */
body.cl-edd-checkout .wp-site-blocks,
body.cl-edd-receipt .wp-site-blocks,
body.cl-edd-confirmation .wp-site-blocks,
body.cl-edd-account .wp-site-blocks {
	padding-top: 64px !important;
}

/*
 * Override: das withdrawal-consent-Fieldset bringt inline <style> mit,
 * das unsere Theme-Styles überschreibt. Wir resetteen das hier.
 */
#edd_withdrawal_consent_fieldset {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
}

#edd_withdrawal_consent_fieldset label {
	display: flex !important;
	align-items: flex-start !important;
	gap: var(--space-3) !important;
	font-size: 14px !important;
	color: var(--md-on-surface) !important;
	line-height: 1.5 !important;
	cursor: pointer !important;
}

#edd_withdrawal_consent_fieldset input[type="checkbox"] {
	flex-shrink: 0 !important;
	width: 20px !important;
	height: 20px !important;
	margin-top: 2px !important;
}

/*
 * Checkout page container → Two-Column Grid.
 * EDD setzt `.edd-checkout__layout--full { display: block }` im Plugin-CSS,
 * daher brauchen wir !important auf display + grid-template-columns.
 */
#edd_checkout_form_wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-12) 24px var(--space-20);
	display: grid !important;
	grid-template-columns: 1fr 380px !important;
	gap: var(--space-10);
	align-items: start;
}

/*
 * EDD setzt `.wp-block-edd-checkout > * { grid-column: 1 / -1 }`,
 * was alle Kinder über die volle Breite zwingt. Reset auf auto.
 */
.wp-block-edd-checkout>* {
	grid-column: auto !important;
}

.wp-block-edd-checkout .edd-blocks__logged-in {
	grid-column: 1 / -1 !important;
}

/* Left column: purchase form */
.edd-blocks__purchase-form {
	order: 1;
	min-width: 0;
}

/* Right column: cart → Order Summary sidebar */
.edd-blocks__cart {
	order: 2;
	position: sticky;
	top: 67px;
	align-self: start;
	margin-top: 14px;
	display: flex;
	flex-direction: column;
}

/*
 * EDD SL rendert das Renewal-Formular NACH dem Cart
 * (via edd_after_checkout_cart hook). Per CSS order
 * positionieren wir es VOR dem Cart.
 */
#edd_sl_renewal_fields {
	order: -1;
}

.logged-in.admin-bar .edd-blocks__cart {
	top: 94px;
}

/* Responsive: single column below 900px */
@media (max-width: 900px) {
	.wp-block-edd-checkout>* {
		grid-column: 1 / -1;
	}

	#edd_checkout_form_wrap {
		grid-template-columns: 1fr;
		gap: var(--space-6);
		padding: var(--space-6) 16px var(--space-12);
	}

	.edd-blocks__cart {
		order: -1;
		position: static;
	}
}

/* ── Order Summary Card (Blocks Cart in sidebar) ──────────────── */

#edd_checkout_cart {
	width: 100%;
	border-collapse: collapse;
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	overflow: hidden;
	margin-bottom: 0;
}

#edd_checkout_cart th {
	padding: var(--space-4) var(--space-6);
	text-align: left;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--md-on-surface-variant);
	background: var(--md-surface-container-high);
	border-bottom: 1px solid var(--md-outline-variant);
}

#edd_checkout_cart td {
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--md-outline-variant);
	font-size: 13px;
	color: var(--md-on-surface);
	vertical-align: middle;
}

#edd_checkout_cart tr:last-child td {
	border-bottom: none;
}

/* Cart item name */
#edd_checkout_cart .edd_cart_item_name,
#edd_checkout_cart .edd-blocks-cart__item-title {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	color: var(--md-on-surface);
}

/* Cart item price */
#edd_checkout_cart .edd_cart_item_price,
#edd_checkout_cart .edd-blocks-cart__item-price {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	color: var(--md-on-surface);
}

/* Remove button */
#edd_checkout_cart .edd_cart_remove_item_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-full);
	color: var(--md-on-surface-variant);
	text-decoration: none;
	transition: all 0.15s;
}

#edd_checkout_cart .edd_cart_remove_item_btn:hover {
	background: var(--md-error-container);
	color: var(--md-error);
}

/* Subtotal / Tax / Total rows */
#edd_checkout_cart .edd_cart_subtotal td,
#edd_checkout_cart .edd_cart_tax td {
	font-size: 13px;
	color: var(--md-on-surface-variant);
	background: var(--md-surface-container-low);
}

#edd_checkout_cart .edd_cart_total td,
#edd_checkout_cart #edd_cart_total td,
#edd_checkout_cart tfoot .edd_cart_total td {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--md-on-surface);
	background: var(--md-surface-container-low);
	padding-top: var(--space-5);
	border-top: 2px solid var(--md-outline-variant);
}

/* ── EDD Blocks Cart (Order Summary in sidebar) ───────────── */

/* Cart form wrapper */
#edd_checkout_cart_form {
	order: 2;
}

/* Main cart container and Renewal form */
#edd_checkout_cart.edd-blocks-cart,
#edd_sl_renewal_fields {
	background: var(--md-surface-container) !important;
	border: 1px solid var(--md-outline-variant) !important;
	border-radius: var(--radius-l);
	overflow: hidden;
	margin-bottom: 0;
}

/* Header row → Summary title style */
.edd-blocks-cart__row-header {
	padding: var(--space-5) var(--space-6);
	background: var(--md-surface-container-high);
	border-bottom: 1px solid var(--md-outline-variant);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	color: var(--md-on-surface);
	letter-spacing: 0;
	text-transform: none;
}

/* Cart rows */
.edd-blocks-cart__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-3) var(--space-6);
	border-bottom: 1px solid var(--md-outline-variant);
}

.edd-blocks-cart__row:last-child {
	border-bottom: none;
}

/* Item rows */
.edd-blocks-cart__row-item {
	padding: var(--space-4) var(--space-6);
}

.edd-blocks-cart__row-item .edd_cart_item_name {
	font-size: 14px;
	font-weight: 500;
	color: var(--md-on-surface);
	line-height: 1.4;
}

.edd-blocks-cart__row-item .edd_cart_item_name .edd_checkout_cart_item_title {
	margin-bottom: var(--space-1);
}

/* SL license details in cart — compact */
.edd-blocks-cart__row-item .edd-sl-details {
	font-size: 12px;
	color: var(--md-on-surface-variant);
	margin-top: var(--space-1);
}

.edd-blocks-cart__row-item .edd_cart_item_price {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	color: var(--md-on-surface);
	text-align: right;
	white-space: nowrap;
}

/* Remove icon in sidebar */
.edd-blocks-cart__action-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: var(--radius-full);
	color: var(--md-on-surface-variant);
	text-decoration: none;
	transition: all 0.15s;
	opacity: 0.6;
}

.edd-blocks-cart__action-remove:hover {
	background: var(--md-error-container);
	color: var(--md-error);
	opacity: 1;
}

/* Footer rows (subtotal, tax, total) */
.edd-blocks-cart__row-footer {
	padding: var(--space-2) var(--space-6);
	font-size: 14px;
	color: var(--md-on-surface-variant);
}

/* Total row — prominent */
.edd-blocks-cart__row-footer .edd_cart_total {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--md-on-surface);
	padding-top: var(--space-3);
	margin-top: var(--space-2);
	border-top: 2px solid var(--md-outline-variant);
	display: flex;
	justify-content: space-between;
	width: 100%;
}

/* Discount row */
.edd-blocks-cart__row-footer .edd_cart_discount {
	color: var(--md-tertiary);
}

/* Fee row */
.edd-blocks-cart__row-footer .edd_cart_fee_label,
.edd-blocks-cart__row-footer .edd_cart_fee_amount {
	font-size: 13px;
}

/* License Renewal form in sidebar */
#edd_sl_renewal_form {
	margin-top: 0;
	order: 0;
	margin-bottom: var(--space-4);
}

#edd_sl_show_renewal_form {
	width: 100%;
	height: 40px;
	padding: 0 var(--space-4);
	border: 1.5px solid var(--md-outline-variant);
	border-radius: var(--radius-full);
	background: var(--md-surface);
	color: var(--md-on-surface);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
}

#edd_sl_show_renewal_form:hover {
	border-color: var(--md-primary);
}

/* Security badges under sidebar */
.edd-blocks__cart::after {
	content: '🔒 Secure SSL encrypted checkout';
	display: block;
	margin-top: var(--space-4);
	padding: var(--space-4) var(--space-5);
	background: var(--md-surface-container-low);
	border-radius: var(--radius-m);
	font-size: 13px;
	color: var(--md-on-surface-variant);
	text-align: center;
	order: 3;
}

/* ══════════════════════════════════════════════════════════════════
	CHECKOUT — FORM SECTIONS (Personal Info, Billing, Payment)
══════════════════════════════════════════════════════════════════ */

/* Main purchase form */
#edd_purchase_form {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	position: relative;
}

#edd_purchase_form p.edd-required-fields-notice {
	position: absolute;
	top: -2.5em;
}

/* Fieldsets as form sections */
#edd_purchase_form fieldset,
#edd_checkout_user_info,
#edd_cc_address,
#edd_cc_fields {
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	padding: var(--space-6);
	margin: 0;
}

/* Fieldset legends as section titles */
#edd_purchase_form legend,
#edd_purchase_form fieldset>span:first-child {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--md-on-surface);
	margin-bottom: var(--space-6);
	display: block;
	padding: 0;
	float: none;
	width: auto;
}

/* Form field wrappers */
#edd_purchase_form p,
#edd_purchase_form .edd-blocks-form__group {
	margin-bottom: var(--space-5);
}

/* Labels */
#edd_purchase_form label,
#edd-license-key-container-wrap label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--md-on-surface);
	margin-bottom: var(--space-2);
}

/* Required asterisk */
#edd_purchase_form .edd-required-indicator,
#edd_purchase_form .required {
	color: var(--md-error);
	margin-left: 2px;
}

/* Input fields */
#edd_purchase_form input[type="text"],
#edd_purchase_form input[type="email"],
#edd_purchase_form input[type="tel"],
#edd_purchase_form input[type="url"],
#edd_purchase_form input[type="password"],
#edd_purchase_form input[type="number"],
#edd_purchase_form select,
#edd_purchase_form textarea,
#edd_purchase_form .edd-input {
	width: 100%;
	height: 52px;
	padding: 0 var(--space-4);
	border: 1.5px solid var(--md-outline);
	border-radius: var(--radius-s);
	font-size: 15px;
	font-family: var(--font-body);
	background: var(--md-surface);
	color: var(--md-on-surface);
	transition: all 0.2s;
	-webkit-appearance: none;
	appearance: none;
}

#edd_purchase_form textarea {
	height: auto;
	min-height: 100px;
	padding: var(--space-4);
}

#edd_purchase_form select {
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2349454F' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6 8 9.5 11.5 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
}

#edd_purchase_form input:focus,
#edd_purchase_form select:focus,
#edd_purchase_form textarea:focus {
	outline: none;
	border-color: var(--md-primary);
	border-width: 2px;
}

/* Field descriptions */
#edd_purchase_form .edd-description,
#edd_purchase_form .description {
	font-size: 13px;
	color: var(--md-on-surface-variant);
	margin-top: var(--space-1);
}

/* Two-column name fields */
#edd_purchase_form .edd-blocks-form__group--name {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}

@media (max-width: 900px) {
	#edd_purchase_form p.edd-required-fields-notice {
		position: relative;
		top: auto;
		margin-bottom: 0;
	}
}

@media (max-width: 600px) {
	#edd_purchase_form .edd-blocks-form__group--name {
		grid-template-columns: 1fr;
	}
}

/* ══════════════════════════════════════════════════════════════════
	CHECKOUT — PAYMENT GATEWAYS
══════════════════════════════════════════════════════════════════ */

#edd_payment_mode_select {
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	padding: var(--space-6);
	margin-bottom: var(--space-8);
}

#edd_payment_mode_select legend,
#edd_payment_mode_select>p:first-of-type {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--md-on-surface);
	margin-bottom: var(--space-6);
}

/* Gateway list */
#edd-gateway-list,
#edd_payment_mode_select ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* Gateway option labels */
#edd_payment_mode_select label,
.edd-gateway-option label {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	border: 1.5px solid var(--md-outline-variant);
	border-radius: var(--radius-m);
	background: var(--md-surface);
	cursor: pointer;
	transition: all 0.2s;
}

#edd_payment_mode_select label:hover,
.edd-gateway-option label:hover {
	border-color: var(--md-outline);
}

/* Selected gateway */
#edd_payment_mode_select .edd-gateway-option-selected label,
#edd_payment_mode_select input[type="radio"]:checked+label,
.edd-gateway-option input:checked+label {
	border-color: var(--md-primary);
	background: var(--md-primary-container);
}

/* Style the radio buttons */
#edd_payment_mode_select input[type="radio"] {
	width: 22px;
	height: 22px;
	border: 2px solid var(--md-outline);
	border-radius: 50%;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
	transition: all 0.2s;
}

#edd_payment_mode_select input[type="radio"]:checked {
	border-color: var(--md-primary);
	background: var(--md-primary);
}

#edd_payment_mode_select input[type="radio"]:checked::after {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--md-on-primary);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* ── Payment Info (Stripe iframe etc.) ──────────────────────────── */

#edd_cc_fields,
#edd-stripe-payment-element,
.edd-stripe-card-element {
	margin-top: var(--space-4);
	padding: var(--space-5);
	background: var(--md-surface-container-low);
	border-radius: var(--radius-m);
	border: 1px solid var(--md-outline-variant);
}

.edd-stripe-card-element {
	padding: var(--space-4);
}

/* SSL notice */
.edd-ssl-notice,
#edd_purchase_form .edd-payment-icons+p {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: 13px;
	color: var(--md-on-surface-variant);
	margin-top: var(--space-3);
}

/* ══════════════════════════════════════════════════════════════════
	CHECKOUT — CONSENT / TERMS / SUBMIT
══════════════════════════════════════════════════════════════════ */

/* Fix #2: Fieldsets im Submit-Bereich brauchen Abstand */
#edd_purchase_submit fieldset,
#edd_purchase_submit>div,
#edd_purchase_submit>p {
	margin-bottom: var(--space-4);
}

/*
 * Consent fieldsets: Terms, Privacy, Withdrawal.
 * DOM-IDs: #edd_terms_agreement, #edd-privacy-policy-agreement,
 *          #edd_withdrawal_consent_fieldset
 * Alle brauchen: kein Fieldset-Card-Look, Checkbox + Label inline.
 */
#edd_terms_agreement,
#edd-privacy-policy-agreement,
#edd_withdrawal_consent_fieldset {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 0 var(--space-3) 0 !important;
}

/* Checkbox + Label nebeneinander */
.edd-terms-agreement,
.edd-privacy-policy-agreement,
#edd_withdrawal_consent_fieldset p {
	display: flex !important;
	align-items: flex-start;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
	flex-wrap: nowrap;
}

/* Labels schlicht — kein Card-Look */
#edd_terms_agreement label,
#edd-privacy-policy-agreement label,
#edd_withdrawal_consent_fieldset label {
	display: flex !important;
	align-items: flex-start !important;
	gap: var(--space-3) !important;
	border: none !important;
	padding: 0 !important;
	background: transparent !important;
	font-size: 14px !important;
	color: var(--md-on-surface) !important;
	line-height: 1.5 !important;
	cursor: pointer;
}

#edd_purchase_form input[type="checkbox"] {
	width: 20px;
	height: 20px;
	border: 2px solid var(--md-outline);
	border-radius: var(--radius-xs);
	-webkit-appearance: none;
	appearance: none;
	background: var(--md-surface);
	cursor: pointer;
	flex-shrink: 0;
	margin-top: 2px;
	transition: all 0.2s;
	position: relative;
}

#edd_purchase_form input[type="checkbox"]:checked {
	background: var(--md-primary);
	border-color: var(--md-primary);
}

#edd_purchase_form input[type="checkbox"]:checked::after {
	content: '';
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--md-on-primary);
	border-bottom: 2px solid var(--md-on-primary);
	transform: rotate(-45deg) translate(1px, -1px);
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -3px;
	margin-left: -6px;
}

/* Checkbox label text (fallback selectors) */
#edd_terms_agreement .edd-terms-agreement label,
#edd-privacy-policy-agreement .edd-privacy-policy-agreement label {
	border: none;
	padding: 0;
	background: transparent;
	display: inline;
	font-size: 14px;
	color: var(--md-on-surface);
	line-height: 1.5;
	cursor: pointer;
}

/* Terms + Privacy links */
#edd_purchase_form .edd-terms-wrapper label a,
#edd_purchase_form .edd-terms-wrapper a,
.edd-terms-agreement a,
.edd-privacy-policy-agreement a {
	color: var(--md-primary);
	text-decoration: underline;
}

/* ── Submit Button ─────────────────────────────────────────────── */

#edd_purchase_submit,
#edd-purchase-button-wrap {
	margin-top: var(--space-6);
}

/* Checkout-Button: Layout nutzt --md-tertiary (Orange), nicht --md-primary */
#edd-purchase-button,
#edd_purchase_form input[type="submit"],
#edd_purchase_form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: 100%;
	height: 56px;
	padding: 16px 32px;
	border: none;
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
	background: var(--md-tertiary);
	color: var(--md-on-tertiary);
	box-shadow: var(--md-elevation-1);
	letter-spacing: 0.02em;
}

#edd-purchase-button:hover,
#edd_purchase_form input[type="submit"]:hover,
#edd_purchase_form button[type="submit"]:hover {
	box-shadow: var(--md-elevation-2);
	transform: translateY(-1px);
	filter: brightness(1.1);
}

#edd-purchase-button:disabled,
#edd_purchase_form input[type="submit"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* Loading state — only when EDD adds edd-loading class */
#edd-purchase-button.edd-loading {
	position: relative;
	color: transparent !important;
}

/* ── Renew / Login links ──────────────────────────────────────── */

#edd_purchase_form .edd-sl-renewal,
#edd_checkout_form_wrap .edd-sl-renewal {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	background: var(--md-primary);
	color: var(--md-on-primary);
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s;
	margin-bottom: var(--space-6);
}

#edd_purchase_form .edd-sl-renewal:hover {
	box-shadow: var(--md-elevation-1);
}

/* Fix #3: "Or now" / Buy-Button braucht Abstand nach oben */
#edd_purchase_form .edd-sl-renewal+*,
#edd_checkout_form_wrap>p,
#edd_checkout_form_wrap>.edd-sl-renewal+p {
	margin-top: var(--space-4);
}

/* Fix #4: License Renewal Eingabefeld */
#edd_purchase_form .edd-form-group__control input.edd-input,
#edd_purchase_form input#edd-license-key,
.edd-form-group__control input.edd-input {
	width: 100%;
	height: 52px;
	padding: 0 var(--space-4);
	border: 1.5px solid var(--md-outline);
	border-radius: var(--radius-s);
	font-size: 15px;
	font-family: var(--font-body);
	background: var(--md-surface);
	color: var(--md-on-surface);
	transition: border-color 0.2s;
	-webkit-appearance: none;
	appearance: none;
}

#edd_purchase_form input#edd-license-key:focus,
.edd-form-group__control input.edd-input:focus {
	outline: none;
	border-color: var(--md-primary);
	border-width: 2px;
}

/* Fix #5: VAT Validate Button */
#edd-vat-check-button,
.edd-vat-check-button,
button.edd-vat-check-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	height: 44px;
	padding: 0 var(--space-5);
	border: none;
	border-radius: var(--radius-full);
	background: var(--md-secondary-container);
	color: var(--md-on-secondary-container);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	margin-top: var(--space-3);
	position: relative;
}

#edd-vat-check-button:hover,
.edd-vat-check-button:hover {
	background: var(--md-secondary);
	color: var(--md-on-secondary);
	box-shadow: var(--md-elevation-1);
}

/* ── VAT Button: Loading State ────────────────────────────────── */

#edd-vat-check-button.is-loading,
.edd-vat-check-button.is-loading {
	pointer-events: none;
	opacity: 0.8;
	color: transparent !important;
}

#edd-vat-check-button.is-loading::after,
.edd-vat-check-button.is-loading::after {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	border: 2.5px solid var(--md-on-secondary-container);
	border-top-color: transparent;
	border-radius: 50%;
	animation: cl-vat-spin 0.6s linear infinite;
}

@keyframes cl-vat-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ── VAT Button: Success State ────────────────────────────────── */

#edd-vat-check-button.is-valid,
.edd-vat-check-button.is-valid {
	background: var(--md-success-container, #E8F5E9);
	color: var(--md-on-success-container, #1B5E20) !important;
	pointer-events: none;
}

/* ── VAT Button: Error State ──────────────────────────────────── */

#edd-vat-check-button.is-invalid,
.edd-vat-check-button.is-invalid {
	background: var(--md-error-container);
	color: var(--md-on-error-container) !important;
	pointer-events: none;
}

/* ── VAT Answer Message ───────────────────────────────────────── */

#edd-vat-answer {
	margin-top: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-s);
	font-size: 13px;
	line-height: 1.5;
	transition: all 0.2s;
}

#edd-vat-answer:empty {
	display: none;
}

/* ── VAT Number Wrap ──────────────────────────────────────────── */

#edd-vat-number-wrap {
	margin-top: var(--space-3);
}

#edd-vat-number-wrap label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--md-on-surface);
	margin-bottom: var(--space-2);
}

/* ── Discount Code ────────────────────────────────────────────── */

#edd_discount_code,
#edd-discount-code-wrap {
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	padding: var(--space-6);
	margin-bottom: var(--space-8);
}

#edd_discount_code label,
#edd-discount-code-wrap label {
	display: block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--md-on-surface-variant);
	margin-bottom: var(--space-3);
}

#edd-discount-code-wrap .edd-discount-code-field-wrap {
	display: flex;
	gap: var(--space-2);
}

#edd-discount,
#edd_discount_code input[type="text"] {
	flex: 1;
	height: 44px;
	padding: 0 var(--space-4);
	border: 1.5px solid var(--md-outline);
	border-radius: var(--radius-s);
	font-size: 14px;
	background: var(--md-surface);
	color: var(--md-on-surface);
	transition: border-color 0.2s;
}

#edd-discount:focus,
#edd_discount_code input[type="text"]:focus {
	outline: none;
	border-color: var(--md-primary);
}

#edd-discount-code-wrap input[type="submit"],
#edd_discount_code input[type="submit"] {
	height: 44px;
	padding: 0 var(--space-4);
	border: none;
	border-radius: var(--radius-full);
	background: var(--md-secondary-container);
	color: var(--md-on-secondary-container);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
}

#edd-discount-code-wrap input[type="submit"]:hover,
#edd_discount_code input[type="submit"]:hover {
	background: var(--md-secondary);
	color: var(--md-on-secondary);
}

/* Applied discount badge */
.edd_discount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3) var(--space-4);
	background: var(--md-tertiary-container);
	border-radius: var(--radius-s);
	margin-top: var(--space-3);
}

.edd_discount .edd_discount_name {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	color: var(--md-on-tertiary-container);
}

.edd_discount .edd_discount_remove {
	background: none;
	border: none;
	color: var(--md-on-tertiary-container);
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.15s;
}

.edd_discount .edd_discount_remove:hover {
	opacity: 1;
}


/* ══════════════════════════════════════════════════════════════════
	RECEIPT / PURCHASE CONFIRMATION PAGE
══════════════════════════════════════════════════════════════════ */

/* Success Hero — injected above receipt via PHP hook */
.cl-receipt-hero {
	background: linear-gradient(180deg, var(--md-success-container) 0%, var(--md-background) 100%);
	padding-bottom: var(--space-12);
}

.cl-receipt-hero__inner {
	max-width: 800px;
	margin: 0 auto;
	padding: var(--space-16) 24px var(--space-8);
	text-align: center;
}

.cl-receipt-hero__icon {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: var(--md-success);
	color: var(--md-on-success);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--space-6);
	box-shadow: 0 8px 32px rgba(46, 125, 50, 0.3);
}

.cl-receipt-hero__icon .material-symbols-outlined {
	font-size: 56px;
	font-variation-settings: 'FILL' 1, 'wght' 400;
}

.cl-receipt-hero__title {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	color: var(--md-on-surface);
	margin-bottom: var(--space-4);
}

.cl-receipt-hero__message {
	font-size: 18px;
	color: var(--md-on-surface-variant);
	max-width: 500px;
	margin: 0 auto var(--space-8);
	line-height: 1.6;
}

/* Order number badge */
.cl-order-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-6);
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-size: 15px;
	color: var(--md-on-surface);
}

.cl-order-badge__label {
	color: var(--md-on-surface-variant);
}

.cl-order-badge__number {
	font-weight: 700;
	color: var(--md-primary);
	letter-spacing: 0.5px;
}

/* Email confirmation banner */
.cl-email-banner {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-6);
	background: var(--md-tertiary-container);
	border-radius: var(--radius-m);
	margin-bottom: var(--space-8);
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.cl-email-banner__icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--md-tertiary);
	color: var(--md-on-tertiary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cl-email-banner__icon .material-symbols-outlined {
	font-size: 24px;
}

.cl-email-banner__title {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 500;
	color: var(--md-on-tertiary-container);
	margin-bottom: var(--space-1);
}

.cl-email-banner__text {
	font-size: 14px;
	color: var(--md-on-tertiary-container);
	opacity: 0.8;
}

/* ── EDD Receipt Table — Order Details Card ── */

/* Receipt page content wrapper */
.cl-edd-receipt:not(.edd-success) .entry-content,
.cl-edd-receipt:not(.edd-success) .page-content {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Receipt-detail page uses its own 1200px layout, remove all constraints */
.cl-edd-receipt-detail .entry-content,
.cl-edd-receipt-detail .page-content,
.cl-edd-receipt-detail .wp-block-post-content {
	max-width: none;
	padding: 0;
}

/* Remove WP Site Blocks default inline padding on receipt-detail */
body.cl-edd-receipt-detail .wp-site-blocks {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Receipt table → card */
#edd_purchase_receipt,
.edd-order-receipt,
table#edd_purchase_receipt {
	width: 100%;
	margin: 0 auto var(--space-8);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	overflow: hidden;
}

/* Row labels (th) */
#edd_purchase_receipt th,
.edd-order-receipt th {
	padding: var(--space-4) var(--space-6);
	text-align: left;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 500;
	color: var(--md-on-surface-variant);
	background: transparent;
	border-bottom: 1px solid var(--md-outline-variant);
	width: 40%;
	vertical-align: middle;
}

/* Row values (td) */
#edd_purchase_receipt td,
.edd-order-receipt td {
	padding: var(--space-4) var(--space-6);
	border-bottom: 1px solid var(--md-outline-variant);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	color: var(--md-on-surface);
	text-align: right;
	vertical-align: middle;
}

/* Last row — no border */
#edd_purchase_receipt tr:last-child th,
#edd_purchase_receipt tr:last-child td,
.edd-order-receipt tr:last-child th,
.edd-order-receipt tr:last-child td {
	border-bottom: none;
}

/* Total row — emphasized */
#edd_purchase_receipt tr:last-child,
.edd-order-receipt tr:last-child {
	background: var(--md-surface-container-high);
}

#edd_purchase_receipt tr:last-child th {
	font-size: 14px;
	font-weight: 700;
	color: var(--md-on-surface);
}

#edd_purchase_receipt tr:last-child td {
	font-size: 18px;
	font-weight: 700;
	color: var(--md-primary);
}

/* Status row — badge styling for status value */
#edd_purchase_receipt .edd_receipt_payment_status td span,
#edd_purchase_receipt td .edd-status-badge {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	background: var(--md-success-container);
	color: var(--md-on-success-container);
	border-radius: var(--radius-full);
	font-size: 12px;
	font-weight: 500;
}

/* Receipt download links */
#edd_purchase_receipt .edd_download_file a,
.edd-order-receipt__file-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	background: var(--md-primary);
	color: var(--md-on-primary);
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s;
}

#edd_purchase_receipt .edd_download_file a:hover,
.edd-order-receipt__file-link:hover {
	box-shadow: var(--md-elevation-1);
	opacity: 0.9;
}

/* Products section heading */
.cl-edd-receipt h3,
.cl-edd-receipt .edd_purchase_receipt_products+h3,
.cl-edd-receipt .entry-content>h3 {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--md-on-surface-variant);
	margin-bottom: var(--space-5);
	padding-top: var(--space-4);
}

/* Products table → card */
table#edd_purchase_receipt_products,
#edd_purchase_receipt_products {
	width: 100%;
	margin: 0 auto var(--space-8);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	overflow: hidden;
}

#edd_purchase_receipt_products th {
	padding: var(--space-4) var(--space-6);
	text-align: left;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--md-on-surface-variant);
	background: var(--md-surface-container-high);
	border-bottom: 1px solid var(--md-outline-variant);
}

#edd_purchase_receipt_products td {
	padding: var(--space-5) var(--space-6);
	border-bottom: 1px solid var(--md-outline-variant);
	font-size: 14px;
	color: var(--md-on-surface);
	vertical-align: top;
}

#edd_purchase_receipt_products tr:last-child td {
	border-bottom: none;
}

/* Product name in receipt */
#edd_purchase_receipt_products .edd_download_receipt_product_name {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 500;
	color: var(--md-on-surface);
}

/* Product notes */
.edd_purchase_receipt_product_notes {
	font-size: 13px;
	color: var(--md-on-surface-variant);
	line-height: 1.6;
	margin-top: var(--space-3);
	padding: var(--space-4);
	background: var(--md-surface-container-low);
	border-radius: var(--radius-m);
	border: 1px solid var(--md-outline-variant);
}

.edd_purchase_receipt_product_notes p {
	margin-bottom: var(--space-2);
}

.edd_purchase_receipt_product_notes p:last-child {
	margin-bottom: 0;
}

/* Download file link in product cell */
.edd_download_file_link,
a.edd_download_file_link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	background: var(--md-primary);
	color: var(--md-on-primary);
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s;
	margin-top: var(--space-3);
}

.edd_download_file_link:hover,
a.edd_download_file_link:hover {
	box-shadow: var(--md-elevation-1);
	color: var(--md-on-primary);
	opacity: 0.9;
}

/* Price column in products */
#edd_purchase_receipt_products .edd_download_receipt_product_price {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 500;
	color: var(--md-on-surface);
	text-align: right;
	white-space: nowrap;
}

/* ── EDD Blocks Confirmation/Receipt ── */

/* Confirmation block wrapper */
.edd-blocks__confirmation {
	max-width: calc(800px + 2 * var(--space-6));
	margin: 0 auto var(--space-8);
	padding: 0 var(--space-6);
}

/* Totals card (Order, Status, Method, Date, Subtotal, Total) */
.edd-blocks-receipt__totals {
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	overflow: hidden;
	margin-bottom: var(--space-8);
}

/* Row header */
.edd-blocks-receipt__totals .edd-blocks__row-header,
.edd-blocks-receipt__totals .edd-blocks-receipt__row-header {
	background: var(--md-surface-container-high);
	border-bottom: 1px solid var(--md-outline-variant);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 18px;
	color: var(--md-on-surface);
}

/* Each detail row */
.edd-blocks-receipt__totals .edd-blocks__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-2) var(--space-6);
	border-bottom: 1px solid var(--md-outline-variant);
}

.edd-blocks-receipt__totals .edd-blocks__row:last-child {
	border-bottom: none;
	padding-top: var(--space-4);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 18px;
}

.edd-blocks-receipt__totals .edd-blocks__row:nth-child(2) {
	padding-top: var(--space-4);
}

.edd-blocks-receipt__totals .edd-blocks__row-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--md-on-surface-variant);
}

.edd-blocks-receipt__totals .edd-blocks__row-value {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	color: var(--md-on-surface);
	text-align: right;
}

/* Products section */
.edd-blocks__confirmation h3 {
	max-width: 100%;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--md-on-surface-variant);
	margin-bottom: var(--space-5);
}

.edd-blocks-receipt__items {
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	overflow: hidden;
	margin-bottom: var(--space-8);
}

.edd-blocks-receipt__item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: var(--space-5) var(--space-6);
	border-bottom: 1px solid var(--md-outline-variant);
}

.edd-blocks-receipt__item:last-child {
	border-bottom: none;
}

.edd-blocks-receipt__item-details {
	flex: 1;
	min-width: 0;
}

.edd-blocks-receipt__item-details .edd-blocks__row-label {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 500;
	color: var(--md-on-surface);
}

/* Product notes (description text below product name) */
.edd-blocks-receipt__item .edd_purchase_receipt_product_notes {
	font-size: 13px;
	color: var(--md-on-surface-variant);
	line-height: 1.5;
	margin-top: var(--space-2);
}

.edd-blocks-receipt__item .edd_purchase_receipt_product_notes p {
	margin-bottom: var(--space-2);
}

.edd-blocks-receipt__item .edd_purchase_receipt_product_notes p:last-child {
	margin-bottom: 0;
}

.edd-blocks-receipt__item-price {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 500;
	color: var(--md-on-surface);
	text-align: right;
	flex-shrink: 0;
	padding-left: var(--space-6);
}

/* Download links inside receipt items */
.edd-blocks-receipt__item .edd-order-item__file-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	background: var(--md-primary-container);
	color: var(--md-on-primary-container);
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s;
	margin-top: var(--space-3);
}

.edd-blocks-receipt__item .edd-order-item__file-link:hover {
	background: var(--md-primary);
	color: var(--md-on-primary);
}

/* Confirmation details link (View Order Details) */
.edd-blocks__confirmation-details {
	text-align: center;
	margin-bottom: var(--space-8);
}

.edd-blocks__confirmation-details a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 500;
	color: var(--md-primary);
	text-decoration: none;
	transition: color 0.2s;
}

.edd-blocks__confirmation-details a:hover {
	color: var(--md-on-primary-container);
}

/* ── Next Steps box (injected via PHP) ── */

.cl-next-steps {
	max-width: 800px;
	margin: 0 auto var(--space-8);
	background: var(--md-primary-container);
	border: 1px solid color-mix(in srgb, var(--md-primary) 20%, transparent);
	border-radius: var(--radius-l);
	padding: var(--space-8);
}

.cl-next-steps__title {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	color: var(--md-on-primary-container);
	margin-bottom: var(--space-4);
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.cl-next-steps__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.cl-next-step {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
}

.cl-next-step__number {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--md-primary);
	color: var(--md-on-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
}

.cl-next-step__title {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 500;
	color: var(--md-on-primary-container);
	margin-bottom: var(--space-1);
}

.cl-next-step__desc {
	font-size: 14px;
	color: var(--md-on-primary-container);
	opacity: 0.8;
	line-height: 1.5;
}

/* Receipt CTA buttons */
.cl-receipt-cta {
	max-width: 800px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-4);
}

.cl-receipt-cta .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 16px 28px;
	border: none;
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.25s;
}


/* ══════════════════════════════════════════════════════════════════
	PURCHASE HISTORY / ACCOUNT PAGE
══════════════════════════════════════════════════════════════════ */

/* Account page wrapper */
.cl-account-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-8) 24px var(--space-20);
}

.cl-account-container .page-title {
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 700;
	color: var(--md-on-surface);
	margin-bottom: var(--space-8);
}

/* ── Tab Navigation ── */

.cl-tab-nav {
	display: flex;
	gap: var(--space-2);
	margin-bottom: var(--space-8);
	border-bottom: 1px solid var(--md-outline-variant);
	overflow-x: auto;
}

.cl-tab-btn {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-5);
	border: none;
	border-bottom: 2px solid transparent;
	background: transparent;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	color: var(--md-on-surface-variant);
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.2s;
}

.cl-tab-btn.active,
.cl-tab-btn:hover {
	color: var(--md-primary);
	border-bottom-color: var(--md-primary);
}

.cl-tab-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--radius-full);
	background: var(--md-primary-container);
	color: var(--md-on-primary-container);
	font-size: 12px;
}

.cl-tab-content {
	display: none;
}

.cl-tab-content.active {
	display: block;
	animation: cl-fadeIn 0.3s ease;
}

@keyframes cl-fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ══════════════════════════════════════════════════════════════
	ACCOUNT PAGE — Tabbed Layout (EDD Blocks)
	══════════════════════════════════════════════════════════════ */

/* Container */
.cl-account-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-8) 24px var(--space-20);
}

.cl-account-header {
	margin-bottom: var(--space-8);
}

.cl-account-title {
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 700;
	color: var(--md-on-surface);
	margin: 0;
}

/* Tab Navigation */
.cl-tab-nav {
	display: flex;
	gap: var(--space-2);
	margin-bottom: var(--space-8);
	border-bottom: 1px solid var(--md-outline-variant);
	overflow-x: auto;
}

.cl-tab-btn {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-5);
	border: none;
	border-bottom: 2px solid transparent;
	background: transparent;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	color: var(--md-on-surface-variant);
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.2s, border-color 0.2s;
}

.cl-tab-btn:hover {
	color: var(--md-on-surface);
}

.cl-tab-btn.active {
	color: var(--md-primary);
	border-bottom-color: var(--md-primary);
}

.cl-tab-btn .material-symbols-outlined {
	font-size: 20px;
}

.cl-tab-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--radius-full);
	background: var(--md-primary-container);
	color: var(--md-on-primary-container);
	font-size: 12px;
	font-weight: 500;
}

/* Tab Content */
.cl-tab-content {
	display: none;
}

.cl-tab-content.active {
	display: block;
	animation: cl-tabFadeIn 0.3s ease;
}

@keyframes cl-tabFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── EDD Blocks Order Grid ── */

.edd-blocks__orders {
	margin: 0;
}

.edd-blocks__orders-grid {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: var(--space-4);
}

/* Single Order Card */
.edd-blocks-orders__order {
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	padding: var(--space-5) var(--space-6);
	transition: box-shadow 0.25s;
}

.edd-blocks-orders__order:hover {
	box-shadow: var(--md-elevation-1);
}

/* Order Header — ID + Status row */
.edd-blocks-orders__order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--md-outline-variant);
}

.edd-blocks-orders__order-id {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 500;
	color: var(--md-primary);
}

/* Order Status Badge */
.edd-blocks-orders__order-status {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	border-radius: var(--radius-full);
	font-size: 12px;
	font-weight: 500;
}

.edd-blocks-orders__order-status.complete,
.edd-blocks-orders__order-status.completed {
	background: var(--md-success-container);
	color: var(--md-on-success-container);
}

.edd-blocks-orders__order-status.pending {
	background: var(--md-tertiary-container);
	color: var(--md-on-tertiary-container);
}

.edd-blocks-orders__order-status.refunded,
.edd-blocks-orders__order-status.revoked,
.edd-blocks-orders__order-status.failed {
	background: #FDECEA;
	color: #B71C1C;
}

/* Order Data — Date + Amount */
.edd-blocks-orders__order-data {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-3);
}

.edd-blocks-orders__order-date {
	font-size: 14px;
	color: var(--md-on-surface-variant);
}

.edd-blocks-orders__order-amount {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 500;
	color: var(--md-on-surface);
}

/* Order Details Link */
.edd-blocks-orders__order-details {
	padding-top: var(--space-3);
}

.edd-blocks-orders__order-details a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-full);
	background: var(--md-surface);
	color: var(--md-on-surface-variant);
	text-decoration: none;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 500;
	transition: all 0.2s;
}

.edd-blocks-orders__order-details a:hover {
	border-color: var(--md-primary);
	background: var(--md-primary-container);
	color: var(--md-on-primary-container);
}

/* Pagination */
.edd-blocks-orders__pagination {
	margin-top: var(--space-8);
	text-align: center;
}

.edd-blocks-orders__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 var(--space-3);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-s);
	background: var(--md-surface);
	color: var(--md-on-surface-variant);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.2s;
}

.edd-blocks-orders__pagination .page-numbers:hover {
	border-color: var(--md-primary);
	background: var(--md-primary-container);
	color: var(--md-on-primary-container);
}

.edd-blocks-orders__pagination .page-numbers.current {
	background: var(--md-primary);
	color: var(--md-on-primary);
	border-color: var(--md-primary);
}

/* ── Downloads Tab — Card Grid (legacy table#edd_user_history) ── */

/* Collapse table layout → grid of cards */
.cl-account-container table#edd_user_history,
.cl-account-container table.edd-table {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--space-5);
	border: none !important;
	border-collapse: separate !important;
	border-spacing: 0;
	background: transparent !important;
	width: 100%;
}

/* Hide the table head */
.cl-account-container table#edd_user_history thead {
	display: none !important;
}

/* Collapse tbody — let grid flow directly */
.cl-account-container table#edd_user_history tbody {
	display: contents;
}

/* Each download row → card */
.cl-account-container table#edd_user_history tbody tr {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-6);
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant) !important;
	border-radius: var(--radius-l);
	transition: box-shadow 0.25s;
}

.cl-account-container table#edd_user_history tbody tr:hover {
	box-shadow: var(--md-elevation-2);
}

/* Product name cell → card title */
.cl-account-container table#edd_user_history td.edd_download_download_name {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 500;
	color: var(--md-on-surface);
	padding: 0;
	border: none !important;
}

/* File links cell */
.cl-account-container table#edd_user_history td.edd_download_download_file {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
	padding: 0;
	border: none !important;
}

/* Also keep EDD Blocks selectors for future-proofing */
.cl-account-container .edd-blocks__user-downloads .edd-blocks__row-header,
.cl-account-container .edd-blocks__user-downloads .edd-order-items__header {
	display: none !important;
}

.cl-account-container .edd-blocks__user-downloads {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--space-5);
	border: none !important;
	background: transparent !important;
}

.cl-account-container .edd-blocks__user-downloads .edd-order-item__product {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-6);
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant) !important;
	border-radius: var(--radius-l);
	transition: box-shadow 0.25s;
}

.cl-account-container .edd-blocks__user-downloads .edd-order-item__product:hover {
	box-shadow: var(--md-elevation-2);
}

.cl-account-container .edd-blocks__user-downloads .edd-blocks__row-column--name {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 500;
	color: var(--md-on-surface);
}

.cl-account-container .edd-blocks__user-downloads .edd-blocks__row-column--files {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}

/* Download File Link Button — pill style */
.edd-order-item__file-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	background: var(--md-primary);
	color: var(--md-on-primary);
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s;
}

.edd-order-item__file-link:hover {
	box-shadow: var(--md-elevation-1);
	color: var(--md-on-primary);
}

/* "No orders" message */
.edd-blocks__orders>p:only-child {
	text-align: center;
	padding: var(--space-12) var(--space-6);
	color: var(--md-on-surface-variant);
	font-size: 15px;
}

/* ── EDD Profile Editor — Card Form ── */

#edd_profile_editor_form {
	max-width: 600px;
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	padding: var(--space-8);
}

#edd_profile_editor_form fieldset {
	border: none;
	padding: 0;
	margin: 0 0 var(--space-6);
}

#edd_profile_editor_form legend {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--md-on-surface);
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--md-outline-variant);
	width: 100%;
}

#edd_profile_editor_form p {
	margin-bottom: var(--space-5);
}

#edd_profile_editor_form label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--md-on-surface);
	margin-bottom: var(--space-2);
}

#edd_profile_editor_form input.edd-input,
#edd_profile_editor_form input.text,
#edd_profile_editor_form input.password,
#edd_profile_editor_form select.edd-select {
	width: 100%;
	height: 52px;
	padding: 0 var(--space-4);
	border: 1.5px solid var(--md-outline);
	border-radius: var(--radius-s);
	font-size: 15px;
	font-family: var(--font-body);
	background: var(--md-surface);
	color: var(--md-on-surface);
	transition: border-color 0.2s;
}

#edd_profile_editor_form input.edd-input:focus,
#edd_profile_editor_form input.text:focus,
#edd_profile_editor_form input.password:focus,
#edd_profile_editor_form select.edd-select:focus {
	outline: none;
	border-color: var(--md-primary);
}

#edd_profile_editor_form select.edd-select {
	appearance: auto;
	cursor: pointer;
}

#edd_profile_editor_form .edd-submit,
#edd_profile_editor_form #edd_profile_editor_submit {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 14px 28px;
	border: none;
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.25s;
	background: var(--md-primary);
	color: var(--md-on-primary);
}

#edd_profile_editor_form .edd-submit:hover,
#edd_profile_editor_form #edd_profile_editor_submit:hover {
	box-shadow: var(--md-elevation-1);
}

/* Profile success / error messages */
#edd_profile_editor_form+.edd_success,
.edd-alert-success {
	background: var(--md-success-container);
	color: var(--md-on-success-container);
	border: 1px solid var(--md-success);
	border-radius: var(--radius-s);
	padding: var(--space-4) var(--space-5);
	margin-bottom: var(--space-5);
}

/* Info text above profile form */
.cl-edd-account .edd_form+p,
.cl-edd-account p:has(+ #edd_profile_editor_form) {
	font-size: 14px;
	color: var(--md-on-surface-variant);
	margin-bottom: var(--space-4);
}

/* ── EDD Receipt Detail Page — account-integrated styling ── */

.cl-edd-receipt:not(.edd-success) .edd-blocks__confirmation {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-8) 24px var(--space-20);
}

/* Order detail items table */
.cl-edd-receipt .edd-blocks__row,
.cl-edd-receipt .edd-order-item {
	background: var(--md-surface-container);
	border: none;
	border-radius: 0;
	overflow: hidden;
}

.cl-edd-receipt .edd-blocks__row-header {
	border-bottom: 1px solid var(--md-outline-variant);
	padding: var(--space-2) var(--space-5);
	border-radius: 0;
}

.cl-edd-receipt .edd-blocks__row-label {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--md-on-surface-variant);
}

/* ── Purchase History Table ── */


#edd_purchase_history,
table#edd_purchase_history,
.edd_purchase_history {
	width: 100%;
	border-collapse: collapse;
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	overflow: hidden;
}

#edd_purchase_history th {
	padding: var(--space-4) var(--space-5);
	text-align: left;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--md-on-surface-variant);
	background: var(--md-surface-container-high);
	border-bottom: 1px solid var(--md-outline-variant);
}

#edd_purchase_history td {
	padding: var(--space-5);
	border-bottom: 1px solid var(--md-outline-variant);
	font-size: 14px;
	color: var(--md-on-surface);
}

#edd_purchase_history tr:last-child td {
	border-bottom: none;
}

/* Order ID links */
#edd_purchase_history .edd_purchase_id a {
	font-family: var(--font-display);
	font-weight: 500;
	color: var(--md-primary);
	text-decoration: none;
}

#edd_purchase_history .edd_purchase_id a:hover {
	text-decoration: underline;
}

/* Amount */
#edd_purchase_history .edd_purchase_amount {
	font-family: var(--font-display);
	font-weight: 500;
}

/* View details link */
#edd_purchase_history .edd_purchase_details a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-s);
	background: var(--md-surface);
	color: var(--md-on-surface-variant);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	transition: all 0.2s;
}

#edd_purchase_history .edd_purchase_details a:hover {
	border-color: var(--md-primary);
	background: var(--md-primary-container);
	color: var(--md-on-primary-container);
}

/* Status badge styling */
#edd_purchase_history .edd_purchase_status {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	border-radius: var(--radius-full);
	font-size: 12px;
	font-weight: 500;
}

/* ── Custom Order History Table (.cl-orders-table) ── */

.cl-orders-table-wrapper {
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	overflow: hidden;
}

.cl-orders-table {
	width: 100%;
	border-collapse: collapse;
}

.cl-orders-table th {
	padding: var(--space-4) var(--space-5);
	text-align: left;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--md-on-surface-variant);
	background: var(--md-surface-container-high);
	border-bottom: 1px solid var(--md-outline-variant);
}

.cl-orders-table td {
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--md-outline-variant);
	font-size: 14px;
	color: var(--md-on-surface);
	vertical-align: middle;
}

.cl-orders-table tr:last-child td {
	border-bottom: none;
}

.cl-order-number {
	font-family: var(--font-display);
	font-weight: 500;
}

.cl-order-number a {
	color: var(--md-primary);
	text-decoration: none;
}

.cl-order-number a:hover {
	text-decoration: underline;
}

.cl-order-products {
	max-width: 250px;
	font-size: 13px;
	color: var(--md-on-surface-variant);
	display: block;
}

.cl-order-price {
	font-family: var(--font-display);
	font-weight: 500;
}

/* Status pill */
.cl-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	border-radius: var(--radius-full);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}

.cl-status-pill--success {
	background: var(--md-success-container);
	color: var(--md-on-success-container);
}

.cl-status-pill--pending {
	background: var(--md-tertiary-container);
	color: var(--md-on-tertiary-container);
}

/* Action icon buttons */
.cl-action-btns {
	display: flex;
	gap: var(--space-2);
}

.cl-action-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-s);
	background: var(--md-surface);
	color: var(--md-on-surface-variant);
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s;
}

.cl-action-icon-btn:hover {
	border-color: var(--md-primary);
	background: var(--md-primary-container);
	color: var(--md-on-primary-container);
}

.cl-action-icon-btn .material-symbols-outlined {
	font-size: 18px;
}

/* ── Mobile Order Cards ── */

.cl-orders-cards {
	display: none;
	flex-direction: column;
	gap: var(--space-4);
}

.cl-order-card {
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	overflow: hidden;
}

.cl-order-card__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: var(--space-5) var(--space-5) var(--space-3);
}

.cl-order-card__number {
	font-family: var(--font-display);
	font-weight: 500;
	margin-bottom: var(--space-1);
}

.cl-order-card__number a {
	color: var(--md-primary);
	text-decoration: none;
}

.cl-order-card__date {
	font-size: 13px;
	color: var(--md-on-surface-variant);
}

.cl-order-card__body {
	padding: 0 var(--space-5) var(--space-4);
}

.cl-order-card__products {
	font-size: 13px;
	color: var(--md-on-surface-variant);
	margin-bottom: var(--space-3);
}

.cl-order-card__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cl-order-card__label {
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--md-on-surface-variant);
}

.cl-order-card__price {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 500;
	color: var(--md-on-surface);
}

.cl-order-card__footer {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	border-top: 1px solid var(--md-outline-variant);
	background: var(--md-surface-container-low);
}

.cl-order-card__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-s);
	background: var(--md-surface);
	color: var(--md-on-surface-variant);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s;
}

.cl-order-card__btn:hover {
	border-color: var(--md-primary);
	background: var(--md-primary-container);
	color: var(--md-on-primary-container);
}

/* Responsive: Table → Cards */
@media (max-width: 900px) {
	.cl-orders-table-wrapper {
		display: none;
	}

	.cl-orders-cards {
		display: flex;
	}
}

/* ── Download History: Download Button Pill ── */

#edd_user_history .edd_download_file a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	background: var(--md-primary);
	color: var(--md-on-primary);
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s;
}

#edd_user_history .edd_download_file a:hover {
	box-shadow: var(--md-elevation-1);
}

/* ══════════════════════════════════════════════════════════════════
	RECEIPT DETAIL PAGE — Custom Card Layout (.cl-edd-receipt-detail)
	══════════════════════════════════════════════════════════════════ */

/* Hide legacy confirmation-flow elements on receipt detail view */
.cl-edd-receipt-detail .cl-receipt-hero,
.cl-edd-receipt-detail .cl-email-banner,
.cl-edd-receipt-detail .cl-next-steps,
.cl-edd-receipt-detail .cl-receipt-cta,
.cl-edd-receipt-detail .cl-security-badges {
	display: none !important;
}

/* License keys rows produced by Software Licensing (shown in custom card) */
.cl-edd-receipt-detail tr.edd_license_keys,
.cl-edd-receipt-detail tr.edd_license_key {
	display: none !important;
}

/* Hide duplicate EDD default tables on receipt-detail — data already in custom cards.
	IMPORTANT: Do NOT hide the parent block wrappers (.edd-blocks__receipt,
	.wp-block-edd-receipt) because our custom content renders INSIDE them
	via the edd_order_receipt_before_table / after_table hooks. */
.cl-edd-receipt-detail #edd_purchase_receipt,
.cl-edd-receipt-detail table#edd_purchase_receipt,
.cl-edd-receipt-detail #edd_purchase_receipt_products,
.cl-edd-receipt-detail table#edd_purchase_receipt_products,
.cl-edd-receipt-detail .edd-blocks__receipt-items,
.cl-edd-receipt-detail .entry-content>h3 {
	display: none !important;
}

/* Make EDD block wrappers transparent — they contain our custom markup
	so we can't hide them, but we don't want them imposing any box model. */
.cl-edd-receipt-detail .wp-block-edd-receipt,
.cl-edd-receipt-detail .edd-blocks__receipt {
	display: contents !important;
}

/* Override ALL WordPress layout width constraints on the receipt-detail page
	so our 1200px custom layout can expand properly. */
body.cl-edd-receipt-detail .wp-site-blocks,
body.cl-edd-receipt-detail .wp-site-blocks>*,
body.cl-edd-receipt-detail .entry-content,
body.cl-edd-receipt-detail .wp-block-post-content,
body.cl-edd-receipt-detail .is-layout-flow>*,
body.cl-edd-receipt-detail .is-layout-constrained>* {
	max-width: none !important;
}

/* ── Wrapper ── */
.cl-receipt-detail {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px var(--space-16);
}

/* ── Page Header — full-width background band ── */
.cl-receipt-page-header {
	background: var(--md-surface-container-low);
	border-bottom: 1px solid var(--md-outline-variant);
	padding: var(--space-8) 0 var(--space-6);
	margin-bottom: var(--space-8);
}

.cl-receipt-page-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ── Breadcrumb ── */
.cl-receipt-breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
	font-size: 14px;
	color: var(--md-on-surface-variant);
}

.cl-receipt-breadcrumb a {
	color: var(--md-primary);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.cl-receipt-breadcrumb a:hover {
	text-decoration: underline;
}

.cl-breadcrumb-sep {
	color: var(--md-outline);
}

/* ── Page Title ── */
.cl-receipt-page-title {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: 700;
	color: var(--md-on-surface);
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-8);
}

.cl-receipt-order-id {
	font-family: var(--font-body);
	font-size: 0.75em;
	font-weight: 400;
	color: var(--md-on-surface-variant);
	font-feature-settings: 'tnum';
}

/* ── Grid Layout ── */
.cl-receipt-grid {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: var(--space-8);
	align-items: start;
}

@media (max-width: 900px) {
	.cl-receipt-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Card Component ── */
.cl-rcard {
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	overflow: hidden;
	margin-bottom: var(--space-6);
}

.cl-rcard:last-child {
	margin-bottom: 0;
}

.cl-rcard-header {
	padding: var(--space-5) var(--space-6);
	background: var(--md-surface-container-high);
	border-bottom: 1px solid var(--md-outline-variant);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.cl-rcard-title {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--md-on-surface);
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
}

.cl-rcard-title .material-symbols-outlined {
	font-size: 20px;
	color: var(--md-primary);
}

.cl-rcard-body {
	padding: var(--space-6);
}

/* ── Status Bar ── */
.cl-receipt-status-bar {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-6);
}

.cl-status-complete {
	background: var(--md-success-container);
}

.cl-status-pending {
	background: var(--md-tertiary-container);
}

.cl-status-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cl-status-complete .cl-status-icon {
	background: var(--md-success);
	color: var(--md-on-success);
}

.cl-status-pending .cl-status-icon {
	background: var(--md-tertiary);
	color: var(--md-on-tertiary);
}

.cl-status-icon .material-symbols-outlined {
	font-size: 24px;
	font-variation-settings: 'FILL' 1;
}

.cl-status-content {
	flex: 1;
}

.cl-status-label {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
}

.cl-status-complete .cl-status-label {
	color: var(--md-on-success-container);
}

.cl-status-pending .cl-status-label {
	color: var(--md-on-tertiary-container);
}

.cl-status-date {
	font-size: 13px;
	opacity: 0.8;
}

.cl-status-complete .cl-status-date {
	color: var(--md-on-success-container);
}

.cl-status-pending .cl-status-date {
	color: var(--md-on-tertiary-container);
}

.cl-status-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 500;
}

.cl-status-complete .cl-status-badge {
	background: var(--md-success);
	color: var(--md-on-success);
}

.cl-status-pending .cl-status-badge {
	background: var(--md-tertiary);
	color: var(--md-on-tertiary);
}

/* ── Details Grid ── */
.cl-details-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-6);
}

.cl-detail-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.cl-detail-label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--md-on-surface-variant);
}

.cl-detail-value {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 500;
	color: var(--md-on-surface);
}

.cl-detail-value.cl-mono {
	font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
	font-size: 14px;
	font-feature-settings: 'tnum';
}

/* ── Products List ── */
.cl-products-list {
	display: flex;
	flex-direction: column;
}

.cl-product-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: var(--space-5) 0;
	border-bottom: 1px solid var(--md-outline-variant);
}

.cl-product-item:first-child {
	padding-top: 0;
}

.cl-product-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.cl-product-info {
	flex: 1;
	min-width: 0;
}

.cl-product-name {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 500;
	color: var(--md-on-surface);
	margin: 0 0 var(--space-1);
}

.cl-product-downloads {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.cl-download-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: var(--md-primary-container);
	color: var(--md-on-primary-container);
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s;
	border: none;
	cursor: pointer;
}

.cl-download-btn:hover {
	background: var(--md-primary);
	color: var(--md-on-primary);
}

.cl-download-btn .material-symbols-outlined {
	font-size: 14px;
}

.cl-product-price {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 500;
	color: var(--md-on-surface);
	text-align: right;
	white-space: nowrap;
	margin-left: var(--space-4);
}

/* ── Sidebar ── */
.cl-receipt-sidebar {
	position: sticky;
	top: 80px;
}

.cl-summary-card {
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	overflow: hidden;
}

.cl-summary-header {
	padding: var(--space-5) var(--space-6);
	background: var(--md-surface-container-high);
	border-bottom: 1px solid var(--md-outline-variant);
}

.cl-summary-title {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--md-on-surface);
	margin: 0;
}

.cl-summary-body {
	padding: var(--space-5) var(--space-6);
}

.cl-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-2) 0;
	font-size: 14px;
	color: var(--md-on-surface-variant);
}

.cl-summary-row.cl-discount {
	color: var(--md-tertiary);
}

.cl-summary-row.cl-summary-total {
	padding-top: var(--space-4);
	margin-top: var(--space-3);
	border-top: 2px solid var(--md-outline-variant);
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--md-on-surface);
}

/* ── Action Buttons ── */
.cl-receipt-actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.cl-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 12px 20px;
	border: 1.5px solid var(--md-outline);
	border-radius: var(--radius-full);
	background: transparent;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	color: var(--md-on-surface);
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s;
	width: 100%;
}

.cl-action-btn:hover {
	border-color: var(--md-primary);
	background: var(--md-primary-container);
	color: var(--md-on-primary-container);
}

.cl-action-btn .material-symbols-outlined {
	font-size: 18px;
}

/* ── Mobile Optimizations ── */
@media (max-width: 600px) {
	.cl-receipt-status-bar {
		flex-direction: column;
		align-items: flex-start;
	}

	.cl-product-item {
		flex-direction: column;
		gap: var(--space-4);
	}

	.cl-product-price {
		text-align: left;
		margin-left: 0;
	}

	.cl-details-grid {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	.cl-receipt-page-title {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2);
	}

	.cl-rcard-header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
	}
}

/* ── Print Styles ── */
@media print {

	.cl-receipt-breadcrumb,
	.cl-receipt-actions,
	.cl-product-downloads {
		display: none !important;
	}

	.cl-rcard {
		border: 1px solid #ccc;
		break-inside: avoid;
	}

	.cl-receipt-sidebar {
		position: static;
	}
}

/* ── EDD Login Form ── */

#edd_login_form,
.edd_login_form,
form#edd_login_form {
	max-width: 500px;
	margin: 0 auto;
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	padding: var(--space-8);
}

#edd_login_form p,
.edd_login_form p {
	margin-bottom: var(--space-5);
}

#edd_login_form label,
.edd_login_form label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--md-on-surface);
	margin-bottom: var(--space-2);
}

#edd_login_form input[type="text"],
#edd_login_form input[type="password"],
.edd_login_form input[type="text"],
.edd_login_form input[type="password"] {
	width: 100%;
	height: 52px;
	padding: 0 var(--space-4);
	border: 1.5px solid var(--md-outline);
	border-radius: var(--radius-s);
	font-size: 15px;
	background: var(--md-surface);
	color: var(--md-on-surface);
	transition: border-color 0.2s;
}

#edd_login_form input[type="text"]:focus,
#edd_login_form input[type="password"]:focus,
.edd_login_form input[type="text"]:focus,
.edd_login_form input[type="password"]:focus {
	outline: none;
	border-color: var(--md-primary);
}

#edd_login_form input[type="submit"],
.edd_login_form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: 100%;
	height: 52px;
	padding: 14px 28px;
	border: none;
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.25s;
	background: var(--md-primary);
	color: var(--md-on-primary);
}

#edd_login_form input[type="submit"]:hover,
.edd_login_form input[type="submit"]:hover {
	box-shadow: var(--md-elevation-1);
}

/* ── Profile Form (EDD Profile Editor) ── */

#edd_profile_editor_form,
form#edd_profile_editor_form {
	max-width: 600px;
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	padding: var(--space-8);
}

#edd_profile_editor_form p {
	margin-bottom: var(--space-6);
}

#edd_profile_editor_form label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--md-on-surface);
	margin-bottom: var(--space-2);
}

#edd_profile_editor_form input[type="text"],
#edd_profile_editor_form input[type="email"],
#edd_profile_editor_form input[type="password"],
#edd_profile_editor_form select {
	width: 100%;
	height: 52px;
	padding: 0 var(--space-4);
	border: 1.5px solid var(--md-outline);
	border-radius: var(--radius-s);
	font-size: 15px;
	background: var(--md-surface);
	color: var(--md-on-surface);
}

#edd_profile_editor_form input:focus,
#edd_profile_editor_form select:focus {
	outline: none;
	border-color: var(--md-primary);
}

#edd_profile_editor_form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 14px 28px;
	border: none;
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.25s;
	background: var(--md-primary);
	color: var(--md-on-primary);
}

#edd_profile_editor_form input[type="submit"]:hover {
	box-shadow: var(--md-elevation-1);
}


/* ══════════════════════════════════════════════════════════════════
	SHARED BUTTON STYLES (for injected HTML)
══════════════════════════════════════════════════════════════════ */

.cl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 16px 28px;
	border: none;
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.25s;
}

.cl-btn--filled {
	background: var(--md-primary);
	color: var(--md-on-primary);
	box-shadow: var(--md-elevation-1);
}

.cl-btn--filled:hover {
	box-shadow: var(--md-elevation-2);
	transform: translateY(-1px);
}

.cl-btn--tonal {
	background: var(--md-secondary-container);
	color: var(--md-on-secondary-container);
}

.cl-btn--tonal:hover {
	background: var(--md-secondary);
	color: var(--md-on-secondary);
}

.cl-btn--outlined {
	background: transparent;
	color: var(--md-primary);
	border: 1.5px solid var(--md-outline);
}

.cl-btn--outlined:hover {
	border-color: var(--md-primary);
	background: color-mix(in srgb, var(--md-primary) 8%, transparent);
}

/* Security badges */
.cl-security-badges {
	max-width: 800px;
	margin: var(--space-6) auto !important;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
	background: var(--md-surface-container-low);
	border-radius: var(--radius-m);
}

.cl-security-badge {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: 13px;
	color: var(--md-on-surface-variant);
}

.cl-security-badge .material-symbols-outlined {
	font-size: 20px;
	color: var(--md-primary);
}


/* ══════════════════════════════════════════════════════════════════
	RESPONSIVE
══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

	/* Purchase history - hide wide table, show cards */
	#edd_purchase_history {
		font-size: 13px;
	}

	#edd_purchase_history th,
	#edd_purchase_history td {
		padding: var(--space-3) var(--space-4);
	}
}

@media (max-width: 768px) {
	#edd_checkout_form_wrap {
		padding: var(--space-6) 16px var(--space-12);
	}

	.cl-receipt-hero__inner {
		padding: var(--space-12) 16px var(--space-6);
	}

	.cl-email-banner {
		flex-direction: column;
		text-align: center;
	}

	.edd-blocks__confirmation {
		padding: 0 16px;
	}

	.cl-account-container {
		padding: var(--space-6) 16px var(--space-12);
	}

	.edd-blocks__user-downloads {
		grid-template-columns: 1fr;
	}

	#edd_profile_editor_form {
		padding: var(--space-5);
	}

	.cl-next-steps {
		padding: var(--space-6);
	}

	.cl-receipt-cta {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {

	/* Checkout cart responsiveness */
	#edd_checkout_cart th:nth-child(n+3),
	#edd_checkout_cart td:nth-child(n+3) {
		display: none;
	}

	.cl-receipt-hero__icon {
		width: 80px;
		height: 80px;
	}

	.cl-receipt-hero__icon .material-symbols-outlined {
		font-size: 44px;
	}

	.cl-tab-nav {
		gap: 0;
	}

	.cl-tab-btn {
		padding: var(--space-3) var(--space-4);
		font-size: 13px;
	}
}