/**
 * Zen Addons Pro - Alert Box design library (24 Pro designs).
 *
 * Hex values are tuned to the canonical Claude Design spec ("Alert Box
 * Widget.dc.html", project 559ffdf9). Each design is a self-contained look:
 * container bg/border/radius/shadow, icon colour, title colour (mapped onto
 * <strong>/<b> in the message), body colour (the message box text colour) and
 * a scheme-matched close-icon colour. Glyphs reuse the free widget's existing
 * alert-type SVGs (info/success/warning/error) rather than a new icon font, per
 * the repo no-new-deps guardrail; the colour + container shape match the spec.
 *
 * Every rule is scoped under .zaso-alert-box--design-<id>, so this stylesheet
 * only ever affects an Alert Box that opted into a Pro design. The free default
 * render and the six free designs are untouched. Enqueued by Zanp_Alert_Designs
 * only when the license is valid.
 *
 * NO-CLOSE designs in the spec (split-panel, tag-label, floating-icon,
 * terminal, title-bar, action-cta, gradient-ring, centered): the close button
 * still works when the user enables it, but is tinted unobtrusively so the
 * design does not depend on it.
 *
 * @package Zen Addons for SiteOrigin Page Builder Pro
 */

/* --- P07 Gradient (violet) ------------------------------------------------ */
.zaso-alert-box.zaso-alert-box--design-gradient .zaso-alert-box__messagebox {
	background: linear-gradient( 135deg, #7c3aed, #a855f7 );
	color: rgba( 255, 255, 255, 0.9 );
	border: 0;
	border-radius: 12px;
	box-shadow: 0 10px 26px rgba( 124, 58, 237, 0.28 );
}
.zaso-alert-box.zaso-alert-box--design-gradient .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-gradient .zaso-alert-box__messagebox b { color: #ffffff; }
.zaso-alert-box.zaso-alert-box--design-gradient .zaso-alert-box__icon { color: #ffffff; }
.zaso-alert-box.zaso-alert-box--design-gradient .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: rgba( 255, 255, 255, 0.7 ); }

/* --- P08 Dark mode (teal accent) ------------------------------------------ */
.zaso-alert-box.zaso-alert-box--design-dark .zaso-alert-box__messagebox {
	background-color: #0f172a;
	color: #94a3b8;
	border: 1px solid #1e293b;
	border-left: 4px solid #2dd4bf;
	border-radius: 10px;
}
.zaso-alert-box.zaso-alert-box--design-dark .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-dark .zaso-alert-box__messagebox b { color: #f1f5f9; }
.zaso-alert-box.zaso-alert-box--design-dark .zaso-alert-box__icon { color: #2dd4bf; }
.zaso-alert-box.zaso-alert-box--design-dark .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: #5b7385; }

/* --- P09 Split panel (NO CLOSE) ------------------------------------------- */
.zaso-alert-box.zaso-alert-box--design-split-panel .zaso-alert-box__messagebox {
	background-color: #ffffff;
	color: #0369a1;
	border: 1px solid #f1f5f9;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba( 15, 23, 42, 0.08 );
}
.zaso-alert-box.zaso-alert-box--design-split-panel .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-split-panel .zaso-alert-box__messagebox b { color: #0c4a6e; }
.zaso-alert-box.zaso-alert-box--design-split-panel .zaso-alert-box__messagebox--has-icon {
	padding: 0;
	gap: 0;
	align-items: stretch;
}
.zaso-alert-box.zaso-alert-box--design-split-panel .zaso-alert-box__messagebox--has-icon .zaso-alert-box__icon {
	flex-shrink: 0;
	width: 58px;
	height: auto;
	margin: 0;
	padding: 0;
	align-items: center;
	justify-content: center;
	background-color: #0284c7;
	color: #ffffff;
}
.zaso-alert-box.zaso-alert-box--design-split-panel .zaso-alert-box__messagebox--has-icon .zaso-alert-box__icon svg {
	width: 28px;
	height: 28px;
}
.zaso-alert-box.zaso-alert-box--design-split-panel .zaso-alert-box__messagebox--has-icon .zaso-alert-box__body {
	padding: 16px 20px;
}
.zaso-alert-box.zaso-alert-box--design-split-panel .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: #94a3b8; }

/* --- P10 Glass (coral) ---------------------------------------------------- */
/* Outer wrapper carries the coral gradient + padding; the message box is the
   frosted inner panel. */
.zaso-alert-box.zaso-alert-box--design-glass {
	background: linear-gradient( 135deg, #fb7185, #f97316 );
	border-radius: 14px;
	padding: 20px;
}
.zaso-alert-box.zaso-alert-box--design-glass .zaso-alert-box__messagebox {
	background: rgba( 255, 255, 255, 0.18 );
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
	color: rgba( 255, 255, 255, 0.92 );
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	border-radius: 10px;
	padding: 16px 40px 16px 18px;
}
.zaso-alert-box.zaso-alert-box--design-glass .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-glass .zaso-alert-box__messagebox b { color: #ffffff; }
.zaso-alert-box.zaso-alert-box--design-glass .zaso-alert-box__icon { color: #ffffff; }
.zaso-alert-box.zaso-alert-box--design-glass .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: rgba( 255, 255, 255, 0.8 ); }

/* --- P11 Toast (compact) -------------------------------------------------- */
.zaso-alert-box.zaso-alert-box--design-toast .zaso-alert-box__messagebox {
	background-color: #1e293b;
	color: #f1f5f9;
	border: 0;
	border-radius: 12px;
	padding: 14px 16px;
	box-shadow: 0 14px 32px rgba( 15, 23, 42, 0.35 );
}
.zaso-alert-box.zaso-alert-box--design-toast .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-toast .zaso-alert-box__messagebox b { color: #f1f5f9; }
.zaso-alert-box.zaso-alert-box--design-toast .zaso-alert-box__messagebox--has-icon { align-items: center; }
.zaso-alert-box.zaso-alert-box--design-toast .zaso-alert-box__icon {
	width: 34px;
	height: 34px;
	margin-top: 0;
	padding: 7px;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background-color: rgba( 56, 189, 248, 0.16 );
	color: #38bdf8;
}
.zaso-alert-box.zaso-alert-box--design-toast .zaso-alert-box__icon svg { width: 20px; height: 20px; }
.zaso-alert-box.zaso-alert-box--design-toast .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: #64748b; }

/* --- P12 Big icon (feature) ----------------------------------------------- */
.zaso-alert-box.zaso-alert-box--design-big-icon .zaso-alert-box__messagebox {
	background-color: #ffffff;
	color: #2563eb;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 20px 22px;
	box-shadow: 0 4px 14px rgba( 15, 23, 42, 0.05 );
}
.zaso-alert-box.zaso-alert-box--design-big-icon .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-big-icon .zaso-alert-box__messagebox b { color: #1e3a8a; font-size: 1.06em; }
.zaso-alert-box.zaso-alert-box--design-big-icon .zaso-alert-box__messagebox--has-icon { align-items: center; gap: 0.9em; }
.zaso-alert-box.zaso-alert-box--design-big-icon .zaso-alert-box__icon { width: 48px; height: 48px; margin-top: 0; color: #2563eb; }
.zaso-alert-box.zaso-alert-box--design-big-icon .zaso-alert-box__icon svg { width: 100%; height: 100%; }
.zaso-alert-box.zaso-alert-box--design-big-icon .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: #9bbcef; }

/* --- P13 Pill (warning, one line) ----------------------------------------- */
.zaso-alert-box.zaso-alert-box--design-pill .zaso-alert-box__messagebox {
	display: inline-flex;
	align-items: center;
	background-color: #fff7ed;
	color: #9a3412;
	border: 1px solid #fed7aa;
	border-radius: 999px;
	padding: 14px 44px 14px 22px;
}
.zaso-alert-box.zaso-alert-box--design-pill .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-pill .zaso-alert-box__messagebox b { color: #7c2d12; }
.zaso-alert-box.zaso-alert-box--design-pill .zaso-alert-box__icon { color: #ea580c; }
.zaso-alert-box.zaso-alert-box--design-pill .zaso-alert-box__icon svg { width: 22px; height: 22px; }
.zaso-alert-box.zaso-alert-box--design-pill .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: #e0a87a; }

/* --- P14 Dashed (draft) --------------------------------------------------- */
.zaso-alert-box.zaso-alert-box--design-dashed .zaso-alert-box__messagebox {
	background-color: #fffbeb;
	color: #b45309;
	border: 2px dashed #f59e0b;
	border-radius: 10px;
}
.zaso-alert-box.zaso-alert-box--design-dashed .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-dashed .zaso-alert-box__messagebox b { color: #92400e; }
.zaso-alert-box.zaso-alert-box--design-dashed .zaso-alert-box__icon { color: #d97706; }
.zaso-alert-box.zaso-alert-box--design-dashed .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: #e0b878; }

/* --- P15 Double border (alert) -------------------------------------------- */
.zaso-alert-box.zaso-alert-box--design-double .zaso-alert-box__messagebox {
	background-color: #fef2f2;
	color: #b91c1c;
	border: 3px double #dc2626;
	border-radius: 8px;
}
.zaso-alert-box.zaso-alert-box--design-double .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-double .zaso-alert-box__messagebox b { color: #7f1d1d; }
.zaso-alert-box.zaso-alert-box--design-double .zaso-alert-box__icon { color: #dc2626; }
.zaso-alert-box.zaso-alert-box--design-double .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: #e89a9a; }

/* --- P16 Banner (success, one line) --------------------------------------- */
.zaso-alert-box.zaso-alert-box--design-banner .zaso-alert-box__messagebox {
	background-color: #15803d;
	color: #ffffff;
	border: 0;
	border-radius: 8px;
	padding: 15px 20px;
}
.zaso-alert-box.zaso-alert-box--design-banner .zaso-alert-box__messagebox--has-icon { align-items: center; }
.zaso-alert-box.zaso-alert-box--design-banner .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-banner .zaso-alert-box__messagebox b { color: #ffffff; }
.zaso-alert-box.zaso-alert-box--design-banner .zaso-alert-box__icon { color: #ffffff; }
.zaso-alert-box.zaso-alert-box--design-banner .zaso-alert-box__icon svg { width: 20px; height: 20px; }
.zaso-alert-box.zaso-alert-box--design-banner .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: rgba( 255, 255, 255, 0.8 ); }

/* --- P17 Tag label (NO CLOSE) --------------------------------------------- */
.zaso-alert-box.zaso-alert-box--design-tag-label .zaso-alert-box__messagebox {
	background-color: #ffffff;
	color: #4b5563;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 18px 20px;
	box-shadow: 0 2px 10px rgba( 15, 23, 42, 0.04 );
}
.zaso-alert-box.zaso-alert-box--design-tag-label .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-tag-label .zaso-alert-box__messagebox b { color: #1f2937; }
.zaso-alert-box.zaso-alert-box--design-tag-label .zaso-alert-box__messagebox--has-icon {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6em;
}
.zaso-alert-box.zaso-alert-box--design-tag-label .zaso-alert-box__icon { display: none; }
.zaso-alert-box.zaso-alert-box--design-tag-label .zaso-alert-box__sr {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	padding: 4px 10px;
	clip: auto;
	overflow: visible;
	white-space: nowrap;
	background-color: #fef3c7;
	color: #b45309;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.zaso-alert-box.zaso-alert-box--design-tag-label .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: #cbd5e1; }

/* --- P18 Ghost tint (violet) ---------------------------------------------- */
.zaso-alert-box.zaso-alert-box--design-ghost .zaso-alert-box__messagebox {
	background-color: #faf5ff;
	color: #7c3aed;
	border: 1px solid #d8b4fe;
	border-radius: 10px;
}
.zaso-alert-box.zaso-alert-box--design-ghost .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-ghost .zaso-alert-box__messagebox b { color: #5b21b6; }
.zaso-alert-box.zaso-alert-box--design-ghost .zaso-alert-box__icon { color: #7c3aed; }
.zaso-alert-box.zaso-alert-box--design-ghost .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: #c4a3ef; }

/* --- P19 Underline (minimal) ---------------------------------------------- */
.zaso-alert-box.zaso-alert-box--design-underline .zaso-alert-box__messagebox {
	background-color: transparent;
	color: #64748b;
	border: 0;
	border-bottom: 2px solid #cbd5e1;
	border-radius: 0;
	padding: 6px 32px 16px 4px;
}
.zaso-alert-box.zaso-alert-box--design-underline .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-underline .zaso-alert-box__messagebox b { color: #1e293b; }
.zaso-alert-box.zaso-alert-box--design-underline .zaso-alert-box__icon { color: #475569; }
.zaso-alert-box.zaso-alert-box--design-underline .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: #b0bac7; }

/* --- P20 Round badge (success) -------------------------------------------- */
.zaso-alert-box.zaso-alert-box--design-round-badge .zaso-alert-box__messagebox {
	background-color: #ffffff;
	color: #047857;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 16px 20px;
	box-shadow: 0 4px 12px rgba( 15, 23, 42, 0.05 );
}
.zaso-alert-box.zaso-alert-box--design-round-badge .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-round-badge .zaso-alert-box__messagebox b { color: #064e3b; }
.zaso-alert-box.zaso-alert-box--design-round-badge .zaso-alert-box__messagebox--has-icon { align-items: center; }
.zaso-alert-box.zaso-alert-box--design-round-badge .zaso-alert-box__icon {
	width: 42px;
	height: 42px;
	margin-top: 0;
	padding: 9px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #ecfdf5;
	color: #059669;
}
.zaso-alert-box.zaso-alert-box--design-round-badge .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: #7fc6a4; }

/* --- P21 Two-tone (teal) -------------------------------------------------- */
.zaso-alert-box.zaso-alert-box--design-two-tone .zaso-alert-box__messagebox {
	background: linear-gradient( 135deg, #f0fdfa, #ecfeff );
	color: #0f766e;
	border: 1px solid #99f6e4;
	border-radius: 12px;
}
.zaso-alert-box.zaso-alert-box--design-two-tone .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-two-tone .zaso-alert-box__messagebox b { color: #115e59; }
.zaso-alert-box.zaso-alert-box--design-two-tone .zaso-alert-box__icon { color: #0d9488; }
.zaso-alert-box.zaso-alert-box--design-two-tone .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: #6fc0b6; }

/* --- P22 Right accent (amber) --------------------------------------------- */
.zaso-alert-box.zaso-alert-box--design-right-accent .zaso-alert-box__messagebox {
	background-color: #ffffff;
	color: #b45309;
	border: 1px solid #f1f5f9;
	border-right: 4px solid #f59e0b;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba( 15, 23, 42, 0.05 );
}
.zaso-alert-box.zaso-alert-box--design-right-accent .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-right-accent .zaso-alert-box__messagebox b { color: #92400e; }
.zaso-alert-box.zaso-alert-box--design-right-accent .zaso-alert-box__icon { color: #d97706; }
.zaso-alert-box.zaso-alert-box--design-right-accent .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: #e0b878; }

/* --- P23 Floating icon (violet, NO CLOSE) --------------------------------- */
.zaso-alert-box.zaso-alert-box--design-floating-icon .zaso-alert-box__messagebox {
	background-color: #ffffff;
	color: #6d28d9;
	border: 1px solid #ede9fe;
	border-radius: 14px;
	padding: 24px 20px 18px;
	box-shadow: 0 8px 24px rgba( 124, 58, 237, 0.12 );
	margin-top: 14px;
	overflow: visible;
}
.zaso-alert-box.zaso-alert-box--design-floating-icon .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-floating-icon .zaso-alert-box__messagebox b { color: #5b21b6; }
.zaso-alert-box.zaso-alert-box--design-floating-icon .zaso-alert-box__messagebox--has-icon { display: block; }
.zaso-alert-box.zaso-alert-box--design-floating-icon .zaso-alert-box__icon {
	position: absolute;
	top: -14px;
	left: 20px;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 8px;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background-color: #7c3aed;
	color: #ffffff;
	box-shadow: 0 6px 16px rgba( 124, 58, 237, 0.4 );
}
.zaso-alert-box.zaso-alert-box--design-floating-icon .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: #c4b5fd; }

/* --- P24 Dotted (neutral) ------------------------------------------------- */
.zaso-alert-box.zaso-alert-box--design-dotted .zaso-alert-box__messagebox {
	background-color: #f8fafc;
	color: #64748b;
	border: 1px solid #e2e8f0;
	border-left: 3px dotted #94a3b8;
	border-radius: 10px;
}
.zaso-alert-box.zaso-alert-box--design-dotted .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-dotted .zaso-alert-box__messagebox b { color: #334155; }
.zaso-alert-box.zaso-alert-box--design-dotted .zaso-alert-box__icon { color: #475569; }
.zaso-alert-box.zaso-alert-box--design-dotted .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: #aab4c2; }

/* Close-button clearance for single-line designs. The close control is absolutely
   positioned (right: 0.5em; width: 1.5em), so on a one-line message it can sit on
   or flush against the last word. Reserve right-side room on the message box so the
   close never overlaps or crowds the copy. Scoped to these --design- variants only,
   so the default render and every other design stay unchanged. */
.zaso-alert-box.zaso-alert-box--design-round-badge .zaso-alert-box__messagebox,
.zaso-alert-box.zaso-alert-box--design-two-tone .zaso-alert-box__messagebox,
.zaso-alert-box.zaso-alert-box--design-right-accent .zaso-alert-box__messagebox,
.zaso-alert-box.zaso-alert-box--design-dotted .zaso-alert-box__messagebox {
	padding-right: 2.75em;
}

/* --- P25 Deep solid (indigo) ---------------------------------------------- */
.zaso-alert-box.zaso-alert-box--design-deep-solid .zaso-alert-box__messagebox {
	background-color: #312e81;
	color: rgba( 255, 255, 255, 0.82 );
	border: 0;
	border-radius: 12px;
	box-shadow: 0 8px 22px rgba( 49, 46, 129, 0.25 );
}
.zaso-alert-box.zaso-alert-box--design-deep-solid .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-deep-solid .zaso-alert-box__messagebox b { color: #ffffff; }
.zaso-alert-box.zaso-alert-box--design-deep-solid .zaso-alert-box__icon { color: #c7d2fe; }
.zaso-alert-box.zaso-alert-box--design-deep-solid .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: rgba( 255, 255, 255, 0.65 ); }

/* --- P26 Terminal (mono, NO CLOSE, status dot + label, no type icon) ------ */
.zaso-alert-box.zaso-alert-box--design-terminal .zaso-alert-box__messagebox {
	background-color: #0b1220;
	color: #cbd5e1;
	border: 1px solid #1e293b;
	border-radius: 10px;
	padding: 16px 18px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 12.5px;
}
.zaso-alert-box.zaso-alert-box--design-terminal .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-terminal .zaso-alert-box__messagebox b { color: #cbd5e1; }
.zaso-alert-box.zaso-alert-box--design-terminal .zaso-alert-box__messagebox--has-icon { display: block; }
.zaso-alert-box.zaso-alert-box--design-terminal .zaso-alert-box__icon { display: none; }
.zaso-alert-box.zaso-alert-box--design-terminal .zaso-alert-box__sr {
	position: relative;
	width: auto;
	height: auto;
	margin: 0 0 8px;
	padding: 0 0 0 16px;
	clip: auto;
	overflow: visible;
	white-space: nowrap;
	display: block;
	color: #22c55e;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.zaso-alert-box.zaso-alert-box--design-terminal .zaso-alert-box__sr::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #22c55e;
	box-shadow: 0 0 6px rgba( 34, 197, 94, 0.8 );
}
.zaso-alert-box.zaso-alert-box--design-terminal .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: #475569; }

/* --- P27 Title bar (error, NO CLOSE) -------------------------------------- */
.zaso-alert-box.zaso-alert-box--design-title-bar .zaso-alert-box__messagebox {
	background-color: #ffffff;
	color: #7f1d1d;
	border: 1px solid #fecaca;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba( 220, 38, 38, 0.08 );
}
.zaso-alert-box.zaso-alert-box--design-title-bar .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-title-bar .zaso-alert-box__messagebox b { color: #7f1d1d; }
.zaso-alert-box.zaso-alert-box--design-title-bar .zaso-alert-box__messagebox--has-icon { display: block; padding: 0; }
.zaso-alert-box.zaso-alert-box--design-title-bar .zaso-alert-box__icon { display: none; }
.zaso-alert-box.zaso-alert-box--design-title-bar .zaso-alert-box__sr {
	position: static;
	width: auto;
	height: auto;
	margin: 0 0 14px;
	padding: 11px 18px;
	clip: auto;
	overflow: visible;
	white-space: nowrap;
	display: block;
	background-color: #dc2626;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
}
.zaso-alert-box.zaso-alert-box--design-title-bar .zaso-alert-box__body { padding: 0 18px 14px; }
.zaso-alert-box.zaso-alert-box--design-title-bar .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: #ffffff; }

/* --- P28 Action CTA (info, NO CLOSE) -------------------------------------- */
.zaso-alert-box.zaso-alert-box--design-action-cta .zaso-alert-box__messagebox {
	background-color: #eff6ff;
	color: #3b5bdb;
	border: 1px solid #bfdbfe;
	border-radius: 12px;
	padding: 18px 20px;
}
.zaso-alert-box.zaso-alert-box--design-action-cta .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-action-cta .zaso-alert-box__messagebox b { color: #1e3a8a; }
.zaso-alert-box.zaso-alert-box--design-action-cta .zaso-alert-box__icon { color: #2563eb; }
.zaso-alert-box.zaso-alert-box--design-action-cta .zaso-alert-box__body a:last-child,
.zaso-alert-box.zaso-alert-box--design-action-cta .zaso-alert-box__messagebox > a:last-child {
	display: inline-block;
	margin-top: 0.7em;
	padding: 8px 16px;
	background-color: #2563eb;
	color: #ffffff;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
}
.zaso-alert-box.zaso-alert-box--design-action-cta .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: #93b4f0; }

/* --- P29 Gradient ring (fuchsia, NO CLOSE) -------------------------------- */
/* Outer wrapper is the gradient ring; the message box is the white inner panel. */
.zaso-alert-box.zaso-alert-box--design-gradient-ring {
	background: linear-gradient( 135deg, #d946ef, #8b5cf6 );
	border-radius: 14px;
	padding: 2px;
	box-shadow: 0 8px 22px rgba( 217, 70, 239, 0.2 );
}
.zaso-alert-box.zaso-alert-box--design-gradient-ring .zaso-alert-box__messagebox {
	background-color: #ffffff;
	color: #a21caf;
	border: 0;
	border-radius: 12px;
	padding: 17px 19px;
}
.zaso-alert-box.zaso-alert-box--design-gradient-ring .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-gradient-ring .zaso-alert-box__messagebox b { color: #86198f; }
.zaso-alert-box.zaso-alert-box--design-gradient-ring .zaso-alert-box__icon { color: #c026d3; }
.zaso-alert-box.zaso-alert-box--design-gradient-ring .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: #d8b4fe; }

/* --- P30 Centered (orange, NO CLOSE) -------------------------------------- */
.zaso-alert-box.zaso-alert-box--design-centered .zaso-alert-box__messagebox {
	background-color: #fff7ed;
	color: #c2410c;
	border: 1px solid #fed7aa;
	border-radius: 16px;
	padding: 22px 20px;
	text-align: center;
}
.zaso-alert-box.zaso-alert-box--design-centered .zaso-alert-box__messagebox strong,
.zaso-alert-box.zaso-alert-box--design-centered .zaso-alert-box__messagebox b { color: #9a3412; }
.zaso-alert-box.zaso-alert-box--design-centered .zaso-alert-box__messagebox--has-icon {
	flex-direction: column;
	align-items: center;
	gap: 0;
}
.zaso-alert-box.zaso-alert-box--design-centered .zaso-alert-box__icon {
	width: 48px;
	height: 48px;
	margin-top: 0;
	margin-bottom: 10px;
	padding: 11px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #ffffff;
	color: #ea580c;
	box-shadow: 0 4px 12px rgba( 234, 88, 12, 0.18 );
}
.zaso-alert-box.zaso-alert-box--design-centered .zaso-alert-box__icon svg { width: 26px; height: 26px; }
.zaso-alert-box.zaso-alert-box--design-centered .zaso-alert-box__body { text-align: center; }
.zaso-alert-box.zaso-alert-box--design-centered .zaso-alert-box__messagebox button.zaso-alert-box__closebtn.zaso-alert-box__closebtn { color: #f59e0b; }

/* ==========================================================================
 * PER-DESIGN ICONS (Pro): each design renders its OWN Material Symbols glyph.
 * --------------------------------------------------------------------------
 * Glyphs are drawn from the self-hosted Material Symbols Rounded @font-face
 * (the free plugin's assets/css/material-symbols.css, family "ZASO Material
 * Symbols Rounded", enqueued whenever an Alert Box renders). The default inline
 * SVG is hidden per design and replaced by a ::before glyph that inherits the
 * design's existing icon colour and matches its icon size. Every rule stays
 * scoped under .zaso-alert-box--design-<id>, so the default render and the six
 * free designs are untouched. The subset is FILL 0 (outline) static, which is
 * the consistent weight across all designs (including Big Icon, which the spec
 * draws as an outline glyph). Terminal keeps its status dot and gets no glyph.
 * ========================================================================== */

/* Shared glyph face. */
.zaso-alert-box.zaso-alert-box--design-gradient .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-dark .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-split-panel .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-glass .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-toast .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-big-icon .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-pill .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-dashed .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-double .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-banner .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-tag-label .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-ghost .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-underline .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-round-badge .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-two-tone .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-right-accent .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-floating-icon .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-dotted .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-deep-solid .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-title-bar .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-action-cta .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-gradient-ring .zaso-alert-box__icon::before,
.zaso-alert-box.zaso-alert-box--design-centered .zaso-alert-box__icon::before {
	font-family: "ZASO Material Symbols Rounded";
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Hide the default inline SVG for every Pro design that shows a glyph. */
.zaso-alert-box.zaso-alert-box--design-gradient .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-dark .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-split-panel .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-glass .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-toast .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-big-icon .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-pill .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-dashed .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-double .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-banner .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-tag-label .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-ghost .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-underline .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-round-badge .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-two-tone .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-right-accent .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-floating-icon .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-dotted .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-deep-solid .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-title-bar .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-action-cta .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-gradient-ring .zaso-alert-box__icon svg,
.zaso-alert-box.zaso-alert-box--design-centered .zaso-alert-box__icon svg {
	display: none;
}

/* Centre each glyph inside its icon box. */
.zaso-alert-box.zaso-alert-box--design-gradient .zaso-alert-box__icon,
.zaso-alert-box.zaso-alert-box--design-dark .zaso-alert-box__icon,
.zaso-alert-box.zaso-alert-box--design-glass .zaso-alert-box__icon,
.zaso-alert-box.zaso-alert-box--design-big-icon .zaso-alert-box__icon,
.zaso-alert-box.zaso-alert-box--design-pill .zaso-alert-box__icon,
.zaso-alert-box.zaso-alert-box--design-dashed .zaso-alert-box__icon,
.zaso-alert-box.zaso-alert-box--design-double .zaso-alert-box__icon,
.zaso-alert-box.zaso-alert-box--design-banner .zaso-alert-box__icon,
.zaso-alert-box.zaso-alert-box--design-ghost .zaso-alert-box__icon,
.zaso-alert-box.zaso-alert-box--design-underline .zaso-alert-box__icon,
.zaso-alert-box.zaso-alert-box--design-two-tone .zaso-alert-box__icon,
.zaso-alert-box.zaso-alert-box--design-right-accent .zaso-alert-box__icon,
.zaso-alert-box.zaso-alert-box--design-dotted .zaso-alert-box__icon,
.zaso-alert-box.zaso-alert-box--design-deep-solid .zaso-alert-box__icon,
.zaso-alert-box.zaso-alert-box--design-action-cta .zaso-alert-box__icon,
.zaso-alert-box.zaso-alert-box--design-gradient-ring .zaso-alert-box__icon {
	align-items: center;
	justify-content: center;
}

/* Per-design glyph + size. */
.zaso-alert-box.zaso-alert-box--design-gradient .zaso-alert-box__icon::before { content: "\e65f"; font-size: 1.25em; } /* auto_awesome */
.zaso-alert-box.zaso-alert-box--design-dark .zaso-alert-box__icon::before { content: "\e51c"; font-size: 1.25em; } /* dark_mode */
.zaso-alert-box.zaso-alert-box--design-split-panel .zaso-alert-box__icon::before { content: "\e90f"; font-size: 28px; } /* lightbulb */
.zaso-alert-box.zaso-alert-box--design-glass .zaso-alert-box__icon::before { content: "\ea65"; font-size: 1.25em; } /* celebration */
.zaso-alert-box.zaso-alert-box--design-toast .zaso-alert-box__icon::before { content: "\e2bf"; font-size: 20px; } /* cloud_done */
.zaso-alert-box.zaso-alert-box--design-big-icon .zaso-alert-box__icon::before { content: "\e79a"; font-size: 48px; } /* tips_and_updates */
.zaso-alert-box.zaso-alert-box--design-pill .zaso-alert-box__icon::before { content: "\f20e"; font-size: 22px; } /* database */
.zaso-alert-box.zaso-alert-box--design-dashed .zaso-alert-box__icon::before { content: "\e745"; font-size: 1.25em; } /* edit_note */
.zaso-alert-box.zaso-alert-box--design-double .zaso-alert-box__icon::before { content: "\f052"; font-size: 1.25em; } /* report */
.zaso-alert-box.zaso-alert-box--design-banner .zaso-alert-box__icon::before { content: "\f0be"; font-size: 20px; } /* check_circle */
.zaso-alert-box.zaso-alert-box--design-ghost .zaso-alert-box__icon::before { content: "\f0c6"; font-size: 1.25em; } /* flag (new_releases shares verified's glyph in the font, so a distinct release/flag glyph is used) */
.zaso-alert-box.zaso-alert-box--design-underline .zaso-alert-box__icon::before { content: "\e7f5"; font-size: 1.25em; } /* notifications */
.zaso-alert-box.zaso-alert-box--design-round-badge .zaso-alert-box__icon::before { content: "\ef76"; font-size: 24px; } /* verified */
.zaso-alert-box.zaso-alert-box--design-two-tone .zaso-alert-box__icon::before { content: "\e627"; font-size: 1.25em; } /* sync */
.zaso-alert-box.zaso-alert-box--design-right-accent .zaso-alert-box__icon::before { content: "\efd6"; font-size: 1.25em; } /* schedule */
.zaso-alert-box.zaso-alert-box--design-floating-icon .zaso-alert-box__icon::before { content: "\ea0b"; font-size: 24px; } /* bolt */
.zaso-alert-box.zaso-alert-box--design-dotted .zaso-alert-box__icon::before { content: "\e88e"; font-size: 1.25em; } /* info */
.zaso-alert-box.zaso-alert-box--design-deep-solid .zaso-alert-box__icon::before { content: "\eb9b"; font-size: 1.25em; } /* rocket_launch */
.zaso-alert-box.zaso-alert-box--design-action-cta .zaso-alert-box__icon::before { content: "\f2cd"; font-size: 1.25em; } /* system_update */
.zaso-alert-box.zaso-alert-box--design-gradient-ring .zaso-alert-box__icon::before { content: "\e65f"; font-size: 1.25em; } /* auto_awesome */
.zaso-alert-box.zaso-alert-box--design-centered .zaso-alert-box__icon::before { content: "\e7f7"; font-size: 26px; } /* notifications_active */

/* Tag Label (P17): the design hides the type icon in favour of a text chip.
 * Re-introduce a small leading glyph above the chip so the type still reads as
 * an icon, matching the per-design icon goal. */
.zaso-alert-box.zaso-alert-box--design-tag-label .zaso-alert-box__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25em;
	height: 1.25em;
	margin: 0;
	padding: 0;
	color: #d97706;
}
.zaso-alert-box.zaso-alert-box--design-tag-label .zaso-alert-box__icon::before { content: "\f083"; font-size: 1.25em; } /* warning */

/* Title Bar (P27): the design hides the type icon and shows a full-width title
 * bar. Float the mapped glyph into the title bar (white on the red bar) and pad
 * the bar text to clear it, so the type reads as an icon too. */
.zaso-alert-box.zaso-alert-box--design-title-bar .zaso-alert-box__icon {
	display: inline-flex;
	position: absolute;
	top: 9px;
	left: 18px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	z-index: 1;
}
.zaso-alert-box.zaso-alert-box--design-title-bar .zaso-alert-box__icon::before { content: "\f8b6"; font-size: 18px; } /* error */
.zaso-alert-box.zaso-alert-box--design-title-bar .zaso-alert-box__sr { padding-left: 44px; }

/* ==========================================================================
 * CUSTOM ICON OVERRIDE (Pro designs)
 * --------------------------------------------------------------------------
 * When the user sets a Custom Icon on the Alert Box, the wrapper carries
 * .zaso-alert-box--custom-icon and the template renders that icon as a <span>
 * inside .zaso-alert-box__icon (replacing the design glyph). Suppress every Pro
 * design's ::before glyph so only the custom icon shows (no double icon). This
 * selector is (0,3,1), equal specificity to the Pro design ::before rules, and
 * loads AFTER them in source order, so it wins without !important. The
 * SiteOrigin icon renders on its own inner span (.sow-icon-* ::before), not on
 * .zaso-alert-box__icon::before, so it is untouched; it inherits the design's
 * icon colour via currentColor.
 * ========================================================================== */
.zaso-alert-box.zaso-alert-box--custom-icon .zaso-alert-box__icon::before {
	content: none;
}