/* Spectrum Quote Request — minimal styling, inherits Carbon tokens from the theme */

.sq-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	margin: 2rem 0;
}

@media (min-width: 1056px) {
	.sq-layout {
		grid-template-columns: 1.4fr 1fr;
	}
}

.sq-item {
	display: grid;
	grid-template-columns: 64px 1fr auto auto;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--cds-gray-20, #e0e0e0);
	border-bottom: 0;
}

.sq-item:last-of-type {
	border-bottom: 1px solid var(--cds-gray-20, #e0e0e0);
}

.sq-item img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	background: #161616;
}

.sq-item-name {
	font-weight: 600;
}

.sq-item-desc {
	font-size: 0.8125rem;
	color: var(--cds-gray-60, #6f6f6f);
}

.sq-qty-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.qty-input {
	width: 5.5rem;
	height: 2.5rem;
	padding: 0 0.5rem;
	text-align: right;
	border: 1px solid var(--cds-gray-30, #c6c6c6);
}

.sq-remove {
	width: 2rem;
	height: 2rem;
	border: 0;
	background: none;
	font-size: 1.25rem;
	cursor: pointer;
	color: var(--cds-gray-60, #6f6f6f);
}

.sq-remove:hover {
	color: #da1e28;
}

.sq-moq-note {
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	color: var(--cds-gray-60, #6f6f6f);
}

.sq-form {
	background: var(--cds-gray-10, #f4f4f4);
	padding: 1.5rem;
	border-top: 3px solid var(--cds-blue-60, #0f62fe);
}

.sq-form h2 {
	margin-top: 0;
	font-size: 1.25rem;
}

.sq-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.sq-field label {
	display: block;
	font-size: 0.75rem;
	color: var(--cds-gray-70, #525252);
}

.sq-field input,
.sq-field textarea {
	display: block;
	width: 100%;
	margin-top: 0.375rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	background: #fff;
	border: 0;
	border-bottom: 1px solid var(--cds-gray-50, #8d8d8d);
}

.sq-optional {
	color: var(--cds-gray-50, #8d8d8d);
}

.sq-recaptcha-placeholder {
	padding: 0.75rem 1rem;
	background: #fff;
	border: 1px solid var(--cds-gray-30, #c6c6c6);
	font-size: 0.8125rem;
	color: var(--cds-gray-60, #6f6f6f);
}

.sq-submit {
	width: 100%;
	justify-content: center;
}

.sq-empty,
.sq-success {
	padding: 3rem 1.5rem;
	text-align: center;
	background: var(--cds-gray-10, #f4f4f4);
	border: 1px solid var(--cds-gray-20, #e0e0e0);
}

.sq-success {
	background: #defbe6;
	border-left: 3px solid #42be65;
	text-align: left;
}

.sq-single-quote {
	margin: 1.5rem 0;
}

.sq-add-btn.is-added {
	background: transparent;
	color: var(--cds-blue-60, #0f62fe);
	border-color: var(--cds-blue-60, #0f62fe);
}
