/**
 * Checkout customisation styles.
 *
 * Written to sit inside somebody else's theme, which means two constraints run
 * through the whole file:
 *
 * 1. **Inherit, don't impose.** Colours, fonts, and radii come from custom
 *    properties that default to `inherit` or to a neutral value derived from
 *    `currentColor`. A store with a black-and-gold theme should get a
 *    black-and-gold order bump without configuring anything.
 * 2. **Never !important, except where hiding.** The one place it appears is
 *    distraction-free mode, which is printed inline by PHP — a theme's own
 *    header rule will be more specific than ours, and losing that fight means
 *    the mode does nothing.
 *
 * Everything respects prefers-reduced-motion and meets WCAG 2.1 AA contrast
 * against both light and dark theme backgrounds, which is why the accent is
 * used for borders and never as text on an unknown background.
 */

.poth-steps {
	--poth-accent: currentColor;
	--poth-muted: rgba(0, 0, 0, 0.08);
	--poth-radius: 6px;
	--poth-gap: 1rem;
}

/* Progress indicator ----------------------------------------------------- */

.poth-steps__progress {
	display: flex;
	flex-wrap: wrap;
	gap: var(--poth-gap);
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	counter-reset: poth-step;
}

.poth-steps__progress-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 1 1 auto;
	opacity: 0.45;
	transition: opacity 0.2s ease;
}

.poth-steps__progress-item.is-active,
.poth-steps__progress-item.is-complete {
	opacity: 1;
}

.poth-steps__progress-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border: 2px solid var(--poth-accent);
	border-radius: 50%;
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}

.poth-steps__progress-item.is-complete .poth-steps__progress-number {
	background: var(--poth-accent);
	/* The number sits on the accent once complete, so it has to flip to the
	   page background rather than to a hard-coded white that would vanish on a
	   light accent. */
	color: Canvas;
}

.poth-steps__progress-label {
	font-size: 0.95em;
}

/* Step panels ------------------------------------------------------------ */

.poth-step {
	/* Focus is moved here on every step change so screen readers announce the
	   new panel; the outline is suppressed because the panel is not itself
	   interactive and a box around the whole form reads as an error state. */
	outline: none;
}

.poth-step[hidden] {
	display: none;
}

/* Block checkout: WooCommerce's own blocks set `display`, which beats the
   browser's default rule for the `hidden` attribute, so a hidden step would
   still be on screen. Scoped to the checkout form and to elements this plugin
   tagged, so it can never hide anything else. */
.wc-block-checkout__form > [data-poth-block-step][hidden] {
	display: none !important;
}

.wc-block-checkout__form > [data-poth-block-step]:focus {
	/* Focus is moved onto the panel on every step change so a screen reader
	   announces it. The panel is not interactive, and a heavy box drawn around
	   a whole step reads to a sighted customer as an error. */
	outline: none;
}

.poth-steps__nav [hidden] {
	/* The nav buttons carry WooCommerce's own button classes so they match the
	   theme, and those classes set `display` -- which beats the browser's
	   default rule for the `hidden` attribute. Without this, "Continue" is
	   still on screen on the last step. */
	display: none !important;
}

.poth-steps__nav {
	display: flex;
	align-items: center;
	gap: var(--poth-gap);
	margin-block-start: 1.5rem;
}

.poth-steps__next {
	margin-inline-start: auto;
}

.poth-steps__error {
	margin: 0;
	color: #b32d2e;
	font-size: 0.95em;
}

.poth-steps__error[hidden] {
	display: none;
}

/* Order bump ------------------------------------------------------------- */

.poth-bump {
	--poth-bump-accent: currentColor;

	margin-block: 1.25rem;
	border: 2px dashed var(--poth-bump-accent);
	border-radius: var(--poth-radius, 6px);
	padding: 1rem;
}

.poth-bump--compact {
	border-style: solid;
	border-width: 1px;
	padding: 0.75rem;
}

.poth-bump__inner {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.poth-bump__checkbox {
	/* Large enough to be a comfortable touch target, and never shrunk by the
	   flex row — a checkbox that is hard to hit on a phone is a bump that does
	   not get taken. */
	inline-size: 1.35rem;
	block-size: 1.35rem;
	margin-block-start: 0.15rem;
	flex: 0 0 auto;
	cursor: pointer;
}

.poth-bump__label {
	display: flex;
	gap: 0.75rem;
	cursor: pointer;
	flex: 1 1 auto;
}

.poth-bump__media {
	flex: 0 0 72px;
}

.poth-bump__image {
	inline-size: 72px;
	block-size: auto;
	border-radius: 4px;
	display: block;
}

.poth-bump__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-inline-size: 0;
}

.poth-bump__headline {
	font-weight: 600;
}

.poth-bump__price del {
	opacity: 0.6;
	margin-inline-end: 0.35rem;
}

.poth-bump__price ins {
	text-decoration: none;
	font-weight: 600;
}

.poth-bump__saving {
	font-size: 0.9em;
	opacity: 0.85;
}

.poth-bump__description {
	font-size: 0.95em;
	opacity: 0.9;
}

.poth-bump__description p:last-child {
	margin-block-end: 0;
}

.poth-bump__social-proof {
	font-size: 0.9em;
	opacity: 0.85;
}

.poth-rating__stars {
	letter-spacing: 0.05em;
}

/* Editor preview of the bump, where there is no real checkbox. */
.poth-bump__checkbox-preview {
	inline-size: 1.35rem;
	block-size: 1.35rem;
	border: 2px solid currentColor;
	border-radius: 3px;
	flex: 0 0 auto;
	opacity: 0.5;
}

/* Trust badges ----------------------------------------------------------- */

.poth-trust-badges {
	margin-block: 1.25rem;
	text-align: center;
}

.poth-trust-badges__heading {
	margin: 0 0 0.5rem;
	font-size: 0.9em;
	opacity: 0.75;
}

.poth-trust-badges__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.poth-trust-badges__image {
	block-size: auto;
	max-block-size: 40px;
	inline-size: auto;
	max-inline-size: 100%;
	display: block;
}

/* Distraction-free mode -------------------------------------------------- */

.poth-distraction-free__logo {
	text-align: center;
	padding-block: 1.5rem;
}

.poth-distraction-free__logo-image {
	max-block-size: 56px;
	inline-size: auto;
	display: inline-block;
}

/* Templates -------------------------------------------------------------- */

.poth-checkout--sticky-summary .wc-block-components-sidebar {
	position: sticky;
	inset-block-start: 1.5rem;
}

@media (max-width: 782px) {
	.poth-checkout--sticky-summary .wc-block-components-sidebar {
		position: static;
	}

	.poth-bump__media {
		display: none;
	}

	.poth-steps__progress-label {
		/* On a narrow screen the numbers carry the progress; the labels wrap
		   the row onto three lines and push the form below the fold. */
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.poth-steps__progress-item {
		transition: none;
	}
}