/**
 * Composite required-variation UX.
 *
 * Styles the on-page error that replaces Composite Products' bare
 * window.alert(), plus the highlight on the attribute row the shopper
 * still has to answer.
 *
 * @package ga-product-configurator
 */

.ga-cv-notice.woocommerce-info {
	margin: 0 0 1em;
	padding: 0.9em 1.1em;
	border-top: 3px solid #d63638;
	background: #fdf2f2;
	color: #1d2327;
	font-size: 0.95rem;
	line-height: 1.45;
}

/* WooCommerce themes often inject a ::before glyph on notices. */
.ga-cv-notice.woocommerce-info::before {
	content: none;
}

.ga-cv-notice__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ga-cv-notice__list li + li {
	margin-top: 0.5em;
}

.ga-cv-notice__source {
	font-weight: 700;
}

.ga-cv-notice__field {
	font-weight: 700;
	white-space: nowrap;
}

.ga-cv-notice__clear {
	display: inline-block;
	margin-top: 0.25em;
	text-decoration: underline;
}

/* The row the shopper still has to answer. */
.composite_component .ga-cv-needs-choice select,
.composite_component tr.ga-cv-needs-choice select {
	border: 2px solid #d63638;
	border-radius: 3px;
	outline-offset: 2px;
}

.composite_component .ga-cv-needs-choice select:focus,
.composite_component tr.ga-cv-needs-choice select:focus {
	outline: 2px solid #d63638;
}

/* Respect users who ask for less motion; the JS scroll is smooth by default. */
@media ( prefers-reduced-motion: reduce ) {
	.ga-cv-notice.woocommerce-info {
		transition: none;
	}
}