/*
 * Aiolos Checkout: thank-you page. Scoped under .acw-ty; sits inside the theme's page.
 */

.acw-ty {
	--acw-ty-muted: var(--acw-muted, #6b7280);
	--acw-ty-line: #e5e7eb;
	--acw-ty-surface: var(--acw-surface, #f4f5f7);
	max-width: 760px;
	margin: 0 auto 32px;
	color: var(--acw-text, #111827);
}
.acw-ty *, .acw-ty *::before, .acw-ty *::after { box-sizing: border-box; }

.acw-ty__hero { text-align: center; padding: 8px 0 24px; }
.acw-ty__check {
	display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px;
	border-radius: 50%; color: #fff; background: var(--acw-success, #15803d);
	box-shadow: 0 0 0 10px color-mix(in srgb, var(--acw-success, #15803d) 14%, transparent);
	animation: acw-ty-pop .45s cubic-bezier(.2, .9, .3, 1.3) both;
}
@keyframes acw-ty-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .acw-ty__check { animation: none; } }
.acw-ty__eyebrow { margin: 0 0 4px !important; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acw-ty-muted); }
.acw-ty__title { margin: 0 0 8px !important; font-size: clamp(26px, 4vw, 34px); line-height: 1.15; letter-spacing: -.01em; }
.acw-ty .acw-ty__lead {
	margin: 0 auto !important; max-width: 520px; padding: 0 !important; border: 0 !important; background: none !important;
	color: var(--acw-ty-muted); font-size: 17px; line-height: 1.5;
}
.acw-ty .acw-ty__lead::before { display: none !important; }

.acw-ty__progress {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0;
	list-style: none; margin: 8px 0 24px !important; padding: 20px 12px !important;
	border: 1px solid var(--acw-ty-line); border-radius: var(--acw-radius, 12px); background: #fff;
}
.acw-ty__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 !important; text-align: center; font-size: 14px; color: var(--acw-ty-muted); }
.acw-ty__step::before {
	content: ""; position: absolute; top: 9px; inset-inline-end: 50%; width: 100%; height: 2px; background: var(--acw-ty-line); z-index: 0;
}
.acw-ty__step:first-child::before { display: none; }
.acw-ty__step.is-done::before, .acw-ty__step.is-current::before { background: var(--acw-success, #15803d); }
.acw-ty__dot { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--acw-ty-line); background: #fff; }
.acw-ty__step.is-done .acw-ty__dot { border-color: var(--acw-success, #15803d); background: var(--acw-success, #15803d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.acw-ty__step.is-current .acw-ty__dot { border-color: var(--acw-success, #15803d); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acw-success, #15803d) 18%, transparent); }
.acw-ty__step.is-done, .acw-ty__step.is-current { color: var(--acw-text, #111827); }
.acw-ty__step.is-current .acw-ty__label { font-weight: 700; }

.acw-ty .acw-ty__overview {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
	list-style: none; margin: 0 0 28px !important; padding: 0 !important; overflow: hidden;
	border: 1px solid var(--acw-ty-line) !important; border-radius: var(--acw-radius, 12px); background: var(--acw-ty-line);
}
.acw-ty .acw-ty__overview li {
	display: flex; flex-direction: column; gap: 4px; margin: 0 !important; padding: 14px 16px !important;
	border: 0 !important; background: #fff; float: none !important; font-size: 13px; text-transform: none; color: var(--acw-ty-muted);
}
.acw-ty .acw-ty__overview li strong { font-size: 16px; color: var(--acw-text, #111827); overflow-wrap: anywhere; text-transform: none; }

.acw-ty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 !important; border: 0 !important; background: none !important; }
.acw-ty__actions::before { display: none !important; }
.acw-ty .acw-ty__button {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
	border-radius: var(--acw-radius, 12px); background: var(--acw-primary, #2b4bff); color: var(--acw-btn-text, #fff) !important; font-weight: 700; text-decoration: none !important;
}
.acw-ty .acw-ty__button--ghost { background: #fff; color: var(--acw-text, #111827) !important; border: 1px solid var(--acw-ty-line); }
.acw-ty__hero--failed .woocommerce-notice { border: 0 !important; background: none !important; padding: 0 !important; }

/* WooCommerce's order details and addresses, under the overview. */
.acw-ty .woocommerce-order-details,
.acw-ty .woocommerce-customer-details,
.acw-ty .wc-bacs-bank-details { margin-bottom: 24px; }
.acw-ty .woocommerce-order-details__title,
.acw-ty .woocommerce-column__title,
.acw-ty .wc-bacs-bank-details-heading { font-size: 18px; margin: 0 0 12px; }

@media (max-width: 560px) {
	.acw-ty__progress { padding: 16px 4px !important; }
	.acw-ty__step { font-size: 12px; }
}

/* "Save your details for next time". */
.acw-ty-account { margin: 20px 0; padding: 20px 22px; border: 1px solid var(--acw-ty-line); border-radius: var(--acw-radius, 12px); background: var(--acw-ty-surface); }
.acw-ty .acw-ty-account__title { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: var(--acw-text, #111827); }
.acw-ty-account__text { margin: 0 0 14px; color: var(--acw-ty-muted); }
.acw-ty-account__label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.acw-ty-account__row { display: flex; gap: 10px; flex-wrap: wrap; }
.acw-ty-account__row input { flex: 1 1 220px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--acw-border, #d1d5db); border-radius: var(--acw-radius, 12px); background: var(--acw-field, #fff); color: var(--acw-text, #111827); font: inherit; }
.acw-ty-account__message { margin: 10px 0 0; min-height: 1px; font-weight: 600; }
.acw-ty-account__message.is-error { color: #b91c1c; }
.acw-ty-account__message.is-success { color: var(--acw-success, #15803d); }
.acw-ty-account .acw-ty__button--ghost { margin-top: 10px; }