/**
 * Callout Notice — the design.
 *
 * Loads on the FRONTEND and in the EDITOR (editor.css depends on this
 * handle), so there is one definition of the box and the editor preview
 * cannot drift away from what visitors see.
 *
 * SPECIFICITY NOTE. These boxes are authored inside content wrappers
 * that style their own descendants — .pdp-desc and .rich-text in
 * assets/css/theme.css both carry rules like ".pdp-desc p{margin:0 0 1em}"
 * and ".pdp-desc{color:var(--text2)}", at (0,1,1) and (0,1,0). A bare
 * ".vx-notice-body p" would tie with the first on specificity and be
 * decided by whichever stylesheet happened to load last, which for a
 * block style enqueued at render time is not something to rely on. So
 * the inner rules are written as ".vx-notice .vx-notice-body p" (0,2,1)
 * and the per-type rules as ".vx-notice.vx-notice-note" (0,2,0). Both
 * win outright, with no !important and no load-order assumption.
 *
 * NO MEDIA QUERIES. The box is fluid at every width already:
 * width:100% with box-sizing:border-box, a flex header that wraps
 * nothing, and px padding that reads correctly from 320px up.
 *
 * @package cenforce-theme
 */

/* ---- Base shell + card ------------------------------------------- */
.vx-notice {
	margin: 16px 0;
	font-size: .95em;
	line-height: 1.5;
	position: relative;

	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	border: 1px solid;
	border-radius: 24px;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
}

.vx-notice p {
	margin: 0;
}

/* ---- Header bar --------------------------------------------------- */
.vx-notice .vx-notice-head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 13px 20px;
	font-weight: 700;
	font-size: 1.02em;
	color: #fff;
}

.vx-notice .vx-notice-icon {
	font-size: 1.15em;
	line-height: 1;
	flex: 0 0 auto;
}

/* ---- Body --------------------------------------------------------- */
.vx-notice .vx-notice-body {
	padding: 18px 20px;
}

.vx-notice .vx-notice-body p {
	margin: 0 0 10px;
	font-weight: 600;
}

.vx-notice .vx-notice-body p:last-child {
	margin-bottom: 0;
}

/* ---- Per type: border / background / text / header gradient -------- */

.vx-notice.vx-notice-note {
	border-color: #bcdcf5;
	background: #fbfdff;
	color: #1a365d;
}

.vx-notice.vx-notice-note .vx-notice-head {
	background: linear-gradient(90deg, #1f6fb2, #4fa3dd);
}

.vx-notice.vx-notice-warning {
	border-color: #f0b3b3;
	background: #fdf1f1;
	color: #7a1414;
}

.vx-notice.vx-notice-warning .vx-notice-head {
	background: linear-gradient(90deg, #b91c1c, #e5484d);
}

.vx-notice.vx-notice-tip {
	border-color: #a3ddc9;
	background: #f5fbf9;
	color: #134a3a;
}

.vx-notice.vx-notice-tip .vx-notice-head {
	background: linear-gradient(90deg, #0f766e, #34d399);
}