/* ============================================
   Error Messages Component - BEM
   ============================================ */
@layer components {
  /* Block: error-explanation */
  .error-explanation {
    background-color: #fee2e2;
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
  }

  .error-explanation__title {
    color: var(--color-danger);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-sm);
  }

  .error-explanation__list {
    margin-left: var(--space-lg);
  }

  .error-explanation__item {
    color: #991b1b;
  }
}