/* Shared alert/notification: the store flash and the contact form's success,
   error, and validation-summary messages all use this one component. */
.flux-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-block: 16px;
  padding-block: 14px;
  padding-inline: 16px;
  border: 1px solid oklch(70% 0 0);
  border-inline-start-width: 8px;
  border-radius: 6px;
  background-color: oklch(97% 0 0);
  color: oklch(20% 0 0);
}

.flux-alert,
.flux-alert :where(div, p, a, span, button, ul, li, strong) {
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  letter-spacing: normal !important;
  text-align: start !important;
  text-transform: none !important;
}

.flux-alert :where(div, p, a, span, button, ul, li, strong) {
  color: inherit !important;
}

.flux-alert strong {
  font-weight: 700 !important;
}

.flux-alert__title {
  display: block;
}

.flux-alert--success {
  border-color: oklch(46% 0.15 150);
  background-color: oklch(96% 0.03 150);
}

.flux-alert--error {
  border-color: oklch(50% 0.2 25);
  background-color: oklch(96% 0.03 25);
}

.flux-alert__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 24px;
}

.flux-alert__icon::before {
  forced-color-adjust: none;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  content: '';
}

.flux-alert--success .flux-alert__icon::before {
  background-color: oklch(46% 0.15 150);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.flux-alert--error .flux-alert__icon::before {
  background-color: oklch(50% 0.2 25);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v6M8 12.5v.01' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.flux-alert__body {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  /* Keep the whole alert clear of the top edge when focus/fragment scrolls to
     it, so the border and padding are not clipped. */
  scroll-margin-block: 32px;
}

/* The body receives focus only to be announced; it is a large, self-evident
   block, so a focus ring would confuse (especially after a mouse action). */
.flux-alert__body:focus {
  outline: none;
}

.flux-alert__body > :first-child {
  margin-block-start: 0;
}

.flux-alert__body > :last-child {
  margin-block-end: 0;
}

.flux-alert__body a {
  text-decoration: underline;
}

.flux-alert__link {
  font-weight: 600 !important;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* The list is core's: a site's own list markers, generated-content bullets,
   and item spacing never reach the error summary. */
.flux-alert__body ul {
  display: block !important;
  margin: 4px 0 0 !important;
  padding: 0 0 0 20px !important;
  list-style: disc outside !important;
}

.flux-alert__body li {
  display: list-item !important;
  margin: 2px 0 !important;
  padding: 0 !important;
  background: none !important;
}

.flux-alert__body li::before,
.flux-alert__body li::after {
  content: none !important;
  display: none !important;
}

/* Validation summary: bold field name, underline on hover/focus, trailing jump
   icon — links stay identifiable without color alone (WCAG 1.4.1 / F73). */
[data-flux-validation-summary] a {
  text-decoration: none;
}

[data-flux-validation-summary] a:hover,
[data-flux-validation-summary] a:focus-visible {
  text-decoration: underline;
}

.flux-jump-icon {
  display: inline-block; /* Tailwind preflight resets svg to display:block */
  width: 0.8em;
  height: 0.8em;
  vertical-align: -0.08em;
}

/* Glues the summary's last word to its jump icon: browsers break before
   atomic inlines (the svg) even across a no-break space, so the icon would
   otherwise wrap onto a line of its own. */
.flux-text-glue {
  white-space: nowrap;
}

.flux-alert__dismiss {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
  width: 28px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background-color: transparent;
  color: inherit;
  cursor: pointer;
}

.flux-alert__dismiss:hover {
  background-color: oklch(0% 0 0 / 8%);
}

.flux-alert__dismiss:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 2px;
}