/**
 * SFS Commerce OS — "Custom options" fields on the WooCommerce
 * single-product page. Deliberately theme-neutral (not the admin
 * dashboard design system) since this renders inside whatever storefront
 * theme the store uses.
 */

.sfs-custom-options {
	margin: 14px 0;
	clear: both;
}

.sfs-custom-options-toggle-link {
	/* Matches the theme's own variation-label typography, see
	   product-highlights-frontend.css's identical comment. */
	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 18px;
	font-weight: 500;
	text-decoration: underline;
}

.sfs-custom-options-fields {
	margin-top: 8px;
	padding: 12px 14px;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.sfs-custom-option-field {
	margin-bottom: 12px;
}

.sfs-custom-option-field:last-child {
	margin-bottom: 0;
}

.sfs-custom-option-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 2px;
}

.sfs-custom-option-field .required {
	color: #c0392b;
}

.sfs-custom-option-help {
	display: block;
	font-size: 12px;
	color: #666;
	margin-bottom: 6px;
}

.sfs-custom-option-field textarea {
	width: 100%;
	min-height: 70px;
	box-sizing: border-box;
}

.sfs-custom-option-counter {
	display: block;
	text-align: right;
	font-size: 11px;
	color: #999;
}