/*
 * Repair configurator `[occ_repair]`. Only --occ-* semantic tokens (I.th.css).
 * Builds on the theme's .occ-button / .occ-field / .occ-panel / .occ-thumb-empty.
 * Mobile: one column, the request panel follows the editor and a sticky bar jumps to it.
 * Desktop (≥ 64rem): 7/5 split with a sticky request panel.
 */

@layer occ.components {
	.occ-repair {
		--occ-repair-thumb: var(--occ-space-12);
		color: var(--occ-fg);
		font-family: var(--occ-font-sans);
		padding-bottom: var(--occ-space-16); /* room for the sticky bar */
	}

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

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

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

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

	.occ-repair__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;
	}

	/* Steps ----------------------------------------------------------------- */
	.occ-repair__steps {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--occ-space-2);
		margin: 0;
		padding: 0;
		list-style: none;
		counter-reset: none;
	}

	.occ-repair__steps li {
		display: flex;
		align-items: center;
		gap: var(--occ-space-2);
		padding-top: var(--occ-space-3);
		border-top: var(--occ-border-width-strong) solid var(--occ-border-strong);
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-xs);
		font-weight: var(--occ-fw-semibold);
		letter-spacing: var(--occ-tracking-caps);
		text-transform: uppercase;
		line-height: var(--occ-leading-ui);
	}

	.occ-repair__steps li.is-current {
		color: var(--occ-fg);
		border-top-color: var(--occ-accent-ink);
	}

	.occ-repair__steps li.is-done {
		color: var(--occ-fg);
		border-top-color: var(--occ-accent-strong);
	}

	.occ-repair__step-no {
		display: inline-grid;
		place-items: center;
		flex: none;
		width: var(--occ-space-6);
		height: var(--occ-space-6);
		border: var(--occ-border-width) solid currentColor;
		border-radius: var(--occ-radius-round);
		letter-spacing: 0;
	}

	.occ-repair__steps li.is-current .occ-repair__step-no {
		color: var(--occ-fg-inverse);
		background: var(--occ-fg);
		border-color: var(--occ-fg);
	}

	.occ-repair__step {
		display: grid;
		gap: var(--occ-space-6);
	}

	.occ-repair__step-title {
		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);
		scroll-margin-top: var(--occ-space-24);
	}

	.occ-repair__step-title:focus {
		outline: none;
	}

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

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

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

	/* Chosen card ------------------------------------------------------------ */
	.occ-repair__chosen {
		display: grid;
		grid-template-columns: var(--occ-repair-thumb) minmax(0, 1fr);
		gap: var(--occ-space-3) var(--occ-space-4);
		align-items: center;
		padding: var(--occ-space-4);
	}

	.occ-repair__chosen > .occ-button {
		grid-column: 1 / -1;
		justify-self: start;
		min-height: var(--occ-touch-min);
	}

	.occ-repair__chosen-name,
	.occ-repair__item-name {
		margin: 0;
		font-weight: var(--occ-fw-bold);
		line-height: var(--occ-leading-ui);
		overflow-wrap: anywhere;
	}

	.occ-repair__chosen-meta,
	.occ-repair__item-meta,
	.occ-repair__item-treats {
		margin: 0;
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
		line-height: var(--occ-leading-ui);
		overflow-wrap: anywhere;
	}

	.occ-repair__chosen-media,
	.occ-repair__item-media {
		display: grid;
		place-items: center;
		aspect-ratio: 63 / 88;
		color: var(--occ-accent-strong);
		font-size: var(--occ-space-6);
	}

	.occ-repair__chosen-media img,
	.occ-repair__item-media img,
	.occ-repair__fp-hit img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		border-radius: var(--occ-radius-xs);
	}

	/* Groups, chips, treatments --------------------------------------------- */
	.occ-repair__group {
		display: grid;
		gap: var(--occ-space-3);
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
	}

	.occ-repair__legend {
		margin: 0 0 var(--occ-space-3);
		padding: 0;
		font-size: var(--occ-text-sm);
		font-weight: var(--occ-fw-bold);
		line-height: var(--occ-leading-ui);
	}

	.occ-repair__chips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--occ-space-2);
	}

	.occ-repair__chip,
	.occ-repair__treat {
		display: grid;
		gap: 0 var(--occ-space-3);
		align-items: center;
		min-height: var(--occ-touch-min);
		border: var(--occ-border-width) solid var(--occ-border-strong);
		border-radius: var(--occ-radius-md);
		background: var(--occ-surface);
		cursor: pointer;
		transition:
			border-color var(--occ-duration-base) var(--occ-ease-standard),
			background var(--occ-duration-base) var(--occ-ease-standard);
	}

	.occ-repair__chip {
		grid-template-columns: auto auto;
		padding: var(--occ-space-2) var(--occ-space-4);
		font-size: var(--occ-text-sm);
	}

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

	.occ-repair__chip:hover,
	.occ-repair__treat:hover {
		border-color: var(--occ-fg-muted);
	}

	.occ-repair__chip:has(input:checked),
	.occ-repair__treat: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-repair__chip:has(input:focus-visible),
	.occ-repair__treat:has(input:focus-visible) {
		outline: 2px solid var(--occ-focus-color);
		outline-offset: 2px;
	}

	.occ-repair__treat-group {
		display: grid;
		gap: var(--occ-space-2);
	}

	.occ-repair__treat-group + .occ-repair__treat-group {
		margin-top: var(--occ-space-3);
	}

	.occ-repair__treat-group-title {
		margin: 0;
		color: var(--occ-fg-muted);
	}

	.occ-repair__treats {
		display: grid;
		gap: var(--occ-space-2);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.occ-repair__treat {
		grid-template-columns: auto minmax(0, 1fr) auto;
		padding: var(--occ-space-3) var(--occ-space-4);
	}

	.occ-repair__treat-name {
		font-weight: var(--occ-fw-semibold);
		line-height: var(--occ-leading-ui);
	}

	.occ-repair__treat-price {
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	.occ-repair__treat-desc {
		grid-column: 2 / -1;
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
		line-height: var(--occ-leading-ui);
	}

	.occ-repair__crack {
		display: grid;
		gap: var(--occ-space-3);
		padding: var(--occ-space-4);
		border-left: var(--occ-space-1) solid var(--occ-warning);
		border-radius: var(--occ-radius-sm);
		background: var(--occ-bg-subtle);
	}

	.occ-repair__crack-text {
		margin: 0;
		line-height: var(--occ-leading-body);
	}

	.occ-repair__nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: var(--occ-space-3);
		padding-top: var(--occ-space-2);
	}

	.occ-repair__nav .occ-button--primary {
		margin-left: auto;
	}

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

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

	.occ-repair__photo .occ-repair__legend {
		margin-bottom: var(--occ-space-2);
	}

	.occ-repair__slot {
		display: grid;
		gap: var(--occ-space-2);
		justify-items: start;
	}

	.occ-repair__slot-preview {
		display: grid;
		place-items: center;
		width: 100%;
		aspect-ratio: 63 / 88;
		border: var(--occ-border-width) dashed var(--occ-border-strong);
		border-radius: var(--occ-radius-lg);
		background: var(--occ-bg-subtle);
		overflow: hidden;
	}

	.occ-repair__slot-preview img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* The file input is visually hidden; its label shows the keyboard focus. */
	.occ-repair__slot input:focus-visible + label {
		outline: 2px solid var(--occ-focus-color);
		outline-offset: var(--occ-focus-offset);
	}

	.occ-repair__slot[aria-busy="true"] .occ-repair__slot-preview {
		opacity: 0.6;
	}

	/* Fallback picker (when occ-cards.js is missing) ---------------------------- */
	.occ-repair__fp {
		display: grid;
		gap: var(--occ-space-4);
	}

	.occ-repair__fp-results {
		display: grid;
		gap: var(--occ-space-2);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.occ-repair__fp-hit {
		display: grid;
		grid-template-columns: var(--occ-space-8) minmax(0, 1fr);
		gap: var(--occ-space-3);
		align-items: center;
		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-border-strong);
		border-radius: var(--occ-radius-md);
		background: var(--occ-surface);
		color: var(--occ-fg);
		font: inherit;
		text-align: left;
		cursor: pointer;
	}

	.occ-repair__fp-hit:hover {
		border-color: var(--occ-accent-ink);
	}

	.occ-repair__fp-hit span {
		display: grid;
		font-size: var(--occ-text-sm);
		overflow-wrap: anywhere;
	}

	.occ-repair__fp-manual summary {
		min-height: var(--occ-touch-min);
		display: flex;
		align-items: center;
		font-weight: var(--occ-fw-semibold);
		cursor: pointer;
	}

	.occ-repair__fp-manual[open] summary {
		margin-bottom: var(--occ-space-3);
	}

	/* Request panel --------------------------------------------------------------- */
	.occ-repair__cart {
		display: grid;
		gap: var(--occ-space-4);
		padding: var(--occ-space-6);
		scroll-margin-top: var(--occ-space-24);
	}

	.occ-repair__cart-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-repair__cart-title:focus {
		outline: none;
	}

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

	.occ-repair__loading {
		display: flex;
		align-items: center;
		gap: var(--occ-space-2);
		margin: 0;
		color: var(--occ-fg-muted);
	}

	.occ-repair__empty {
		color: var(--occ-fg-muted);
		line-height: var(--occ-leading-body);
	}

	.occ-repair__empty p {
		margin: 0;
	}

	.occ-repair__list {
		display: grid;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.occ-repair__item {
		display: grid;
		grid-template-columns: var(--occ-repair-thumb) minmax(0, 1fr);
		gap: var(--occ-space-1) var(--occ-space-3);
		padding-block: var(--occ-space-4);
		border-top: var(--occ-border-width) solid var(--occ-border);
	}

	.occ-repair__item.is-invalid {
		border-left: var(--occ-space-1) solid var(--occ-danger);
		padding-left: var(--occ-space-3);
	}

	.occ-repair__item-body {
		display: grid;
		gap: var(--occ-space-1);
		align-content: start;
		min-width: 0;
	}

	.occ-repair__item-side {
		grid-column: 2;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--occ-space-2);
	}

	.occ-repair__item-price {
		margin: 0;
		font-weight: var(--occ-fw-bold);
		font-variant-numeric: tabular-nums;
	}

	.occ-repair__item-actions {
		display: flex;
		gap: var(--occ-space-4);
	}

	.occ-repair__item-actions .occ-button {
		font-weight: var(--occ-fw-semibold);
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.occ-repair__total {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		margin: 0;
		padding-top: var(--occ-space-4);
		border-top: var(--occ-border-width) solid var(--occ-border-strong);
	}

	.occ-repair__total dt {
		font-size: var(--occ-text-xs);
		font-weight: var(--occ-fw-semibold);
		letter-spacing: var(--occ-tracking-caps);
		text-transform: uppercase;
	}

	.occ-repair__total dd {
		margin: 0;
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-2xl);
		font-variant-numeric: tabular-nums;
	}

	.occ-repair__ship-note {
		margin: 0;
	}

	.occ-repair__submit-error {
		display: block;
		line-height: var(--occ-leading-body);
	}

	.occ-repair__submit-error a {
		color: inherit;
		font-weight: var(--occ-fw-bold);
	}

	.occ-repair__submit {
		width: 100%;
		min-height: var(--occ-control-lg);
	}

	/* Sticky bar (mobile/tablet) ---------------------------------------------------- */
	.occ-repair__bar {
		position: fixed;
		inset: auto 0 0;
		z-index: var(--occ-z-sticky);
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--occ-space-1) var(--occ-space-3);
		min-height: var(--occ-control-lg);
		padding: var(--occ-space-3) var(--occ-page-gutter);
		padding-bottom: max(var(--occ-space-3), env(safe-area-inset-bottom));
		color: var(--occ-fg-inverse);
		background: var(--occ-surface-inverse);
		font-size: var(--occ-text-sm);
		text-decoration: none;
	}

	.occ-repair__bar-cta {
		margin-left: auto;
		font-weight: var(--occ-fw-semibold);
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

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

	.occ-repair__notice {
		padding: var(--occ-space-4);
		border: var(--occ-border-width) solid var(--occ-border-strong);
		border-radius: var(--occ-radius-md);
	}

	@media (max-width: 30rem) {
		.occ-repair__steps li {
			flex-direction: column;
			align-items: flex-start;
			letter-spacing: var(--occ-tracking-wide);
		}

		.occ-repair__treat {
			grid-template-columns: auto minmax(0, 1fr);
		}

		.occ-repair__treat-price {
			grid-column: 2;
			grid-row: 3;
			font-size: var(--occ-text-sm);
			font-weight: var(--occ-fw-semibold);
		}

		.occ-repair__nav .occ-button {
			flex: 1 1 100%;
		}
	}

	@media (min-width: 64rem) {
		.occ-repair {
			padding-bottom: 0;
		}

		.occ-repair__layout {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			gap: var(--occ-grid-gap);
		}

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

		.occ-repair__cart {
			grid-column: 8 / span 5;
			position: sticky;
			top: var(--occ-space-24);
			max-height: calc(100vh - var(--occ-space-32));
			overflow-y: auto;
		}

		.occ-repair .occ-repair__bar {
			display: none !important;
		}

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

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

	@media (prefers-reduced-motion: reduce) {
		.occ-repair__chip,
		.occ-repair__treat {
			transition: none;
		}
	}
}