/**
 * Frontend CSS for Quote Products field.
 */

/* Force quote products field to full width */
.ginput_container_quote_products.gf-full-width,
.gf-quote-products-wrapper {
	width: 100%;
	clear: both;
}

/* Ensure field wrapper takes full width */
li.gfield.gfield_type_quote_products {
	width: 100% !important;
	clear: both !important;
	float: none !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Ensure label appears first */
li.gfield.gfield_type_quote_products .gfield_label {
	order: 0;
	display: block;
}

/* Ensure description appears under the label, not after products */
li.gfield.gfield_type_quote_products .gfield_description {
	order: 1;
	display: block;
	margin-top: 0.5rem;
	margin-bottom: 1rem;
}

li.gfield.gfield_type_quote_products .ginput_container_quote_products {
	order: 2;
	display: block;
}

/* Ensure next field starts on new line */
li.gfield.gfield_type_quote_products + li.gfield {
	clear: both !important;
}

.gf-quote-products-wrapper {
	margin: 1rem 0;
}

.gf-quote-products-wrapper[data-display-type="grid"] {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.gf-quote-products-empty {
	padding: 1rem;
	background: #f0f0f0;
	border: 1px solid #ddd;
	border-radius: 0.25rem;
	color: #666;
	text-align: center;
}

.gf-quote-product-item {
	flex: 1 1 calc((100% - 1rem) / 3) !important;
	min-width: 250px !important;
	max-width: calc((100% - 1rem) / 3) !important;
	border: 1px solid #EBEBEB !important;
	border-radius: 0 !important;
	padding: 0 !important;
	background: #F6F6F6 !important;
	transition: box-shadow 0.2s ease !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
}

.gf-quote-product-item:hover {
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1) !important;
}

.gf-quote-product-image {
	text-align: center !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow: hidden !important;
	padding: 4px !important;
}

.gf-quote-product-image img {
	max-width: 100% !important;
	width: 100% !important;
	height: auto !important;
	border-radius: 0 !important;
	display: block !important;
	margin: 0 auto !important;
	object-fit: cover !important;
}

.gf-quote-product-content {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	text-align: center !important;
	padding: 24px 8px 8px 8px;
	flex: 1 !important;
}

.gf-quote-product-title {
	margin: 0 !important;
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	color: #000 !important;
	line-height: 110% !important;
	letter-spacing: -0.2px !important;
	text-align: center !important;
}

.gf-quote-product-description {
	margin: 1rem 0 2rem 0 !important;
	font-size: 1rem !important;
	color: #000 !important;
	line-height: 130% !important; /* 20.8px */
	text-align: center !important;
}

.gf-quote-product-quantity {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-top: auto !important;
	gap: 0.5rem !important;
	border-radius: 4px;
	border: 1px solid #EBEBEB !important;
	background: #FFF !important;
	padding: 8px 8px 8px 16px;
}

.gf-quote-product-secondary-content {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
	gap: 0.25rem !important;
}

.gf-quote-product-secondary-content {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
	gap: 0.25rem !important;
}

.gf-quote-product-secondary-title {
	margin: 0 !important;
	flex-shrink: 0 !important;
	text-align: left !important;
	line-height: 110% !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	color: #000 !important;
	line-height: 110%; /* 17.6px */
}

.gf-quote-product-secondary-description {
	font-weight: 400 !important;
	color: #000 !important;
	margin: 0 !important;
	font-size: 1rem !important;
	text-align: left !important;
	line-height: 110%; /* 17.6px */
}

/* Hide default number input spinner arrows */
.gf-quote-product-qty::-webkit-outer-spin-button,
.gf-quote-product-qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

.gf-quote-product-qty[type=number] {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Custom quantity input wrapper with buttons */
.gf-quote-product-qty-wrapper {
	display: flex !important;
	align-items: center !important;
	gap: 0.25rem !important;
	width: auto !important;
	min-width: 100px !important;
	border-radius: 4px;
	border: 1px solid #80C41C !important;
	background: #F6F6F6 !important;
	padding: 0.125rem 0.125rem 0.125rem 0 !important;
}

.gf-quote-product-qty-wrapper .gf-quote-product-qty {
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	flex: 1 !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
	display: block !important;
	font-size: 1rem !important;
	text-align: right !important;
	color: #000 !important;
	font-weight: 600 !important;
	line-height: 110% !important; /* 17.6px */
}

.gf-quote-product-qty-suffix {
	font-size: 0.875rem !important;
	color: #000 !important;
	flex-shrink: 0 !important;
	padding: 0 0.25rem !important;
	opacity: 0.5 !important;
}

/* Create vertical stack for buttons on the right */
.gf-quote-product-qty-wrapper .gf-quote-product-qty-buttons {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	flex-shrink: 0 !important;
}

.gf-quote-product-qty-wrapper .gf-quote-product-qty-buttons .gf-quote-product-qty-decrease,
.gf-quote-product-qty-wrapper .gf-quote-product-qty-buttons .gf-quote-product-qty-increase {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 24px !important;
	height: 24px !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	cursor: pointer !important;
	transition: opacity 0.2s ease !important;
	flex-shrink: 0 !important;
}

.gf-quote-product-qty-decrease svg,
.gf-quote-product-qty-increase svg {
	width: 24px !important;
	height: 24px !important;
	display: block !important;
}

.gf-quote-product-qty-decrease:hover,
.gf-quote-product-qty-increase:hover {
	opacity: 0.7 !important;
}

.gf-quote-product-qty-decrease:disabled,
.gf-quote-product-qty-increase:disabled {
	opacity: 0.3 !important;
	cursor: not-allowed !important;
}

.gf-quote-product-qty:focus {
	outline: none;
	border-color: #2271b1;
	box-shadow: 0 0 0 0.0625rem #2271b1;
}

/* Entry detail view */
.gf-quote-products-entry-detail {
	list-style: none;
	padding: 0;
	margin: 0;
}

.gf-quote-products-entry-detail li {
	padding: 0.5rem 0;
	border-bottom: 1px solid #eee;
}

.gf-quote-products-entry-detail li:last-child {
	border-bottom: none;
}

/* Responsive adjustments */
/* When container can't fit 3 items (250px min each + gaps), switch to single column */
/* Hide Gravity Forms progress bar - Scoped to quote form */
.gf-quote-form .gf_progressbar_wrapper {
	display: none !important;
}

/* Confirmation Table Styles - Match Figma Design */
.gf-quote-products-confirmation {
	width: 100% !important;
	margin: 1.5rem 0 !important;
	background: #FFF !important;
}

.gf-quote-products-confirmation-row {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 16px !important;
	padding: 16px 8px !important;
	border-bottom: 1px solid #EBEBEB !important;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
}

.gf-quote-products-confirmation-row:last-of-type {
	border-bottom: none !important;
}

.gf-quote-products-confirmation-image {
	flex-shrink: 0 !important;
	width: 64px !important;
	height: 64px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
	border-radius: 0 !important;
}

.gf-quote-products-confirmation-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
}

.gf-quote-products-confirmation-content {
	display: flex !important;
	flex: 1 1 0 !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 20px 24px !important;
	min-width: 0 !important;
	padding: 4px 0 !important;
}

.gf-quote-products-confirmation-text {
	display: flex !important;
	flex: 1 1 0 !important;
	flex-direction: column !important;
	gap: 8px !important;
	min-width: 0 !important;
	flex-basis: auto !important;
}

.gf-quote-products-confirmation-title {
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.1 !important;
	color: #020202 !important;
	white-space: pre-wrap !important;
}

.gf-quote-products-confirmation-description {
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: #020202 !important;
	opacity: 0.7 !important;
	white-space: pre-wrap !important;
}

.gf-quote-products-confirmation-quantity {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: right !important;
}

.gf-quote-products-confirmation-quantity-number {
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.1 !important;
	color: #020202 !important;
	opacity: 0.75 !important;
	white-space: nowrap !important;
}

.gf-quote-products-confirmation-quantity-label {
	margin: 0 !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: #020202 !important;
	opacity: 0.5 !important;
}

/* Total Section - Match Figma Design */
.gf-quote-products-confirmation-total-wrapper {
	background: #E6F4D4 !important;
	padding: 24px !important;
	margin-top: 16px !important;
	border-radius: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
}

.gf-quote-products-confirmation-total-header {
	display: flex !important;
	gap: 24px !important;
	align-items: flex-start !important;
	width: 100% !important;
	flex-wrap: nowrap !important;
}

.gf-quote-products-confirmation-total-heading {
	flex: 1 1 0 !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1.1 !important;
	color: #020202 !important;
	letter-spacing: -0.1px !important;
	white-space: normal !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	min-width: 0 !important;
}

.gf-quote-products-confirmation-total-value {
	flex-shrink: 0 !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1.1 !important;
	color: #020202 !important;
	opacity: 0.75 !important;
	letter-spacing: -0.1px !important;
	text-align: right !important;
	white-space: nowrap !important;
}

.gf-quote-products-confirmation-total-description {
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: #020202 !important;
	width: 100% !important;
	white-space: pre-wrap !important;
}

.gf-quote-products-confirmation-total-description p {
	margin: 0 0 8px 0 !important;
}

.gf-quote-products-confirmation-total-description p:last-child {
	margin-bottom: 0 !important;
}

@media (max-width: 900px) {
	.gf-quote-product-item {
		flex: 0 0 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
	}
	
	.gf-quote-products-wrapper[data-display-type="grid"] {
		gap: 1rem;
	}
	
	.gf-quote-products-confirmation-row {
		padding: 12px 8px !important;
		gap: 12px !important;
	}
	
	.gf-quote-products-confirmation-image {
		width: 48px !important;
		height: 48px !important;
	}
	
	.gf-quote-products-confirmation-content {
		min-width: 0 !important;
		flex-basis: auto !important;
	}
	
	.gf-quote-products-confirmation-text {
		min-width: 0 !important;
		flex-basis: auto !important;
	}
	
	.gf-quote-products-confirmation-title {
		font-size: 0.875rem !important;
	}
	
	.gf-quote-products-confirmation-description {
		font-size: 0.75rem !important;
	}
	
	/* Total wrapper mobile adjustments */
	.gf-quote-products-confirmation-total-wrapper {
		padding: 24px 16px !important;
		gap: 16px !important;
	}
	
	.gf-quote-products-confirmation-total-header {
		gap: 24px !important;
		flex-wrap: nowrap !important;
	}
	
	.gf-quote-products-confirmation-total-heading {
		font-size: 18px !important;
		min-width: 0 !important;
		flex-basis: auto !important;
		white-space: normal !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
	}
	
	.gf-quote-products-confirmation-total-value {
		font-size: 18px !important;
		flex-shrink: 0 !important;
	}
	
	.gf-quote-products-confirmation-total-description {
		font-size: 14px !important;
		opacity: 0.7 !important;
	}
}

/* Quote Form Button Styles - Scoped to form with class */
.gf-quote-form .gform_next_button,
.gf-quote-form .gform_button,
.gf-quote-form input[type="submit"].gform_button,
.gf-quote-form button.gform_button {
	display: flex !important;
	min-width: 280px !important;
	width: 100% !important;
	padding: 20px 24px !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 16px !important;
	flex: 1 0 0 !important;
	background: #80C41C !important;
	color: #000 !important;
	font-family: proxima-nova, sans-serif !important;
	font-size: 16px !important;
	font-style: normal !important;
	font-weight: 600 !important;
	line-height: 115% !important; /* 18.4px */
	letter-spacing: 0.8px !important;
	text-transform: uppercase !important;
	border: none !important;
	cursor: pointer !important;
	transition: opacity 0.2s ease, background-color 0.2s ease !important;
	margin: 0 !important;
}

.gf-quote-form .gform_next_button:hover,
.gf-quote-form .gform_button:hover,
.gf-quote-form input[type="submit"].gform_button:hover,
.gf-quote-form button.gform_button:hover {
	opacity: 0.9 !important;
}

.gf-quote-form .gform_next_button:active,
.gf-quote-form .gform_button:active,
.gf-quote-form input[type="submit"].gform_button:active,
.gf-quote-form button.gform_button:active {
	opacity: 0.8 !important;
}

/* Quote Form Previous Button Styles - Scoped to form with class */
.gf-quote-form .gform_previous_button {
	border: 0 !important;
	color: #000 !important;
	font-family: proxima-nova, sans-serif !important;
	font-size: 14px !important;
	font-style: normal !important;
	font-weight: 600 !important;
	line-height: 100% !important; /* 14px */
	text-transform: uppercase !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	position: relative !important;
	background: transparent !important;
	padding: 11px 0 !important;
    min-width: auto !important;
}

/* Ensure button text is visible */
.gf-quote-form .gform_previous_button {
	color: #000 !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Ensure button value attribute is preserved and visible */
.gf-quote-form .gform_previous_button[type="button"],
.gf-quote-form .gform_previous_button[type="submit"] {
	color: #000 !important;
}

/* Wrapper for input buttons (since input elements don't support ::before) */
.gf-quote-form .gf-previous-button-wrapper {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	position: relative !important;
}

/* Arrow SVG styling */
.gf-quote-form .gf-previous-button-arrow {
	display: inline-block !important;
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	min-height: 16px !important;
	flex-shrink: 0 !important;
	vertical-align: middle !important;
	margin-right: 0.5rem !important;
}

.gf-quote-form .gform_previous_button .gf-previous-button-arrow {
	margin-right: 0.5rem !important;
}

/* Position previous button below submit button in footer */
.gf-quote-form .gform-page-footer,
.gf-quote-form .gform_page_footer {
	display: flex !important;
	flex-direction: column !important;
	gap: 1rem !important;
	background: #F6F6F6 !important;
    padding: 16px !important;
}

.gf-quote-form .gform-page-footer .gf-previous-button-wrapper,
.gf-quote-form .gform_page_footer .gf-previous-button-wrapper {
	order: 2 !important;
	display: flex !important;
	justify-content: flex-start !important;
	width: 100% !important;
}

.gf-quote-form .gform-page-footer .gform_button,
.gf-quote-form .gform-page-footer input[type="submit"].gform_button,
.gf-quote-form .gform_page_footer .gform_button,
.gf-quote-form .gform_page_footer input[type="submit"].gform_button {
	order: 1 !important;
}

/* Multistep form page width constraints */
.gf-quote-form .gform_page:first-of-type {
	max-width: 1140px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.gf-quote-form .gform_page:nth-of-type(2) {
	max-width: 720px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Disabled next button when no products selected */
.gf-quote-form .gform_next_button.gf-disabled,
.gf-quote-form .gform_button.gf-disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

.gf-quote-form .hidden_label .gfield_label {
	display: none !important;
}