/*
 * My Account → Herstellingen + post-checkout photo attach. Only --occ-* semantic tokens (I.th.css).
 * Builds on the theme's .occ-button / .occ-badge / .occ-panel / .occ-thumb-empty and the
 * repair-steps + before-after parts. Mobile: card image beside a compact text column, photos full
 * width; ≥ 48rem the before/after comparisons sit side by side.
 */

@layer occ.components {
	.occ-repair-account {
		display: grid;
		gap: var(--occ-space-8);
		color: var(--occ-fg);
		font-family: var(--occ-font-sans);
	}

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

	.occ-repair-account p {
		margin: 0;
	}

	/* Empty state ------------------------------------------------------- */
	.occ-repair-account__empty {
		display: grid;
		gap: var(--occ-space-4);
		justify-items: start;
	}

	.occ-repair-account__empty-title {
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-2xl);
		font-style: italic;
		line-height: var(--occ-leading-heading);
	}

	/* Order ------------------------------------------------------------- */
	.occ-repair-account__order {
		display: grid;
		gap: var(--occ-space-6);
		padding: var(--occ-space-6);
		background: var(--occ-surface);
		border: var(--occ-border-width) solid var(--occ-border);
		border-radius: var(--occ-radius-lg);
		min-width: 0;
	}

	.occ-repair-account__head {
		display: flex;
		flex-wrap: wrap;
		gap: var(--occ-space-3);
		align-items: flex-start;
		justify-content: space-between;
	}

	.occ-repair-account__heading {
		margin: 0;
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-2xl);
		font-weight: var(--occ-fw-semibold);
		line-height: var(--occ-leading-heading);
	}

	.occ-repair-account__meta,
	.occ-repair-account__set {
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
	}

	.occ-repair-account__return {
		font-weight: var(--occ-fw-bold);
	}

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

	.occ-repair-account__sendin summary:focus-visible {
		outline: 2px solid var(--occ-focus-color);
		outline-offset: var(--occ-focus-offset);
	}

	.occ-repair-sendin {
		display: grid;
		gap: var(--occ-space-3);
		padding: var(--occ-space-4);
	}

	.occ-repair-sendin h2 {
		margin: 0;
		font-size: var(--occ-text-lg);
	}

	/* Fallback steps (theme part missing) */
	.occ-repair-account__steps {
		display: grid;
		gap: var(--occ-space-2);
		margin: 0;
		padding-left: var(--occ-space-6);
		color: var(--occ-fg-muted);
	}

	.occ-repair-account__steps .is-current {
		color: var(--occ-fg);
		font-weight: var(--occ-fw-bold);
	}

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

	.occ-repair-account__card {
		display: grid;
		gap: var(--occ-space-4);
		padding-top: var(--occ-space-6);
		border-top: var(--occ-border-width) solid var(--occ-border);
		min-width: 0;
	}

	.occ-repair-account__summary {
		display: grid;
		grid-template-columns: var(--occ-space-16) minmax(0, 1fr);
		gap: var(--occ-space-4);
		align-items: start;
	}

	.occ-repair-account__media,
	.occ-repair-attach__media {
		display: block;
		aspect-ratio: 63 / 88;
		overflow: hidden;
		background: var(--occ-bg-subtle);
		border-radius: var(--occ-radius-sm);
	}

	.occ-repair-account__media img,
	.occ-repair-attach__media img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.occ-repair-account__media .occ-thumb-empty,
	.occ-repair-attach__media .occ-thumb-empty {
		display: block;
		width: 100%;
		height: 100%;
	}

	.occ-repair-account__body {
		display: grid;
		gap: var(--occ-space-2);
		justify-items: start;
		min-width: 0;
	}

	.occ-repair-account__card-name {
		margin: 0;
		font-size: var(--occ-text-lg);
		font-weight: var(--occ-fw-bold);
		line-height: var(--occ-leading-tight);
		overflow-wrap: anywhere;
	}

	.occ-repair-account__label {
		display: block;
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-xs);
		font-weight: var(--occ-fw-bold);
		letter-spacing: var(--occ-tracking-caps);
		text-transform: uppercase;
	}

	.occ-repair-account__note {
		display: grid;
		gap: var(--occ-space-2);
		padding: var(--occ-space-4);
		background: var(--occ-bg-subtle);
		border-left: var(--occ-border-width-strong) solid var(--occ-accent);
		border-radius: var(--occ-radius-sm);
	}

	.occ-repair-account__ba-wrap {
		min-width: 0;
	}

	/* Fallback before/after (theme part missing) */
	.occ-repair-account__ba > div {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--occ-space-3);
	}

	.occ-repair-account__ba img {
		width: 100%;
		height: auto;
	}

	.occ-repair-account__more a {
		display: inline-flex;
		align-items: center;
		min-height: var(--occ-touch-min);
	}

	.occ-repair-account__pages {
		display: flex;
		gap: var(--occ-space-3);
	}

	/* Attach ------------------------------------------------------------ */
	.occ-repair-account__attach {
		display: grid;
		gap: var(--occ-space-4);
	}

	.occ-repair-account--thankyou {
		margin-block: var(--occ-space-8);
		gap: var(--occ-space-4);
	}

	.occ-repair-account__attach-help {
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
	}

	.occ-repair-attach {
		display: grid;
		grid-template-columns: var(--occ-space-16) minmax(0, 1fr);
		gap: var(--occ-space-4);
		align-items: start;
	}

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

	.occ-repair-attach__title {
		font-weight: var(--occ-fw-bold);
	}

	.occ-repair-attach__file {
		cursor: pointer;
	}

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

	.occ-repair-attach__msg:empty {
		display: none;
	}

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

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

		.occ-repair-account__card {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			column-gap: var(--occ-space-8);
		}

		.occ-repair-account__summary,
		.occ-repair-account__note,
		.occ-repair-account__attach {
			grid-column: 1 / -1;
		}

		.occ-repair-account__attach {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.occ-repair-account__attach-help {
			grid-column: 1 / -1;
		}
	}
}