/**
 * WpDevArt: Request a Quote & Quote-to-Order for WooCommerce: buttons,
 * standalone control, login link, toast and live region.
 *
 * Buttons inherit the theme's button styling ("button wp-element-button").
 * With custom colors on, core prints --wpdevart-raq-btn-bg and
 * --wpdevart-raq-btn-color and the buttons carry .wpdevart-raq-btn--custom.
 */

/* ------------------------------------------------------------------------ *
 * Button
 * ------------------------------------------------------------------------ */

.wpdevart-raq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	max-width: 100%;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	overflow-wrap: anywhere;
	box-sizing: border-box;
	transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.wpdevart-raq-btn__label {
	display: inline-block;
}

/* Custom colors (core's custom properties; theme styling otherwise). */
html body .wpdevart-raq-btn.wpdevart-raq-btn--custom,
html body .woocommerce .wpdevart-raq-btn.wpdevart-raq-btn--custom,
html body .woocommerce div.product form.cart .wpdevart-raq-btn.wpdevart-raq-btn--custom {
	background-color: var(--wpdevart-raq-btn-bg, #1e2430);
	border-color: var(--wpdevart-raq-btn-bg, #1e2430);
	color: var(--wpdevart-raq-btn-color, #ffffff);
}

html body .wpdevart-raq-btn.wpdevart-raq-btn--custom:hover,
html body .wpdevart-raq-btn.wpdevart-raq-btn--custom:focus-visible,
html body .woocommerce .wpdevart-raq-btn.wpdevart-raq-btn--custom:hover,
html body .woocommerce .wpdevart-raq-btn.wpdevart-raq-btn--custom:focus-visible {
	background-color: var(--wpdevart-raq-btn-bg, #1e2430);
	color: var(--wpdevart-raq-btn-color, #ffffff);
	opacity: 0.88;
}

/* Text link style. */
html body .wpdevart-raq-btn.wpdevart-raq-btn--link,
html body .woocommerce .wpdevart-raq-btn.wpdevart-raq-btn--link {
	display: inline;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	min-height: 0;
}

html body .wpdevart-raq-btn.wpdevart-raq-btn--link.wpdevart-raq-btn--custom {
	background: none;
	color: var(--wpdevart-raq-btn-bg, #1e2430);
}

html body .wpdevart-raq-btn.wpdevart-raq-btn--link:hover,
html body .wpdevart-raq-btn.wpdevart-raq-btn--link:focus-visible {
	background: none;
	text-decoration-thickness: 2px;
}

/* Focus: always visible, also where themes remove outlines. */
.wpdevart-raq-btn:focus-visible,
.wpdevart-raq-login:focus-visible,
.wpdevart-raq-toast__close:focus-visible,
.wpdevart-raq-toast__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* States. */
.wpdevart-raq-btn.is-loading {
	opacity: 0.65;
	cursor: progress;
	pointer-events: none;
}

.wpdevart-raq-btn.is-loading .wpdevart-raq-btn__label::after {
	content: "";
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-inline-start: 0.5em;
	vertical-align: -0.1em;
	border: 2px solid currentColor;
	border-inline-end-color: transparent;
	border-radius: 50%;
	animation: wpdevart-raq-spin 0.7s linear infinite;
}

.wpdevart-raq-btn.is-disabled,
.wpdevart-raq-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

.wpdevart-raq-btn.is-added .wpdevart-raq-btn__label::before {
	content: "\2713";
	display: inline-block;
	margin-inline-end: 0.35em;
	font-weight: 700;
}

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

@keyframes wpdevart-raq-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpdevart-raq-btn,
	.wpdevart-raq-toast {
		transition: none;
	}

	.wpdevart-raq-btn.is-loading .wpdevart-raq-btn__label::after {
		animation-duration: 2s;
	}
}

/* ------------------------------------------------------------------------ *
 * Placements
 * ------------------------------------------------------------------------ */

/*
 * In-form button (classic and block Add to cart forms). No block margin: the
 * button sits on the line of Add to cart, whose height it copies (themes size
 * .single_add_to_cart_button with their own padding; the frontend script
 * mirrors it, see matchCartButtons()).
 */
.wpdevart-raq-in-form {
	display: inline-flex;
	vertical-align: middle;
	margin-inline-start: 0.5em;
	max-width: 100%;
}

.woocommerce div.product form.cart .wpdevart-raq-in-form {
	margin-block: 0;
}

/* Block themes lay the form out as a grid: the button gets a row of its own,
   aligned with the start of the form (under the quantity), not indented. */
.wp-block-add-to-cart-form form.cart .wpdevart-raq-in-form,
.woocommerce div.product .wp-block-add-to-cart-form form.cart .wpdevart-raq-in-form,
.wp-block-woocommerce-add-to-cart-with-options .wpdevart-raq-in-form,
.woocommerce div.product .wp-block-woocommerce-add-to-cart-with-options .wpdevart-raq-in-form {
	margin-block: 0.5em 0;
	margin-inline-start: 0;
}

/* The row's gap is the only space above the button: like Add to cart, it has
   no margin and centres its label. WooCommerce's Twenty Twenty-Three styles
   give every ".woocommerce a.button" display: inline-block and a 1rem top
   margin, which woocommerce-blocktheme.css takes back for Add to cart only.
   The frontend script gives the button Add to cart's height as min-height
   (the grid stretches Add to cart to the quantity field's height). */
.wp-block-add-to-cart-form form.cart .wpdevart-raq-in-form .wpdevart-raq-btn:not(.wpdevart-raq-btn--link),
.woocommerce div.product .wp-block-add-to-cart-form form.cart .wpdevart-raq-in-form .wpdevart-raq-btn:not(.wpdevart-raq-btn--link),
.wp-block-woocommerce-add-to-cart-with-options .wpdevart-raq-in-form .wpdevart-raq-btn:not(.wpdevart-raq-btn--link),
.woocommerce div.product .wp-block-woocommerce-add-to-cart-with-options .wpdevart-raq-in-form .wpdevart-raq-btn:not(.wpdevart-raq-btn--link) {
	display: inline-flex;
	margin-block: 0;
}

.wpdevart-raq-variation-control {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
}

.wpdevart-raq-variation-control .wpdevart-raq-in-form {
	margin: 0;
}

/* Loop row (shop, category, related, upsells, Product Collection). */
.wpdevart-raq-loop {
	display: block;
	margin-top: 0.5em;
	width: 100%;
}

.wpdevart-raq-loop .wpdevart-raq-btn {
	margin: 0;
}

.wp-block-button.wpdevart-raq-loop-instead {
	display: block;
}

/* Block themes: the "instead" wrapper mirrors the Product Button block
   (WPDEVART_RAQ_Buttons::block_instead_html()), whose own stylesheet makes it
   a flex column aligned like the block. */
.wp-block-button.wc-block-components-product-button.wpdevart-raq-loop-instead {
	display: flex;
}

/* Standalone control: quantity + button, or the grouped table. */
.wpdevart-raq-control {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin: 1em 0;
	max-width: 100%;
	box-sizing: border-box;
}

.wpdevart-raq-control .quantity {
	display: inline-flex;
	margin: 0;
}

.wpdevart-raq-control .quantity .qty {
	width: 4.5em;
	min-height: 2.5em;
	text-align: center;
}

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

.wpdevart-raq-control .wpdevart-raq-btn {
	margin: 0;
}

.wpdevart-raq-control--grouped {
	flex-direction: column;
	align-items: stretch;
}

.wpdevart-raq-control--grouped > .wpdevart-raq-btn {
	align-self: flex-start;
}

.wpdevart-raq-grouped {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.wpdevart-raq-grouped td {
	padding: 0.5em;
	vertical-align: middle;
	border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}

.wpdevart-raq-grouped__qty {
	width: 6em;
}

.wpdevart-raq-grouped__price {
	text-align: end;
	white-space: nowrap;
}

/* Login link. */
.wpdevart-raq-login {
	display: inline-block;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.wpdevart-raq-in-form .wpdevart-raq-login,
.wpdevart-raq-loop .wpdevart-raq-login {
	padding: 0.4em 0;
}

/* ------------------------------------------------------------------------ *
 * Themes whose loop buttons overlay the product image
 *
 * Body class wpdevart-raq-overlay-theme (WPDEVART_RAQ_Buttons::body_class():
 * Flower Shop Florist, Handyman WDA). Their stylesheet positions every
 * .button of a product card absolutely, centred in one spot over the image
 * (left: 50%; translateX(-50%)), and reveals it on hover, so the quote button
 * landed on top of Add to cart and hid it. It also sizes buttons as content
 * boxes with a min-width, so the border-box quote button came out narrower
 * and the edges of Add to cart showed around it (the double border).
 * ------------------------------------------------------------------------ */

/* Same box model as the theme's buttons: same width as Add to cart. */
.wpdevart-raq-overlay-theme ul.products li.product .wpdevart-raq-btn.button {
	box-sizing: content-box;
}

/* Beside Add to cart: one button height (its own) plus a small gap below it,
   in the same overlay. */
.wpdevart-raq-overlay-theme ul.products li.product .wpdevart-raq-loop .wpdevart-raq-btn.button {
	transform: translate(-50%, calc(100% + 0.5rem));
}

/* Keyboard: focus inside a product card reveals its buttons as the theme's
   hover does (same spot), so Tab reaches Add to cart and the quote button;
   hidden, they could not take focus at all. */
.wpdevart-raq-overlay-theme ul.products li.product:focus-within .button {
	opacity: 1;
	visibility: visible;
	top: 32%;
}

/* Single product: these themes give the Add to cart line a fixed height;
   centre the label in it as the theme's <button> does. */
.wpdevart-raq-overlay-theme div.product form.cart .wpdevart-raq-btn.button {
	display: inline-flex;
}

/* They float the quantity and Add to cart, so a quote button that does not
   fit beside them starts its line flush under them (a top margin is absorbed
   there). The frontend script marks it (is-wrapped, matchCartButtons()): a
   line of its own without the side-by-side indent, and a gap above it made
   of padding. */
.wpdevart-raq-overlay-theme div.product form.cart .wpdevart-raq-in-form.is-wrapped {
	display: flex;
	width: 100%;
	margin-inline-start: 0;
	padding-top: 0.5em;
}

/* ------------------------------------------------------------------------ *
 * Toast and live region
 * ------------------------------------------------------------------------ */

.wpdevart-raq-toasts {
	position: fixed;
	z-index: 100000;
	inset-inline-end: 1rem;
	bottom: 1rem;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
	max-width: calc(100vw - 2rem);
	pointer-events: none;
}

.wpdevart-raq-toast {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em 0.5em;
	max-width: 26rem;
	padding: 0.75rem 2.5rem 0.75rem 1rem;
	position: relative;
	border-radius: 6px;
	background: #1e2430;
	color: #ffffff;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
	font-size: 0.9375rem;
	line-height: 1.4;
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: auto;
	box-sizing: border-box;
}

.wpdevart-raq-toast.is-visible {
	opacity: 1;
	transform: none;
}

.wpdevart-raq-toast--error {
	background: #8a1f11;
}

.wpdevart-raq-toast__message {
	flex: 1 1 auto;
	min-width: 0;
}

.wpdevart-raq-toast .wpdevart-raq-toast__link,
.wpdevart-raq-toast .wpdevart-raq-toast__link:visited,
.wpdevart-raq-toast .wpdevart-raq-toast__link:hover {
	color: #ffffff;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.wpdevart-raq-toast .wpdevart-raq-toast__close {
	position: absolute;
	top: 0.35rem;
	inset-inline-end: 0.35rem;
	width: 1.75rem;
	height: 1.75rem;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
}

.wpdevart-raq-toast .wpdevart-raq-toast__close:hover {
	background: rgba(255, 255, 255, 0.15);
}

.wpdevart-raq-live {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------------ *
 * RTL (logical properties cover most rules)
 * ------------------------------------------------------------------------ */

.rtl .wpdevart-raq-toast {
	padding: 0.75rem 1rem 0.75rem 2.5rem;
}

.rtl .wpdevart-raq-toasts {
	align-items: flex-start;
}

/* ------------------------------------------------------------------------ *
 * Small screens (360 px)
 * ------------------------------------------------------------------------ */

@media (max-width: 480px) {
	.wpdevart-raq-in-form {
		display: flex;
		margin-inline-start: 0;
		margin-top: 0.5em;
		width: 100%;
	}

	.wpdevart-raq-in-form .wpdevart-raq-btn:not(.wpdevart-raq-btn--link),
	.wpdevart-raq-control--simple .wpdevart-raq-btn:not(.wpdevart-raq-btn--link) {
		flex: 1 1 auto;
	}

	.wpdevart-raq-control--grouped > .wpdevart-raq-btn:not(.wpdevart-raq-btn--link) {
		align-self: stretch;
	}

	/* Themes whose loop buttons overlay the image: the button's line of its
	   own starts under the floated quantity and Add to cart, so the gap above
	   it is padding (also before the script has marked it is-wrapped). */
	.wpdevart-raq-overlay-theme div.product form.cart .wpdevart-raq-in-form {
		padding-top: 0.5em;
	}

	.wpdevart-raq-grouped td {
		padding: 0.4em 0.25em;
	}

	.wpdevart-raq-toasts {
		inset-inline: 0.5rem;
		bottom: 0.5rem;
		align-items: stretch;
		max-width: none;
	}

	.wpdevart-raq-toast {
		max-width: none;
	}
}