/*
 * TLC Elite Quote Mode
 *
 * Part 1 is a safety net: the PHP filters are what actually remove prices, but if a
 * plugin or template ever prints one another way, these rules keep it off the screen.
 * Part 2 styles the Request a Quote page using the site's own Elementor brand colours.
 */

/* ==========================================================================
   1. Nothing that looks like money appears on the public site
   ========================================================================== */

.woocommerce-Price-amount,
.woocommerce-Price-currencySymbol,
.woocommerce-loop-product__price,
.woocommerce p.price,
.woocommerce span.price,
.woocommerce-page p.price,
.woocommerce-page span.price,
.woocommerce .amount,
.woocommerce-page .amount,
.elementor-widget-woocommerce-product-price p.price,
.elementor-widget-woocommerce-product-price span.price,
li.product .price,
.onsale,
.elementor-widget-woocommerce-product-price {
	display: none !important;
}

/* The store's existing cart script adds these price labels. Nothing to label now. */
.mobile-price-label,
.mobile-subtotal-label,
.desktop-subtotal-label,
.desktop-unit-price,
.mobile-total-label {
	display: none !important;
}

/* Cart page: drop the price and subtotal columns, the totals table, shipping and coupons */
.woocommerce table.cart th.product-price,
.woocommerce table.cart td.product-price,
.woocommerce table.cart th.product-subtotal,
.woocommerce table.cart td.product-subtotal,
.woocommerce-cart table.shop_table th.product-price,
.woocommerce-cart table.shop_table td.product-price,
.woocommerce-cart table.shop_table th.product-subtotal,
.woocommerce-cart table.shop_table td.product-subtotal,
.cart_totals > h2,
.cart_totals table.shop_table,
.cart-subtotal,
.order-total,
.tax-total,
.tax-rate,
.fee,
.cart-discount,
.woocommerce-shipping-totals,
.woocommerce-shipping-calculator,
.woocommerce-shipping-destination,
form.woocommerce-cart-form .coupon,
.woocommerce .cart .coupon,
.elementor-menu-cart__subtotal,
.e-cart__subtotal,
.woocommerce-cart .cross-sells .price {
	display: none !important;
}

/* Header cart: keep the "view cart" and quote buttons, lose the money line */
.elementor-menu-cart__product-price,
.elementor-menu-cart__footer-summary {
	display: none !important;
}

/* Message that replaces the totals table */
.tlc-qm-totals-msg {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--e-global-color-7728ff8, #494949);
}

.tlc-qm-notice.woocommerce-info {
	font-size: 16px;
	line-height: 1.55;
}

/* ==========================================================================
   2. The Request a Quote page
   ========================================================================== */

.tlc-qm-page {
	--tlc-navy: var(--e-global-color-3763533, #184464);
	--tlc-gold: var(--e-global-color-accent, #BC9C6C);
	--tlc-blue: var(--e-global-color-9835a40, #3682AE);
	--tlc-ink: var(--e-global-color-31e81e3, #121517);
	--tlc-muted: var(--e-global-color-1972775, #717171);
	--tlc-line: var(--e-global-color-3449d84, #EBEBEB);
	--tlc-wash: var(--e-global-color-093a36f, #E6EEF5);
	display: block;
	padding: 56px 20px 80px;
	background: #fff;
	color: var(--tlc-ink);
}

.tlc-qm-wrap {
	max-width: 1080px;
	margin: 0 auto;
}

.tlc-qm-head {
	max-width: 720px;
	margin: 0 0 32px;
}

.tlc-qm-title {
	font-family: var(--e-global-typography-primary-font-family, "Exo 2"), sans-serif;
	font-size: 44px;
	line-height: 1.12;
	font-weight: 700;
	color: var(--tlc-navy);
	margin: 0 0 14px;
}

.tlc-qm-subtitle {
	font-family: var(--e-global-typography-primary-font-family, "Exo 2"), sans-serif;
	font-size: 24px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--tlc-navy);
	margin: 0 0 18px;
}

.tlc-qm-lede,
.tlc-qm-page p {
	font-family: var(--e-global-typography-text-font-family, "Montserrat"), sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--tlc-muted);
}

.tlc-qm-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 28px;
	align-items: start;
}

.tlc-qm-card {
	border: 1px solid var(--tlc-line);
	border-radius: 10px;
	padding: 28px;
	background: #fff;
}

.tlc-qm-card--form {
	background: var(--tlc-wash);
	border-color: transparent;
}

.tlc-qm-card--thanks {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.tlc-qm-ref {
	font-size: 17px;
	color: var(--tlc-ink) !important;
}

/* Item list */
.tlc-qm-items {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--tlc-line);
}

.tlc-qm-item {
	display: flex;
	gap: 16px;
	justify-content: space-between;
	align-items: flex-start;
	padding: 16px 0;
	border-bottom: 1px solid var(--tlc-line);
}

.tlc-qm-item__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.tlc-qm-item__name,
.tlc-qm-item__name a {
	font-family: var(--e-global-typography-text-font-family, "Montserrat"), sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--tlc-navy);
	text-decoration: none;
}

.tlc-qm-item__name a:hover {
	color: var(--tlc-blue);
}

.tlc-qm-item__opts,
.tlc-qm-item__sku {
	font-size: 15px;
	color: var(--tlc-muted);
}

.tlc-qm-item__qty {
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 600;
	color: var(--tlc-ink);
	background: var(--tlc-wash);
	border-radius: 999px;
	padding: 5px 14px;
	white-space: nowrap;
}

.tlc-qm-edit {
	margin: 18px 0 0;
	font-size: 15px !important;
}

.tlc-qm-edit a {
	color: var(--tlc-blue);
}

/* Form */
.tlc-qm-field {
	margin: 0 0 18px;
}

.tlc-qm-field label {
	display: block;
	font-family: var(--e-global-typography-text-font-family, "Montserrat"), sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--tlc-ink);
	margin-bottom: 7px;
}

.tlc-qm-req {
	color: #b3261e;
}

.tlc-qm-field input,
.tlc-qm-field textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--e-global-typography-text-font-family, "Montserrat"), sans-serif;
	font-size: 16px;
	line-height: 1.45;
	padding: 12px 14px;
	border: 1px solid #c9d4dd;
	border-radius: 6px;
	background: #fff;
	color: var(--tlc-ink);
}

.tlc-qm-field input:focus,
.tlc-qm-field textarea:focus {
	outline: 2px solid var(--tlc-blue);
	outline-offset: 1px;
	border-color: var(--tlc-blue);
}

.tlc-qm-field textarea {
	resize: vertical;
	min-height: 120px;
}

/* Honeypot: present for bots, invisible and unreachable for people */
.tlc-qm-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tlc-qm-fine {
	font-size: 15px !important;
	margin: 14px 0 0;
}

.tlc-qm-errors {
	border-left: 4px solid #b3261e;
	background: #fdf1f0;
	padding: 16px 18px;
	margin: 0 0 26px;
	border-radius: 4px;
}

.tlc-qm-errors p,
.tlc-qm-errors li {
	font-size: 16px;
	color: #7f1d1d;
	margin: 0;
}

.tlc-qm-errors ul {
	margin: 8px 0 0 20px;
}

/* Buttons */
.tlc-qm-btn {
	display: inline-block;
	font-family: var(--e-global-typography-text-font-family, "Montserrat"), sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	padding: 14px 26px;
	border: 2px solid var(--tlc-navy);
	border-radius: 6px;
	background: #fff;
	color: var(--tlc-navy);
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.tlc-qm-btn:hover,
.tlc-qm-btn:focus {
	background: var(--tlc-navy);
	color: #fff;
}

.tlc-qm-btn--primary {
	background: var(--tlc-navy);
	color: #fff;
}

.tlc-qm-btn--primary:hover,
.tlc-qm-btn--primary:focus {
	background: #0f2d44;
	border-color: #0f2d44;
	color: #fff;
}

.tlc-qm-btn--block {
	display: block;
	width: 100%;
}

.tlc-qm-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 24px;
}

.tlc-qm-submit {
	margin: 22px 0 0;
}

/* Mobile: house rule, no text under 15px */
@media (max-width: 900px) {
	.tlc-qm-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}

@media (max-width: 760px) {
	.tlc-qm-page {
		padding: 36px 16px 64px;
	}

	.tlc-qm-title {
		font-size: 32px;
	}

	.tlc-qm-subtitle {
		font-size: 22px;
	}

	.tlc-qm-card {
		padding: 20px;
	}

	.tlc-qm-lede,
	.tlc-qm-page p,
	.tlc-qm-item__name,
	.tlc-qm-item__name a {
		font-size: 16px;
	}

	.tlc-qm-item__opts,
	.tlc-qm-item__sku,
	.tlc-qm-item__qty,
	.tlc-qm-fine,
	.tlc-qm-edit {
		font-size: 15px !important;
	}

	.tlc-qm-actions {
		justify-content: flex-start;
	}
}

/* ==========================================================================
   3. Icon-only archive card buttons: hover label + "add" badge
   The shop cards render the control as a bare cart icon, which reads as
   nothing much now there is no price beside it. A small plus makes it an
   "add" control at a glance, and the label appears above on hover — clear
   of the icon, not on top of it.
   ========================================================================== */

.tlc-qm-tip {
	position: relative !important;
	overflow: visible !important;
}

/* Elementor and Unlimited Elements wrappers clip their contents by default */
.prod-cart-wrap,
.prod-cart-btn,
.prod-cart-icon,
.tlc-qm-tip .elementor-button-content-wrapper {
	overflow: visible !important;
}

.tlc-qm-tipbox {
	position: absolute !important;
	left: 50%;
	bottom: calc(100% + 14px);
	transform: translateX(-50%) translateY(5px);
	z-index: 999;
	display: block !important;
	width: auto !important;
	margin: 0 !important;
	padding: 7px 12px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: var(--e-global-color-3763533, #184464) !important;
	color: #fff !important;
	font-family: var(--e-global-typography-text-font-family, "Montserrat"), sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: 1.2 !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	box-shadow: 0 4px 14px rgba(18, 21, 23, .18);
	transition: opacity .14s ease, transform .14s ease;
}

/* little pointer, drawn on the bubble so nothing overlaps the icon */
.tlc-qm-tipbox::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--e-global-color-3763533, #184464);
}

.tlc-qm-tip:hover .tlc-qm-tipbox,
.tlc-qm-tip:focus .tlc-qm-tipbox,
.tlc-qm-tip:focus-visible .tlc-qm-tipbox {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Anchor for the plus when it sits on the card's own icon widget */
.tlc-qm-iconhost {
	position: relative !important;
	overflow: visible !important;
}

/* The card's narrow button must not spill onto the icon.
   On mobile the button widget is only ~36px wide while the link inside carries
   padding: 7px 8px — so its text needs ~48px and overflows its own box by 12px,
   landing on the cart icon. Dropping the side padding in that narrow case lets
   the label sit inside the space it actually has. */
.prod-cart-btn .elementor-button {
	white-space: nowrap;
	overflow: visible;
	max-width: 100%;
}

/* ---------- Phones: one plain button, right aligned, no hover needed ----------
   The site's kit stylesheet forces this on the card button, with !important AND a
   more specific selector than a plain .prod-cart-btn rule:
       .ue-grid…uc-dynamic-popup-grid .prod-cart-btn .elementor-button {
           width:100% !important; padding:7px 8px !important;
           font-size:clamp(10px,0.9vw,14px) !important; }
   Inside a ~36px-wide widget that leaves a 20px hole, which is why any label spilled
   onto the icon. The selectors below carry the same specificity plus `body`, so they
   win regardless of load order, and let the label size itself to its text.
   No tooltip and no plus badge here: the button says what it does, and a touch screen
   has no hover to reveal anything with. */
@media (max-width: 767px) {

	body .prod-cart-wrap {
		display: flex !important;
		align-items: center;
		justify-content: flex-end !important;   /* right aligned, as asked */
		gap: 8px !important;
		width: auto !important;
		min-width: 0 !important;
		margin-left: auto !important;
		margin-right: 0 !important;
		padding-right: 0 !important;
		/* The row's parent is an Elementor GRID container with justify-content:start,
		   so margin-left:auto alone does not move it. justify-self is what a grid item
		   listens to. */
		justify-self: end !important;
		align-self: center !important;
	}

	body .prod-cart-wrap .prod-cart-btn,
	body .ue-grid .prod-cart-wrap .prod-cart-btn {
		display: block !important;
		width: auto !important;
		max-width: none !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* The card's label is invisible on a phone because the site animates it in on
	   hover, and a touch screen has no hover:
	       .ue-grid…uc-dynamic-popup-grid .prod-cart-wrap .prod-cart-btn a {
	           transform: translateX(12px) !important; opacity: 0; }
	   That translate is also what pushed the text sideways into the icon. Both are
	   undone here, for phones only — the desktop hover animation is left alone. */
	body .ue-grid.uc-items-wrapper.uc-dynamic-popup-grid .prod-cart-wrap .prod-cart-btn a,
	body .prod-cart-wrap .prod-cart-btn a.elementor-button {
		opacity: 1 !important;
		transform: none !important;
		visibility: visible !important;
	}

	body .prod-cart-wrap .prod-cart-btn .elementor-button,
	body .ue-grid .prod-cart-wrap .prod-cart-btn .elementor-button,
	body .ue-grid.uc-items-wrapper.uc-dynamic-popup-grid .prod-cart-btn .elementor-button {
		/* block + text-align:right, not width:auto: the link renders 12px to the right of
		   its own box on this template, which pushed its text into the icon. Filling the
		   box and aligning the text to the box's right edge sidesteps that entirely. */
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		/* the right padding is the visual gap to the icon */
		padding: 0 8px 0 0 !important;
		font-size: 13px !important;
		line-height: 1.2 !important;
		white-space: nowrap !important;
		text-transform: none !important;
		text-align: right !important;
	}

	/* The row sits in an Elementor grid whose single column is sized to the row's own
	   content, so justify-self has nothing to move within. Widening the column to the
	   full card is what actually allows the row to sit on the right. */
	body .e-grid:has(> .prod-cart-wrap) {
		grid-template-columns: 1fr !important;
		justify-items: end !important;
		justify-content: end !important;
	}

	/* the icon keeps a comfortable target without stretching the row */
	body .prod-cart-wrap .prod-cart-icon {
		display: flex !important;
		align-items: center;
		justify-content: center !important;
		flex: 0 0 auto !important;
		min-width: 24px !important;
		min-height: 44px !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* no hover affordances on a touch screen */
	body .tlc-qm-tipbox,
	body .tlc-qm-badge {
		display: none !important;
	}
}

/* Smaller plus when it rides on the 16px card icon rather than a 46px button */
/* The always-visible plus, so the icon reads as "add" rather than just "cart".
   position:absolute is what pins it to the icon's corner — without it the plus falls
   into normal flow and lands underneath the cart. */
.tlc-qm-badge {
	position: absolute !important;
	top: -5px;
	right: -5px;
	z-index: 998;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 18px !important;
	height: 18px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--e-global-color-3763533, #184464) !important;
	color: #fff !important;
	font-family: var(--e-global-typography-text-font-family, "Montserrat"), sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-align: center;
	text-transform: none !important;
	pointer-events: none;
	box-shadow: 0 0 0 2px #fff;
}

.tlc-qm-tip:hover .tlc-qm-badge {
	background: var(--e-global-color-accent, #BC9C6C) !important;
}

.tlc-qm-badge--icon {
	top: -7px;
	right: -8px;
	width: 15px !important;
	height: 15px !important;
	font-size: 12px !important;
}

@media (max-width: 760px) {
	/* House rule: no text under 15px on mobile. The tooltip never shows on a touch
	   screen anyway, but keep the floor for anyone on a small laptop. */
	.tlc-qm-tipbox { font-size: 15px !important; }

	/* Only the large 46px button badge grows. The card icon's plus stays at the
	   15px that was signed off, so the card looks the same on phone and desktop. */
	.tlc-qm-badge:not(.tlc-qm-badge--icon) {
		width: 19px !important;
		height: 19px !important;
		font-size: 15px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tlc-qm-tipbox { transition: none; }
}

/* ==========================================================================
   4. Button colours must beat the site's own link colour
   tlcelite.com has custom CSS of `p a, p a:link, p a:visited { color:#3682AE
   !important }` and a matching :hover. The quote page's buttons sit inside a
   <p>, so without !important here the site repaints their label blue — which
   is why "Keep browsing products" read blue on navy.
   ========================================================================== */

.tlc-qm-page .tlc-qm-btn,
.tlc-qm-page a.tlc-qm-btn,
.tlc-qm-page a.tlc-qm-btn:link,
.tlc-qm-page a.tlc-qm-btn:visited,
.tlc-qm-page .tlc-qm-actions a.tlc-qm-btn,
.tlc-qm-page p a.tlc-qm-btn {
	color: var(--tlc-navy) !important;
	text-decoration: none !important;
}

/* Primary: white label on navy, at rest */
.tlc-qm-page .tlc-qm-btn--primary,
.tlc-qm-page a.tlc-qm-btn--primary,
.tlc-qm-page a.tlc-qm-btn--primary:link,
.tlc-qm-page a.tlc-qm-btn--primary:visited,
.tlc-qm-page .tlc-qm-actions a.tlc-qm-btn--primary,
.tlc-qm-page p a.tlc-qm-btn--primary,
.tlc-qm-page button.tlc-qm-btn--primary {
	color: #fff !important;
}

/* Both buttons: white label on hover and on keyboard focus */
.tlc-qm-page .tlc-qm-btn:hover,
.tlc-qm-page .tlc-qm-btn:focus,
.tlc-qm-page .tlc-qm-btn:focus-visible,
.tlc-qm-page .tlc-qm-btn:active,
.tlc-qm-page a.tlc-qm-btn:hover,
.tlc-qm-page a.tlc-qm-btn:focus,
.tlc-qm-page a.tlc-qm-btn:active,
.tlc-qm-page p a.tlc-qm-btn:hover,
.tlc-qm-page p a.tlc-qm-btn:focus,
.tlc-qm-page .tlc-qm-actions a.tlc-qm-btn:hover,
.tlc-qm-page .tlc-qm-actions a.tlc-qm-btn:focus {
	color: #fff !important;
	background: var(--tlc-navy);
	border-color: var(--tlc-navy);
}

.tlc-qm-page .tlc-qm-btn--primary:hover,
.tlc-qm-page .tlc-qm-btn--primary:focus,
.tlc-qm-page a.tlc-qm-btn--primary:hover,
.tlc-qm-page a.tlc-qm-btn--primary:focus,
.tlc-qm-page p a.tlc-qm-btn--primary:hover,
.tlc-qm-page .tlc-qm-actions a.tlc-qm-btn--primary:hover {
	color: #fff !important;
	/* Deeper navy rather than the gold: white on gold measures 2.59:1, which is
	   below the readable threshold. White on this navy is 13.9:1. */
	background: #0f2d44;
	border-color: #0f2d44;
}

/* The "change quantities" text link keeps the site's blue, just not underlined twice */
.tlc-qm-page .tlc-qm-edit a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   5. One-click add from a product card
   ========================================================================== */

.tlc-qm-busy {
	opacity: .55;
	pointer-events: none;
}

.tlc-qm-flash {
	position: absolute;
	right: 0;
	bottom: calc(100% + 6px);
	z-index: 40;
	padding: 4px 9px;
	border-radius: 4px;
	background: #1c7a4a;
	color: #fff !important;
	font-family: var(--e-global-typography-text-font-family, "Montserrat"), sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translateY(3px);
	transition: opacity .16s ease, transform .16s ease;
}

.tlc-qm-flash.is-on {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 760px) {
	.tlc-qm-flash { font-size: 15px; }
}