/*
 * My Account → Kaartaanvragen (REQ8b). Only --occ-* semantic tokens (I.th.css).
 * Builds on the theme's .occ-panel / .occ-button / .occ-field / .occ-badge and WC's shop_table_responsive.
 * Mobile: one column, offers first with full-width actions. ≥ 48rem: offers get photos beside the specs,
 * lines get a thumbnail column, the three actions sit side by side.
 */

@layer occ.components {
	.occ-rq-account {
		--occ-rq-acc-thumb: var(--occ-space-16);
		display: grid;
		gap: var(--occ-space-8);
		min-width: 0;
		color: var(--occ-fg);
	}

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

	.occ-rq-account :is(h2, h3, h4, p, dl, dd, ul, ol) {
		margin: 0;
	}

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

	.occ-rq-account > .occ-panel,
	.occ-rq-account .occ-panel:not(.occ-rq-line-view) {
		padding: var(--occ-space-6);
	}

	/* Head */
	.occ-rq-account__head {
		display: grid;
		gap: var(--occ-space-3);
		justify-items: start;
	}

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

	.occ-rq-account__facts,
	.occ-rq-offer__specs,
	.occ-rq-line-view__specs {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
		gap: var(--occ-space-3) var(--occ-space-6);
		width: 100%;
	}

	:is(.occ-rq-account__facts, .occ-rq-offer__specs, .occ-rq-line-view__specs) dt {
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-xs);
		font-weight: var(--occ-fw-semibold);
		letter-spacing: var(--occ-tracking-wide);
		text-transform: uppercase;
	}

	:is(.occ-rq-account__facts, .occ-rq-offer__specs, .occ-rq-line-view__specs) dd {
		font-weight: var(--occ-fw-medium);
		overflow-wrap: anywhere;
	}

	/* Pay callout + empty state */
	.occ-rq-account__callout,
	.occ-rq-account__empty {
		display: grid;
		gap: var(--occ-space-4);
		justify-items: start;
		border-color: var(--occ-border-premium);
		background: var(--occ-bg-elevated);
	}

	.occ-rq-account__callout h3 {
		font-size: var(--occ-text-lg);
		font-weight: var(--occ-fw-semibold);
	}

	/* Sections */
	.occ-rq-account__section {
		display: grid;
		gap: var(--occ-space-4);
		min-width: 0;
	}

	.occ-rq-account__section > h3 {
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-2xl);
		font-weight: var(--occ-fw-regular);
		line-height: var(--occ-leading-heading);
	}

	.occ-rq-account__offers,
	.occ-rq-account__lines {
		display: grid;
		gap: var(--occ-space-4);
		padding: 0;
		list-style: none;
	}

	/* Offers (found / disputed / accepted copies) */
	.occ-rq-offer {
		display: grid;
		gap: var(--occ-space-4);
		align-content: start;
	}

	.occ-rq-offer--found {
		border-color: var(--occ-accent-strong);
		box-shadow: var(--occ-shadow-sm);
	}

	.occ-rq-offer__title {
		font-size: var(--occ-text-lg);
		font-weight: var(--occ-fw-semibold);
		line-height: var(--occ-leading-tight);
		overflow-wrap: anywhere;
	}

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

	.occ-rq-offer > .occ-badge {
		justify-self: start;
	}

	.occ-rq-offer__photos {
		display: flex;
		gap: var(--occ-space-2);
		padding: 0;
		overflow-x: auto;
		list-style: none;
		scroll-snap-type: x proximity;
	}

	.occ-rq-offer__photos li {
		flex: none;
		scroll-snap-align: start;
	}

	.occ-rq-offer__photos a {
		display: block;
		border-radius: var(--occ-radius-sm);
	}

	.occ-rq-offer__photos img {
		display: block;
		width: calc(var(--occ-rq-acc-thumb) * 1.5);
		aspect-ratio: 63 / 88;
		border: var(--occ-border-width) solid var(--occ-border);
		border-radius: var(--occ-radius-sm);
		background: var(--occ-bg-subtle);
		object-fit: contain;
	}

	.occ-rq-offer__note {
		padding-inline-start: var(--occ-space-3);
		border-inline-start: var(--occ-border-width-strong) solid var(--occ-border-premium);
		color: var(--occ-fg-muted);
	}

	.occ-rq-offer__actions {
		display: grid;
		gap: var(--occ-space-3);
	}

	.occ-rq-offer__actions > form > .occ-button,
	.occ-rq-offer__refuse > summary {
		width: 100%;
	}

	.occ-rq-offer__refuse > summary {
		list-style: none;
		cursor: pointer;
	}

	.occ-rq-offer__refuse > summary::-webkit-details-marker {
		display: none;
	}

	.occ-rq-offer__refuse[open] > summary {
		margin-bottom: var(--occ-space-4);
	}

	.occ-rq-offer__refuse form,
	.occ-rq-account__action,
	.occ-rq-account__dialog form {
		display: grid;
		gap: var(--occ-space-4);
		justify-items: start;
	}

	:is(.occ-rq-offer__refuse, .occ-rq-account__action, .occ-rq-account__dialog) .occ-field {
		width: 100%;
	}

	/* Lines ("Je kaarten"). */
	.occ-rq-line-view {
		display: grid;
		grid-template-columns: var(--occ-rq-acc-thumb) minmax(0, 1fr);
		gap: var(--occ-space-4);
		place-items: start stretch;
		padding: var(--occ-space-4);
		border: var(--occ-border-width) solid var(--occ-border);
		border-radius: var(--occ-radius-lg);
		background: var(--occ-surface);
	}

	.occ-rq-line-view__img {
		width: 100%;
		height: auto;
		aspect-ratio: 63 / 88;
		border-radius: var(--occ-radius-sm);
		background: var(--occ-bg-subtle);
		object-fit: contain;
	}

	.occ-rq-line-view__body {
		display: grid;
		gap: var(--occ-space-3);
		min-width: 0;
	}

	.occ-rq-line-view__body:only-child {
		grid-column: 1 / -1;
	}

	.occ-rq-line-view__name {
		font-size: var(--occ-text-md);
		font-weight: var(--occ-fw-semibold);
		line-height: var(--occ-leading-tight);
		overflow-wrap: anywhere;
	}

	.occ-rq-line-view__specs {
		grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	}

	.occ-rq-line-view__copies {
		display: flex;
		flex-wrap: wrap;
		gap: var(--occ-space-2);
		padding: 0;
		list-style: none;
		font-size: var(--occ-text-sm);
	}

	.occ-rq-line-view__copies li {
		padding: var(--occ-space-1) var(--occ-space-3);
		border: var(--occ-border-width) solid var(--occ-border);
		border-radius: var(--occ-radius-sm);
		background: var(--occ-bg-subtle);
	}

	/* Deposit sums */
	.occ-rq-account__sums {
		display: grid;
		gap: var(--occ-space-2);
	}

	.occ-rq-account__sums > div {
		display: flex;
		justify-content: space-between;
		gap: var(--occ-space-4);
	}

	.occ-rq-account__sums dt {
		color: var(--occ-fg-muted);
	}

	.occ-rq-account__sums dd {
		font-variant-numeric: tabular-nums;
		text-align: end;
	}

	.occ-rq-account__sum-total {
		margin-top: var(--occ-space-2);
		padding-top: var(--occ-space-3);
		border-top: var(--occ-border-width) solid var(--occ-border-strong);
		font-weight: var(--occ-fw-semibold);
	}

	.occ-rq-account__sum-total dt {
		color: var(--occ-fg);
	}

	/* Tables */
	.occ-rq-account__table {
		font-variant-numeric: tabular-nums;
	}

	/* Stays a table cell on desktop (flex would break the row); WC's stacked sheet makes it flex on mobile. */
	.woocommerce .occ-rq-account__table .occ-rq-account__row-actions {
		text-align: end;
	}

	/* No data-title on the actions cell: drop WC's "label:" prefix in the stacked mobile sheet. */
	.woocommerce .occ-rq-account__table .occ-rq-account__row-actions::before {
		content: none;
	}

	@media (max-width: 47.99rem) {
		.woocommerce .occ-rq-account__table .occ-rq-account__row-actions {
			justify-content: flex-end;
		}
	}

	.occ-rq-account__row-actions .occ-button {
		margin: var(--occ-space-1);
	}

	/* Actions: extension / interim / stop */
	.occ-rq-account__action h4,
	.occ-rq-account__dialog h4 {
		font-size: var(--occ-text-lg);
		font-weight: var(--occ-fw-semibold);
	}

	.occ-rq-account__group {
		display: grid;
		gap: var(--occ-space-2);
		width: 100%;
		margin: 0;
		padding: 0;
		border: 0;
	}

	/* The template puts .occ-field__check (the theme's checkbox-input class) on the wrapping label: re-lay it out. */
	.occ-rq-account label.occ-field__check {
		display: flex;
		gap: var(--occ-space-3);
		align-items: center;
		width: auto;
		height: auto;
		min-height: var(--occ-touch-min);
	}

	.occ-rq-account label.occ-field__check > input {
		flex: none;
		width: var(--occ-space-6);
		height: var(--occ-space-6);
		margin: 0;
		accent-color: var(--occ-accent-ink);
	}

	/* Status line under each action: empty until the JS writes into it. */
	.occ-rq-account__status {
		justify-self: stretch;
		font-size: var(--occ-text-sm);
	}

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

	.occ-rq-account__status[data-state="busy"] {
		color: var(--occ-fg-muted);
	}

	.occ-rq-account__status[data-state="success"] {
		color: var(--occ-success);
	}

	.occ-rq-account__status[data-state="error"] {
		padding: var(--occ-space-3) var(--occ-space-4);
		border-inline-start: var(--occ-border-width-strong) solid var(--occ-danger);
		border-radius: var(--occ-radius-sm);
		color: var(--occ-fg);
		background: var(--occ-bg-subtle);
	}

	.occ-rq-account [aria-busy="true"] .occ-button[type="submit"] {
		cursor: progress;
		opacity: 0.7;
	}

	/* Stop dialog */
	.occ-rq-account__dialog {
		width: min(32rem, calc(100% - 2 * var(--occ-page-gutter)));
		max-height: calc(100dvh - 2 * var(--occ-page-gutter));
		color: var(--occ-fg);
		box-shadow: var(--occ-shadow-md);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.occ-rq-account__dialog::backdrop {
		background: var(--occ-overlay);
	}

	.occ-rq-account__dialog-actions {
		display: flex;
		flex-direction: column-reverse;
		gap: var(--occ-space-3);
		width: 100%;
	}

	.occ-rq-account__dialog-actions .occ-button {
		width: 100%;
	}

	html:has(.occ-rq-account__dialog[open]) {
		overflow: hidden;
	}

	/* Timeline */
	.occ-rq-account__timeline {
		display: grid;
		gap: var(--occ-space-3);
		padding: 0 0 0 var(--occ-space-4);
		border-inline-start: var(--occ-border-width) solid var(--occ-border-strong);
		list-style: none;
		font-size: var(--occ-text-sm);
	}

	.occ-rq-account__timeline li {
		position: relative;
	}

	.occ-rq-account__timeline li::before {
		content: "";
		position: absolute;
		inset-block-start: 0.55em;
		inset-inline-start: calc(-1 * var(--occ-space-4) - var(--occ-space-1));
		width: var(--occ-space-2);
		height: var(--occ-space-2);
		border-radius: var(--occ-radius-round);
		background: var(--occ-accent-strong);
	}

	.occ-rq-account__timeline time {
		color: var(--occ-fg-muted);
		font-variant-numeric: tabular-nums;
	}

	@media (min-width: 48rem) {
		.occ-rq-account {
			--occ-rq-acc-thumb: calc(var(--occ-space-16) + var(--occ-space-8));
		}

		.occ-rq-offer:has(> .occ-rq-offer__photos) {
			grid-template-columns: auto minmax(0, 1fr);
			column-gap: var(--occ-space-6);
		}

		.occ-rq-offer > :is(.occ-rq-offer__title, .occ-badge, .occ-rq-offer__note, .occ-field__help, .occ-rq-offer__actions) {
			grid-column: 1 / -1;
		}

		.occ-rq-offer__photos {
			max-width: calc(var(--occ-rq-acc-thumb) * 3 + var(--occ-space-4));
		}

		.occ-rq-offer__actions {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			align-items: start;
		}

		.occ-rq-offer__refuse[open] {
			grid-column: 1 / -1;
			grid-row: 2;
		}

		.occ-rq-account__section:has(> .occ-rq-account__action) {
			grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
			align-items: start;
		}

		.occ-rq-account__section:has(> .occ-rq-account__action) > :is(h3, noscript) {
			grid-column: 1 / -1;
		}

		.occ-rq-account__dialog-actions {
			flex-direction: row;
			justify-content: flex-end;
		}

		.occ-rq-account__dialog-actions .occ-button {
			width: auto;
		}
	}

	@media (min-width: 64rem) {
		.occ-rq-account__offers {
			grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
		}
	}

	@media (prefers-reduced-motion: no-preference) {
		.occ-rq-offer__photos {
			scroll-behavior: smooth;
		}
	}
}