/**
 * VCCP Checkout Flow Guidance Notice — Styles
 *
 * Applies to both Classic Checkout (#vccp-checkout-flow-notice) and
 * Blocks Checkout (.vccp-checkout-flow-notice-blocks). Variables match
 * the WooCommerce default colour palette so the notice looks at home on
 * most themes.
 *
 * @package VerifiedCryptoCheckout
 * @since   1.54.0
 */

/* =========================================================================
   Shared base — applied to both Classic and Blocks containers
   ========================================================================= */

#vccp-checkout-flow-notice,
.vccp-checkout-flow-notice-blocks {
	background-color: #f0f7ff;
	border: 1px solid #bbd6f5;
	border-left: 4px solid #2271b1;
	border-radius: 4px;
	padding: 16px 18px;
	margin: 12px 0 16px;
	box-sizing: border-box;
	font-size: 0.9em;
	line-height: 1.55;
	color: #2c3338;
}

/* Notice heading */
#vccp-checkout-flow-notice .vccp-notice-heading,
.vccp-checkout-flow-notice-blocks .vccp-notice-heading {
	font-weight: 600;
	font-size: 1em;
	margin: 0 0 10px;
	color: #1d4373;
}

/* Individual info rows */
#vccp-checkout-flow-notice .vccp-notice-section,
.vccp-checkout-flow-notice-blocks .vccp-notice-section {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 7px;
}

#vccp-checkout-flow-notice .vccp-notice-section:last-child,
.vccp-checkout-flow-notice-blocks .vccp-notice-section:last-child {
	margin-bottom: 0;
}

/* Icon column — fixed width so text lines up */
#vccp-checkout-flow-notice .vccp-notice-icon,
.vccp-checkout-flow-notice-blocks .vccp-notice-icon {
	flex-shrink: 0;
	width: 1.4em;
	text-align: center;
	color: #2271b1;
	font-style: normal;
}

/* Responsive — ensure full width on narrow viewports */
@media ( max-width: 480px ) {
	#vccp-checkout-flow-notice,
	.vccp-checkout-flow-notice-blocks {
		padding: 12px 14px;
		margin: 10px 0 12px;
	}
}