/**
 * WpDevArt: Request a Quote & Quote-to-Order for WooCommerce: quote page
 * (basket table, request form, confirmation) and the My Account Quotes
 * table. Class contract: ARCHITECTURE §8.9.
 *
 * Colors lean on the theme (currentColor and neutral greys that read on
 * light and dark backgrounds); logical properties keep RTL layouts right.
 * The quote list stacks its rows whenever its own box is narrower than the
 * table needs (a container query: block themes keep content columns near
 * 650 px on wide screens), and stays usable at 360 px. The request form and
 * the account table follow the viewport (600 px).
 */

/* ------------------------------------------------------------------ *
 * Page wrapper
 * ------------------------------------------------------------------ */

.wpdevart-raq-quote-page {
	--wpdevart-raq-q-border: rgba(128, 128, 128, 0.35);
	--wpdevart-raq-q-soft: rgba(128, 128, 128, 0.08);
	--wpdevart-raq-q-error: #b32d2e;
	--wpdevart-raq-q-success: #1a7f37;
	--wpdevart-raq-q-radius: 6px;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 0 2em;
	overflow-wrap: break-word;
}

.wpdevart-raq-quote-page *,
.wpdevart-raq-quote-page *::before,
.wpdevart-raq-quote-page *::after {
	box-sizing: inherit;
}

.wpdevart-raq-quote-page [hidden] {
	display: none !important;
}

/*
 * Link buttons (Return to shop, Continue shopping, View your quotes, Pay now,
 * an add-on's Download PDF) look like the <button> elements beside them:
 * themes that underline every content link underlined their labels, and the
 * underline flickered off on hover. The ID bump outranks those themes' long
 * :not() link selectors; the text-link style of the quote button keeps its
 * underline.
 */
.wpdevart-raq-quote-page a.button:not(.wpdevart-raq-btn--link):not(#wpdevart-raq-boost) {
	text-decoration: none;
}

.wpdevart-raq-placeholder {
	margin: 0;
	padding: 1.5em;
	border: 1px dashed var(--wpdevart-raq-q-border);
	border-radius: var(--wpdevart-raq-q-radius);
	text-align: center;
	opacity: 0.8;
}

/* ------------------------------------------------------------------ *
 * Quote list (basket table)
 * ------------------------------------------------------------------ */

.wpdevart-raq-list {
	position: relative;
	margin: 0 0 2.5em;
	container: wpdevart-raq-list / inline-size;
}

/* The implicit-submit default button: present for Enter, never visible. */
.wpdevart-raq-list .wpdevart-raq-list__default {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.wpdevart-raq-list__notice {
	margin: 0 0 1em;
}

.wpdevart-raq-list__wrap {
	width: 100%;
	overflow-x: auto;
}

.wpdevart-raq-list__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
	border: 0;
	text-align: start;
}

.wpdevart-raq-list__table th,
.wpdevart-raq-list__table td {
	padding: 0.85em 0.6em;
	border: 0;
	border-block-end: 1px solid var(--wpdevart-raq-q-border);
	background: transparent;
	text-align: start;
	vertical-align: middle;
}

.wpdevart-raq-list__table thead th {
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0.8;
}

.wpdevart-raq-list__row.is-busy {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

.wpdevart-raq-list__row.is-unavailable .wpdevart-raq-list__cell--thumb,
.wpdevart-raq-list__row.is-unavailable .wpdevart-raq-list__name {
	opacity: 0.6;
}

.wpdevart-raq-list__cell--thumb {
	width: 76px;
}

.wpdevart-raq-list__table td.wpdevart-raq-list__cell--thumb {
	min-width: calc(64px + 1.2em);
}

.wpdevart-raq-list__cell--thumb img {
	display: block;
	width: 64px;
	max-width: 64px;
	height: auto;
	border-radius: 4px;
}

.wpdevart-raq-list__cell--product {
	min-width: 10em;
}

.wpdevart-raq-list__name {
	font-weight: 600;
}

.wpdevart-raq-list__attributes {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 0.4em;
	margin: 0.3em 0 0;
	font-size: 0.9em;
}

.wpdevart-raq-list__attributes dt,
.wpdevart-raq-list__attributes dd {
	margin: 0;
	padding: 0;
}

.wpdevart-raq-list__attributes dt {
	font-weight: 600;
}

.wpdevart-raq-list__sku {
	display: block;
	margin-block-start: 0.25em;
	font-size: 0.85em;
	opacity: 0.75;
}

.wpdevart-raq-list__unavailable {
	display: inline-block;
	margin-block-start: 0.4em;
	padding: 0.15em 0.6em;
	border: 1px solid var(--wpdevart-raq-q-error);
	border-radius: 999px;
	color: var(--wpdevart-raq-q-error);
	font-size: 0.85em;
	font-weight: 600;
}

.wpdevart-raq-list__cell--price {
	white-space: nowrap;
}

.wpdevart-raq-list__cell--qty {
	width: 7.5em;
}

.wpdevart-raq-list__cell--qty .quantity {
	display: inline-block;
	margin: 0;
}

.wpdevart-raq-list__cell--qty input.qty {
	width: 5em;
	max-width: 100%;
	text-align: center;
}

/*
 * Readable defaults for themes that leave number fields to the browser
 * (block themes: 13 px text, 1 px padding). Zero specificity, so any input
 * rule of the theme still wins.
 */
:where(.wpdevart-raq-list__cell--qty) :where(input.qty) {
	box-sizing: border-box;
	min-height: 2.5em;
	padding: 0.4em 0.35em;
	border: 1px solid var(--wpdevart-raq-q-border);
	border-radius: 4px;
	font: inherit;
	line-height: 1.2;
}

/* Visible keyboard focus, also where themes remove the field's outline
   (".woocommerce .quantity .qty { outline: none }"). */
.wpdevart-raq-list__cell--qty .quantity input.qty:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.wpdevart-raq-list__cell--note {
	min-width: 12em;
}

.wpdevart-raq-list__note {
	display: block;
	width: 100%;
	min-height: 2.6em;
	margin: 0;
	padding: 0.45em 0.6em;
	font: inherit;
	font-size: 0.95em;
	line-height: 1.4;
	resize: vertical;
}

.wpdevart-raq-list__note-text {
	font-size: 0.95em;
	white-space: pre-line;
}

.wpdevart-raq-list__cell--remove {
	width: 3em;
	text-align: end;
}

.wpdevart-raq-list__table td.wpdevart-raq-list__cell--remove {
	text-align: end;
}

.wpdevart-raq-list__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25em;
	min-height: 2.25em;
	margin: 0;
	padding: 0.25em;
	border: 1px solid transparent;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 1em;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
}

.wpdevart-raq-list__remove:hover,
.wpdevart-raq-list__remove:focus-visible {
	border-color: var(--wpdevart-raq-q-error);
	background: transparent;
	color: var(--wpdevart-raq-q-error);
}

.wpdevart-raq-list__remove:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.wpdevart-raq-list__remove-icon {
	font-size: 1.4em;
	line-height: 1;
}

.wpdevart-raq-list__remove-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.wpdevart-raq-list__message {
	min-height: 1.5em;
	margin: 0.75em 0 0;
	font-size: 0.95em;
}

.wpdevart-raq-list__message:empty {
	min-height: 0;
	margin: 0;
}

.wpdevart-raq-list__message:focus {
	outline: none;
}

.wpdevart-raq-list__message.is-error {
	color: var(--wpdevart-raq-q-error);
}

.wpdevart-raq-list__message.is-success {
	color: var(--wpdevart-raq-q-success);
}

.wpdevart-raq-list__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75em;
	margin: 1em 0 0;
}

/* With JavaScript, quantities and notes save themselves. */
.wpdevart-raq-list.is-enhanced .wpdevart-raq-list__update {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Empty list
 * ------------------------------------------------------------------ */

.wpdevart-raq-empty {
	margin: 0 0 2em;
	padding: 2em 1.5em;
	border: 1px dashed var(--wpdevart-raq-q-border);
	border-radius: var(--wpdevart-raq-q-radius);
	text-align: center;
}

.wpdevart-raq-empty:focus {
	outline: none;
}

.wpdevart-raq-empty__text {
	margin: 0 0 1em;
	font-size: 1.1em;
}

.wpdevart-raq-empty__actions {
	margin: 0;
}

/* Centered like the text: themes that float every ".woocommerce a.button" to
   the right pushed the button aside and across the dashed border. */
.wpdevart-raq-empty .wpdevart-raq-empty__actions a.button {
	float: none;
}

/* ------------------------------------------------------------------ *
 * Request form (templates of the request-form module)
 * ------------------------------------------------------------------ */

.wpdevart-raq-form {
	position: relative;
	max-width: 46em;
	margin: 0 0 2em;
	padding: 1.5em;
	border: 1px solid var(--wpdevart-raq-q-border, rgba(128, 128, 128, 0.35));
	border-radius: var(--wpdevart-raq-q-radius, 6px);
}

.wpdevart-raq-form__title {
	margin: 0 0 0.5em;
	font-size: 1.35em;
	line-height: 1.3;
}

.wpdevart-raq-form__intro {
	margin: 0 0 1.25em;
}

.wpdevart-raq-form__intro p:last-child {
	margin-block-end: 0;
}

.wpdevart-raq-form__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.25em;
}

.wpdevart-raq-form__field {
	min-width: 0;
	margin: 0 0 1.1em;
	padding: 0;
	border: 0;
}

.wpdevart-raq-form__field--message,
.wpdevart-raq-form__field--address,
.wpdevart-raq-form__consent {
	grid-column: 1 / -1;
}

.wpdevart-raq-form__label {
	display: block;
	margin: 0 0 0.35em;
	padding: 0;
	font-weight: 600;
}

.wpdevart-raq-form__field--privacy .wpdevart-raq-form__label,
.wpdevart-raq-form__consent .wpdevart-raq-form__label {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-weight: 400;
}

.wpdevart-raq-form__consent input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0.3em 0 0;
}

.wpdevart-raq-form__required {
	color: var(--wpdevart-raq-q-error, #b32d2e);
	font-weight: 700;
	text-decoration: none;
	border: 0;
}

.wpdevart-raq-form__optional {
	font-size: 0.9em;
	font-weight: 400;
	opacity: 0.75;
}

.wpdevart-raq-form__input:not([type="checkbox"]):not([type="radio"]) {
	display: block;
	width: 100%;
	max-width: 100%;
	font: inherit;
}

textarea.wpdevart-raq-form__input {
	min-height: 7em;
	resize: vertical;
}

.wpdevart-raq-form__address {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.25em;
}

.wpdevart-raq-form__address .form-row {
	float: none;
	width: auto;
	margin: 0 0 0.9em;
	padding: 0;
}

.wpdevart-raq-form__address .form-row-wide,
.wpdevart-raq-form__address .address-field.form-row-wide {
	grid-column: 1 / -1;
}

.wpdevart-raq-form__address .form-row input.input-text,
.wpdevart-raq-form__address .form-row select {
	width: 100%;
}

.wpdevart-raq-form__error {
	display: block;
	color: var(--wpdevart-raq-q-error, #b32d2e);
	font-size: 0.9em;
}

.wpdevart-raq-form__error:empty {
	display: none;
}

.wpdevart-raq-form__field.is-invalid .wpdevart-raq-form__input,
.wpdevart-raq-form__field.is-invalid input.input-text,
.wpdevart-raq-form__field.is-invalid select,
.wpdevart-raq-form__input[aria-invalid="true"] {
	border-color: var(--wpdevart-raq-q-error, #b32d2e);
}

.wpdevart-raq-form__field.is-invalid .wpdevart-raq-form__label {
	color: var(--wpdevart-raq-q-error, #b32d2e);
}

/* Honeypot: off screen even when the inline style is stripped by a builder. */
.wpdevart-raq-form__hp {
	position: absolute !important;
	inset-inline-start: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.wpdevart-raq-form__message {
	margin: 0 0 1em;
}

.wpdevart-raq-form__message:empty {
	display: none;
}

.wpdevart-raq-form__message:focus {
	outline: none;
}

.wpdevart-raq-form__message.is-error {
	color: var(--wpdevart-raq-q-error, #b32d2e);
}

.wpdevart-raq-form__message.is-success {
	color: var(--wpdevart-raq-q-success, #1a7f37);
}

.wpdevart-raq-form__message ul {
	margin: 0.4em 0 0;
	padding-inline-start: 1.25em;
}

.wpdevart-raq-form__actions {
	margin: 0.5em 0 0;
}

.wpdevart-raq-form__submit {
	min-width: 12em;
}

.wpdevart-raq-form.is-busy .wpdevart-raq-form__submit {
	cursor: progress;
	opacity: 0.65;
}

/* ------------------------------------------------------------------ *
 * Confirmation
 * ------------------------------------------------------------------ */

.wpdevart-raq-received {
	margin: 0 0 2em;
	padding: 1.5em;
	border: 1px solid var(--wpdevart-raq-q-success, #1a7f37);
	border-inline-start-width: 4px;
	border-radius: var(--wpdevart-raq-q-radius, 6px);
}

.wpdevart-raq-received:focus {
	outline: none;
}

/* A heading (it opens the focused confirmation), sized like the old line. */
.wpdevart-raq-received .wpdevart-raq-received__number {
	margin: 0 0 0.5em;
	padding: 0;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.4;
}

.wpdevart-raq-received__text p:last-child {
	margin-block-end: 0;
}

.wpdevart-raq-received__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75em 1.25em;
	margin: 1.25em 0 0;
}

/* ------------------------------------------------------------------ *
 * My Account › Quotes
 * ------------------------------------------------------------------ */

.wpdevart-raq-account-quotes {
	margin: 0 0 2em;
}

.wpdevart-raq-account-quotes__status {
	display: inline-block;
	padding: 0.1em 0.6em;
	border: 1px solid rgba(128, 128, 128, 0.35);
	border-radius: 999px;
	font-size: 0.9em;
	white-space: nowrap;
}

.wpdevart-raq-account-quotes__status--sent {
	border-color: #2271b1;
	color: #2271b1;
}

.wpdevart-raq-account-quotes__status--accepted,
.wpdevart-raq-account-quotes__status--paid {
	border-color: #1a7f37;
	color: #1a7f37;
}

.wpdevart-raq-account-quotes__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
}

.wpdevart-raq-account-quotes__actions .button {
	margin: 0;
}

.wpdevart-raq-account-quotes__form {
	display: inline;
	margin: 0;
}

.wpdevart-raq-account-quote__back {
	margin: 1.5em 0 0;
}

/* ------------------------------------------------------------------ *
 * Narrow quote list: stacked rows with data-title labels
 *
 * Measured on the list's own box, so a narrow theme column stacks the rows
 * on a wide screen too. Browsers without container queries keep the table
 * inside its horizontal scroller.
 * ------------------------------------------------------------------ */

@container wpdevart-raq-list (max-width: 48em) {
	.wpdevart-raq-list__wrap {
		overflow-x: visible;
	}

	.wpdevart-raq-list__table,
	.wpdevart-raq-list__table tbody,
	.wpdevart-raq-list__table tr,
	.wpdevart-raq-list__table td {
		display: block;
		width: 100%;
	}

	.wpdevart-raq-list__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
	}

	.wpdevart-raq-list__row {
		position: relative;
		display: grid !important;
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 0.35em 0.9em;
		padding: 1em 0;
		border-block-end: 1px solid var(--wpdevart-raq-q-border);
	}

	.wpdevart-raq-list__table td {
		padding: 0;
		border: 0;
	}

	.wpdevart-raq-list__table td.wpdevart-raq-list__cell--thumb {
		grid-row: 1 / span 2;
		width: 64px;
		min-width: 0;
	}

	.wpdevart-raq-list__table td.wpdevart-raq-list__cell--product {
		min-width: 0;
		padding-inline-end: 2.5em;
	}

	.wpdevart-raq-list__table td.wpdevart-raq-list__cell--price,
	.wpdevart-raq-list__table td.wpdevart-raq-list__cell--qty,
	.wpdevart-raq-list__table td.wpdevart-raq-list__cell--note {
		grid-column: 2;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5em;
		width: auto;
		min-width: 0;
	}

	.wpdevart-raq-list__table td[data-title]::before {
		content: attr(data-title) ":";
		flex: 0 0 auto;
		font-size: 0.85em;
		font-weight: 600;
		opacity: 0.8;
	}

	.wpdevart-raq-list__table td.wpdevart-raq-list__cell--product::before {
		display: none;
	}

	.wpdevart-raq-list__table td.wpdevart-raq-list__cell--note {
		display: block;
	}

	.wpdevart-raq-list__table td.wpdevart-raq-list__cell--note::before {
		display: block;
		margin-block-end: 0.25em;
	}

	.wpdevart-raq-list__table td.wpdevart-raq-list__cell--remove {
		position: absolute;
		inset-block-start: 0.75em;
		inset-inline-end: 0;
		width: auto;
	}

	.wpdevart-raq-list__actions {
		justify-content: stretch;
	}

	.wpdevart-raq-list__actions .button {
		width: 100%;
		text-align: center;
	}
}

@container wpdevart-raq-list (max-width: 380px) {
	.wpdevart-raq-list__row {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 0.35em 0.7em;
	}

	.wpdevart-raq-list__table td.wpdevart-raq-list__cell--thumb,
	.wpdevart-raq-list__cell--thumb img {
		width: 48px;
		max-width: 48px;
	}
}

/* ------------------------------------------------------------------ *
 * Small screens
 * ------------------------------------------------------------------ */

@media (max-width: 600px) {
	.wpdevart-raq-form {
		padding: 1.1em;
	}

	.wpdevart-raq-form__fields,
	.wpdevart-raq-form__address {
		grid-template-columns: minmax(0, 1fr);
	}

	.wpdevart-raq-form__submit {
		width: 100%;
		min-width: 0;
	}

	.wpdevart-raq-account-quotes__actions {
		justify-content: flex-end;
	}
}

@media (max-width: 380px) {
	.wpdevart-raq-received,
	.wpdevart-raq-empty {
		padding: 1.1em;
	}
}

/* ------------------------------------------------------------------ *
 * Reduced motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.wpdevart-raq-list__row.is-busy {
		transition: none;
	}
}
