/**
 * Cart, checkout, receipt and failed-payment pages.
 *
 * Measurements ported from design-references/TutorAddons Theme.dc.html lines
 * 714–853.
 *
 * Most of what is styled here is markup this theme does NOT own: `[download_checkout]`
 * and `[edd_receipt]` come from EDD, filtered through the plugin's Tailwind
 * templates. The selectors below therefore target EDD's stable class names
 * (`#edd_checkout_form_wrap`, `.edd_cart_item`, `#edd_purchase_submit`, …) rather
 * than classes of our own. Anything that looks over-specific is load-bearing.
 */

.ta-checkout {
	background: var(--ta-surface-soft);
}

.ta-container--checkout {
	max-width: 1050px;
}

.ta-checkout .ta-container,
.ta-checkout .ta-container--checkout {
	padding-block: 40px 70px;
}

.ta-checkout__title {
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Step indicator
 * ---------------------------------------------------------------------- */

.ta-steps {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 0;
	padding: 0;
	color: var(--ta-text-meta);
	font-size: 13px;
	list-style: none;
}

.ta-steps__item + .ta-steps__item::before {
	margin-right: 10px;
	content: '→';
}

.ta-steps__item.is-current {
	color: var(--ta-brand);
	font-weight: 600;
}

.ta-steps__item.is-done {
	color: var(--ta-text-secondary);
}

/* -------------------------------------------------------------------------
 * Checkout body — EDD's form, framed as cards
 * ---------------------------------------------------------------------- */

.ta-checkout__body {
	margin-top: 26px;
}

/* Two columns, straight from EDD's own structure — no markup surgery needed:
 *
 *   #edd_checkout_wrap
 *     form#edd_checkout_cart_form   → right column, sticky order summary
 *     div#edd_checkout_form_wrap    → left column, billing + gateways + submit
 *
 * They are siblings, so a plain grid on the parent is enough. The design also puts
 * the submit button in the right column, but it lives inside the purchase form and
 * moving it out would mean rebuilding that form — so it stays at the foot of the
 * left column, directly under the fields it submits. */
.ta-checkout__body #edd_checkout_wrap {
	display: grid;
	align-items: start;
	gap: 22px;
	grid-template-columns: 1fr 360px;
}

@media (max-width: 900px) {
	.ta-checkout__body #edd_checkout_wrap {
		grid-template-columns: 1fr;
	}
}

.ta-checkout__body #edd_checkout_cart_form {
	position: sticky;
	top: 130px;
	padding: 22px;
	border: 1px solid var(--ta-border);
	border-radius: 16px;
	background: var(--ta-surface);
	grid-column: 2;
	grid-row: 1;
}

@media (max-width: 900px) {
	.ta-checkout__body #edd_checkout_cart_form {
		position: static;
		grid-column: 1;
		grid-row: auto;
	}
}

.ta-checkout__body #edd_checkout_form_wrap {
	grid-column: 1;
	grid-row: 1;
}

@media (max-width: 900px) {
	.ta-checkout__body #edd_checkout_form_wrap {
		grid-row: auto;
	}
}

/* -------------------------------------------------------------------------
 * Checkout alerts — EDD modern states and legacy notices
 * ---------------------------------------------------------------------- */

.ta-checkout__body .edd-alert,
.ta-checkout__body .edd_errors:not(.edd-alert),
.ta-checkout__body .edd_success:not(.edd-alert) {
	--ta-alert-bg: #f3f6fa;
	--ta-alert-border: #d8e0ea;
	--ta-alert-color: var(--ta-text-secondary);
	display: grid;
	align-items: start;
	gap: 4px 12px;
	grid-template-columns: 28px minmax(0, 1fr);
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid var(--ta-alert-border);
	border-radius: 12px;
	background: var(--ta-alert-bg);
	box-shadow: 0 1px 2px rgb(16 27 45 / 4%);
	color: var(--ta-alert-color);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.55;
}

.ta-checkout__body .edd-alert::before,
.ta-checkout__body .edd_errors:not(.edd-alert)::before,
.ta-checkout__body .edd_success:not(.edd-alert)::before {
	display: grid;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ta-alert-color);
	color: #fff;
	content: 'i';
	font-family: var(--ta-font-body);
	font-size: 15px;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
	place-items: center;
	grid-column: 1;
	grid-row: 1;
}

.ta-checkout__body .edd-alert > *,
.ta-checkout__body .edd_errors:not(.edd-alert) > *,
.ta-checkout__body .edd_success:not(.edd-alert) > * {
	min-width: 0;
	margin: 0 !important;
	padding: 3px 0 2px;
	grid-column: 2;
}

.ta-checkout__body .edd-alert-error,
.ta-checkout__body .edd_errors:not(.edd-alert) {
	--ta-alert-bg: #fff1f1;
	--ta-alert-border: #f4c7c7;
	--ta-alert-color: #b42318;
}

.ta-checkout__body .edd-alert-error::before,
.ta-checkout__body .edd_errors:not(.edd-alert)::before {
	content: '!';
}

.ta-checkout__body .edd-alert-success,
.ta-checkout__body .edd_success:not(.edd-alert) {
	--ta-alert-bg: var(--ta-success-bg);
	--ta-alert-border: #bce6cd;
	--ta-alert-color: var(--ta-success);
}

.ta-checkout__body .edd-alert-success::before,
.ta-checkout__body .edd_success:not(.edd-alert)::before {
	content: '✓';
}

.ta-checkout__body .edd-alert-info {
	--ta-alert-bg: #edf7ff;
	--ta-alert-border: #bfdef5;
	--ta-alert-color: var(--ta-brand);
}

.ta-checkout__body .edd-alert-warn,
.ta-checkout__body .edd-alert-warning {
	--ta-alert-bg: var(--ta-warning-bg);
	--ta-alert-border: #efd6a8;
	--ta-alert-color: var(--ta-warning);
}

.ta-checkout__body .edd-alert-warn::before,
.ta-checkout__body .edd-alert-warning::before {
	content: '!';
}

.ta-checkout__body .edd-alert a,
.ta-checkout__body .edd_errors a,
.ta-checkout__body .edd_success a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Each EDD fieldset becomes one of the design's white panels. The dashed borders
 * are the plugin's own styling for the renewal and discount boxes. */
.ta-checkout__body #edd_checkout_form_wrap fieldset,
.ta-checkout__body #edd_sl_renewal_form fieldset {
	margin: 0 0 16px;
	padding: 24px;
	border: 1px solid var(--ta-border);
	border-radius: 16px;
	background: var(--ta-surface);
}

.ta-checkout__body .edd-cart-adjustment,
.ta-checkout__body #edd_sl_renewal_fields {
	border-style: solid;
	border-color: var(--ta-border);
}

.ta-checkout__body #edd_checkout_form_wrap legend,
.ta-checkout__body #edd_checkout_form_wrap .edd-cart-header,
.ta-checkout__body #edd_checkout_form_wrap h3 {
	margin-bottom: 18px;
	padding: 0;
	color: var(--ta-text);
	font-family: var(--ta-font-heading);
	font-size: 16px;
	font-weight: 600;
}

.ta-checkout__body #edd_checkout_form_wrap p {
	margin-bottom: 14px;
}

.ta-checkout__body #edd_checkout_form_wrap label {
	display: block;
	margin-bottom: 7px;
	color: var(--ta-text-muted);
	font-size: 13px;
	font-weight: 500;
}

.ta-checkout__body #edd_checkout_form_wrap input[type='text'],
.ta-checkout__body #edd_checkout_form_wrap input[type='email'],
.ta-checkout__body #edd_checkout_form_wrap input[type='tel'],
.ta-checkout__body #edd_checkout_form_wrap input[type='password'],
.ta-checkout__body #edd_checkout_form_wrap select,
.ta-checkout__body #edd_checkout_form_wrap textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--ta-border);
	border-radius: 10px;
	background: var(--ta-surface);
	color: var(--ta-text);
	font-family: inherit;
	font-size: 14.5px;
}

.ta-checkout__body #edd_checkout_form_wrap input:focus,
.ta-checkout__body #edd_checkout_form_wrap select:focus {
	border-color: var(--ta-brand);
	outline: none;
}

/* -- Cart table ---------------------------------------------------------- */

.ta-checkout__body .edd_cart_item td,
.ta-checkout__body #edd_checkout_cart td,
.ta-checkout__body #edd_checkout_cart th {
	padding: 14px 0;
	border-bottom: 1px solid var(--ta-surface-softer);
	font-size: 14px;
	text-align: left;
	vertical-align: middle;
}

.ta-checkout__body #edd_checkout_cart {
	width: 100%;
	border-collapse: collapse;
}

.ta-checkout__body .edd_cart_item_name {
	color: var(--ta-text);
	font-weight: 600;
}

/* Pelatform's cart item is a flex row whose detail column has a calculated
 * width but no min-width reset. A license key is an unbroken string, so its
 * intrinsic width can otherwise push the whole sidebar beyond its card. */
.ta-checkout__body .checkout-cart .edd_cart_item,
.ta-checkout__body .checkout-cart .edd_cart_item > .flex,
.ta-checkout__body .checkout-cart .edd_cart_item > .flex > div:last-child {
	min-width: 0;
}

.ta-checkout__body .checkout-cart .edd_cart_item > .flex > div:last-child {
	overflow: hidden;
}

.ta-checkout__body .checkout-cart .edd-sl-renewal-details-cart {
	display: grid;
	min-width: 0;
	max-width: 100%;
	margin-bottom: 7px;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px;
}

.ta-checkout__body .checkout-cart .edd-sl-renewal-label {
	display: block;
	font-style: normal;
}

.ta-checkout__body .checkout-cart .edd-sl-renewal-key {
	display: block;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	color: var(--ta-text-muted);
	font-family: var(--ta-font-mono);
	font-style: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: normal;
}

.ta-checkout__body .edd_cart_item_image {
	width: 128px;
	height: 86px;
	flex: none;
	overflow: hidden;
	background: var(--ta-placeholder);
}

.ta-checkout__body .edd_cart_item_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ta-checkout__body .edd_cart_item .aspect-\[5\/3\.4\] img {
	height: 100%;
	object-fit: cover !important;
}

.ta-checkout__body .edd_cart_item_price,
.ta-checkout__body .edd_cart_total {
	font-family: var(--ta-font-heading);
	font-weight: 600;
	white-space: nowrap;
}

.ta-checkout__body .edd_cart_actions .edd_cart_remove_item_btn,
.ta-checkout__body a.edd_cart_remove_item_btn {
	color: var(--ta-pink);
	font-size: 12.5px;
	font-weight: 600;
}

.ta-checkout__body .edd_cart_footer_row .edd_cart_total {
	font-size: 20px;
	font-weight: 700;
}

/* Filled identity fields remain in the form for checkout validation but do not
 * add visual friction for signed-in customers. */
.ta-checkout__body #edd_checkout_user_info .ta-system-field,
.ta-checkout__body #edd_checkout_user_info[hidden] {
	display: none !important;
}

/* -- Gateway picker ------------------------------------------------------ */

.ta-checkout__body #edd_payment_mode_select_wrap .edd-gateway-option,
.ta-checkout__body #edd_payment_mode_select label {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 10px;
	padding: 15px 16px;
	border: 1.5px solid var(--ta-border);
	border-radius: 11px;
	cursor: pointer;
	font-size: 14.5px;
	font-weight: 600;
}

.ta-checkout__body #edd_payment_mode_select input[type='radio'] {
	width: 17px;
	height: 17px;
	flex: none;
	accent-color: var(--ta-brand);
}

.ta-checkout__body #edd_payment_mode_select label:has(input:checked) {
	border-color: var(--ta-brand);
	background: #f9fcff;
}

/* Tripay channel cards need flex restored after the generic checkout label rule. */
.ta-checkout__body #edd_checkout_payment label:has(input[id^='tripay_channel_']) {
	display: flex !important;
	position: relative;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	margin-bottom: 0;
}

.ta-checkout__body #edd_checkout_payment label:has(input[id^='tripay_channel_'])
	> span:first-child {
	min-width: 0;
	flex: 1 1 auto;
}

.ta-checkout__body #edd_checkout_payment input[id^='tripay_channel_'] + span {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	margin-left: auto;
}

.ta-checkout__body #edd_checkout_payment input[id^='tripay_channel_']:checked + span {
	display: inline-flex !important;
}

.ta-checkout__body #edd_checkout_payment input[id^='tripay_channel_']:not(:checked) + span {
	display: none !important;
}

.ta-checkout__body #edd_checkout_payment label:has(input[id^='tripay_channel_'])
	> span[aria-hidden='true'] {
	pointer-events: none;
}

/* -- License renewal ----------------------------------------------------- */

.ta-checkout__body #edd_sl_renewal_form fieldset {
	padding: 20px;
}

.ta-checkout__body #edd_sl_renewal_fields {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
}

/* The field container and actions are siblings inside this wrapper. Grid this
 * actual parent, then flatten the actions on desktop to mirror the coupon DOM.
 * EDD SL toggles visibility with inline `display:none`; never let our important
 * grid declaration override that state. `.edd-no-js` also prevents a flash of
 * the open form before its DOMContentLoaded handler runs. */
.ta-checkout__body #edd_sl_renewal_fields > .edd-sl-renewal-form-fields.edd-no-js,
.ta-checkout__body #edd_sl_renewal_fields > .edd-sl-renewal-form-fields[style*='display: none'] {
	display: none !important;
}

.ta-checkout__body #edd_sl_renewal_fields > .edd-sl-renewal-form-fields:not(.edd-no-js):not([style*='display: none']) {
	display: grid !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 10px !important;
	align-items: end;
	margin: 0 !important;
}

.ta-checkout__body #edd-license-key-container-wrap {
	display: block !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

.ta-checkout__body #edd-license-key-container-wrap > label {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
}

.ta-checkout__body #edd-license-key-container-wrap .label-form {
	display: block;
	margin-bottom: 7px;
}

.ta-checkout__body #edd-license-key {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	height: 46px;
	margin: 0 !important;
}

.ta-checkout__body #edd_sl_renewal_fields > .edd-sl-renewal-form-fields > .edd-sl-renewal-actions {
	display: contents !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ta-checkout__body #edd-add-license-renewal,
.ta-checkout__body #edd-cancel-license-renewal {
	width: auto !important;
	min-width: 102px;
	height: 46px;
	min-height: 46px;
	margin: 0;
	padding: 0 18px;
	border-radius: 10px;
}

.ta-checkout__body #edd-cancel-license-renewal {
	border: 1px solid var(--ta-border-button);
	background: var(--ta-surface);
	color: var(--ta-text-muted);
}

.ta-checkout__body #edd-cancel-license-renewal:hover,
.ta-checkout__body #edd-cancel-license-renewal:focus-visible {
	border-color: var(--ta-text-meta);
	background: var(--ta-surface-soft);
	color: var(--ta-text);
}

/* Once a renewal key has been applied, Pelatform renders a second, standalone
 * form after the renewal card. Keep it visually attached to that card and make
 * its destructive action secondary instead of another full-width brand CTA. */
.ta-checkout__body #edd_sl_cancel_renewal_form {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	margin: -6px 0 16px;
}

.ta-checkout__body #edd_sl_cancel_renewal_form .edd-submit.button {
	width: auto !important;
	min-width: 0;
	min-height: 40px;
	margin: 0 !important;
	padding: 9px 14px !important;
	border: 1px solid var(--ta-danger, #dc3232) !important;
	border-radius: 9px;
	background: var(--ta-surface) !important;
	box-shadow: none;
	color: var(--ta-danger, #b42318) !important;
	font-size: 13px;
	font-weight: 600;
}

.ta-checkout__body #edd_sl_cancel_renewal_form .edd-submit.button:hover,
.ta-checkout__body #edd_sl_cancel_renewal_form .edd-submit.button:focus-visible {
	background: var(--ta-danger-soft, #fff1f0) !important;
	border-color: var(--ta-danger, #b42318) !important;
	color: var(--ta-danger, #b42318) !important;
}

@media (max-width: 600px) {
	.ta-checkout__body #edd_sl_renewal_fields > .edd-sl-renewal-form-fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.ta-checkout__body #edd_sl_renewal_fields > .edd-sl-renewal-form-fields > .edd-sl-renewal-actions {
		display: grid !important;
		width: 100% !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 10px !important;
		margin: 0 !important;
	}

	.ta-checkout__body #edd-add-license-renewal,
	.ta-checkout__body #edd-cancel-license-renewal {
		width: 100% !important;
		min-width: 0;
	}

	.ta-checkout__body #edd_sl_cancel_renewal_form {
		justify-content: stretch;
		margin-top: -6px;
	}

	.ta-checkout__body #edd_sl_cancel_renewal_form .edd-submit.button {
		width: 100% !important;
	}
}

/* -- Discount field ------------------------------------------------------ */

/* Pelatform's discount template gives both actions `w-full`, which leaves the
 * input at its intrinsic width and produces a large empty area in this card.
 * Use the reference layout instead: coupon input + Apply on one compact row,
 * with Cancel as a secondary action. All IDs/classes remain intact for EDD's
 * AJAX handler and the plugin's show/hide script. */
.ta-checkout__body fieldset#edd_discount_code {
	padding: 20px;
}

.ta-checkout__body #edd-discount-code-wrap {
	display: block;
	margin-top: 0;
	margin-bottom: unset !important;
	border: unset !important;
	border-radius: inherit;
	background-color: unset !important;
}

.ta-checkout__body #edd-discount-code-wrap .edd-discount-code-field-wrap {
	display: grid;
	width: 100%;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 10px;
	align-items: end;
}

.ta-checkout__body #edd-discount-code-wrap .edd-discount-code-field-wrap > label {
	min-width: 0;
	margin: 0;
}

.ta-checkout__body #edd-discount-code-wrap .label-form {
	display: block;
	margin-bottom: 7px;
}

.ta-checkout__body #edd-discount-code-wrap .edd-discount-code-field-wrap > .flex {
	display: contents;
}

.ta-checkout__body #edd-discount {
	height: 46px;
	margin: 0;
}

.ta-checkout__body #edd-discount-code-wrap .edd-apply-discount,
.ta-checkout__body #edd-cancel-discount {
	width: auto;
	min-width: 102px;
	height: 46px;
	min-height: 46px;
	margin: 0;
	padding: 0 18px;
	border-radius: 10px;
}

.ta-checkout__body #edd-cancel-discount {
	border: 1px solid var(--ta-border-button);
	background: var(--ta-surface);
	color: var(--ta-text-muted);
}

.ta-checkout__body #edd-cancel-discount:hover,
.ta-checkout__body #edd-cancel-discount:focus-visible {
	border-color: var(--ta-text-meta);
	background: var(--ta-surface-soft);
	color: var(--ta-text);
}

.ta-checkout__body #edd-discount-loader,
.ta-checkout__body #edd-discount-error-wrap {
	width: 100%;
}

@media (max-width: 600px) {
	.ta-checkout__body #edd-discount-code-wrap .edd-discount-code-field-wrap {
		grid-template-columns: 1fr 1fr;
	}

	.ta-checkout__body #edd-discount-code-wrap .edd-discount-code-field-wrap > label {
		grid-column: 1 / -1;
	}

	.ta-checkout__body #edd-discount-code-wrap .edd-apply-discount,
	.ta-checkout__body #edd-cancel-discount {
		width: 100%;
		min-width: 0;
	}
}

/* Renewal discounts are calculated by EDD Software Licensing rather than the
 * coupon system, so they need their own explanatory row in the cart summary. */
.ta-checkout__body .edd_sl_renewal_discount_row {
	align-items: baseline;
	gap: 12px;
	color: var(--ta-success, #1a9d63);
}

.ta-checkout__body .edd_sl_renewal_discount_row p {
	margin: 0;
}

.ta-checkout__body .edd_sl_renewal_discount_row p span {
	font-size: 12px;
	font-weight: 600;
}

.ta-checkout__body .edd_sl_renewal_discount_row strong {
	flex: none;
	white-space: nowrap;
}

/* Applied discount row: rearrange from cramped single line into a labelled
 * chip block. The plugin renders label + value side by side with justify-end,
 * which truncates long coupon codes; we stack them and give the code its own
 * bordered pill so it reads as a removable chip rather than a run of text.
 *
 * Target layout:
 *   Subtotal                              $19.90
 *   ────────────────────────────────────────────
 *   DISCOUNT
 *   ┌─────────────────────────┐            -10.00%
 *   │ WELCOME-8545B46CEE   [x] │
 *   └─────────────────────────┘
 *   ────────────────────────────────────────────
 *   Total                                $17.91 */
.ta-checkout__body .edd_cart_discount_row {
	flex-direction: column;
	align-items: stretch !important;
	gap: 8px;
	padding-block: 12px;
	border-top: 1px solid var(--ta-border);
	border-bottom: 1px solid var(--ta-border);
}

.ta-checkout__body .edd_cart_discount_row > p {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--ta-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ta-checkout__body .edd_cart_discount {
	font-weight: 400;
}

/* Inner flex: keep DOM order (remove, code, percent) but left-align the chip
 * group and push the percentage to the right edge with auto margin. Simpler
 * and more robust than reordering via flex `order`. */
.ta-checkout__body .edd_cart_discount .flex {
	justify-content: flex-start !important;
	gap: 0;
}

.ta-checkout__body .edd_cart_discount .flex span:last-child {
	margin-left: auto;
	color: var(--ta-success, #1a9d63);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

/* Coupon code chip — dashed brand pill, monospace code. */
.ta-checkout__body .edd_cart_discount > div > span.uppercase {
	display: inline-block;
	padding: 6px 10px;
	border: 1px dashed var(--ta-brand);
	border-radius: 8px;
	background: color-mix(in srgb, var(--ta-brand) 8%, transparent);
	color: var(--ta-brand);
	font-family: var(--ta-mono, 'JetBrains Mono', 'Courier New', monospace);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
}

/* Remove button — kill the plugin's duplicate background (it renders an X on
 * top of our dashed chip), shrink it, and tuck it inside the chip on the
 * right edge. */
.ta-checkout__body .edd_cart_discount .edd_discount_remove {
	margin-right: 8px;
	padding: 2px !important;
	background: unset;
	border-radius: 4px;
	color: var(--ta-brand);
	line-height: 0;
}

.ta-checkout__body .edd_cart_discount .edd_discount_remove svg {
	width: 14px;
	height: 14px;
}

.ta-checkout__body .edd-apply-discount {
	padding: 12px 18px;
	border: 1px solid var(--ta-border-button);
	border-radius: 10px;
	background: var(--ta-surface);
	color: var(--ta-text);
	cursor: pointer;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
}

/* -- Submit -------------------------------------------------------------- */

.ta-checkout__body #edd_purchase_form_wrap {
	margin-top: 18px;
}

.ta-checkout__body fieldset#edd_purchase_submit:has(iframe) {
	margin: 0 0 16px;
	padding: 24px 24px 0 !important;
	border: 1px solid var(--ta-border) !important;
	border-radius: 16px;
	background: var(--ta-surface);
}

.ta-checkout__body fieldset#edd_purchase_submit:not(:has(iframe)) {
	margin: 0 0 16px;
	padding: 24px !important;
	border: 1px solid var(--ta-border) !important;
	border-radius: 16px;
	background: var(--ta-surface);
}

.ta-checkout__body fieldset#edd_checkout_payment {
	padding: 24px 24px 0 !important;
}

.ta-checkout__body #edd-purchase-button,
.ta-checkout__body .edd-submit.button {
	width: 100%;
	padding: 15px;
	border: 0;
	border-radius: 11px;
	background: var(--ta-brand);
	box-shadow: var(--ta-shadow-cta);
	color: #fff;
	cursor: pointer;
	font-family: var(--ta-font-body);
	font-size: 15px;
	font-weight: 600;
}

.ta-checkout__body #edd-purchase-button:hover {
	background: var(--ta-brand-hover);
}

@media (max-width: 600px) {
	.ta-checkout__body .edd_cart_item_image {
		width: 96px;
		height: 68px;
	}
}

.ta-checkout__note {
	margin-top: 22px;
	color: var(--ta-text-meta);
	font-size: 12px;
	line-height: 1.7;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Notices (empty cart, failed payment)
 * ---------------------------------------------------------------------- */

.ta-notice {
	margin-top: 26px;
	padding: clamp(28px, 4vw, 48px);
	border: 1px solid var(--ta-border);
	border-radius: var(--ta-radius-panel);
	background: var(--ta-surface);
	text-align: center;
}

.ta-notice--error .ta-notice__title {
	color: #b42318;
}

.ta-notice__title {
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 700;
}

.ta-notice__body {
	margin-top: 12px;
	color: var(--ta-text-muted);
	font-size: 15.5px;
	line-height: 1.7;
}

.ta-notice__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

/* -------------------------------------------------------------------------
 * Receipt / thank you
 * ---------------------------------------------------------------------- */

.ta-receipt {
	margin-top: 26px;
	padding: clamp(26px, 4vw, 44px);
	border: 1px solid var(--ta-border);
	border-radius: var(--ta-radius-panel);
	background: var(--ta-surface);
}

.ta-receipt table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.ta-receipt th,
.ta-receipt td {
	padding: 13px 0;
	border-bottom: 1px solid var(--ta-surface-softer);
	text-align: left;
	vertical-align: middle;
}

.ta-receipt th {
	color: var(--ta-text);
	font-weight: 600;
}

.ta-receipt td {
	color: var(--ta-text-muted);
}

/* License keys and order ids read as data, not prose. */
.ta-receipt .edd_sl_license_key,
.ta-receipt code {
	font-family: var(--ta-font-mono);
	font-size: 12.5px;
}

.ta-receipt h3 {
	margin: 26px 0 14px;
	font-size: 18px;
	font-weight: 600;
}

.ta-receipt a:not(.ta-btn) {
	color: var(--ta-brand);
	font-weight: 600;
}

.ta-receipt ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* -------------------------------------------------------------------------
 * Thank you page
 * ---------------------------------------------------------------------- */

.ta-thanks {
	text-align: center;
}

.ta-thanks__check {
	display: grid;
	width: 62px;
	height: 62px;
	margin-inline: auto;
	place-items: center;
	border-radius: 50%;
	background: var(--ta-success-bg);
	color: var(--ta-success);
}

.ta-thanks__check.is-pending {
	background: var(--ta-warning-bg);
	color: var(--ta-warning);
}

.ta-thanks__title {
	margin-top: 22px;
	font-size: clamp(25px, 3vw, 34px);
	font-weight: 700;
}

.ta-thanks__lede {
	margin-top: 12px;
	color: var(--ta-text-muted);
	font-size: 15.5px;
	line-height: 1.7;
}

.ta-thanks__lede strong {
	color: var(--ta-text);
}

.ta-thanks .ta-alert {
	text-align: left;
}

.ta-thanks__downloads {
	margin-top: 28px;
	border: 1px solid var(--ta-border);
	border-radius: var(--ta-radius-card);
	overflow: hidden;
	text-align: left;
}

.ta-dl {
	display: grid;
	align-items: center;
	gap: 14px;
	padding: 18px;
	border-bottom: 1px solid var(--ta-surface-softer);
	grid-template-columns: 44px minmax(180px, 1fr) minmax(220px, auto);
}

.ta-dl:last-child {
	border-bottom: 0;
}

/* Monogram tile — stands in for a product icon we may not have. */
.ta-dl__tag {
	display: grid;
	width: 44px;
	height: 44px;
	place-items: center;
	border-radius: 10px;
	background: var(--ta-brand-tint);
	color: var(--ta-brand-hover);
	font: 600 13px/1 var(--ta-font-heading);
}

.ta-dl__meta {
	min-width: 0;
}

.ta-dl__name {
	font-size: 15px;
	font-weight: 600;
}

.ta-dl__license {
	margin-top: 4px;
	color: var(--ta-text-meta);
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.ta-dl__license-label {
	color: var(--ta-text-secondary);
	font-family: var(--ta-font-body);
	font-weight: 600;
}

.ta-dl__license-key {
	min-width: 0;
	overflow-wrap: anywhere;
}

.ta-dl__license-mask {
	display: none;
}

.ta-dl__copy {
	display: inline-flex;
	padding: 4px;
	color: var(--ta-text-meta);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s;
}

.ta-dl__copy:hover {
	color: var(--ta-text-heading);
	background: var(--ta-surface-100);
	border-color: var(--ta-border);
}

.ta-dl__copy.is-copied {
	color: var(--ta-color-success);
}

.ta-dl__actions {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 480px;
}

.ta-dl__actions .ta-btn {
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
}

@media (max-width: 800px) and (min-width: 601px) {
	.ta-dl {
		grid-template-columns: 44px minmax(0, 1fr);
	}

	.ta-dl__actions {
		justify-content: flex-start;
		max-width: none;
		grid-column: 2;
	}
}

.ta-thanks__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
	margin-bottom: 26px;
}

.ta-alert--warning {
	background: var(--ta-warning-bg);
	color: var(--ta-warning);
}

/* Content appended by other addons after the receipt — EDD Software Licensing's
 * key list, the invoice link, EDD Recurring's subscription table. They hook
 * `edd_order_receipt_after*`, so the theme cannot restructure them; it can only
 * make them sit consistently under the receipt card. */
.ta-receipt-subs,
.ta-receipt > *:not(.ta-thanks) {
	margin-top: 20px;
	text-align: left;
}

.ta-receipt-subs__title,
.ta-receipt h3,
.ta-receipt h4 {
	margin: 26px 0 12px;
	font-size: 17px;
	font-weight: 600;
}

.ta-card--receipt {
	border: 1px solid var(--ta-border);
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 20px;
}

.ta-card__header--muted {
	background: var(--ta-surface-soft);
	padding: 13px 16px;
	border-bottom: 1px solid var(--ta-border);
}

.ta-card__title {
	font-size: 15px;
	font-weight: 600;
	margin: 0;
}

.ta-card__body--list {
	background: var(--ta-surface);
}

.ta-list-table {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ta-list-table li {
	display: grid;
	grid-template-columns: minmax(100px, 0.8fr) minmax(0, 1.2fr);
	align-items: start;
	gap: 12px;
	padding: 13px 16px;
	border-bottom: 1px solid var(--ta-surface-softer);
	font-size: 14px;
}

.ta-list-table li:last-child {
	border-bottom: 0;
}

.ta-list-table__key {
	color: var(--ta-text-muted);
}

@media (max-width: 600px) {
	.ta-receipt {
		margin-top: 20px;
		padding: 24px 16px;
		border-radius: 16px;
	}

	.ta-thanks__check {
		width: 56px;
		height: 56px;
	}

	.ta-thanks__title {
		font-size: 24px;
		line-height: 1.25;
	}

	.ta-thanks__lede {
		font-size: 14px;
	}

	.ta-dl {
		align-items: flex-start;
		padding: 16px 12px;
		grid-template-columns: 40px minmax(0, 1fr);
	}

	.ta-dl__tag {
		width: 40px;
		height: 40px;
	}

	.ta-dl__meta {
		min-width: 0;
	}

	.ta-dl__license {
		flex-wrap: wrap;
	}

	.ta-dl__license-key {
		display: none;
	}

	.ta-dl__license-mask {
		display: inline;
	}

	.ta-dl__actions {
		justify-content: flex-start;
		width: auto;
		max-width: none;
		padding-left: 0;
		grid-column: 2;
	}

	.ta-dl__actions .ta-btn {
		word-break: break-word;
	}

	.ta-thanks__actions {
		align-items: center;
	}

	.ta-receipt-subs__title {
		font-size: 16px;
	}

	.ta-list-table li {
		grid-template-columns: minmax(0, 1fr);
		gap: 5px;
		padding: 12px;
	}

	.ta-list-table__key,
	.ta-list-table__value {
		display: block;
		width: 100%;
		text-align: left;
	}

	.ta-list-table__key {
		font-size: 12px;
	}

	.ta-list-table__value {
		font-size: 13px;
		line-height: 1.45;
	}

	.ta-receipt table,
	.ta-receipt thead,
	.ta-receipt tbody,
	.ta-receipt tr,
	.ta-receipt th,
	.ta-receipt td {
		display: block;
		width: 100%;
	}

	.ta-receipt table tr {
		padding: 10px 12px;
		border-bottom: 1px solid var(--ta-surface-softer);
	}

	.ta-receipt table tr:last-child {
		border-bottom: 0;
	}

	.ta-receipt table th,
	.ta-receipt table td {
		padding: 4px 0;
		border: 0;
		text-align: left;
	}

	.ta-receipt table td:last-child {
		text-align: left;
	}
}