/*
 * Elite Synthetics — checkout.
 *
 * Deliberately narrow in scope. This styles the one page a customer sees on
 * WordPress, at the moment they decide whether to trust the site with a card.
 * Anything that reads as "default WordPress" at that moment costs a sale.
 *
 * Colours and type come from theme.json so they cannot drift from the
 * storefront; this file handles layout and the WooCommerce block internals
 * that theme.json cannot reach.
 */

:root {
	--es-ink: #12191f;
	--es-ink-soft: #26333d;
	--es-paper: #ffffff;
	--es-mist: #f4f7f9;
	--es-line: #e4ebef;
	--es-muted: #4c6474;
	--es-azure: #1fa3de;
	--es-azure-deep: #0e6a96;
	--es-accent: #ff9426;
	--es-radius: 14px;
}

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

body.woocommerce-checkout,
body.woocommerce-cart {
	background: var(--es-mist);
	color: var(--es-ink);
}

.wc-block-checkout {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 1rem;
}

/* ---- headings ------------------------------------------------------ */

/*
 * !important throughout, reluctantly. WooCommerce ships its own block styles
 * at a specificity a child theme cannot beat cleanly, and they were winning:
 * the section titles rendered at weight 500 against the 800 set here, which is
 * what made the page read as thin.
 */
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-checkout h3 {
	font-family: Archivo, system-ui, sans-serif !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
	font-size: 1rem !important;
	color: var(--es-ink) !important;
}

/* Step numbers alongside the titles, so they don't sit lighter than the
   heading they belong to. */
.wc-block-components-checkout-step__heading-content,
.wc-block-components-checkout-step__title-number {
	font-family: "Chakra Petch", ui-monospace, monospace !important;
	font-weight: 500 !important;
	color: var(--es-azure-deep) !important;
}

/* Field labels were inheriting a light weight too. */
.wc-block-components-text-input label,
.wc-block-components-form .wc-block-components-text-input label {
	font-weight: 500 !important;
}

/* Totals: the number a customer actually checks. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-weight: 700 !important;
	color: var(--es-ink) !important;
}

/* ---- form fields ---------------------------------------------------- */

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select select,
.wc-block-components-combobox input {
	border-radius: var(--es-radius) !important;
	border: 2px solid var(--es-line) !important;
	background: var(--es-paper) !important;
	color: var(--es-ink) !important;
	min-height: 3.25rem;
	transition: border-color 150ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-block-components-combobox input:focus {
	border-color: var(--es-ink) !important;
	/* Never remove a focus ring without replacing it — this is the
	   replacement, and it is deliberately visible against the field. */
	outline: 2px solid var(--es-azure) !important;
	outline-offset: 2px;
}

.wc-block-components-text-input label,
.wc-block-components-checkbox__label {
	color: var(--es-muted);
}

/* ---- buttons -------------------------------------------------------- */

.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-block-components-button:not(.is-link) {
	background: var(--es-ink) !important;
	color: var(--es-paper) !important;
	border-radius: 999px !important;
	font-family: Archivo, system-ui, sans-serif !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.8rem;
	min-height: 3.5rem;
	transition: background-color 200ms, scale 200ms;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.is-link):hover {
	background: var(--es-azure-deep) !important;
}

.wc-block-components-checkout-place-order-button:active {
	scale: 0.99;
}

@media (prefers-reduced-motion: reduce) {
	.wc-block-components-checkout-place-order-button:active {
		scale: 1;
	}
}

/* ---- order summary panel -------------------------------------------- */

.wc-block-components-sidebar .wc-block-components-panel,
.wp-block-woocommerce-checkout-totals-block {
	background: var(--es-paper);
	border: 1px solid var(--es-line);
	border-radius: 18px;
	padding: 1.25rem;
}

.wc-block-components-order-summary-item__image img {
	border-radius: 10px;
	background: #f9f9f9;
}

.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount {
	font-family: "Chakra Petch", ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
}

/* ---- the research-use attestation ----------------------------------- */

/*
 * Given real visual weight on purpose. It is a legal representation the buyer
 * is making, not a marketing tickbox, and it should not be possible to say
 * afterwards that it was easy to miss. The amber rule is the same accent the
 * storefront uses for calls to action.
 */
.wc-block-components-checkout-step:has([data-es-attestation]),
.wc-block-components-checkbox:has([data-es-attestation]) {
	background: var(--es-mist);
	border: 1px solid var(--es-line);
	border-left: 3px solid var(--es-accent);
	border-radius: var(--es-radius);
	padding: 1rem 1.15rem;
	margin-block: 1rem;
}

.wc-block-components-checkbox:has([data-es-attestation]) .wc-block-components-checkbox__label {
	color: var(--es-ink);
	font-size: 0.9rem;
	line-height: 1.55;
}

/* 24x24 is the WCAG 2.2 AA floor for a pointer target (SC 2.5.8). The
   default block checkbox is smaller than that. */
.wc-block-components-checkbox__input {
	width: 24px !important;
	height: 24px !important;
	accent-color: var(--es-azure-deep);
}

/* ---- research-use notice -------------------------------------------- */

.es-ruo-notice {
	margin-top: 1rem;
	padding: 0.9rem 1rem;
	border-radius: var(--es-radius);
	background: var(--es-mist);
	border: 1px solid var(--es-line);
	color: var(--es-muted);
	font-size: 0.78rem;
	line-height: 1.55;
}

/* ---- errors --------------------------------------------------------- */

/*
 * Errors carry an icon and text, never colour alone — a red border says
 * nothing to a colourblind or screen-reader user.
 */
.wc-block-components-validation-error {
	color: #b3261e;
	font-size: 0.82rem;
}

.wc-block-components-validation-error::before {
	content: "⚠ ";
}

/* ---- strip what does not belong on a checkout ------------------------ */

.woocommerce-checkout .wp-block-post-title,
.woocommerce-checkout .wp-block-comments,
.woocommerce-checkout .wp-block-post-date {
	display: none;
}