/**
 * FSI Request for Quote — Frontend Styles
 *
 * Drawer + product page buttons + quote page form.
 * FSI Blue: #0064a8
 *
 * Performance budget: under 8KB gzipped.
 */

/* ============================================ */
/* Product page R1 Add to Quote form            */
/* Dark navy panel — matches approved mockup    */
/* (Graham 2026-05-28). White text + labels,    */
/* white-bg inputs, cyan submit button.         */
/* ============================================ */

.fsi-r1 {
	background: linear-gradient(135deg, #0f2f52 0%, #16385e 100%);
	border: 0;
	border-radius: 6px;
	overflow: hidden;
	max-width: 100%;
	padding: 22px 24px 24px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #ffffff;
	box-sizing: border-box;
}

.fsi-r1-head {
	padding: 0 0 18px;
	background: transparent;
	border: 0;
	font-family: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 16px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: #ffffff;
}

.fsi-r1-body {
	padding: 0;
}

.fsi-r1-row {
	display: flex;
	gap: 16px;
	align-items: flex-end;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.fsi-r1-field {
	display: flex;
	flex-direction: column;
}

.fsi-r1-field-qty {
	flex: 0 0 140px;
}

.fsi-r1-field-notes {
	flex: 1;
	min-width: 200px;
}

.fsi-r1-field label {
	display: block;
	font-family: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 8px;
}

.fsi-r1-field label em {
	font-style: normal;
	font-weight: 400;
	color: #DDEEF5;
	letter-spacing: 0;
	text-transform: none;
}

.fsi-r1-qty {
	display: flex;
	align-items: center;
	gap: 6px;
}

.fsi-r1-qty-btn {
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	background: transparent;
	color: #ffffff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	border-radius: 3px;
	font-family: inherit;
	padding: 0;
	transition: background 150ms ease, border-color 150ms ease;
}

.fsi-r1-qty-btn:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #ffffff;
}

.fsi-r1-qty input {
	width: 54px;
	height: 32px;
	text-align: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 3px;
	font-family: inherit;
	font-size: 14px;
	color: #0f2f52;
	font-weight: 600;
	background: #ffffff;
	-moz-appearance: textfield;
}

.fsi-r1-qty input::-webkit-outer-spin-button,
.fsi-r1-qty input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.fsi-r1-qty input:focus,
.fsi-r1-qty-btn:focus {
	outline: 2px solid #60c8eb;
	outline-offset: 1px;
}

.fsi-r1-field-notes textarea {
	width: 100%;
	min-height: 52px;
	padding: 10px 12px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 3px;
	font-family: inherit;
	font-size: 13px;
	color: #1a1a1a;
	resize: vertical;
	background: #ffffff;
	box-sizing: border-box;
}

.fsi-r1-field-notes textarea::placeholder {
	color: #8a96a3;
	opacity: 1;
}

.fsi-r1-field-notes textarea:focus {
	outline: 2px solid #60c8eb;
	outline-offset: 1px;
	border-color: #60c8eb;
}

.fsi-r1-submit {
	width: 100%;
	background: #60c8eb;
	color: #0f2f52;
	border: 0;
	padding: 15px;
	font-family: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 13px;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	font-weight: 700;
	border-radius: 3px;
	cursor: pointer;
	transition: background 150ms ease;
}

.fsi-r1-submit:hover {
	background: #7ad3f0;
	color: #0f2f52;
}

.fsi-r1-submit:active {
	background: #4ab8db;
}

.fsi-r1-footnote {
	font-size: 13px;
	color: #ffffff;
	margin: 14px 0 0;
	line-height: 1.5;
}

@media (max-width: 480px) {
	.fsi-r1 { padding: 18px 18px 20px; }
	.fsi-r1-row {
		flex-direction: column;
		align-items: stretch;
	}
	.fsi-r1-field-qty {
		flex: 1 1 auto;
	}
}

/* ============================================ */
/* Aggressive theme override — Hello Elementor  */
/* and other parent themes apply red/blue link  */
/* color that inherits down. Force every R1     */
/* element to the dark-navy palette.            */
/* ============================================ */
.fsi-r1, .fsi-r1 * { color: #ffffff !important; }
.fsi-r1 .fsi-r1-head { color: #ffffff !important; background: transparent !important; border: 0 !important; }
.fsi-r1 label, .fsi-r1 label * { color: #ffffff !important; }
.fsi-r1 label em { color: #DDEEF5 !important; }
.fsi-r1 .fsi-r1-qty-btn {
	color: #ffffff !important;
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
}
.fsi-r1 .fsi-r1-qty-btn:hover {
	background: rgba(255, 255, 255, 0.12) !important;
	border-color: #ffffff !important;
}
.fsi-r1 .fsi-r1-qty input {
	color: #0f2f52 !important;
	background: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
}
.fsi-r1 .fsi-r1-field-notes textarea,
.fsi-r1 textarea {
	color: #1a1a1a !important;
	background: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
}
.fsi-r1 .fsi-r1-submit,
.fsi-r1 .fsi-r1-submit:visited,
.fsi-r1 .fsi-r1-submit:link {
	background: #60c8eb !important;
	color: #0f2f52 !important;
	border: 0 !important;
	border-color: transparent !important;
	text-decoration: none !important;
}
.fsi-r1 .fsi-r1-submit:hover { background: #7ad3f0 !important; color: #0f2f52 !important; }
.fsi-r1 .fsi-r1-footnote { color: #ffffff !important; }
.fsi-r1 a { color: #60c8eb !important; }

/* ============================================ */
/* Dynamic header Request a Quote button        */
/* ============================================ */

.fsi-rfq-header-cta-count {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	background: #60c8eb;
	color: #0f2f52;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* ============================================ */
/* Neutralize theme red accents on product pages */
/* ============================================ */

/* Active tab underline + text on WooCommerce product tabs */
.woocommerce-tabs .tabs li.active,
.woocommerce-tabs .tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-Tabs-panel .wp-block-woocommerce-product-details__tabs-tab[aria-selected="true"] {
	color: #0064a8 !important;
	border-bottom-color: #0064a8 !important;
}

.woocommerce-tabs .tabs li.active::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
	background: #0064a8 !important;
	border-color: #0064a8 !important;
}

/* "Related Posts" / "Related Products" link colors — kill the red */
.related-posts a,
.wp-block-latest-posts a,
.wp-block-post-template a,
.related .product .woocommerce-loop-product__title,
.related a,
.products.related a {
	color: #0064a8 !important;
}

.related-posts a:hover,
.wp-block-latest-posts a:hover,
.wp-block-post-template a:hover,
.related a:hover,
.products.related a:hover {
	color: #004f88 !important;
	text-decoration: underline !important;
}

/* Hello Elementor / Twenty Twenty-* default link color override on product pages */
.single-product .entry-content a:not(.btn):not(.elementor-button):not(.fsi-rfq-btn) {
	color: #0064a8;
}

.single-product .entry-content a:not(.btn):not(.elementor-button):not(.fsi-rfq-btn):hover {
	color: #004f88;
}


/* ============================================ */
/* Slide-in drawer                              */
/* ============================================ */

.fsi-rfq-drawer-root {
	position: fixed;
	inset: 0;
	z-index: 999999;
	pointer-events: none;
	visibility: hidden;
}

.fsi-rfq-drawer-root.is-open {
	pointer-events: auto;
	visibility: visible;
}

.fsi-rfq-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.5);
	opacity: 0;
	transition: opacity 220ms ease;
}

.fsi-rfq-drawer-root.is-open .fsi-rfq-drawer-backdrop {
	opacity: 1;
}

.fsi-rfq-drawer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 100vw);
	background: #fff;
	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
	transform: translateX(100%);
	transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
	display: flex;
	flex-direction: column;
}

.fsi-rfq-drawer-root.is-open .fsi-rfq-drawer {
	transform: translateX(0);
}

.fsi-rfq-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #e5e7eb;
	background: #0064a8;
	color: #fff;
}

.fsi-rfq-drawer-header h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.fsi-rfq-drawer-close {
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	width: 28px;
	height: 28px;
}

.fsi-rfq-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 20px;
}

.fsi-rfq-drawer-empty {
	text-align: center;
	padding: 40px 0;
	color: #6b7280;
	font-size: 15px;
}

.fsi-rfq-drawer-item {
	padding: 14px 0;
	border-bottom: 1px solid #f1f5f9;
}

.fsi-rfq-drawer-item:last-child {
	border-bottom: 0;
}

.fsi-rfq-drawer-item-title {
	font-size: 15px;
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 2px;
}

.fsi-rfq-drawer-item-meta {
	font-size: 13px;
	color: #6b7280;
	margin-bottom: 10px;
}

.fsi-rfq-drawer-item-note {
	display: block;
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	font-size: 13px;
	font-family: inherit;
	resize: vertical;
	min-height: 44px;
}

.fsi-rfq-drawer-item-note:focus {
	outline: 2px solid #0064a8;
	outline-offset: 1px;
	border-color: #0064a8;
}

.fsi-rfq-drawer-footer {
	padding: 14px 20px;
	border-top: 1px solid #e5e7eb;
	display: flex;
	gap: 10px;
	background: #f9fafb;
}

.fsi-rfq-keep-browsing,
.fsi-rfq-submit-btn {
	flex: 1;
	padding: 11px 14px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 4px;
	border: 0;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-family: inherit;
}

.fsi-rfq-keep-browsing {
	background: #fff;
	color: #1a1a1a;
	border: 1px solid #d1d5db;
}

.fsi-rfq-keep-browsing:hover {
	background: #f3f4f6;
}

.fsi-rfq-submit-btn {
	background: #0064a8;
	color: #fff;
}

.fsi-rfq-submit-btn:hover {
	background: #004f88;
	color: #fff;
}

/* ============================================ */
/* Header trigger                               */
/* ============================================ */

.fsi-rfq-header-trigger {
	position: relative;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 6px;
	color: inherit;
	display: inline-flex;
	align-items: center;
}

.fsi-rfq-header-count {
	position: absolute;
	top: -2px;
	right: -2px;
	background: #0064a8;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	line-height: 1;
}

.fsi-rfq-header-count:empty,
.fsi-rfq-header-count[data-count="0"] {
	display: none;
}

/* ============================================ */
/* Quote page form                              */
/* ============================================ */

.fsi-rfq-quote-form {
	max-width: 880px;
	margin: 0 auto;
}

.fsi-rfq-section {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 24px;
	margin-bottom: 20px;
}

.fsi-rfq-section h2 {
	margin: 0 0 16px;
	font-size: 18px;
	color: #0064a8;
}

.fsi-rfq-line-item {
	display: flex;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid #f1f5f9;
}

.fsi-rfq-line-item:first-child {
	padding-top: 0;
}

.fsi-rfq-line-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.fsi-rfq-line-item-image {
	width: 80px;
	flex-shrink: 0;
}

.fsi-rfq-line-item-image img {
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.fsi-rfq-line-item-body {
	flex: 1;
	min-width: 0;
}

.fsi-rfq-line-item-title {
	font-size: 16px;
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 4px;
}

.fsi-rfq-line-item-meta {
	display: flex;
	gap: 14px;
	align-items: center;
	font-size: 13px;
	color: #6b7280;
	margin-bottom: 10px;
}

.fsi-rfq-line-item-meta input[type="number"] {
	width: 60px;
	padding: 4px 6px;
	border: 1px solid #d1d5db;
	border-radius: 3px;
	margin-left: 4px;
}

.fsi-rfq-remove {
	color: #dc2626;
	text-decoration: none;
	font-size: 12px;
}

.fsi-rfq-line-item-notes-label {
	display: block;
	font-size: 13px;
	color: #374151;
	font-weight: 600;
	margin-top: 4px;
}

.fsi-rfq-line-item-notes-label textarea {
	display: block;
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	resize: vertical;
	min-height: 56px;
	margin-top: 4px;
}

.fsi-rfq-line-item-notes-label textarea:focus {
	outline: 2px solid #0064a8;
	outline-offset: 1px;
	border-color: #0064a8;
}

.fsi-rfq-field {
	display: block;
	margin-bottom: 16px;
}

.fsi-rfq-field span {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
	margin-bottom: 6px;
}

.fsi-rfq-field input[type="text"],
.fsi-rfq-field input[type="tel"],
.fsi-rfq-field input[type="email"],
.fsi-rfq-field select,
.fsi-rfq-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
}

.fsi-rfq-field textarea {
	resize: vertical;
	min-height: 88px;
}

.fsi-rfq-help {
	display: block;
	font-size: 12px;
	color: #6b7280;
	margin-top: 4px;
}

.fsi-rfq-submit-section {
	text-align: center;
	background: #f9fafb;
}

.fsi-rfq-btn {
	display: inline-block;
	padding: 12px 24px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 4px;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
}

.fsi-rfq-btn-primary {
	background: #0064a8;
	color: #fff;
}

.fsi-rfq-btn-primary:hover {
	background: #004f88;
	color: #fff;
}

.fsi-rfq-btn-outline {
	background: transparent;
	color: #0064a8;
	border: 1px solid #0064a8;
}

.fsi-rfq-btn-large {
	padding: 14px 32px;
	font-size: 16px;
}

/* Theme-proof the blue buttons. Parent themes (Hello Elementor et al.) apply
   their own button text color, which is why "Submit Quote Request" rendered as
   dark gray text on the blue button. Force white, like the .fsi-r1-submit armor. */
.fsi-rfq-btn-primary,
.fsi-rfq-btn-primary:link,
.fsi-rfq-btn-primary:visited,
button.fsi-rfq-btn-primary,
.fsi-rfq-submit-btn,
.fsi-rfq-submit-btn:link,
.fsi-rfq-submit-btn:visited {
	background: #0064a8 !important;
	color: #ffffff !important;
	border: 0 !important;
	text-decoration: none !important;
}

.fsi-rfq-btn-primary:hover,
.fsi-rfq-btn-primary:focus,
.fsi-rfq-submit-btn:hover,
.fsi-rfq-submit-btn:focus {
	background: #004f88 !important;
	color: #ffffff !important;
}

.fsi-rfq-submit-note {
	margin: 12px 0 0;
	font-size: 13px;
	color: #6b7280;
}

.fsi-rfq-signin-notice {
	background: #eff6ff;
	border-left: 3px solid #0064a8;
	padding: 12px 16px;
	margin: 0 0 16px;
	font-size: 14px;
	color: #1e3a5f;
	border-radius: 0 4px 4px 0;
	text-align: left;
}

/* ============================================ */
/* Empty-quote "how to request a quote" screen  */
/* ============================================ */

.fsi-rfq-howto {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	padding: 40px 20px;
}

.fsi-rfq-howto h2 {
	color: #0064a8;
	margin: 0 0 10px;
}

.fsi-rfq-howto-intro {
	color: #4b5563;
	font-size: 15px;
	line-height: 1.6;
	margin: 0 auto 28px;
	max-width: 540px;
}

.fsi-rfq-howto-steps {
	list-style: none;
	margin: 0 auto 28px;
	padding: 0;
	max-width: 520px;
	text-align: left;
}

.fsi-rfq-howto-steps li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 14px 0;
	border-bottom: 1px solid #f1f5f9;
	font-size: 15px;
	color: #374151;
	line-height: 1.5;
}

.fsi-rfq-howto-steps li:last-child {
	border-bottom: 0;
}

.fsi-rfq-howto-num {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #0064a8;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.fsi-rfq-howto-steps strong {
	color: #1a1a1a;
}

/* ============================================ */
/* Login wall                                   */
/* ============================================ */

.fsi-rfq-login-wall {
	max-width: 880px;
	margin: 0 auto;
}

.fsi-rfq-login-intro {
	text-align: center;
	margin-bottom: 28px;
}

.fsi-rfq-login-intro h2 {
	color: #0064a8;
	margin-bottom: 8px;
}

.fsi-rfq-login-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

@media (max-width: 720px) {
	.fsi-rfq-login-grid {
		grid-template-columns: 1fr;
	}
}

.fsi-rfq-login-col {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 24px;
}

.fsi-rfq-login-col h3 {
	margin-top: 0;
	color: #0064a8;
}

.fsi-rfq-register-form label,
.fsi-rfq-login-col .login-username,
.fsi-rfq-login-col .login-password {
	display: block;
	font-size: 13px;
	color: #374151;
	margin-bottom: 12px;
	font-weight: 600;
}

.fsi-rfq-register-form input[type="text"],
.fsi-rfq-register-form input[type="email"],
.fsi-rfq-register-form input[type="password"],
.fsi-rfq-register-form input[type="tel"],
.fsi-rfq-register-form select {
	display: block;
	width: 100%;
	padding: 10px 12px;
	margin-top: 4px;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	font-weight: 400;
}

.fsi-rfq-register-form button {
	width: 100%;
	margin-top: 8px;
}

/* ============================================ */
/* Cart-page per-item notes                     */
/* ============================================ */

.fsi-rfq-item-notes-wrap {
	margin-top: 10px;
}

.fsi-rfq-note-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #374151;
	margin-bottom: 4px;
}

.fsi-rfq-item-notes {
	display: block;
	width: 100%;
	padding: 6px 8px;
	border: 1px solid #d1d5db;
	border-radius: 3px;
	font-size: 13px;
	font-family: inherit;
	resize: vertical;
}

/* ============================================ */
/* My Quotes / Thank-you / status pills         */
/* ============================================ */

.fsi-rfq-thank-you {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	padding: 40px 20px;
}

.fsi-rfq-thank-you h1 {
	color: #0064a8;
}

.fsi-rfq-reference {
	font-size: 18px;
	color: #6b7280;
}

.fsi-rfq-thank-you-actions {
	margin-top: 24px;
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.fsi-rfq-my-quotes-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 16px;
}

.fsi-rfq-my-quotes-table th,
.fsi-rfq-my-quotes-table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid #e5e7eb;
}

.fsi-rfq-my-quotes-table th {
	background: #f9fafb;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b7280;
}

.fsi-rfq-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	background: #6b7280;
}

.fsi-rfq-status-new { background: #005ea2; }
.fsi-rfq-status-under-review { background: #dba617; }
.fsi-rfq-status-quoted { background: #00a32a; }
.fsi-rfq-status-won { background: #1e8e3e; }
.fsi-rfq-status-lost { background: #d63638; }
.fsi-rfq-status-addendum { background: #8c8f94; }