/**
 * Cart quote panel styles + the §6 CSS fallback for monetary surfaces on
 * the cart page (the PHP filters are primary; this is defense in depth).
 */

.rqw-quote-panel {
	margin-top: 2em;
	padding: 1.5em;
	/* currentColor keeps the frame legible on dark themes, where a fixed
	   #ddd disappeared or glared (v1.4.0). */
	border: 1px solid currentColor;
	border-color: rgba(125, 125, 125, 0.35);
	border-radius: 6px;
}

.rqw-quote-panel h2 {
	margin-top: 0;
}

/* v1.4.0: the panel owns its own vertical rhythm. Every field is a <p>, so
   the spacing used to come entirely from the theme — flush together under a
   block theme with `p { margin: 0 }`, and airy and inconsistent under a theme
   with large paragraph margins. Scoped to the id so a theme's `.entry-content
   p` cannot outrank it, the same narrowly-defensive pattern used for the
   SelectWoo rule below. */
#rqw-quote-panel .rqw-field,
#rqw-quote-panel .rqw-quote-panel__dates,
#rqw-quote-panel .rqw-quote-panel__customer,
#rqw-quote-panel .rqw-quote-panel__action,
#rqw-quote-panel .rqw-quote-panel__unavailable {
	margin: 0 0 1.15em;
}

#rqw-quote-panel .rqw-quote-panel__action {
	margin-bottom: 0;
}

.rqw-quote-panel__dates,
.rqw-quote-panel__customer {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

/* Every row shares one column model, so the date pair lines up with the
   name/phone pair and with the full-width store field (v1.4.0). The basis is
   a min() so a 320px viewport and a 400% zoom never overflow the page. */
.rqw-quote-panel__dates .rqw-field,
.rqw-quote-panel__customer .rqw-field {
	flex: 1 1 min(220px, 100%);
	min-width: 0;
}

.rqw-field {
	display: block;
}

.rqw-field input[type="text"],
.rqw-field input[type="tel"] {
	width: 100%;
}

@media (max-width: 600px) {
	.rqw-quote-panel__dates,
	.rqw-quote-panel__customer {
		display: block;
	}

	#rqw-quote-panel .rqw-quote-panel__dates .rqw-field + .rqw-field,
	#rqw-quote-panel .rqw-quote-panel__customer .rqw-field + .rqw-field {
		margin-top: 1.15em;
	}
}

.rqw-field label {
	display: block;
	margin-bottom: 0.3em;
	font-weight: 600;
}

.rqw-field input[type="date"],
.rqw-field select {
	width: 100%;
}

/* A control below 16px makes iOS Safari zoom the whole page on focus and
   never zoom back out (v1.4.0). */
#rqw-quote-panel .rqw-field input,
#rqw-quote-panel .rqw-field select {
	max-width: 100%;
	font-size: max(1rem, 16px);
	line-height: 1.4;
}

/* The panel's own controls get a visible focus ring even under themes that
   remove outlines globally (v1.4.0). */
#rqw-quote-panel .rqw-field input:focus-visible,
#rqw-quote-panel .rqw-field select:focus-visible,
#rqw-quote-panel .select2-selection:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

.rqw-optional {
	font-weight: 400;
	/* Opacity on inherited text can drop below 4.5:1; a fixed muted colour
	   is predictable (v1.4.0). */
	color: #595959;
}

/* Validation (v1.4.0). The message itself is the signal — colour is only a
   reinforcement — and it is wired to its field with aria-describedby. */
.rqw-field__error {
	display: block;
	margin-top: 0.35em;
	color: #a4262c;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.35;
}

.rqw-field__error[hidden] {
	display: none;
}

#rqw-quote-panel .rqw-field input[aria-invalid="true"],
#rqw-quote-panel .rqw-field select[aria-invalid="true"] {
	border: 1px solid #a4262c;
	box-shadow: 0 0 0 1px #a4262c;
}

/* SelectWoo's generated combobox is the store control customers actually see
   and operate, so it carries the invalid state too (v1.4.0). */
#rqw-quote-panel .select2-selection[aria-invalid="true"] {
	border-color: #a4262c;
	box-shadow: 0 0 0 1px #a4262c;
}

.rqw-quote-panel__unavailable,
.rqw-quote-panel__noscript {
	font-weight: 600;
}

/* Present for assistive technology only: the polite status region that speaks
   newly shown validation messages (v1.4.0). Scoped to the panel id so a
   theme's own utility class of the same shape can never unhide it. */
#rqw-quote-panel .rqw-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The persistent CTA hint (v1.4.0). The outer span is the stable
   aria-describedby target and has no box of its own; only the inner text is
   shown or hidden. */
.rqw-quote-panel__hint {
	display: block;
}

.rqw-quote-panel__hint-text {
	display: block;
	margin-top: 0.6em;
	color: #595959;
	font-size: 0.9em;
	line-height: 1.35;
}

.rqw-quote-panel__hint-text[hidden] {
	display: none;
}

/* The cart changed after the quote was rendered (v1.4.0, §39): the notice and
   its reload button. Only spacing and a non-colour marker; the button keeps
   the theme's own button styling. */
#rqw-quote-panel .rqw-quote-panel__stale {
	margin: 0 0 1.15em;
	padding-left: 0.75em;
	border-left: 3px solid #a4262c;
}

#rqw-quote-panel .rqw-quote-panel__stale[hidden] {
	display: none;
}

#rqw-quote-panel .rqw-quote-panel__stale-text {
	margin: 0 0 0.6em;
	font-weight: 600;
}

/* v1.2.1 defensive rule: SelectWoo moves the native <select> out of view by
   adding .select2-hidden-accessible, but that class is only STYLED by
   WooCommerce's select2.css. When a theme or optimizer drops that stylesheet
   the native control renders full-size under the generated one, so the store
   picker looks duplicated. This narrowly scoped copy of the standard
   accessible-hidden pattern keeps the native select in the DOM (SelectWoo and
   normal form behavior need it) while guaranteeing it is never visible. */
#rqw-store.select2-hidden-accessible {
	border: 0 !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}

/* Customer UX phase: the configurable WhatsApp CTA. The six custom
   properties are set (sanitized) as an inline style by the plugin; these
   declarations are the fallback defaults. Theme-independent by design —
   no dependency on theme button classes. */
.rqw-whatsapp-button {
	--rqw-button-bg: #25d366;
	--rqw-button-text: #ffffff;
	--rqw-button-icon: #ffffff;
	--rqw-button-bg-hover: #1da851;
	--rqw-button-text-hover: #ffffff;
	--rqw-button-icon-hover: #ffffff;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	max-width: 100%;
	padding: 0.9em 1.6em;
	border: 0;
	border-radius: 6px;
	background: var(--rqw-button-bg);
	color: var(--rqw-button-text);
	font-size: 1.05em;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.rqw-whatsapp-button:hover,
.rqw-whatsapp-button:focus,
.rqw-whatsapp-button:focus-visible {
	background: var(--rqw-button-bg-hover);
	color: var(--rqw-button-text-hover);
	text-decoration: none;
}

.rqw-whatsapp-button:focus-visible {
	outline: 2px solid var(--rqw-button-bg-hover);
	outline-offset: 2px;
}

.rqw-whatsapp-button__icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--rqw-button-icon);
}

.rqw-whatsapp-button__icon svg {
	display: block;
	width: 1.4em;
	height: 1.4em;
}

.rqw-whatsapp-button:hover .rqw-whatsapp-button__icon,
.rqw-whatsapp-button:focus .rqw-whatsapp-button__icon,
.rqw-whatsapp-button:focus-visible .rqw-whatsapp-button__icon {
	color: var(--rqw-button-icon-hover);
}

.rqw-whatsapp-button__text {
	min-width: 0;
	/* A long store name wraps instead of pushing the button off the page
	   (v1.4.0); a single unbroken word breaks rather than overflowing. */
	overflow-wrap: break-word;
}

@media (max-width: 480px) {
	.rqw-whatsapp-button {
		width: 100%;
	}
}

/* Disabled/unavailable (v1.4.0). Half-opacity white-on-green composited to
   roughly 1.4:1 — the default page-load state read as broken rather than as
   not-ready. The disabled state now has its own neutral pair instead, which
   also settles the hover problem: the operator's brand colours are untouched
   in the ENABLED state, which is the one they chose them for.

   The colours are literal, not the custom properties, because those arrive
   as an inline style and would outrank anything declared here. */
.rqw-whatsapp-button[aria-disabled="true"],
.rqw-whatsapp-button[aria-disabled="true"]:hover,
.rqw-whatsapp-button[aria-disabled="true"]:focus,
.rqw-whatsapp-button[aria-disabled="true"]:focus-visible {
	background: #e6e6e6;
	color: #4a4a4a;
	opacity: 1;
	cursor: not-allowed;
	pointer-events: auto;
}

.rqw-whatsapp-button[aria-disabled="true"] .rqw-whatsapp-button__icon {
	color: #4a4a4a;
}

/* Focusable while disabled (role="link" + tabindex), so it still needs a ring
   — in a neutral colour, not the live brand colour. */
.rqw-whatsapp-button[aria-disabled="true"]:focus-visible {
	outline: 2px solid #4a4a4a;
	outline-offset: 2px;
}

/* §6 CSS fallback: cart-page monetary surfaces stay hidden even if a theme
   re-adds markup around the emptied PHP filter output. The shipping estimator
   and the checkout button joined the list in v1.4.4: the PHP side already
   switches both off (RQW_Catalog::off on woocommerce_cart_ready_to_calc_shipping,
   and §7 blocks the route), but a theme that prints the estimator OUTSIDE
   .cart_totals — Avada moves it into its own .shipping-coupon wrapper — would
   otherwise have escaped this net. */
.woocommerce-cart .cart_totals,
.woocommerce-cart .product-price,
.woocommerce-cart .product-subtotal,
.woocommerce-cart .coupon,
.woocommerce-cart .wc-proceed-to-checkout,
.woocommerce-cart .woocommerce-shipping-calculator,
.woocommerce-cart .shipping-calculator-form,
.woocommerce-cart .checkout-button {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * v1.4.4 (§39): classic-cart polish.
 *
 * RQW empties the price and subtotal cells (RQW_Catalog::blank) and removes
 * the totals block (RQW_Catalog::suppress_cart_totals), which leaves the
 * generic shop cart looking half-abandoned: the width freed by the two hidden
 * columns is handed to the quantity column (384px of it at a 1024px viewport,
 * around a 110px control), rows keep whatever fixed height the theme pinned
 * them to (140px under Avada), thumbnails keep their catalog size, and the
 * quote panel floats 62px below the table it belongs to.
 *
 * CSS only: no template replacement, no cart engine, no theme fork. Every
 * selector below names ONLY classes that WooCommerce's own cart template
 * (templates/cart/cart.php: remove, thumbnail, name, price, quantity,
 * subtotal) and Avada's override (Avada/woocommerce/cart/cart.php: name with
 * the thumbnail inside it, price, quantity, subtotal, remove) BOTH emit —
 * .woocommerce-cart-form, .woocommerce-cart-form__contents,
 * .woocommerce-cart-form__cart-item, .product-name, .product-quantity,
 * .product-remove, .product-thumbnail, a.remove and .cart-collaterals — so
 * the two column orders are handled by one rule set. Avada's own wrappers
 * (.woocommerce-content-box, .fusion-product-name-wrapper, .product-info),
 * the ± quantity control and td.actions are deliberately NOT named: their
 * appearance stays the theme's.
 *
 * The selectors are long on purpose. This stylesheet is enqueued on
 * wp_enqueue_scripts at priority 20 and still prints BEFORE Avada's combined
 * fusion-dynamic-css, so a tie on specificity goes to the theme. Naming the
 * form and the table gives every rule here enough headroom to win on
 * specificity alone — which is why none of them needs !important.
 * ------------------------------------------------------------------------ */

/* A price-less row has less to say, so it stops reserving space for a fixed
   row height (Avada: .shop_table tbody tr { height: 140px }). */
.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr {
	height: auto;
}

/* Compact rows, one separator line each, and every cell on the same
   baseline so the image, the name, the quantity and the remove control read
   as one row. The separator is drawn on the CELLS rather than the row
   because WooCommerce's own stylesheet sets border-collapse: separate, where
   a <tr> border never paints; border-top is cleared for the same reason, so
   a theme's top border and this bottom border cannot stack into a 2px
   line. */
.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr.woocommerce-cart-form__cart-item > td {
	padding: 0.85em 0.75em;
	border-top: 0;
	border-bottom: 1px solid rgba(125, 125, 125, 0.25);
	vertical-align: middle;
}

/* The row's outer edges stay flush with the container, the way the classic
   cart has them. */
.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr.woocommerce-cart-form__cart-item > td:first-child {
	padding-left: 0;
}

.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr.woocommerce-cart-form__cart-item > td:last-child {
	padding-right: 0;
}

/* One consistent, compact thumbnail box whatever the uploaded image is:
   object-fit keeps the whole product visible instead of cropping it, which
   a rental catalogue cares about more than a perfect square fill.

   Nothing that blockifies .product-thumbnail is ever set on the bare class —
   not `display`, and not a float, which blockifies just as surely (CSS 2.1
   §9.7): in WooCommerce's own template it is a <td>, and taking a cell out of
   table-cell display would make the browser generate an anonymous cell and
   break the row. Avada's .product-thumbnail is a <span> inside the name
   cell, so both shapes are served by sizing alone. Where the stacked layout
   below does need a float, it carries a :not(td):not(th) guard. */
.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents tbody .product-thumbnail {
	width: 64px;
	max-width: 64px;
	margin: 0 0.9em 0 0;
}

.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents tbody .product-thumbnail a {
	display: block;
}

.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents tbody .product-thumbnail img {
	display: block;
	width: 64px;
	height: 64px;
	max-width: 64px;
	object-fit: contain;
}

/* The remove control: a real 44px touch target — the same minimum the quote
   panel's own controls respect — and no larger, so it never competes with
   the product name. Colour is left alone: WooCommerce ships
   `.woocommerce a.remove { color: var(--wc-red) !important }`, and a theme
   may replace it. */
.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents tbody td.product-remove {
	height: 44px;
	text-align: center;
}

.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents tbody td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	float: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 1.5em;
	line-height: 1;
	text-decoration: none;
}

.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents tbody td.product-remove a.remove:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Above the point where the cart is still a real table (see the narrow block
   below for why 800px): the width freed by the two suppressed columns goes
   to the product name instead of inflating the quantity column. `width: 1%`
   plus nowrap is the shrink-to-content idiom for an auto-layout table; it is
   confined to this media query because the same declaration on a
   display: block cell in the stacked layout would make it 1% wide. */
@media (min-width: 801px) {
	.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents th.product-name,
	.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents tbody td.product-name {
		width: auto;
	}

	.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents th.product-quantity,
	.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents th.product-remove,
	.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents tbody td.product-quantity,
	.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents tbody td.product-remove {
		width: 1%;
		white-space: nowrap;
	}
}

/* 800px is the point below which the cart is no longer a table: WooCommerce's
   own responsive cart stacks it at 768px and Avada's at side-header-width +
   content-break-point, 800px by default. Above 768 and below 801 a theme
   using WooCommerce's own stylesheet still draws a table; it then keeps the
   theme's separators, which is the one cosmetic seam in this range. */
@media (max-width: 800px) {
	/* Left-aligned and tighter, so the stacked cells read as one block
	   instead of three centred lines. */
	.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr.woocommerce-cart-form__cart-item > td {
		padding: 0.6em 0;
		border-bottom: 0;
		text-align: left;
	}

	/* One separator per stacked row. Here the cells ARE blocks, so the
	   per-cell border above would draw a line under every line of the row;
	   the row itself is a block too, so its border paints whatever
	   border-collapse the table has. */
	.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr.woocommerce-cart-form__cart-item {
		border-bottom: 1px solid rgba(125, 125, 125, 0.25);
	}

	/* The thumbnail floats — when it is not itself a table cell, see the guard
	   below — so the name sits beside it rather than under it; the name cell
	   contains the float. */
	.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr.woocommerce-cart-form__cart-item > td.product-name {
		overflow: hidden;
	}

	.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents tbody .product-thumbnail {
		width: 56px;
		max-width: 56px;
		margin: 0 0.9em 0.35em 0;
	}

	/* The float is carried by a guarded selector, never by the bare class. A
	   float other than `none` blockifies its element (CSS 2.1 §9.7), so on a
	   theme using WooCommerce's own cart template — where .product-thumbnail
	   is a <td> — the browser would generate an anonymous table cell and the
	   row would shift. That cell is still being drawn in the 769–800px band,
	   because WooCommerce's own woocommerce-smallscreen.css hides it only up
	   to 768px, so the exposure is real and not theoretical. Avada's
	   thumbnail is a <span> inside the name cell and still gets the float, so
	   its stacked layout is unchanged. */
	.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents tbody .product-thumbnail:not(td):not(th) {
		float: left;
	}

	.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents tbody .product-thumbnail img {
		width: 56px;
		height: 56px;
		max-width: 56px;
	}

	/* Avada pins this cell to 25×25 and absolutely positions it in the
	   stacked layout; the target is enlarged where it already sits rather
	   than moved somewhere else. */
	.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents tbody td.product-remove {
		width: 44px;
		height: 44px;
		padding: 0;
	}
}

/* The cart and the quote panel are one block (v1.4.4). With the totals block
   removed (§6) the collaterals wrapper holds nothing on a rental cart, yet it
   still contributed its own top margin — 30px under Avada — and the panel
   added another 2em on top: 62px of dead space between the cart table and the
   panel that belongs to it, measured on the dev site at every viewport. The
   wrapper's margin is zero now and the panel sits flush beneath the cart at
   the same width, its top border the single line between them. Cross-sells,
   the one thing WooCommerce still hooks into that wrapper, get their spacing
   back if they ever render — which `:empty` could not have told us, because
   the wrapper always holds whitespace and Avada even adds an empty div. */
.woocommerce-cart .cart-collaterals {
	margin-top: 0;
	padding-top: 0;
}

.woocommerce-cart .cart-collaterals .cross-sells {
	margin-top: 1.5em;
}

.woocommerce-cart .rqw-quote-panel {
	box-sizing: border-box;
	width: 100%;
	margin-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}