/**
 * Custom styling for WooCommerce Product Add-Ons blocks (front end).
 *
 * Targets the per-add-on block wrapper the plugin prints in
 * templates/addons/addon-start.php:
 *
 *   <div class="wc-pao-addon-container ... wc-pao-addon wc-pao-addon-{field} ...">
 *
 * Loaded AFTER the plugin's own assets/css/frontend/frontend.css and the
 * active theme's stylesheet, and uses !important throughout, so it wins
 * over common WooCommerce/theme defaults without needing to fight
 * specificity wars. Enqueue instructions are in the accompanying snippet.
 *
 * @package woocommerce-product-addons/custom
 */

/* ------------------------------------------------------------------ */
/* 1. Block wrapper: light orange background, dark orange dotted border */
/* ------------------------------------------------------------------ */

.woocommerce div.product .wc-pao-addon-container,
.woocommerce div.product .wc-pao-addon.wc-pao-addon-container,
div.product .wc-pao-addon-container {
	background-color: #fdebd3 !important; /* light orange fill */
	border: 2px dotted #b45f06 !important; /* dark orange dotted border */
	border-radius: 4px !important;
	box-sizing: border-box !important;
	padding: 12px 14px !important;
	margin: 0 0 14px 0 !important;
}

/* Required-field variant keeps the same treatment; just avoid double borders
   if the theme/plugin ever adds its own outline on this state. */
.woocommerce div.product .wc-pao-addon-container.wc-pao-required-addon {
	background-color: #fdebd3 !important;
	border: 2px dotted #b45f06 !important;
}

/* ------------------------------------------------------------------ */
/* 2. Compact, readable font for everything inside a block             */
/* ------------------------------------------------------------------ */

.woocommerce div.product .wc-pao-addon-container,
.woocommerce div.product .wc-pao-addon-container * {
	font-family: 'Roboto Condensed', 'Arial Narrow', 'Helvetica Neue Condensed',
		'Liberation Sans Narrow', Arial, sans-serif !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	color: #3a2a15 !important; /* dark warm brown, readable on the orange fill */
}

.woocommerce div.product .wc-pao-addon-container .wc-pao-addon-name {
	font-weight: 700 !important;
	font-size: 14px !important;
}

.woocommerce div.product .wc-pao-addon-container .wc-pao-addon-description {
	font-style: italic !important;
	font-size: 13px !important;
	color: #5c4526 !important;
}

.woocommerce div.product .wc-pao-addon-container .wc-pao-addon-price {
	font-weight: 600 !important;
}

.woocommerce div.product .wc-pao-addon-container select,
.woocommerce div.product .wc-pao-addon-container input[type="text"],
.woocommerce div.product .wc-pao-addon-container textarea {
	font-family: 'Roboto Condensed', 'Arial Narrow', 'Helvetica Neue Condensed',
		'Liberation Sans Narrow', Arial, sans-serif !important;
	font-size: 14px !important;
}

.woocommerce div.product .wc-pao-addon-container .wc-pao-validation-notice {
	font-size: 12px !important;
}

/*
 * Note on the font: 'Roboto Condensed' is not bundled with WordPress core
 * or this plugin, so it will only render where it's already installed on
 * the visitor's device — otherwise the stack falls through to
 * 'Arial Narrow' / 'Helvetica Neue Condensed', which are widely available
 * condensed, readable fallbacks. If you want 'Roboto Condensed' to render
 * everywhere, enqueue it from Google Fonts (or self-host it) alongside
 * this stylesheet; ask if you'd like that snippet added.
 */