/**
 * WooCommerce Request a Quote from Cart - front end styles.
 */

.wcraq-form-wrapper {
	margin: 2.5em 0 0;
	padding: 1.6em;
	border: 1px solid rgba( 0, 0, 0, .1 );
	border-radius: 4px;
}

.wcraq-form-title {
	margin-top: 0;
}

.wcraq-form-description {
	margin-bottom: 1.4em;
}

.wcraq-form-cart-note {
	margin-bottom: 1.4em;
	font-size: .92em;
	opacity: .8;
}

.wcraq-form-fields {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -8px;
}

.wcraq-form-fields .wcraq-field {
	box-sizing: border-box;
	padding: 0 8px;
	margin-bottom: 1em;
	flex: 0 0 100%;
	max-width: 100%;
}

.wcraq-form-fields .wcraq-width-half {
	flex: 0 0 50%;
	max-width: 50%;
}

@media screen and ( max-width: 600px ) {
	.wcraq-form-fields .wcraq-width-half {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

.wcraq-form-fields label {
	display: block;
	margin-bottom: .3em;
	font-weight: 600;
}

.wcraq-form-fields input[type="text"],
.wcraq-form-fields input[type="email"],
.wcraq-form-fields input[type="tel"],
.wcraq-form-fields input[type="number"],
.wcraq-form-fields input[type="date"],
.wcraq-form-fields select,
.wcraq-form-fields textarea {
	width: 100%;
	box-sizing: border-box;
}

.wcraq-form-fields .wcraq-field-checkbox input {
	width: auto;
}

/*
 * A floor for themes that style no form fields of their own -- Twenty
 * Twenty-Five leaves them as the browser's thin default boxes. Inside
 * :where() these rules weigh nothing, so any theme that does style its fields
 * (Woodmart, Storefront) keeps its own look.
 */
.wcraq-form :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea) {
	padding: .65em .8em;
	border: 1px solid rgba(128, 128, 128, .45);
	border-radius: 4px;
	background-color: #fff;
	color: inherit;
	font: inherit;
	line-height: 1.4;
}

.wcraq-form :where(input, select, textarea):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

.wcraq-form-fields .wcraq-field-file input[type="file"] {
	width: 100%;
	box-sizing: border-box;
	padding: .5em;
	border: 1px dashed rgba(0, 0, 0, .25);
	border-radius: 3px;
	background: rgba(0, 0, 0, .02);
}

.wcraq-field-hint,
.wcraq-field-description {
	display: block;
	margin-top: .3em;
	font-size: .85em;
	opacity: .75;
}

.wcraq-field-description a {
	text-decoration: underline;
}

/* Set by the script once a conditional field's answer no longer applies. */
.wcraq-form-fields .wcraq-hidden {
	display: none;
}

.wcraq-field-error input,
.wcraq-field-error textarea,
.wcraq-field-error select {
	border-color: #b32d2e;
}

.wcraq-error-message {
	display: block;
	margin-top: .3em;
	color: #b32d2e;
	font-size: .9em;
}

/* Thumbnail left, the product's own lines stacked beside it. */
.wcraq-item-lines {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.wcraq-item-text {
	flex: 1 1 auto;
	min-width: 0;
}

.wcraq-item-thumb {
	flex: 0 0 auto;
	width: 46px;
	height: auto;
	border-radius: 3px;
}

.wcraq-attachments {
	margin: 0 0 1.5em;
	padding-left: 1.2em;
}

.wcraq-attachments .wcraq-attachment-size {
	opacity: .7;
	font-size: .9em;
}

/* The honeypot must stay in the DOM but never be visible. */
.wcraq-honeypot {
	position: absolute !important;
	left: -9999px !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.wcraq-form-submit {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * My account
 * ------------------------------------------------------------------ */

.wcraq-status {
	display: inline-block;
	padding: .2em .7em;
	border-radius: 999px;
	font-size: .85em;
	line-height: 1.6;
	white-space: nowrap;
	background: #eee;
	color: #333;
}

.wcraq-status--new { background: #fdf3d4; color: #7a5c00; }
.wcraq-status--progress { background: #efe6f7; color: #4d2d73; }
.wcraq-status--replied { background: #e0eefc; color: #12518b; }
.wcraq-status--issued { background: #d9f0fb; color: #0f6f96; }
.wcraq-status--accepted { background: #dcf3e6; color: #0a5c39; }
.wcraq-status--declined { background: #fbe3e3; color: #8a1f20; }
.wcraq-status--converted { background: #cfeddc; color: #05432a; }
.wcraq-status--expired,
.wcraq-status--cancelled { background: #ececec; color: #555; }

.wcraq-quote-view .wcraq-validity.wcraq-expired {
	color: #b32d2e;
	font-weight: 600;
}

.wcraq-quote-actions .button {
	margin-right: .5em;
}

/* The customer's actions are forms, each a single button, laid out in a row. */
.wcraq-quote-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	margin: 0 0 1.5em;
}

.wcraq-quote-actions form,
.wcraq-action-form {
	display: inline-block;
	margin: 0;
}

.wcraq-quote-actions form .button {
	margin-right: 0;
}

.wcraq-quote-table .wcraq-col-qty,
.wcraq-quote-table .wcraq-col-price,
.wcraq-quote-table .wcraq-col-total {
	text-align: right;
}

/* A long email or company name breaks rather than running off a phone; a
   price never does. */
.wcraq-request-fields th,
.wcraq-request-fields td,
.wcraq-quote-table td.wcraq-col-product {
	overflow-wrap: anywhere;
}

.wcraq-quote-table .wcraq-col-price,
.wcraq-quote-table .wcraq-col-total,
.wcraq-quote-table tfoot td {
	white-space: nowrap;
}

/*
 * On a phone the four columns do not fit: the totals were cut off on most
 * themes. Each line stacks instead, its figures labelled from data-title, the
 * way WooCommerce stacks its own cart. The emails never load this file.
 */
@media (max-width: 600px) {
	.wcraq-quote-view table.wcraq-quote-table,
	.wcraq-quote-view table.wcraq-quote-table tbody,
	.wcraq-quote-view table.wcraq-quote-table tfoot {
		display: block;
		width: 100%;
	}

	.wcraq-quote-view table.wcraq-quote-table thead {
		display: none;
	}

	.wcraq-quote-view table.wcraq-quote-table tbody tr {
		display: block;
		border-bottom: 1px solid rgba(128, 128, 128, .25);
		padding: .5em 0;
	}

	.wcraq-quote-view table.wcraq-quote-table tbody td {
		display: block;
		width: auto;
		border: 0;
		padding: .25em .5em;
		text-align: right;
	}

	.wcraq-quote-view table.wcraq-quote-table tbody td.wcraq-col-product {
		text-align: left;
	}

	.wcraq-quote-view table.wcraq-quote-table tbody td[data-title]::before {
		content: attr(data-title);
		float: left;
		font-weight: 600;
		padding-right: 1em;
	}

	.wcraq-quote-view table.wcraq-quote-table tfoot tr {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1em;
		border-bottom: 1px solid rgba(128, 128, 128, .25);
	}

	.wcraq-quote-view table.wcraq-quote-table tfoot th,
	.wcraq-quote-view table.wcraq-quote-table tfoot td {
		display: block;
		border: 0;
		padding: .5em;
	}

	.wcraq-quote-view table.wcraq-quote-table tfoot th {
		text-align: left;
	}

	.wcraq-quote-view table.wcraq-quote-table tfoot td {
		text-align: right;
		white-space: nowrap;
	}
}

/*
 * My account's list stacks like WooCommerce's own orders table, at the same
 * width and with the same "label:" lines -- for the themes that do not load
 * WooCommerce's small-screen sheet (OceanWP), where it ran off the phone.
 */
@media (max-width: 768px) {
	table.wcraq-quotes-table thead {
		display: none;
	}

	table.wcraq-quotes-table,
	table.wcraq-quotes-table tbody,
	table.wcraq-quotes-table tr,
	table.wcraq-quotes-table td {
		display: block;
		width: auto;
	}

	table.wcraq-quotes-table tr td {
		text-align: right;
	}

	table.wcraq-quotes-table tr td[data-title]::before {
		content: attr(data-title) ": ";
		float: left;
		font-weight: 700;
	}
}

.wcraq-quote-table .wcraq-item-meta {
	margin: .4em 0 0;
	padding: 0;
	list-style: none;
	font-size: .88em;
	opacity: .8;
}

.wcraq-history {
	margin: 0 0 1.5em;
	padding: 0;
	list-style: none;
	border-left: 2px solid rgba( 0, 0, 0, .1 );
}

.wcraq-history-item {
	position: relative;
	padding: .4em 0 .9em 1.2em;
}

.wcraq-history-item:before {
	content: "";
	position: absolute;
	left: -5px;
	top: .9em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #7f54b3;
}

.wcraq-history-date {
	display: inline-block;
	margin-left: .6em;
	font-size: .88em;
	opacity: .7;
}

.wcraq-history-note {
	display: block;
	margin-top: .2em;
	font-size: .92em;
}

.wcraq-status--changes { background: #fdecd9; color: #7a3d00; }

/* ---------------------------------------------------------------------
 * Request changes
 * ------------------------------------------------------------------ */

.wcraq-request-changes {
	margin: 0 0 1.5em;
}

.wcraq-changes-details > summary {
	cursor: pointer;
	list-style: none;
}

.wcraq-changes-details > summary::-webkit-details-marker {
	display: none;
}

.wcraq-changes-form {
	margin-top: 1em;
	padding: 1em 1.2em;
	border: 1px solid rgba( 0, 0, 0, .1 );
	border-radius: 4px;
}

.wcraq-changes-topics {
	display: flex;
	flex-wrap: wrap;
	gap: .4em 1.2em;
	margin: 0 0 1em;
	padding: 0;
	border: 0;
}

.wcraq-changes-topic {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-weight: normal;
}

.wcraq-changes-form textarea {
	width: 100%;
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
 * Quote list
 * ------------------------------------------------------------------ */

.wcraq-add-to-quote {
	margin-left: .5em;
}

.wcraq-quote-list {
	margin: 0 0 1.5em;
}

/*
 * Laid out as WooCommerce's cart table, with the cart's own column classes,
 * so most of its look comes from the theme. What follows only fills in what
 * a theme gives a cart's link but not this list's button, and keeps cells
 * table cells: a cell made a flex box drops out of the row and its border
 * no longer lines up with the others.
 */
.wcraq-quote-list-table {
	width: 100%;
}

.wcraq-quote-list-table td,
.wcraq-quote-list-table th {
	vertical-align: middle;
}

.wcraq-quote-list-table .product-remove {
	width: 2.5em;
	text-align: center;
}

.wcraq-quote-list-table .product-thumbnail {
	width: 90px;
}

.wcraq-quote-list-table .product-thumbnail img {
	display: block;
	width: 70px;
	max-width: none;
	height: auto;
}

/* As a theme's cart shows it: the name in the text colour. */
.wcraq-quote-list-table td.product-name a {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.wcraq-quote-list-table td.product-name a:hover {
	text-decoration: underline;
}

.wcraq-quote-list-table th.product-quantity {
	width: 1%;
	white-space: nowrap;
}

.wcraq-quote-list-table .product-name dl.variation {
	margin: .4em 0 0;
	font-size: .9em;
	opacity: .8;
}

/* Floors only: a theme that draws its own quantity control (Blocksy pads the
   input for its +/- buttons) must win, or the number has no room left. */
:where(.wcraq-quote-list-table .product-quantity) .quantity {
	margin: 0;
}

:where(.wcraq-quote-list-table .product-quantity input.qty) {
	width: 4.5em;
}

.wcraq-quote-list-table .product-quantity :where(input.qty) {
	padding: .5em .4em;
	border: 1px solid rgba(128, 128, 128, .45);
	border-radius: 4px;
	font: inherit;
	text-align: center;
}


/* The cart's remove link, as a button of the request form. */
.wcraq-quote-list-table .wcraq-list-remove-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: inherit;
	opacity: .6;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
}

.wcraq-quote-list-table .wcraq-list-remove-button:hover,
.wcraq-quote-list-table .wcraq-list-remove-button:focus-visible {
	background: #b32d2e;
	color: #fff;
	opacity: 1;
}

.wcraq-quote-list-table td.actions {
	text-align: right;
}

/*
 * On a phone each line becomes a card, the way a theme's cart does it: the
 * picture on the left, the name and the remove button beside it, then the
 * quantity as a labelled row. Done here rather than left to the theme, since
 * many themes only lay out their own cart form that way and would leave this
 * table running off the side of the screen; and weighted to outrank
 * WooCommerce's own small-screen table rules, which right-align every cell,
 * stripe the rows and put "label:" even before the picture.
 */
@media (max-width: 768px) {
	.wcraq-quote-list table.wcraq-quote-list-table.shop_table_responsive,
	.wcraq-quote-list table.wcraq-quote-list-table.shop_table_responsive tbody {
		display: block;
		width: 100%;
		border: 0;
	}

	.wcraq-quote-list table.wcraq-quote-list-table.shop_table_responsive thead {
		display: none;
	}

	.wcraq-quote-list table.wcraq-quote-list-table.shop_table_responsive tr.wcraq-list-item {
		display: grid;
		grid-template-columns: 76px minmax(0, 1fr) auto;
		column-gap: 14px;
		align-items: center;
		padding: 16px 0;
		border-bottom: 1px solid rgba(128, 128, 128, .25);
	}

	.wcraq-quote-list table.wcraq-quote-list-table.shop_table_responsive tr td {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
		/* WooCommerce's own rules set both with !important. */
		background: transparent !important;
		text-align: left !important;
	}

	.wcraq-quote-list table.wcraq-quote-list-table.shop_table_responsive tr td::before {
		content: none;
	}

	.wcraq-quote-list table.wcraq-quote-list-table.shop_table_responsive tr td.product-thumbnail {
		display: block;
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: start;
	}

	.wcraq-quote-list table.wcraq-quote-list-table.shop_table_responsive .product-thumbnail img {
		width: 76px;
	}

	.wcraq-quote-list table.wcraq-quote-list-table.shop_table_responsive tr td.product-name {
		grid-column: 2;
		grid-row: 1;
		padding-bottom: 6px;
	}

	.wcraq-quote-list table.wcraq-quote-list-table.shop_table_responsive tr td.product-remove {
		grid-column: 3;
		grid-row: 1;
		align-self: start;
	}

	.wcraq-quote-list table.wcraq-quote-list-table.shop_table_responsive tr td.product-quantity {
		grid-column: 2 / span 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		min-height: 38px;
		border-top: 1px dashed rgba(128, 128, 128, .2);
		text-align: right;
	}

	.wcraq-quote-list table.wcraq-quote-list-table.shop_table_responsive tr td.product-quantity::before {
		content: attr(data-title);
		float: none;
		font-weight: 400;
		opacity: .75;
		text-align: left;
	}

	.wcraq-quote-list table.wcraq-quote-list-table.shop_table_responsive tr td.product-name::before {
		content: none;
	}

	.wcraq-quote-list table.wcraq-quote-list-table.shop_table_responsive tr.wcraq-quote-list-actions-row {
		display: block;
	}

	.wcraq-quote-list table.wcraq-quote-list-table.shop_table_responsive td.actions {
		display: block;
		padding: 14px 0 0;
		text-align: center;
	}

	.wcraq-quote-list table.wcraq-quote-list-table.shop_table_responsive td.actions::before {
		content: none;
	}

	.wcraq-quote-list table.wcraq-quote-list-table.shop_table_responsive .wcraq-list-update {
		width: 100%;
	}
}

.wcraq-price-on-request {
	font-style: italic;
}

.wcraq-captcha {
	margin: 0 0 1em;
}

/* Optional and alternative lines: a line left out stays on the page, greyed. */
.wcraq-quote-table .wcraq-line-off .wcraq-col-price,
.wcraq-quote-table .wcraq-line-off .wcraq-col-total {
	text-decoration: line-through;
	opacity: 0.55;
}

.wcraq-quote-table .wcraq-line-off .wcraq-col-product {
	opacity: 0.75;
}

.wcraq-line-choice {
	opacity: 0.8;
}

.wcraq-line-pick {
	cursor: pointer;
}

.wcraq-quote-table .wcraq-line-pick-input {
	margin: 0 0.5em 0 0;
	vertical-align: middle;
}

.wcraq-choice-form.wcraq-choice-changed .wcraq-choice-save {
	font-weight: 700;
}

/* Signature on acceptance. */
.wcraq-quote-actions .wcraq-accept-form--sign {
	flex-basis: 100%;
}

.wcraq-signature-fields {
	margin: 0 0 1em;
}

.wcraq-signature-pad-wrap {
	margin: 0 0 1em;
}

.wcraq-signature-label {
	display: block;
	margin-bottom: 0.3em;
}

.wcraq-signature-pad {
	display: block;
	width: 100%;
	max-width: 600px;
	height: auto;
	aspect-ratio: 600 / 180;
	border: 1px dashed currentColor;
	border-radius: 4px;
	background: #fff;
	touch-action: none;
	cursor: crosshair;
	margin-bottom: 0.5em;
}

.wcraq-signature-image {
	display: block;
	max-width: 300px;
	max-height: 100px;
	height: auto;
	background: #fff;
}

.wcraq-signature {
	margin: 1em 0;
}

/* Messages between the customer and the shop. */
.wcraq-messages {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
}

.wcraq-message {
	margin: 0 0 0.75em;
	padding: 0.75em 1em;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.04);
	max-width: 85%;
}

.wcraq-message--customer {
	margin-left: auto;
	background: rgba(34, 113, 177, 0.08);
}

.wcraq-message-text p {
	margin: 0 0 0.5em;
}

.wcraq-message-meta {
	margin: 0;
	font-size: 0.85em;
	opacity: 0.75;
}

.wcraq-message-form textarea {
	width: 100%;
}