/**
 * Thank You (order received) — .espt-block-thankyou
 *
 * The markup comes from the theme's own renderer (esalespage_thankyou_content),
 * so its base look already lives in main.css inside @layer components. This
 * file is unlayered, so every rule here wins over that layer — which means each
 * override must respect the three designs (cards / receipt / hero) that main.css
 * varies. Colour overrides therefore fall back to the theme's own value for the
 * design in question, and only paint when the block sets the variable.
 *
 * Vars set by the spec:
 *   --espt-ty-width --espt-ty-accent --espt-ty-card-bg --espt-ty-card-border
 *   --espt-ty-radius --espt-ty-receipt-bg --espt-ty-note-bg --espt-ty-note-text
 *   --pad-top --pad-bottom --head-gap --cards-gap --card-pad
 *   --title-size --title-color --sub-size --sub-color --meta-color
 *   --card-title-size --card-title-color --text-size --text-color
 *   --item-size --item-color --item-total-color --thumb-size
 *   --totals-color --discount-color --free-color --grand-size --grand-color
 *   --receipt-color --receipt-size --receipt-pad-y --receipt-pad-x
 *   --receipt-radius --receipt-speed
 *   --contact-bg --contact-color --btn-radius
 *   --shop-bg --shop-color --shop-radius --note-size
 */

/* ---------------------------------------------------------- shell */

.espt-block-thankyou .espt-ty {
	margin-inline: auto;
	max-width: var(--espt-ty-width, 780px);
	min-width: 0;
	padding-block: var(--pad-top, 10px) var(--pad-bottom, 40px);
}

.espt-block-thankyou .espt-ty-card,
.espt-block-thankyou .espt-ty-cards {
	min-width: 0;
}

/* The receipt sheet's punched notches sit 12px outside the sheet — keep room
   for them so nothing spills past a 320px viewport. */
.espt-block-thankyou.is-design-receipt .espt-ty {
	max-width: min(var(--espt-ty-width, 780px), calc(100% - 28px));
}

/* ------------------------------------------------------- heading */

.espt-block-thankyou.no-show-header .espt-ty-head {
	display: none;
}

.espt-block-thankyou .espt-ty-head {
	margin-bottom: var(--head-gap, 26px);
}

/* The hero banner keeps its overlap with the cards below it. */
.espt-block-thankyou.is-design-hero .espt-ty-head:has(+ .espt-ty-cards) {
	margin-bottom: -28px;
}

.espt-block-thankyou.is-text-align-left .espt-ty-head {
	align-items: flex-start;
	text-align: left;
}

.espt-block-thankyou.is-text-align-center .espt-ty-head {
	align-items: center;
	text-align: center;
}

.espt-block-thankyou.is-text-align-right .espt-ty-head {
	align-items: flex-end;
	text-align: right;
}

.espt-block-thankyou .espt-ty-title {
	color: var(--title-color, var(--espt-heading, #0f172a));
	font-size: var(--title-size, 22px);
	overflow-wrap: anywhere;
}

.espt-block-thankyou.is-design-hero .espt-ty-title {
	color: var(--title-color, #fff);
}

.espt-block-thankyou .espt-ty-title:empty {
	display: none;
}

.espt-block-thankyou .espt-ty-sub {
	color: var(--sub-color, var(--ty-muted, #5b6472));
	font-size: var(--sub-size, 15px);
	overflow-wrap: anywhere;
}

.espt-block-thankyou.is-design-hero .espt-ty-sub {
	color: var(--sub-color, #fff);
}

.espt-block-thankyou .espt-ty-meta {
	color: var(--meta-color, var(--ty-ink, #0f766e));
	max-width: 100%;
	overflow-wrap: anywhere;
}

.espt-block-thankyou.is-design-hero .espt-ty-meta {
	color: var(--meta-color, #fff);
}

/* --------------------------------------------------------- cards */

.espt-block-thankyou .espt-ty-cards {
	gap: var(--cards-gap, 14px);
}

.espt-block-thankyou.is-cards-layout-stack .espt-ty-cards {
	grid-template-columns: minmax(0, 1fr);
}

.espt-block-thankyou:not(.is-design-receipt) .espt-ty-card {
	padding: var(--card-pad, 18px);
}

.espt-block-thankyou.is-card-shadow-none:not(.is-design-receipt) .espt-ty-card {
	box-shadow: none;
}

.espt-block-thankyou.is-card-shadow-strong:not(.is-design-receipt) .espt-ty-card {
	box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
}

.espt-block-thankyou .espt-ty-card-title {
	color: var(--card-title-color, var(--espt-heading, #0f172a));
	font-size: var(--card-title-size, 16px);
	overflow-wrap: anywhere;
}

/* A heading the author cleared must not leave its margin behind. */
.espt-block-thankyou .espt-ty-card-title:empty,
.espt-block-thankyou .espt-ty-contact-title:empty {
	display: none;
}

/* ------------------------------------------------ customer rows */

.espt-block-thankyou .espt-ty-row {
	color: var(--text-color, inherit);
	font-size: var(--text-size, 15px);
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-thankyou .espt-ty-row span {
	min-width: 0;
}

/* ---------------------------------------------------- order items */

.espt-block-thankyou .espt-ty-items li {
	flex-wrap: wrap;
}

.espt-block-thankyou .espt-ty-item-name {
	color: var(--item-color, inherit);
	font-size: var(--item-size, 14px);
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-thankyou .espt-ty-item-total {
	color: var(--item-total-color, var(--espt-heading, #0f172a));
	font-size: var(--item-size, 14px);
	margin-left: auto;
}

.espt-block-thankyou .espt-ty-thumb img {
	height: var(--thumb-size, 46px);
	width: var(--thumb-size, 46px);
}

/* Digital goods: Woo's downloads table scrolls instead of pushing the page. */
.espt-block-thankyou .espt-ty-card-downloads {
	overflow-x: auto;
}

.espt-block-thankyou .espt-ty-card-downloads table {
	min-width: 280px;
}

/* -------------------------------------------------------- totals */

.espt-block-thankyou .espt-ty-totals > div {
	color: var(--totals-color, var(--ty-muted, #5b6472));
	flex-wrap: wrap;
}

/* main.css paints these with var(--ty-ink) — one of them !important, which no
   unlayered rule can outrank — so recolour by shadowing the variable instead. */
.espt-block-thankyou .espt-ty-discount {
	--ty-ink: var(--discount-color, color-mix(in srgb, var(--ty-accent, #16a34a) 70%, #000));
}

.espt-block-thankyou .espt-ty-free {
	--ty-ink: var(--free-color, color-mix(in srgb, var(--ty-accent, #16a34a) 70%, #000));
}

.espt-block-thankyou .espt-ty-totals .espt-ty-grand {
	color: var(--grand-color, var(--espt-heading, #0f172a));
	font-size: var(--grand-size, 17px);
}

/* ------------------------------------------------ receipt button */

.espt-block-thankyou .espt-ty .espt-ty-receipt {
	border-radius: var(--receipt-radius, 999px);
	color: var(--receipt-color, #fff);
	font-size: var(--receipt-size, 14px);
	max-width: 100%;
	padding: var(--receipt-pad-y, 12px) var(--receipt-pad-x, 22px);
	text-align: center;
}

.espt-block-thankyou .espt-ty .espt-ty-receipt:hover,
.espt-block-thankyou .espt-ty .espt-ty-receipt:focus {
	color: var(--receipt-color, #fff);
}

.espt-block-thankyou.is-receipt-full .espt-ty .espt-ty-receipt {
	display: flex;
	justify-content: center;
	width: 100%;
}

.espt-block-thankyou.is-receipt-hover-none .espt-ty .espt-ty-receipt:hover,
.espt-block-thankyou.is-receipt-hover-none .espt-ty .espt-ty-receipt:focus {
	transform: none;
}

.espt-block-thankyou.is-receipt-hover-grow .espt-ty .espt-ty-receipt:hover,
.espt-block-thankyou.is-receipt-hover-grow .espt-ty .espt-ty-receipt:focus {
	transform: scale(1.05);
}

.espt-block-thankyou.is-receipt-hover-shrink .espt-ty .espt-ty-receipt:hover,
.espt-block-thankyou.is-receipt-hover-shrink .espt-ty .espt-ty-receipt:focus {
	transform: scale(0.95);
}

.espt-block-thankyou.is-receipt-hover-lift .espt-ty .espt-ty-receipt:hover,
.espt-block-thankyou.is-receipt-hover-lift .espt-ty .espt-ty-receipt:focus {
	transform: translateY(-3px);
}

/* attention animations (ported from the plugin's receipt button) */
.espt-block-thankyou.is-receipt-anim-pulse .espt-ty-receipt,
.espt-block-thankyou.is-receipt-anim-bounce .espt-ty-receipt,
.espt-block-thankyou.is-receipt-anim-float .espt-ty-receipt,
.espt-block-thankyou.is-receipt-anim-shake .espt-ty-receipt,
.espt-block-thankyou.is-receipt-anim-heartbeat .espt-ty-receipt,
.espt-block-thankyou.is-receipt-anim-glow .espt-ty-receipt {
	animation-duration: var(--receipt-speed, 1.8s);
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.espt-block-thankyou.is-receipt-anim-pulse .espt-ty-receipt {
	animation-name: espt-tyb-pulse;
}

.espt-block-thankyou.is-receipt-anim-bounce .espt-ty-receipt {
	animation-name: espt-tyb-bounce;
}

.espt-block-thankyou.is-receipt-anim-float .espt-ty-receipt {
	animation-name: espt-tyb-float;
}

.espt-block-thankyou.is-receipt-anim-shake .espt-ty-receipt {
	animation-name: espt-tyb-shake;
}

.espt-block-thankyou.is-receipt-anim-heartbeat .espt-ty-receipt {
	animation-name: espt-tyb-heartbeat;
}

.espt-block-thankyou.is-receipt-anim-glow .espt-ty-receipt {
	animation-name: espt-tyb-glow;
}

@keyframes espt-tyb-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.06); }
}

@keyframes espt-tyb-bounce {
	0%, 100% { transform: translateY(0); }
	40% { transform: translateY(-7px); }
	60% { transform: translateY(-3px); }
}

@keyframes espt-tyb-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

@keyframes espt-tyb-shake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-4px); }
	40%, 80% { transform: translateX(4px); }
}

@keyframes espt-tyb-heartbeat {
	0%, 40%, 100% { transform: scale(1); }
	10%, 30% { transform: scale(1.1); }
	20% { transform: scale(0.96); }
}

@keyframes espt-tyb-glow {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ty-accent, #16a34a) 0%, transparent); }
	50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ty-accent, #16a34a) 22%, transparent); }
}

/* ------------------------------------------------------- contact */

.espt-block-thankyou:not(.is-design-receipt) .espt-ty-contact {
	background: var(--contact-bg, var(--espt-ty-card-bg, #fff));
}

.espt-block-thankyou.is-design-receipt .espt-ty-contact {
	background: var(--contact-bg, transparent);
}

.espt-block-thankyou.is-contact-style-card .espt-ty-contact {
	border-style: solid;
}

.espt-block-thankyou.is-contact-style-plain .espt-ty-contact {
	background: var(--contact-bg, transparent);
	border: 0;
	padding-inline: 0;
}

.espt-block-thankyou .espt-ty-contact-title {
	color: var(--contact-color, var(--espt-heading, #0f172a));
	overflow-wrap: anywhere;
}

.espt-block-thankyou .espt-ty .espt-ty-btn {
	border-radius: var(--btn-radius, 12px);
	min-width: 0;
}

.espt-block-thankyou.is-btn-style-accent .espt-ty .espt-ty-btn {
	background: var(--ty-accent, #16a34a);
}

/* The brand colour lives in a variable so the hover rule can restate it —
   main.css paints .espt-ty-btn:hover white, which would erase an outline
   button's ink. */
.espt-block-thankyou.is-btn-style-outline .espt-ty .espt-ty-btn {
	--ty-btn-ink: var(--espt-heading, #0f172a);
	background: transparent;
	border: 1.5px solid currentColor;
	color: var(--ty-btn-ink);
}

.espt-block-thankyou.is-btn-style-outline .espt-ty .espt-ty-btn-whatsapp {
	--ty-btn-ink: #128c4b;
}

.espt-block-thankyou.is-btn-style-outline .espt-ty .espt-ty-btn-messenger {
	--ty-btn-ink: #0069cc;
}

.espt-block-thankyou.is-btn-style-outline .espt-ty .espt-ty-btn:hover,
.espt-block-thankyou.is-btn-style-outline .espt-ty .espt-ty-btn:focus {
	background: color-mix(in srgb, currentColor 12%, transparent);
	color: var(--ty-btn-ink);
	filter: none;
}

/* ------------------------------------- continue shopping + note */

.espt-block-thankyou .espt-ty .espt-ty-shop {
	background: var(--shop-bg, var(--ty-accent, #16a34a));
	border-radius: var(--shop-radius, 12px);
	color: var(--shop-color, #fff);
	max-width: 100%;
	overflow-wrap: anywhere;
}

.espt-block-thankyou .espt-ty .espt-ty-shop:hover,
.espt-block-thankyou .espt-ty .espt-ty-shop:focus {
	color: var(--shop-color, #fff);
}

.espt-block-thankyou.is-shop-full .espt-ty .espt-ty-shop {
	display: block;
	width: 100%;
}

.espt-block-thankyou .espt-ty-note {
	font-size: var(--note-size, 14px);
	overflow-wrap: anywhere;
}

.espt-block-thankyou.is-note-align-left .espt-ty-note {
	text-align: left;
}

.espt-block-thankyou.is-note-align-center .espt-ty-note {
	text-align: center;
}

.espt-block-thankyou.is-note-align-right .espt-ty-note {
	text-align: right;
}

/* ------------------------------------------- no order / editor note */

/* A one-line notice never needs the confirmation page's top/bottom space. */
.espt-block-thankyou .espt-ty-empty-wrap {
	padding-block: 0;
}

.espt-block-thankyou .espt-ty-empty {
	background: var(--espt-ty-card-bg, #fff);
	border: 1px dashed var(--espt-ty-card-border, #e7eaf0);
	border-radius: var(--espt-ty-radius, 16px);
	color: var(--ty-muted, #5b6472);
	font-size: 14.5px;
	line-height: 1.8;
	margin: 0;
	overflow-wrap: anywhere;
	padding: 22px 18px;
	text-align: center;
}

.espt-block-thankyou .espt-block-note {
	background: var(--bd-soft, #f0fdf4);
	border: 1px dashed var(--bd-soft-line, #bbf7d0);
	border-radius: 10px;
	color: var(--bd-muted, #64748b);
	font-size: 13px;
	margin: 0 auto 12px;
	max-width: var(--espt-ty-width, 780px);
	padding: 10px 14px;
	text-align: center;
}

/* -------------------------------------------------------- tablet */

@media (min-width: 768px) {

	.espt-block-thankyou.is-receipt-full .espt-ty .espt-ty-receipt {
		display: inline-flex;
		width: auto;
	}

	.espt-block-thankyou.is-shop-full .espt-ty .espt-ty-shop {
		display: inline-block;
		width: auto;
	}
}

/* --------------------------------------------- motion & printing */

@media (prefers-reduced-motion: reduce) {

	.espt-block-thankyou .espt-ty .espt-ty-receipt {
		animation: none;
		transition: none;
	}

	.espt-block-thankyou .espt-ty .espt-ty-receipt:hover,
	.espt-block-thankyou .espt-ty .espt-ty-receipt:focus,
	.espt-block-thankyou .espt-ty .espt-ty-btn:hover,
	.espt-block-thankyou .espt-ty .espt-ty-btn:focus {
		transform: none;
	}
}

@media print {

	.espt-block-thankyou .espt-ty-receipt-wrap,
	.espt-block-thankyou .espt-ty-contact,
	.espt-block-thankyou .espt-ty-actions,
	.espt-block-thankyou .espt-block-note {
		display: none;
	}

	.espt-block-thankyou .espt-ty-card {
		box-shadow: none;
	}
}