@reset_margin: 0;
@reset_padding: 0;

@message_background_color: default;
@message_font_color: default;
@message_font_size: default;
@message_margin: default;
@message_padding: default;
@message_border_width: default;
@message_border_radius: default;
@message_border_style: default;
@message_border_color: default;

.zaso-alert-box {
  @reset_margin: 0;
  @reset_padding: 0;

  &__messagebox {
    position: relative;
    background-color: @message_background_color;
    margin: @message_margin;
    padding: @message_padding;
    border-width: @message_border_width;
    border-radius: @message_border_radius;
    border-style: @message_border_style;
    border-color: @message_border_color;
    color: @message_font_color;
    font-size: @message_font_size;
  }

  &__messagebox p {
    padding: @reset_padding;
    margin: 0 0 1em;
  }

  &__messagebox p:last-child,
  &__messagebox p:last-of-type {
    margin-bottom: @reset_margin;
  }

  &__closebtn {
    position: absolute;
    right: 0.5em;
    top: 0.5em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    color: @message_font_color;
    font-size: 1.25em;
    line-height: 1;
    opacity: 0.7;
    cursor: pointer;
  }

  &__closebtn span {
    display: block;
    line-height: 1;
  }

  &__closebtn:hover,
  &__closebtn:focus {
    opacity: 1;
    background: none;
  }

  &__closebtn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  // Typed alerts (opt-in): leading icon + screen-reader label. Untyped alerts
  // never receive these classes, so their rendering is unchanged.
  &__messagebox--has-icon {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
  }

  &__icon {
    flex-shrink: 0;
    display: inline-flex;
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.1em;
  }

  &__icon svg {
    width: 100%;
    height: 100%;
  }

  &__body {
    flex: 1 1 auto;
    min-width: 0;
  }

  &__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

// Theme-proofing. Some themes style a plain <button> with a dark background at
// high specificity, e.g. Twenty Twenty-One's
// `button:not(:hover):not(:active):not(.has-text-color)` is (0,3,1) and beats a
// single-class widget rule. Re-assert the bare control look from a higher
// specificity (0,4,1) instead of using !important, so the close button stays a
// clean glyph on any theme.
.zaso-alert-box .zaso-alert-box__messagebox button.zaso-alert-box__closebtn {
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  color: @message_font_color;
}

.zaso-alert-box .zaso-alert-box__messagebox button.zaso-alert-box__closebtn:hover,
.zaso-alert-box .zaso-alert-box__messagebox button.zaso-alert-box__closebtn:focus {
  background: transparent;
  color: @message_font_color;
}

// ===========================================================================
// LAYOUT VARIANTS (structure only)
// ---------------------------------------------------------------------------
// Orthogonal to the colour skins. The Style preset still drives bg/text/accent
// via the colour vars above; these rules only restructure shape (shadow,
// border presence, padding, radius, icon treatment, flex band). The "default"
// layout adds no class and is intentionally untouched here.
// ===========================================================================

// ----- Layout: card --------------------------------------------------------
// Elevated surface: no visible border, larger radius, generous padding, soft
// shadow. A typed icon becomes a filled circular badge (badge fill = the text
// colour, glyph = the box background) so it reads clearly on any skin.
.zaso-alert-box--layout-card .zaso-alert-box__messagebox {
  border: 0;
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 12px 30px -10px rgba( 0, 0, 0, 0.28 ), 0 3px 8px rgba( 0, 0, 0, 0.08 );
}

.zaso-alert-box--layout-card .zaso-alert-box__messagebox--has-icon {
  align-items: center;
  gap: 0.85em;
}

.zaso-alert-box--layout-card .zaso-alert-box__icon {
  width: 2.4em;
  height: 2.4em;
  margin-top: 0;
  padding: 0.55em;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: @message_font_color;
  color: @message_background_color;
}

// ----- Layout: left-accent -------------------------------------------------
// Flat panel, square-ish corners, no full border. A single thick coloured bar
// on the left edge. The bar uses the text colour, not the border colour, so it
// always contrasts with the fill on every skin (the border colour can equal the
// background on a solid skin, which would make the bar disappear). Icon inline.
.zaso-alert-box--layout-left-accent .zaso-alert-box__messagebox {
  border: 0;
  border-left: 5px solid @message_font_color;
  border-radius: 0 4px 4px 0;
  box-shadow: none;
}

// ----- Layout: banner ------------------------------------------------------
// Horizontal band: a tinted leading block (the icon) flush-left against a
// padded message on the right. Minimal radius, flat, zero internal gap.
.zaso-alert-box--layout-banner .zaso-alert-box__messagebox {
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  overflow: hidden;
}

.zaso-alert-box--layout-banner .zaso-alert-box__messagebox--has-icon {
  padding: 0;
  gap: 0;
  align-items: stretch;
}

// Leading block: a solid accent panel (fill = text colour, glyph = background)
// so it punches on every skin instead of reading as a muddy grey overlay.
.zaso-alert-box--layout-banner .zaso-alert-box__messagebox--has-icon .zaso-alert-box__icon {
  flex-shrink: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 1.2em;
  align-items: center;
  justify-content: center;
  background: @message_font_color;
  color: @message_background_color;
}

.zaso-alert-box--layout-banner .zaso-alert-box__messagebox--has-icon .zaso-alert-box__icon svg {
  width: 1.5em;
  height: 1.5em;
}

// Reserve room on the right so the absolutely-positioned close button never
// overlaps the banner copy.
.zaso-alert-box--layout-banner .zaso-alert-box__messagebox--has-icon .zaso-alert-box__body {
  padding: 1em 2.6em 1em 1.2em;
}

// ===========================================================================
// DESIGN VARIANTS (free): ready-made alert looks
// ---------------------------------------------------------------------------
// Hex values tuned to the canonical Claude Design spec ("Alert Box
// Widget.dc.html"). Each variant is a self-contained look (container, icon
// colour, title = <strong>/<b>, body = box text colour, scheme-matched close).
// Every rule is scoped under .zaso-alert-box--design-* so the default render
// and all existing instances stay byte-identical. Pro ships 24 more designs in
// its own stylesheet; these six are the free set.
// ===========================================================================

// ----- F01 Left Accent (success) ------------------------------------------
.zaso-alert-box--design-left-accent .zaso-alert-box__messagebox {
  background-color: #f0fdf4;
  color: #3f6212;
  border: 0;
  border-left: 4px solid #16a34a;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(22, 163, 74, 0.08);
}
.zaso-alert-box--design-left-accent .zaso-alert-box__messagebox strong,
.zaso-alert-box--design-left-accent .zaso-alert-box__messagebox b { color: #14532d; }
.zaso-alert-box--design-left-accent .zaso-alert-box__icon { color: #16a34a; }
.zaso-alert-box--design-left-accent .zaso-alert-box__messagebox button.zaso-alert-box__closebtn { color: #86c8a0; }

// ----- F02 Soft Tint (info) -----------------------------------------------
.zaso-alert-box--design-soft-tint .zaso-alert-box__messagebox {
  background-color: #eff6ff;
  color: #3b5bdb;
  border: 1px solid #dbeafe;
  border-radius: 10px;
}
.zaso-alert-box--design-soft-tint .zaso-alert-box__messagebox strong,
.zaso-alert-box--design-soft-tint .zaso-alert-box__messagebox b { color: #1e3a8a; }
.zaso-alert-box--design-soft-tint .zaso-alert-box__icon { color: #2563eb; }
.zaso-alert-box--design-soft-tint .zaso-alert-box__messagebox button.zaso-alert-box__closebtn { color: #93b4f0; }

// ----- F03 Outlined (warning) ---------------------------------------------
.zaso-alert-box--design-outlined .zaso-alert-box__messagebox {
  background-color: #ffffff;
  color: #b45309;
  border: 1.5px solid #f59e0b;
  border-radius: 10px;
}
.zaso-alert-box--design-outlined .zaso-alert-box__messagebox strong,
.zaso-alert-box--design-outlined .zaso-alert-box__messagebox b { color: #92400e; }
.zaso-alert-box--design-outlined .zaso-alert-box__icon { color: #d97706; }
.zaso-alert-box--design-outlined .zaso-alert-box__messagebox button.zaso-alert-box__closebtn { color: #e0b878; }

// ----- F04 Icon Badge Card (error) ----------------------------------------
.zaso-alert-box--design-icon-badge .zaso-alert-box__messagebox {
  background-color: #ffffff;
  color: #be123c;
  border: 1px solid #f1f5f9;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.zaso-alert-box--design-icon-badge .zaso-alert-box__messagebox strong,
.zaso-alert-box--design-icon-badge .zaso-alert-box__messagebox b { color: #881337; }
.zaso-alert-box--design-icon-badge .zaso-alert-box__messagebox--has-icon { align-items: center; }
.zaso-alert-box--design-icon-badge .zaso-alert-box__icon {
  width: 40px;
  height: 40px;
  margin-top: 0;
  padding: 8px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-color: #ffe4e6;
  color: #e11d48;
}
.zaso-alert-box--design-icon-badge .zaso-alert-box__icon svg { width: 23px; height: 23px; }
.zaso-alert-box--design-icon-badge .zaso-alert-box__messagebox button.zaso-alert-box__closebtn { color: #cbd5e1; }

// ----- F05 Top Bar (neutral) ----------------------------------------------
.zaso-alert-box--design-top-bar .zaso-alert-box__messagebox {
  background-color: #ffffff;
  color: #4338ca;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
  overflow: hidden;
}
.zaso-alert-box--design-top-bar .zaso-alert-box__messagebox::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: #4f46e5;
}
.zaso-alert-box--design-top-bar .zaso-alert-box__messagebox strong,
.zaso-alert-box--design-top-bar .zaso-alert-box__messagebox b { color: #312e81; }
.zaso-alert-box--design-top-bar .zaso-alert-box__icon { color: #4f46e5; }
.zaso-alert-box--design-top-bar .zaso-alert-box__messagebox button.zaso-alert-box__closebtn { color: #c7c9ec; }

// ----- P06 Solid Fill (error, promoted free) ------------------------------
.zaso-alert-box--design-solid .zaso-alert-box__messagebox {
  background-color: #dc2626;
  color: rgba(255, 255, 255, 0.88);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(220, 38, 38, 0.22);
}
.zaso-alert-box--design-solid .zaso-alert-box__messagebox strong,
.zaso-alert-box--design-solid .zaso-alert-box__messagebox b { color: #ffffff; }
.zaso-alert-box--design-solid .zaso-alert-box__icon { color: #ffffff; }
.zaso-alert-box--design-solid .zaso-alert-box__messagebox button.zaso-alert-box__closebtn { color: rgba(255, 255, 255, 0.75); }

// ===========================================================================
// DESIGN ICONS (free): per-variant Material Symbols Rounded glyph
// ---------------------------------------------------------------------------
// Each free design renders its OWN glyph from the self-hosted Material Symbols
// Rounded @font-face (assets/css/material-symbols.css, family "ZASO Material
// Symbols Rounded") via a ::before pseudo-element. The default inline SVG is
// hidden per variant and replaced by the variant's mapped glyph, inheriting the
// variant's existing icon colour and matching its icon size. Every rule is
// scoped under .zaso-alert-box--design-*, so a default alert (no design
// variant) keeps its inline SVG and renders byte-identical.
// ===========================================================================

// Shared glyph face for the free design icons.
.zaso-alert-box--design-left-accent .zaso-alert-box__icon::before,
.zaso-alert-box--design-soft-tint .zaso-alert-box__icon::before,
.zaso-alert-box--design-outlined .zaso-alert-box__icon::before,
.zaso-alert-box--design-icon-badge .zaso-alert-box__icon::before,
.zaso-alert-box--design-top-bar .zaso-alert-box__icon::before,
.zaso-alert-box--design-solid .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;
}

// Centre each glyph inside its icon box.
.zaso-alert-box--design-left-accent .zaso-alert-box__icon,
.zaso-alert-box--design-soft-tint .zaso-alert-box__icon,
.zaso-alert-box--design-outlined .zaso-alert-box__icon,
.zaso-alert-box--design-icon-badge .zaso-alert-box__icon,
.zaso-alert-box--design-top-bar .zaso-alert-box__icon,
.zaso-alert-box--design-solid .zaso-alert-box__icon {
  align-items: center;
  justify-content: center;
}

// Hide the default inline SVG for the free design variants.
.zaso-alert-box--design-left-accent .zaso-alert-box__icon svg,
.zaso-alert-box--design-soft-tint .zaso-alert-box__icon svg,
.zaso-alert-box--design-outlined .zaso-alert-box__icon svg,
.zaso-alert-box--design-icon-badge .zaso-alert-box__icon svg,
.zaso-alert-box--design-top-bar .zaso-alert-box__icon svg,
.zaso-alert-box--design-solid .zaso-alert-box__icon svg {
  display: none;
}

// Per-variant glyph + size (FILL 0 / outline weight, matching the bundled subset).
.zaso-alert-box--design-left-accent .zaso-alert-box__icon::before { content: "\f0be"; font-size: 1.25em; } // check_circle
.zaso-alert-box--design-soft-tint .zaso-alert-box__icon::before { content: "\e88e"; font-size: 1.25em; } // info
.zaso-alert-box--design-outlined .zaso-alert-box__icon::before { content: "\f083"; font-size: 1.25em; } // warning
.zaso-alert-box--design-icon-badge .zaso-alert-box__icon::before { content: "\f8b6"; font-size: 23px; } // error
.zaso-alert-box--design-top-bar .zaso-alert-box__icon::before { content: "\ef49"; font-size: 1.25em; } // campaign
.zaso-alert-box--design-solid .zaso-alert-box__icon::before { content: "\f8b6"; font-size: 1.25em; } // error

// ===========================================================================
// CUSTOM ICON OVERRIDE
// ---------------------------------------------------------------------------
// When the user picks a Custom Icon the wrapper carries
// .zaso-alert-box--custom-icon and the template renders that icon as a <span>
// (siteorigin_widget_get_icon) inside .zaso-alert-box__icon, replacing the
// alert-type SVG. Suppress every design variant's ::before glyph here so only
// the custom icon shows (no double icon). This selector is (0,3,1) and loads
// AFTER the free design ::before rules (each (0,2,1)), so it wins on both
// specificity and source order without !important. The SiteOrigin icon renders
// its glyph on its own inner span (.sow-icon-* ::before), NOT on
// .zaso-alert-box__icon::before, so it is untouched by this rule; it is also a
// <span> not an <svg>, so the variants' `__icon svg{display:none}` never hits
// it. The custom icon inherits the variant's icon colour via currentColor.
// ===========================================================================
.zaso-alert-box.zaso-alert-box--custom-icon .zaso-alert-box__icon::before {
  content: none;
}

// ===========================================================================
// Title / body stacking for design variants. The Claude Design spec renders
// the bold title on its own line with the body stacked below. The message is a
// single rich-text field, so the leading <strong> is the title: make it block
// for every design variant. The genuinely single-line designs (banner, toast,
// pill) are excluded below, and terminal has no leading strong. Scoped under
// --design- so the default Alert Box render is untouched.
// ===========================================================================
.zaso-alert-box[class*="zaso-alert-box--design-"] .zaso-alert-box__body strong:first-child {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}
.zaso-alert-box.zaso-alert-box--design-banner .zaso-alert-box__body strong:first-child,
.zaso-alert-box.zaso-alert-box--design-toast .zaso-alert-box__body strong:first-child,
.zaso-alert-box.zaso-alert-box--design-pill .zaso-alert-box__body strong:first-child {
  display: inline;
  font-size: inherit;
  margin-bottom: 0;
}

// ===========================================================================
// Width option. Default 'full' adds no class (block, fills the container =
// byte-identical to today). 'content' shrinks the alert to fit its message.
// ===========================================================================
.zaso-alert-box.zaso-alert-box--width-content {
  display: inline-block;
  width: auto;
  max-width: 100%;
}