@charset "UTF-8";

/*
|--------------------------------------------------------------------------
| الملف: public_html/assets/css/shared/components/alerts.css
| الوصف:
|   أنماط التنبيهات والرسائل والحالات العامة المشتركة في المنصة.
|
| الهدف:
|   - توحيد شكل رسائل النجاح، التحذير، الخطأ، والمعلومات.
|   - توفير بنية مرنة للأيقونة، العنوان، النص، الإجراءات، والإغلاق.
|   - دعم التنبيهات الثابتة والناعمة والمحددة بإطار أو خلفية.
|   - دعم روابط داخل النص، وأزرار إجراءات، وحالات ديناميكية عبر JavaScript.
|   - دعم رسائل منبثقة متمركزة في منتصف الشاشة لسيناريوهات التأكيد والتنبيه.
|   - دعم الاستجابة للشاشات المختلفة.
|   - منع التفاعل مع الصفحة الخلفية عند ظهور رسالة منبثقة مع أوفرلي.
|
| القواعد:
|   - هذا الملف خاص بمكونات alerts فقط.
|   - لا توضع فيه أنماط صفحات.
|   - لا توضع فيه أنماط layout عامة خارج نطاق مكون التنبيه نفسه.
|   - يعتمد على tokens.css و base.css، مع تخصيص أزرار الرسائل المنبثقة هنا.
|--------------------------------------------------------------------------
*/

/* -------------------------------------------------------------------------
 * Base Alert
 * ---------------------------------------------------------------------- */
.alert {
  --alert-local-bg: var(--color-bg-surface);
  --alert-local-border: var(--color-border-default);
  --alert-local-text: var(--color-text-primary);
  --alert-local-muted: var(--color-text-secondary);
  --alert-local-title: var(--color-text-primary);
  --alert-local-icon: var(--color-icon-primary);
  --alert-local-shadow: none;
  --alert-local-radius: var(--alert-radius);
  --alert-local-padding-x: var(--alert-padding-x);
  --alert-local-padding-y: var(--alert-padding-y);
  --alert-local-link: var(--color-brand-700);
  --alert-local-link-hover: var(--color-brand-800);
  --alert-local-focus-ring: var(--focus-ring-color);

  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: var(--alert-local-padding-y) var(--alert-local-padding-x);
  color: var(--alert-local-text);
  background-color: var(--alert-local-bg);
  border: var(--border-width-1) solid var(--alert-local-border);
  border-radius: var(--alert-local-radius);
  box-shadow: var(--alert-local-shadow);
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition:
    opacity var(--duration-normal) var(--easing-in-out),
    transform var(--duration-normal) var(--easing-in-out),
    box-shadow var(--duration-fast) var(--easing-in-out),
    border-color var(--duration-fast) var(--easing-in-out),
    background-color var(--duration-fast) var(--easing-in-out);
}

.alert > * {
  min-width: 0;
}

.alert--shadow {
  --alert-local-shadow: var(--shadow-sm);
}

.alert--compact {
  --alert-local-padding-x: var(--space-4);
  --alert-local-padding-y: var(--space-3);
  gap: var(--space-3);
}

.alert--spacious {
  --alert-local-padding-x: var(--space-5);
  --alert-local-padding-y: var(--space-5);
  gap: var(--space-4);
}

.alert--rounded-sm {
  --alert-local-radius: var(--radius-md);
}

.alert--rounded-lg {
  --alert-local-radius: var(--radius-xl);
}

/* -------------------------------------------------------------------------
 * Alert Parts
 * ---------------------------------------------------------------------- */
.alert__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  min-width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.125rem;
  color: var(--alert-local-icon);
  flex-shrink: 0;
}

.alert__icon svg,
.alert__icon img {
  width: 100%;
  height: 100%;
}

.alert__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.alert__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.alert__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extra-bold);
  line-height: 1.4;
  color: var(--alert-local-title);
}

.alert__text {
  margin: 0;
  color: var(--alert-local-muted);
  line-height: 1.75;
  word-break: break-word;
}

.alert__text > *:first-child {
  margin-top: 0;
}

.alert__text > *:last-child {
  margin-bottom: 0;
}

.alert__text a {
  color: var(--alert-local-link);
  font-weight: var(--font-weight-semi-bold);
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 0.08em;
  transition:
    color var(--duration-fast) var(--easing-in-out),
    opacity var(--duration-fast) var(--easing-in-out);
}

.alert__text a:hover {
  color: var(--alert-local-link-hover);
}

.alert__text a:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--alert-local-focus-ring);
}

.alert__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.alert__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.alert__actions > * {
  flex-shrink: 0;
}

.alert__actions a {
  text-decoration: none;
}

/* أزرار التنبيهات والمنبثقات */
.alert__actions .btn,
.alert__actions button,
.alert__actions a[role="button"],
.alert__actions a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 15px;
  border-width: 1px;
  border-style: solid;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--easing-in-out),
    border-color var(--duration-fast) var(--easing-in-out),
    color var(--duration-fast) var(--easing-in-out),
    box-shadow var(--duration-fast) var(--easing-in-out),
    opacity var(--duration-fast) var(--easing-in-out);
  max-width: 100%;
  box-shadow: none;
}

.alert__actions .btn:hover,
.alert__actions button:hover,
.alert__actions a[role="button"]:hover,
.alert__actions a.btn:hover {
  text-decoration: none;
}

.alert__actions .btn:focus-visible,
.alert__actions button:focus-visible,
.alert__actions a[role="button"]:focus-visible,
.alert__actions a.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}

.alert__actions .btn.btn-primary,
.alert__actions .btn.btn--primary,
.alert__actions .btn-primary,
.alert__actions .btn--primary {
  background-color: var(--color-brand-600);
  color: var(--color-text-inverse);
  border-color: var(--color-brand-600);
}

.alert__actions .btn.btn-primary:hover,
.alert__actions .btn.btn--primary:hover,
.alert__actions .btn-primary:hover,
.alert__actions .btn--primary:hover {
  background-color: var(--color-brand-700);
  border-color: var(--color-brand-700);
}

.alert__actions .btn.btn-secondary,
.alert__actions .btn.btn--secondary,
.alert__actions .btn-secondary,
.alert__actions .btn--secondary,
.alert__actions .btn.btn-ghost,
.alert__actions .btn.btn--ghost,
.alert__actions .btn-ghost,
.alert__actions .btn--ghost {
  background-color: #ffffff;
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}

.alert__actions .btn.btn-secondary:hover,
.alert__actions .btn.btn--secondary:hover,
.alert__actions .btn-secondary:hover,
.alert__actions .btn--secondary:hover,
.alert__actions .btn.btn-ghost:hover,
.alert__actions .btn.btn--ghost:hover,
.alert__actions .btn-ghost:hover,
.alert__actions .btn--ghost:hover {
  background-color: var(--color-gray-50);
  border-color: var(--color-border-strong);
}

.alert__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  min-width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  color: var(--alert-local-icon);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background-color var(--duration-fast) var(--easing-in-out),
    color var(--duration-fast) var(--easing-in-out),
    box-shadow var(--duration-fast) var(--easing-in-out),
    opacity var(--duration-fast) var(--easing-in-out);
}

.alert__close:hover {
  background-color: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
}

.alert__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}

.alert__close svg,
.alert__close img {
  width: 0.95rem;
  height: 0.95rem;
}

/* -------------------------------------------------------------------------
 * Accent Styles
 * ---------------------------------------------------------------------- */
.alert--left-accent {
  border-inline-start-width: var(--border-width-4);
}

.alert--top-accent {
  border-top-width: var(--border-width-4);
}

.alert--borderless {
  border-color: transparent;
}

.alert--soft {
  --alert-local-shadow: none;
}

.alert--solid {
  color: var(--color-text-inverse);
}

.alert--solid .alert__title,
.alert--solid .alert__text,
.alert--solid .alert__meta,
.alert--solid .alert__close,
.alert--solid .alert__icon {
  color: inherit;
}

.alert--solid .alert__text a {
  color: inherit;
  opacity: 0.92;
}

.alert--solid .alert__text a:hover {
  opacity: 1;
}

.alert--solid .alert__close:hover {
  background-color: rgb(255 255 255 / 12%);
}

/* -------------------------------------------------------------------------
 * Semantic Variants
 * ---------------------------------------------------------------------- */
.alert--info {
  --alert-local-bg: var(--color-bg-info);
  --alert-local-border: var(--color-border-info);
  --alert-local-text: var(--color-info-900);
  --alert-local-muted: var(--color-info-800);
  --alert-local-title: var(--color-info-900);
  --alert-local-icon: var(--color-icon-info);
  --alert-local-link: var(--color-info-900);
  --alert-local-link-hover: var(--color-info-800);
}

.alert--success {
  --alert-local-bg: var(--color-bg-success);
  --alert-local-border: var(--color-border-success);
  --alert-local-text: var(--color-success-900);
  --alert-local-muted: var(--color-success-800);
  --alert-local-title: var(--color-success-900);
  --alert-local-icon: var(--color-icon-success);
  --alert-local-link: var(--color-success-900);
  --alert-local-link-hover: var(--color-success-800);
}

.alert--warning {
  --alert-local-bg: var(--color-bg-warning);
  --alert-local-border: var(--color-border-warning);
  --alert-local-text: var(--color-warning-900);
  --alert-local-muted: var(--color-warning-800);
  --alert-local-title: var(--color-warning-900);
  --alert-local-icon: var(--color-icon-warning);
  --alert-local-link: var(--color-warning-900);
  --alert-local-link-hover: var(--color-warning-800);
}

.alert--danger,
.alert--error {
  --alert-local-bg: var(--color-bg-danger);
  --alert-local-border: var(--color-border-danger);
  --alert-local-text: var(--color-danger-900);
  --alert-local-muted: var(--color-danger-800);
  --alert-local-title: var(--color-danger-900);
  --alert-local-icon: var(--color-icon-danger);
  --alert-local-link: var(--color-danger-900);
  --alert-local-link-hover: var(--color-danger-800);
}

.alert--brand {
  --alert-local-bg: var(--color-bg-brand-soft);
  --alert-local-border: var(--color-border-brand);
  --alert-local-text: var(--color-brand-900);
  --alert-local-muted: var(--color-brand-800);
  --alert-local-title: var(--color-brand-900);
  --alert-local-icon: var(--color-icon-brand);
  --alert-local-link: var(--color-brand-900);
  --alert-local-link-hover: var(--color-brand-800);
}

/* -------------------------------------------------------------------------
 * Solid Semantic Variants
 * ---------------------------------------------------------------------- */
.alert--solid.alert--info {
  --alert-local-bg: var(--color-info-600);
  --alert-local-border: var(--color-info-600);
}

.alert--solid.alert--success {
  --alert-local-bg: var(--color-success-600);
  --alert-local-border: var(--color-success-600);
}

.alert--solid.alert--warning {
  --alert-local-bg: var(--color-warning-600);
  --alert-local-border: var(--color-warning-600);
}

.alert--solid.alert--danger,
.alert--solid.alert--error {
  --alert-local-bg: var(--color-danger-600);
  --alert-local-border: var(--color-danger-600);
}

.alert--solid.alert--brand {
  --alert-local-bg: var(--color-brand-600);
  --alert-local-border: var(--color-brand-600);
}

/* -------------------------------------------------------------------------
 * Outline Variants
 * ---------------------------------------------------------------------- */
.alert--outline {
  background-color: transparent;
}

.alert--outline.alert--info {
  --alert-local-border: var(--color-info-300);
  --alert-local-text: var(--color-info-900);
  --alert-local-muted: var(--color-info-800);
  --alert-local-title: var(--color-info-900);
  --alert-local-icon: var(--color-icon-info);
  --alert-local-link: var(--color-info-900);
  --alert-local-link-hover: var(--color-info-800);
}

.alert--outline.alert--success {
  --alert-local-border: var(--color-success-300);
  --alert-local-text: var(--color-success-900);
  --alert-local-muted: var(--color-success-800);
  --alert-local-title: var(--color-success-900);
  --alert-local-icon: var(--color-icon-success);
  --alert-local-link: var(--color-success-900);
  --alert-local-link-hover: var(--color-success-800);
}

.alert--outline.alert--warning {
  --alert-local-border: var(--color-warning-300);
  --alert-local-text: var(--color-warning-900);
  --alert-local-muted: var(--color-warning-800);
  --alert-local-title: var(--color-warning-900);
  --alert-local-icon: var(--color-icon-warning);
  --alert-local-link: var(--color-warning-900);
  --alert-local-link-hover: var(--color-warning-800);
}

.alert--outline.alert--danger,
.alert--outline.alert--error {
  --alert-local-border: var(--color-danger-300);
  --alert-local-text: var(--color-danger-900);
  --alert-local-muted: var(--color-danger-800);
  --alert-local-title: var(--color-danger-900);
  --alert-local-icon: var(--color-icon-danger);
  --alert-local-link: var(--color-danger-900);
  --alert-local-link-hover: var(--color-danger-800);
}

/* -------------------------------------------------------------------------
 * Status Notice
 * ---------------------------------------------------------------------- */
.notice {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--color-text-secondary);
  background-color: var(--color-bg-surface-muted);
  border: var(--border-width-1) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.notice__title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.notice__text {
  margin: 0;
}

/* -------------------------------------------------------------------------
 * Alert Stack
 * ---------------------------------------------------------------------- */
.alert-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.alert-stack--compact {
  gap: var(--space-2);
}

.alert-stack--spacious {
  gap: var(--space-4);
}

/* -------------------------------------------------------------------------
 * Toast / Dialog Viewport
 * ---------------------------------------------------------------------- */
.alert-toast-viewport {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-toast, 1100);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  pointer-events: auto;
}

.alert-toast-viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 1;
  transition: opacity var(--duration-normal) var(--easing-in-out);
  pointer-events: auto;
}

.alert-toast-viewport > * {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.alert-toast-viewport--center,
.alert-toast-viewport--top-start,
.alert-toast-viewport--top-end,
.alert-toast-viewport--bottom-start,
.alert-toast-viewport--bottom-end,
.alert-toast-viewport--top-center,
.alert-toast-viewport--bottom-center {
  align-items: center;
  justify-content: center;
}

/* -------------------------------------------------------------------------
 * Dismissible State
 * ---------------------------------------------------------------------- */
.alert.is-dismissible:not(.alert--toast) {
  padding-inline-end: calc(var(--alert-local-padding-x) + 2.75rem);
}

.alert.is-dismissible:not(.alert--toast) .alert__header {
  padding-inline-end: 2.5rem;
}

.alert.is-dismissible:not(.alert--toast) .alert__close,
.alert.is-dismissible:not(.alert--toast) .alert__header .alert__close {
  position: absolute;
  inset-block-start: var(--alert-local-padding-y);
  inset-inline-end: var(--alert-local-padding-x);
  z-index: 3;
}

.alert--toast.is-dismissible {
  padding-inline-end: 1.1rem;
}

/* -------------------------------------------------------------------------
 * With Actions
 * ---------------------------------------------------------------------- */
.alert--with-actions .alert__content {
  gap: var(--space-3);
}

/* -------------------------------------------------------------------------
 * Toast / Dialog Variant
 * ---------------------------------------------------------------------- */
.alert--toast {
  width: min(100%, 32rem);
  max-width: 32rem;
  margin-inline: auto;
  padding: 1.1rem 1.1rem 1rem;
  border-radius: 1.125rem;
  border-color: var(--alert-local-border);
  box-shadow:
    0 16px 32px rgba(15, 23, 42, 0.12),
    0 6px 14px rgba(15, 23, 42, 0.06);
  background: var(--color-bg-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* تثبيت الهيدر والزر داخل الرسالة المنبثقة */
.alert--toast .alert__header {
  position: relative;
  display: block;
  min-height: 1.9rem;
  padding-inline-end: 2.4rem;
}

.alert--toast.is-dismissible {
  padding-inline-end: 1.1rem;
}

.alert--toast.is-dismissible .alert__header .alert__close {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  z-index: 3;
}

.alert--toast .alert__title {
  display: block;
  width: 100%;
  margin: 0;
  padding-inline-end: 0;
}

.alert--toast.alert--compact {
  width: min(100%, 29rem);
}

.alert--toast.alert--spacious {
  width: min(100%, 34rem);
  padding: 1.25rem 1.25rem 1.1rem;
}

.alert--toast .alert__icon {
  width: 1.6rem;
  min-width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.1rem;
}

.alert--toast .alert__content {
  gap: var(--space-2);
}

.alert--toast .alert__title {
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.45;
}

.alert--toast .alert__text {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.8;
}

.alert--toast .alert__meta {
  font-size: 0.875rem;
}

.alert--toast .alert__actions {
  justify-content: flex-end;
  margin-top: var(--space-2);
  gap: 0.625rem;
}

.alert--toast .alert__actions > * {
  min-width: 7.25rem;
}

.alert--toast:not(.alert--with-actions) {
  width: min(100%, 27rem);
}

.alert--toast.alert--success:not(.alert--with-actions) {
  width: min(100%, 24rem);
}

/* -------------------------------------------------------------------------
 * Toast Action Colors By Variant
 * ---------------------------------------------------------------------- */

/* Warning */
.alert--toast.alert--warning .alert__actions .btn.btn-primary,
.alert--toast.alert--warning .alert__actions .btn.btn--primary,
.alert--toast.alert--warning .alert__actions .btn-primary,
.alert--toast.alert--warning .alert__actions .btn--primary {
  background-color: #ffffff;
  border-color: #d6b46d;
  color: #8d5c00;
}

.alert--toast.alert--warning .alert__actions .btn.btn-secondary,
.alert--toast.alert--warning .alert__actions .btn.btn--secondary,
.alert--toast.alert--warning .alert__actions .btn-secondary,
.alert--toast.alert--warning .alert__actions .btn--secondary,
.alert--toast.alert--warning .alert__actions .btn.btn-ghost,
.alert--toast.alert--warning .alert__actions .btn.btn--ghost,
.alert--toast.alert--warning .alert__actions .btn-ghost,
.alert--toast.alert--warning .alert__actions .btn--ghost {
  background-color: transparent;
  border-color: #e6cf9d;
  color: #8d5c00;
}

/* Danger */
.alert--toast.alert--danger .alert__actions .btn.btn-primary,
.alert--toast.alert--danger .alert__actions .btn.btn--primary,
.alert--toast.alert--danger .alert__actions .btn-primary,
.alert--toast.alert--danger .alert__actions .btn--primary,
.alert--toast.alert--error .alert__actions .btn.btn-primary,
.alert--toast.alert--error .alert__actions .btn.btn--primary,
.alert--toast.alert--error .alert__actions .btn-primary,
.alert--toast.alert--error .alert__actions .btn--primary {
  background-color: #ffffff;
  border-color: #d8a3a3;
  color: #8a2020;
}

.alert--toast.alert--danger .alert__actions .btn.btn-secondary,
.alert--toast.alert--danger .alert__actions .btn.btn--secondary,
.alert--toast.alert--danger .alert__actions .btn-secondary,
.alert--toast.alert--danger .alert__actions .btn--secondary,
.alert--toast.alert--danger .alert__actions .btn.btn-ghost,
.alert--toast.alert--danger .alert__actions .btn.btn--ghost,
.alert--toast.alert--danger .alert__actions .btn-ghost,
.alert--toast.alert--danger .alert__actions .btn--ghost,
.alert--toast.alert--error .alert__actions .btn.btn-secondary,
.alert--toast.alert--error .alert__actions .btn.btn--secondary,
.alert--toast.alert--error .alert__actions .btn-secondary,
.alert--toast.alert--error .alert__actions .btn--secondary,
.alert--toast.alert--error .alert__actions .btn.btn-ghost,
.alert--toast.alert--error .alert__actions .btn.btn--ghost,
.alert--toast.alert--error .alert__actions .btn-ghost,
.alert--toast.alert--error .alert__actions .btn--ghost {
  background-color: transparent;
  border-color: #ebc8c8;
  color: #8a2020;
}

/* Success */
.alert--toast.alert--success .alert__actions .btn.btn-primary,
.alert--toast.alert--success .alert__actions .btn.btn--primary,
.alert--toast.alert--success .alert__actions .btn-primary,
.alert--toast.alert--success .alert__actions .btn--primary {
  background-color: #ffffff;
  border-color: #9fc9b3;
  color: #17624a;
}

.alert--toast.alert--success .alert__actions .btn.btn-secondary,
.alert--toast.alert--success .alert__actions .btn.btn--secondary,
.alert--toast.alert--success .alert__actions .btn-secondary,
.alert--toast.alert--success .alert__actions .btn--secondary,
.alert--toast.alert--success .alert__actions .btn.btn-ghost,
.alert--toast.alert--success .alert__actions .btn.btn--ghost,
.alert--toast.alert--success .alert__actions .btn-ghost,
.alert--toast.alert--success .alert__actions .btn--ghost {
  background-color: transparent;
  border-color: #c7e5d5;
  color: #17624a;
}

/* Info / Brand */
.alert--toast.alert--info .alert__actions .btn.btn-primary,
.alert--toast.alert--info .alert__actions .btn.btn--primary,
.alert--toast.alert--info .alert__actions .btn-primary,
.alert--toast.alert--info .alert__actions .btn--primary,
.alert--toast.alert--brand .alert__actions .btn.btn-primary,
.alert--toast.alert--brand .alert__actions .btn.btn--primary,
.alert--toast.alert--brand .alert__actions .btn-primary,
.alert--toast.alert--brand .alert__actions .btn--primary {
  background-color: #ffffff;
  border-color: #bfd0e2;
  color: #0f4f79;
}

.alert--toast.alert--info .alert__actions .btn.btn-secondary,
.alert--toast.alert--info .alert__actions .btn.btn--secondary,
.alert--toast.alert--info .alert__actions .btn-secondary,
.alert--toast.alert--info .alert__actions .btn--secondary,
.alert--toast.alert--info .alert__actions .btn.btn-ghost,
.alert--toast.alert--info .alert__actions .btn.btn--ghost,
.alert--toast.alert--info .alert__actions .btn-ghost,
.alert--toast.alert--info .alert__actions .btn--ghost,
.alert--toast.alert--brand .alert__actions .btn.btn-secondary,
.alert--toast.alert--brand .alert__actions .btn.btn--secondary,
.alert--toast.alert--brand .alert__actions .btn-secondary,
.alert--toast.alert--brand .alert__actions .btn--secondary,
.alert--toast.alert--brand .alert__actions .btn.btn-ghost,
.alert--toast.alert--brand .alert__actions .btn.btn--ghost,
.alert--toast.alert--brand .alert__actions .btn-ghost,
.alert--toast.alert--brand .alert__actions .btn--ghost {
  background-color: transparent;
  border-color: #d6e0ea;
  color: #0f4f79;
}

/* Hover touches */
.alert--toast .alert__actions .btn.btn-primary:hover,
.alert--toast .alert__actions .btn.btn--primary:hover,
.alert--toast .alert__actions .btn-primary:hover,
.alert--toast .alert__actions .btn--primary:hover {
  background-color: var(--color-gray-50);
}

.alert--toast .alert__actions .btn.btn-secondary:hover,
.alert--toast .alert__actions .btn.btn--secondary:hover,
.alert--toast .alert__actions .btn-secondary:hover,
.alert--toast .alert__actions .btn--secondary:hover,
.alert--toast .alert__actions .btn.btn-ghost:hover,
.alert--toast .alert__actions .btn.btn--ghost:hover,
.alert--toast .alert__actions .btn-ghost:hover,
.alert--toast .alert__actions .btn--ghost:hover {
  background-color: var(--color-gray-50);
}

/* -------------------------------------------------------------------------
 * JS State Hooks
 * ---------------------------------------------------------------------- */
.alert.is-hidden {
  display: none !important;
}

.alert.is-opening {
  opacity: 0;
  transform: translateY(0.5rem) scale(0.985);
}

.alert.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.alert.is-closing {
  opacity: 0;
  transform: translateY(0.25rem) scale(0.985);
  pointer-events: none;
}

.alert[aria-hidden="true"] {
  pointer-events: none;
}

/* -------------------------------------------------------------------------
 * Responsive Refinements
 * ---------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .alert {
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .alert__header {
    flex-direction: column;
    align-items: stretch;
  }

  .alert__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .alert__actions > * {
    width: 100%;
  }

  .alert__actions .btn,
  .alert__actions button,
  .alert__actions a,
  .alert__actions a.btn {
    width: 100%;
  }

  .alert.is-dismissible:not(.alert--toast) {
    padding-inline-end: calc(var(--space-4) + 2.75rem);
    padding-top: var(--space-4);
  }

  .alert.is-dismissible:not(.alert--toast) .alert__header {
    padding-inline-end: 2.25rem;
  }

  .alert.is-dismissible:not(.alert--toast) .alert__close,
  .alert.is-dismissible:not(.alert--toast) .alert__header .alert__close {
    inset-block-start: var(--space-3);
    inset-inline-end: var(--space-3);
  }

  .alert-toast-viewport {
    padding: var(--space-3);
  }

  .alert--toast,
  .alert--toast.alert--compact,
  .alert--toast.alert--spacious,
  .alert--toast:not(.alert--with-actions),
  .alert--toast.alert--success:not(.alert--with-actions) {
    width: 100%;
    max-width: 100%;
    padding: 1rem 0.95rem 0.95rem;
  }

  .alert--toast .alert__header {
    display: block;
    min-height: 1.85rem;
    padding-inline-end: 2.25rem;
  }

  .alert--toast.is-dismissible {
    padding-inline-end: 0.95rem;
    padding-top: 1rem;
  }

  .alert--toast.is-dismissible .alert__header .alert__close {
    top: 0;
    inset-inline-end: 0;
  }

  .alert--toast .alert__title {
    font-size: 1rem;
    padding-inline-end: 0;
  }

  .alert--toast .alert__text {
    font-size: 0.93rem;
    line-height: 1.75;
  }

  .alert--toast .alert__actions {
    justify-content: stretch;
  }

  .alert--toast .alert__actions > * {
    min-width: 0;
  }
}

@media (min-width: 768px) {
  .alert__actions--end {
    justify-content: flex-end;
  }

  .alert__actions--between {
    justify-content: space-between;
  }
}

/* -------------------------------------------------------------------------
 * Reduced Motion
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .alert,
  .alert__close,
  .alert-toast-viewport::before,
  .alert__actions .btn,
  .alert__actions button,
  .alert__actions a[role="button"],
  .alert__actions a.btn {
    transition: none !important;
  }

  .alert.is-opening,
  .alert.is-open,
  .alert.is-closing {
    transform: none !important;
  }
}