/**
 * cs-quote-request.css — Request a Quote presentation (Module 24).
 *
 * The plugin outputs its button with the SAME classes as the buy button
 * (`single_add_to_cart_button button alt`), so out of the box a quotable product shows two
 * identical primary buttons and the shopper cannot tell which is the ordinary purchase. These
 * rules demote the quote button to a secondary/outline treatment so buying stays the obvious
 * default and quoting reads as the deliberate alternative.
 *
 * Site rule 6 applies — Elementor per-widget CSS outranks body-scoped selectors — hence the
 * !important on the colour properties the buy-button styling also sets.
 */

/* ---------------------------------------------------------------- Add to Quote (single product) */

/**
 * REPLACED in v0.39.0 for BugHerd #46 (Tif): "the Add to Quote button is full width, I want it
 * inline with the Add to Cart button and I want it styled to be a Hyperlink not a button design."
 *
 * This supersedes the earlier outline-button treatment — full width, display:block, 2px border —
 * which solved the original "two identical primary buttons" problem in a different way. The goal
 * is unchanged (buying stays the obvious default, quoting reads as the deliberate alternative);
 * only the visual answer changed, from a secondary button to a text link.
 *
 * ⚠️ Edited IN PLACE rather than overridden further down this file. v0.39.0 first appended a
 * second, more specific block ~200 lines below this one, and the result was a rule fighting a
 * rule: this block's `border: ... !important` beat the new `border: 0`, and `display` did not take
 * either, so the buttons stayed stacked with a border. Two blocks styling one element in one file
 * is the defect, not the specificity.
 *
 * ⚠️ It stays a <button type="submit"> — see the note in rtq-quote-rules.php. An <a> would look
 * right and silently stop adding to quotes, because the plugin's inline JS binds to this id to set
 * the hidden wcraq_add_to_quote_clicked input and the element must submit the form.
 *
 * !important is kept on the box properties for the reason in the file header (site rule 6):
 * Elementor's per-widget button CSS sets them and outranks id-scoped selectors here. Measured, not
 * assumed — a plain `display: inline-block` at (1,2,1) lost to it on dev.
 */
#wcraq_add_to_quote {
	display: inline-block !important;
	width: auto !important;
	min-width: 0;

	/**
	 * Sit immediately after the buy button (Tif, v0.40.0: "next to the Add to Cart button ...
	 * maybe 5-10px left padding").
	 *
	 * The DOM is the whole difficulty: Add to Cart is NOT this button's sibling. Elementor wraps
	 * the quantity + buy button in `.e-atc-qty-button-holder` and the plugin hooks its own button
	 * in AFTER that holder, so the two are an uncle and a nephew.
	 *
	 * So the button is MOVED into that holder by cs-quote-button-placement.js, and everything here
	 * is presentation only. Once it is a flex item, flex owns its position and alignment: no
	 * pixel offset, no vertical lift, and the `display` value stops mattering — which is just as
	 * well, because this element computes `display: block` even against
	 * `display: inline-block !important` on its own id. Three CSS-only attempts are recorded in
	 * the plugin changelog for v0.39.2 - v0.40.0; none of them held.
	 *
	 * align-self centres it against the taller buy button whatever that button's height is, which
	 * is what removes the drift the earlier -35px lift had (already 5px out on mobile).
	 */
	margin: 0 0 0 8px !important;
	align-self: center;
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	color: #5a5550 !important;
	font-weight: 500;
	text-decoration: underline;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.4;
	vertical-align: middle;
	cursor: pointer;
	transition: color 0.15s ease;
}

/* A link darkens on hover; it must NOT fill, which is what the old button treatment did. */
#wcraq_add_to_quote:hover,
#wcraq_add_to_quote:focus-visible {
	background-color: transparent !important;
	color: #736E68 !important;
	text-decoration: underline;
}

/**
 * The buy row, once the quote link has been moved into it (#46, v0.40.0).
 *
 * The holder is Elementor's and already display:flex, holding the quantity stepper and Add to
 * Cart. It is left as flex — deliberately NOT changed to block or inline-block, because those two
 * children are its flex items and depend on flex for their alignment. Only wrapping is allowed, so
 * the added link drops below rather than squashing the stepper on a narrow phone.
 *
 * Note the rule this replaces — `form.cart > .single_add_to_cart_button` — never did anything
 * useful: the buy button is a GRANDCHILD of the form, so that direct-child selector only ever
 * matched the quote button it was not written for, while appearing to style both.
 */
.single-product form.cart .e-atc-qty-button-holder {
	flex-wrap: wrap;
	align-items: center;
}

/* --------------------------------------------------------------------------- Archive / loop */

.wcraq_add_to_quote_loop,
a.wcraq-add-to-quote {
	display: inline-block;
	margin-top: 6px;
	color: #5a5550;
	border-bottom: 1px solid currentColor;
	font-size: 15px;
}

/* ------------------------------------------------------------- Intro band (#cs-quote-request-intro) */

/**
 * BugHerd #66 (Miranda): tint the intro band and give it a header, "so it looks similar to the
 * 'important notice for summer shipping' on the homepage".
 *
 * The heading widget itself is in the page's `_elementor_data` (a NEW widget added for this
 * ticket); everything visual lives here so it does not depend on Elementor regenerating its
 * per-page CSS file after a direct data write.
 *
 * The values are lifted from what that homepage notice actually computes to, not from her
 * screenshot: it is an icon-box whose title uses Elementor's global ACCENT typography —
 * futura-pt / 20px / 400 / 27px / uppercase, colour `--e-global-color-primary` #5A5550. The kit
 * drops accent to 19px at 980px, mirrored below. #F7F5F2 is her stated hex and is already a
 * design token twice over (kit global `c2e9441`, hello-child `--off-white`).
 *
 * text-align is set here rather than relying on the widget's `align` setting, for the same
 * regeneration reason. Specificity: this is (1,0,1) against the kit's `.elementor-kit-11 h2`
 * at (0,1,1), so the 40px baskerville global loses on the id column without !important.
 */
#cs-quote-request-intro {
	background-color: #f7f5f2;
}

#cs-quote-request-intro .elementor-heading-title {
	color: #5a5550;
	font-family: futura-pt, sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 27px;
	text-align: center;
	text-transform: uppercase;
}

@media (max-width: 980px) {

	#cs-quote-request-intro .elementor-heading-title {
		font-size: 19px;
	}
}

/* --------------------------------------------------------- Quote request form (Gravity 200) */

/**
 * Presentation for Gravity Form 200 on /quote-request/ (page 300112).
 *
 * Scoped to #gform_wrapper_200 so no other form on the site is touched. The defaults were
 * measured off the rendered page before anything was changed: 1px solid #666 / 3px radius /
 * 8px padding inputs, 700-weight #333 labels, an alarm-red rgb(192,43,10) "(Required)" marker
 * and a 205x34 submit. None of those values come from this site's palette.
 *
 * Deliberate hierarchy: the submit is a SOLID #5a5550 fill (primary) while the CTA button below
 * the form is an outline (secondary), so completing the form reads as the page's main action.
 */

#gform_wrapper_200 .gform_fields {
	row-gap: 22px;
}

/**
 * BugHerd #67 (Miranda): 16px bold, matching the newsletter signup above the footer. That form
 * (Gravity 11) carries no site override, so what she is matching is Gravity's own default —
 * measured at 16px/700 in basic.min.css, not eyeballed off her screenshot. Same values also exist
 * as the kit global `143356a` (futura-pt 16/700), so this stays inside the design system.
 * Was 15px/500.
 */
#gform_wrapper_200 .gfield_label {
	display: block;
	margin-bottom: 6px;
	color: #5a5550;
	font-family: futura-pt, sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

/**
 * BugHerd #67 (Miranda): the required marker goes red.
 *
 * ⚠️ This REVERSES a deliberate earlier choice, on purpose — it was muted (#a2938a) because the
 * page already says "All fields except phone are required", so the per-field marker was treated as
 * supporting detail rather than a warning. Miranda asked for red and Tif approved, so the marker is
 * now the site's accessible red #E00000 (kit global `96cab54` — the same value BugHerd #? settled on
 * for contrast), NOT the plugin's original rgb(192,43,10) alarm red.
 * aria-required is untouched either way, so assistive tech is unaffected by the colour.
 */
#gform_wrapper_200 .gfield_required {
	margin-left: 4px;
	color: #e00000;
	font-size: 13px;
	font-weight: 400;
}

#gform_wrapper_200 .gfield input[type="text"],
#gform_wrapper_200 .gfield input[type="email"],
#gform_wrapper_200 .gfield input[type="tel"],
#gform_wrapper_200 .gfield input[type="number"],
#gform_wrapper_200 .gfield textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #ddd3cb;

	/* BugHerd #68 (Miranda): square corners on the fields. Was 5px. */
	border-radius: 0;
	background-color: #fff;
	color: #5a5550;
	font-family: futura-pt, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#gform_wrapper_200 .gfield textarea {
	min-height: 160px;
	resize: vertical;
}

#gform_wrapper_200 .gfield input:focus,
#gform_wrapper_200 .gfield textarea:focus {
	border-color: #5a5550;
	box-shadow: 0 0 0 3px rgba(90, 85, 80, 0.12);
	outline: none;
}

#gform_wrapper_200 .gfield ::placeholder {
	color: #a2938a;
}

#gform_wrapper_200 .gform_footer {
	justify-content: flex-start;
	margin-top: 8px;
	padding-top: 0;
}

/**
 * ⚠️ Gravity Forms renders this submit as a <button class="gform_button button">, NOT an
 * <input type="submit">. An input-only selector matches nothing and the button silently keeps
 * Elementor's global kit styling from post-11.css (.elementor-kit-11 button — 8px/17px padding,
 * the global button colours). Both element forms are covered below because GF's "Submit Button"
 * setting can be switched between them per form.
 *
 * Specificity note: .elementor-kit-11 button is (0,1,1); these are (1,2,0) and (1,1,1), so they
 * win on merit and need no !important.
 */
#gform_wrapper_200 .gform_footer .gform_button,
#gform_wrapper_200 .gform_footer button[type="submit"],
#gform_wrapper_200 .gform_footer input[type="submit"] {
	width: auto;
	padding: 14px 28px;
	border: 1px solid #5a5550;
	border-radius: 5px;
	background-color: #5a5550;
	color: #fff;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

#gform_wrapper_200 .gform_footer .gform_button:hover,
#gform_wrapper_200 .gform_footer .gform_button:focus-visible,
#gform_wrapper_200 .gform_footer button[type="submit"]:hover,
#gform_wrapper_200 .gform_footer button[type="submit"]:focus-visible,
#gform_wrapper_200 .gform_footer input[type="submit"]:hover,
#gform_wrapper_200 .gform_footer input[type="submit"]:focus-visible {
	background-color: transparent;
	color: #5a5550;
}

/* Error states, so validation does not fall back to the plugin's own red-on-white blocks. */

#gform_wrapper_200 .gfield_error input,
#gform_wrapper_200 .gfield_error textarea {
	border-color: #c02b0a;
}

#gform_wrapper_200 .gfield_validation_message,
#gform_wrapper_200 .validation_message {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: #c02b0a;
	font-size: 14px;
}

/**
 * BugHerd #69 (Miranda): "Change background of this section to white and remove the stroke color."
 *
 * Supersedes the card treatment this block used to carry (1px #efe7e1 border + 12px radius, added
 * because a flat #FAFAFA band read as unfinished). The card is gone by request, not by accident.
 *
 * The #FAFAFA comes from Elementor's own per-element rule on 721f636, which is (0,3,0); `body` +
 * this id is (1,0,1) and wins on the id column, so no !important is needed. Site rule 6 is why the
 * body scope is here at all — a bare `#cs-quote-request-form` would lose.
 */
body #cs-quote-request-form {
	border: 0;
	border-radius: 0;
	background-color: #fff;
}

/**
 * BugHerd #70 (Miranda), on the OTHER quote page (/product-quote-request/, 301391): "remove the
 * background color and stroke around each form field ... plain white background."
 *
 * What she pinned is the zebra striping and row rules on the quote form's table, not the inputs —
 * the inputs are already white. That table is emitted with `class=""`, so the stripes come from
 * generic `table`/`tr`/`td` styling further up the cascade rather than from any WooCommerce or
 * plugin stylesheet (checked: woocommerce.css, wcraq.css, hello-child style.css and the Customizer
 * CSS all style these fields not at all). An id-scoped rule therefore beats whatever generic rule
 * is responsible without having to name it.
 */
#wcraq-request-quote table,
#wcraq-request-quote table > tbody > tr,
#wcraq-request-quote table > tbody > tr > td {
	border: 0;
	background-color: #fff;
}

/* --------------------------------------------------------------------------------- Mobile */

@media (max-width: 567px) {

	#gform_wrapper_200 .gform_footer .gform_button,
	#gform_wrapper_200 .gform_footer button[type="submit"],
	#gform_wrapper_200 .gform_footer input[type="submit"] {
		width: 100%;
	}

	/* #69 removed the card, so there is no longer a radius to soften on small screens. */
}

