/*
 * Card Requester form `[occ_card_requester]` (REQ7). Only --occ-* semantic tokens (I.th.css).
 * Builds on the theme's .occ-button / .occ-field / .occ-panel / .occ-thumb-empty and the occ-cards picker.
 * Mobile: one column, card lines first, the summary (money + consent + submit) follows.
 * Desktop (≥ 64rem): 7/5 split with a sticky summary.
 */

@layer occ.components {
	.occ-rq {
		--occ-rq-thumb: var(--occ-space-16);
		color: var(--occ-fg);
		font-family: var(--occ-font-sans);
	}

	.occ-rq [hidden] {
		display: none !important;
	}

	.occ-rq .occ-body {
		margin: 0;
	}

	.occ-rq .occ-button {
		min-height: var(--occ-touch-min);
	}

	.occ-rq__layout {
		display: grid;
		gap: var(--occ-space-12);
		align-items: start;
	}

	.occ-rq__editor {
		display: grid;
		gap: var(--occ-space-6);
		min-width: 0;
	}

	.occ-rq__eyebrow {
		margin: 0;
		color: var(--occ-accent-ink);
	}

	.occ-rq__title {
		margin: 0;
		font-family: var(--occ-font-display);
		font-size: clamp(var(--occ-text-2xl), 4vw, var(--occ-text-4xl));
		font-weight: var(--occ-fw-regular);
		font-style: italic;
		line-height: var(--occ-leading-heading);
		letter-spacing: var(--occ-tracking-tight);
		text-wrap: balance;
	}

	.occ-rq__intro {
		max-width: 60ch;
		color: var(--occ-fg-muted);
		line-height: var(--occ-leading-body);
	}

	.occ-rq__restored,
	.occ-rq__review,
	.occ-rq__billing,
	.occ-rq__notice {
		margin: 0;
		padding: var(--occ-space-3) var(--occ-space-4);
		border-left: var(--occ-space-1) solid var(--occ-info);
		border-radius: var(--occ-radius-sm);
		background: var(--occ-bg-subtle);
		line-height: var(--occ-leading-body);
	}

	.occ-rq__billing {
		border-left-color: var(--occ-warning);
	}

	.occ-rq__optional {
		color: var(--occ-fg-muted);
		font-weight: var(--occ-fw-regular);
		font-size: var(--occ-text-sm);
	}

	.occ-rq__add {
		justify-self: start;
	}

	/* Lines --------------------------------------------------------------------- */
	.occ-rq__lines {
		display: grid;
		gap: var(--occ-space-6);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.occ-rq__lines[aria-busy="true"]:empty {
		min-height: var(--occ-space-24);
	}

	.occ-rq-line {
		display: grid;
		gap: var(--occ-space-6);
		min-width: 0;
		padding: var(--occ-space-6) var(--occ-space-4);
		border-top: var(--occ-border-width-strong) solid var(--occ-border-strong);
		scroll-margin-top: var(--occ-space-24);
	}

	.occ-rq-line.has-error {
		border-top-color: var(--occ-danger);
	}

	.occ-rq-line__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--occ-space-3);
	}

	.occ-rq-line__title {
		margin: 0;
		font-size: var(--occ-text-xs);
		font-weight: var(--occ-fw-bold);
		letter-spacing: var(--occ-tracking-caps);
		text-transform: uppercase;
		line-height: var(--occ-leading-ui);
		scroll-margin-top: var(--occ-space-24);
	}

	.occ-rq-line__title:focus {
		outline: none;
	}

	.occ-rq-line__title:focus-visible {
		outline: 2px solid var(--occ-focus-color);
		outline-offset: var(--occ-focus-offset);
	}

	.occ-rq-line__chosen {
		display: grid;
		grid-template-columns: var(--occ-rq-thumb) minmax(0, 1fr);
		gap: var(--occ-space-3) var(--occ-space-4);
		align-items: center;
	}

	.occ-rq-line__chosen > .occ-button {
		grid-column: 1 / -1;
		justify-self: start;
	}

	.occ-rq-line__media {
		display: grid;
		place-items: center;
		aspect-ratio: 63 / 88;
		border-radius: var(--occ-radius-xs);
		background: var(--occ-bg-subtle);
		overflow: hidden;
	}

	.occ-rq-line__media img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.occ-rq-line__chosen-text {
		display: grid;
		gap: var(--occ-space-1);
		min-width: 0;
	}

	.occ-rq-line__name {
		margin: 0;
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-xl);
		font-weight: var(--occ-fw-semibold);
		line-height: var(--occ-leading-heading);
		overflow-wrap: anywhere;
	}

	.occ-rq-line__meta,
	.occ-rq-line__badge,
	.occ-rq-line__hint,
	.occ-rq-line__total {
		margin: 0;
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
		line-height: var(--occ-leading-ui);
		overflow-wrap: anywhere;
	}

	.occ-rq-line__badge {
		color: var(--occ-fg);
	}

	.occ-rq-line__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--occ-space-4);
	}

	/* Mobile: full-width rows for the controls that carry long labels. */
	.occ-rq-line__type,
	.occ-rq-line__game,
	.occ-rq-line__price,
	.occ-rq-line__crit-slot {
		grid-column: 1 / -1;
	}

	.occ-rq-line__type,
	.occ-rq-line__flags,
	.occ-rq__group {
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
	}

	.occ-rq-line__type legend,
	.occ-rq-line__flags legend,
	.occ-rq__group legend {
		margin-bottom: var(--occ-space-2);
		padding: 0;
	}

	.occ-rq-line__affix {
		position: relative;
	}

	.occ-rq-line__prefix {
		position: absolute;
		inset-block: 0;
		left: var(--occ-space-3);
		display: flex;
		align-items: center;
		color: var(--occ-fg-muted);
		pointer-events: none;
	}

	.occ-rq-line__affix .occ-field__control {
		padding-left: var(--occ-space-8);
		font-variant-numeric: tabular-nums;
	}

	.occ-rq-line__hint {
		display: flex;
		align-items: center;
		gap: var(--occ-space-2);
	}

	.occ-rq-line__hint.is-warning {
		color: var(--occ-danger);
	}

	.occ-rq-line__total {
		color: var(--occ-fg);
		font-weight: var(--occ-fw-semibold);
		font-variant-numeric: tabular-nums;
	}

	.occ-rq-line__total:empty {
		display: none;
	}

	/* Segmented type control + chips (native radios/checkboxes, styled labels). */
	.occ-rq-seg {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		border: var(--occ-border-width) solid var(--occ-fg-muted);
		border-radius: var(--occ-radius-md);
		overflow: hidden;
	}

	.occ-rq-seg__item {
		position: relative;
		display: grid;
		place-items: center;
		min-height: var(--occ-touch-min);
		padding: var(--occ-space-2);
		font-size: var(--occ-text-sm);
		font-weight: var(--occ-fw-semibold);
		text-align: center;
		line-height: var(--occ-leading-tight);
		cursor: pointer;
		transition: background var(--occ-duration-base) var(--occ-ease-standard);
	}

	.occ-rq-seg__item + .occ-rq-seg__item {
		border-left: var(--occ-border-width) solid var(--occ-border-strong);
	}

	.occ-rq-seg__item input {
		position: absolute;
		inset: 0;
		opacity: 0;
		margin: 0;
		cursor: pointer;
	}

	.occ-rq-seg__item:has(input:checked) {
		color: var(--occ-fg-inverse);
		background: var(--occ-fg);
	}

	.occ-rq-seg__item:has(input:focus-visible) {
		outline: 2px solid var(--occ-focus-color);
		outline-offset: -4px;
	}

	.occ-rq-chips,
	.occ-rq__choices {
		display: flex;
		flex-wrap: wrap;
		gap: var(--occ-space-2);
	}

	.occ-rq-chip,
	.occ-rq__choice {
		display: inline-flex;
		align-items: center;
		gap: var(--occ-space-2);
		min-height: var(--occ-touch-min);
		padding: var(--occ-space-2) var(--occ-space-4);
		border: var(--occ-border-width) solid var(--occ-border-strong);
		border-radius: var(--occ-radius-md);
		background: var(--occ-surface);
		font-size: var(--occ-text-sm);
		cursor: pointer;
		transition: border-color var(--occ-duration-base) var(--occ-ease-standard);
	}

	.occ-rq-chip input,
	.occ-rq__choice input {
		width: var(--occ-space-4);
		height: var(--occ-space-4);
		margin: 0;
		accent-color: var(--occ-accent-ink);
	}

	.occ-rq-chip:hover,
	.occ-rq__choice:hover {
		border-color: var(--occ-fg-muted);
	}

	.occ-rq-chip:has(input:checked),
	.occ-rq__choice:has(input:checked) {
		border-color: var(--occ-accent-ink);
		background: var(--occ-bg-elevated);
		box-shadow: inset 0 0 0 var(--occ-border-width) var(--occ-accent-ink);
	}

	.occ-rq-chip:has(input:focus-visible),
	.occ-rq__choice:has(input:focus-visible) {
		outline: 2px solid var(--occ-focus-color);
		outline-offset: 2px;
	}

	.occ-rq-line__error {
		padding-left: var(--occ-space-3);
		border-left: var(--occ-space-1) solid var(--occ-danger);
	}

	/* Summary ------------------------------------------------------------------- */
	.occ-rq__summary,
	.occ-rq__login,
	.occ-rq__done {
		display: grid;
		gap: var(--occ-space-4);
		padding: var(--occ-space-6);
		scroll-margin-top: var(--occ-space-24);
	}

	.occ-rq__login,
	.occ-rq__done {
		max-width: var(--occ-container-sm);
		margin-top: var(--occ-space-12);
	}

	.occ-rq__login:focus,
	.occ-rq__done:focus {
		outline: none;
	}

	.occ-rq__summary-title {
		margin: 0;
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-2xl);
		font-weight: var(--occ-fw-regular);
		font-style: italic;
		line-height: var(--occ-leading-heading);
	}

	.occ-rq__sums {
		display: grid;
		margin: 0;
	}

	.occ-rq__sum {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--occ-space-4);
		padding-block: var(--occ-space-3);
		border-top: var(--occ-border-width) solid var(--occ-border);
	}

	.occ-rq__sum dt {
		display: grid;
		gap: var(--occ-space-1);
		line-height: var(--occ-leading-ui);
	}

	.occ-rq__sum dd {
		margin: 0;
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	.occ-rq__sum-note {
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-xs);
	}

	.occ-rq__sum--total {
		border-top: var(--occ-border-width-strong) solid var(--occ-fg);
	}

	.occ-rq__sum--total dt,
	.occ-rq__sum--total dd {
		font-size: var(--occ-text-lg);
		font-weight: var(--occ-fw-bold);
	}

	.occ-rq__explain {
		line-height: var(--occ-leading-body);
	}

	.occ-rq__terms a,
	.occ-rq__billing a,
	.occ-rq__form-error a,
	.occ-rq__register a {
		color: inherit;
		font-weight: var(--occ-fw-bold);
		text-underline-offset: 0.2em;
	}

	.occ-rq__terms .occ-field__label {
		font-weight: var(--occ-fw-regular);
		line-height: var(--occ-leading-body);
	}

	.occ-rq__form-error {
		padding: var(--occ-space-3) var(--occ-space-4);
		border-left: var(--occ-space-1) solid var(--occ-danger);
		border-radius: var(--occ-radius-sm);
		background: var(--occ-bg-subtle);
	}

	.occ-rq__form-error:focus {
		outline: none;
	}

	.occ-rq__submit {
		width: 100%;
	}

	.occ-rq__login-hint,
	.occ-rq__register {
		margin: 0;
		line-height: var(--occ-leading-body);
	}

	/* WC login form inside the prompt: same field + button language as the rest of the form. */
	.occ-rq__login form {
		display: grid;
		gap: var(--occ-space-4);
		margin: 0;
	}

	.occ-rq__login .form-row {
		display: grid;
		gap: var(--occ-space-2);
		margin: 0;
	}

	.occ-rq__login .form-row label {
		font-size: var(--occ-text-sm);
		font-weight: var(--occ-fw-bold);
		line-height: var(--occ-leading-ui);
	}

	.occ-rq__login .form-row .required {
		color: var(--occ-accent-ink);
		text-decoration: none;
	}

	.occ-rq__login .input-text {
		width: 100%;
		min-height: var(--occ-touch-min);
		padding: var(--occ-space-2) var(--occ-space-3);
		border: var(--occ-border-width) solid var(--occ-fg-muted);
		border-radius: var(--occ-radius-sm);
		background: var(--occ-surface);
		color: var(--occ-fg);
		font: inherit;
	}

	.occ-rq__login .input-text:focus-visible {
		border-color: var(--occ-accent-ink);
		box-shadow: var(--occ-shadow-focus);
		outline: none;
	}

	.occ-rq__login .woocommerce-form-login__rememberme {
		display: inline-flex;
		align-items: center;
		gap: var(--occ-space-2);
		min-height: var(--occ-touch-min);
		margin-right: var(--occ-space-4);
		font-weight: var(--occ-fw-regular);
	}

	.occ-rq__login .woocommerce-form-login__submit {
		min-height: var(--occ-touch-min);
		padding: var(--occ-space-2) var(--occ-space-6);
		border: 0;
		border-radius: var(--occ-radius-md);
		background: var(--occ-fg);
		color: var(--occ-fg-inverse);
		font: inherit;
		font-weight: var(--occ-fw-bold);
		cursor: pointer;
	}

	.occ-rq__login .woocommerce-form-login__submit:focus-visible {
		outline: 2px solid var(--occ-focus-color);
		outline-offset: var(--occ-focus-offset);
	}

	.occ-rq__login .lost_password {
		margin: 0;
	}

	.occ-rq__login .lost_password a {
		color: inherit;
		text-underline-offset: 0.2em;
	}

	@media (min-width: 48rem) {
		.occ-rq-line {
			padding: var(--occ-space-8);
		}

		.occ-rq-line__grid {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}

		.occ-rq-line__type,
		.occ-rq-line__game {
			grid-column: span 2;
		}

		.occ-rq-line__crit-slot {
			grid-column: span 2;
		}

		.occ-rq-line__lang {
			grid-column: span 3;
		}

		.occ-rq-line__chosen {
			grid-template-columns: var(--occ-space-24) minmax(0, 1fr) auto;
		}

		.occ-rq-line__chosen > .occ-button {
			grid-column: auto;
		}
	}

	@media (min-width: 64rem) {
		.occ-rq__layout {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			gap: var(--occ-grid-gap);
		}

		.occ-rq__editor {
			grid-column: 1 / span 7;
		}

		.occ-rq__summary {
			grid-column: 9 / span 4;
			position: sticky;
			top: var(--occ-space-8);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.occ-rq-seg__item,
		.occ-rq-chip,
		.occ-rq__choice {
			transition: none;
		}
	}
}